/*
 * Help Center v2 styles: /support (support_home.php), the CMS and hand-built
 * pages in support_page.php, /support/contact-us (contact_us.php), the phone
 * screenshot page (contact_upload.php), /device-compatibility and
 * /support/report-an-issue (report_issue.php).
 *
 * Only loaded by those templates and every rule is scoped under .ss-sup plus
 * a page class, so nothing leaks into the rest of the site. Colours mirror
 * the --hv2-* tokens in home_v2.css.
 */

/* Poppins 500/600/700, same self-hosted files home_v2.css uses (400 comes
   from custom.css site-wide). */
@font-face {
   font-family: 'Poppins';
   font-style: normal;
   font-weight: 500;
   font-display: swap;
   src: url('../img/assets/fonts/poppins/poppins-500-latin.woff2') format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
   font-family: 'Poppins';
   font-style: normal;
   font-weight: 600;
   font-display: swap;
   src: url('../img/assets/fonts/poppins/poppins-600-latin.woff2') format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
   font-family: 'Poppins';
   font-style: normal;
   font-weight: 700;
   font-display: swap;
   src: url('../img/assets/fonts/poppins/poppins-700-latin.woff2') format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------------ */
/* Tokens and base                                                     */
/* ------------------------------------------------------------------ */
.ss-sup {
   --sv-navy: #14183A;
   --sv-pink: #E8236E;
   --sv-pink-dark: #C2145A;
   --sv-pink-soft: #FDE7EF;
   --sv-pink-line: #F7CFDE;
   --sv-border: #E4E8F0;
   --sv-border-strong: #C9CFDB;
   --sv-slate: #5B6178;
   --sv-body: #4A4F63;
   --sv-neutral: #F3F5F9;
   --sv-bg: #F5F7FB;
   --sv-green: #1A7F4B;
   --sv-green-soft: #E7F6EE;
   --sv-shadow: 0 6px 24px rgba(20, 24, 58, 0.07);
   --sv-shadow-hover: 0 12px 32px rgba(20, 24, 58, 0.12);
   --sv-hero: #FFFFFF;
   --sv-gutter: 16px;
   background: var(--sv-bg);
   color: var(--sv-body);
   font-family: 'Poppins', 'proxima-nova', Arial, Helvetica, sans-serif;
   /* clip, not hidden: hidden would break the sticky sidebars and the
      contact page's sticky outcome bar. */
   overflow-x: clip;
}

@media (min-width: 960px) {
   .ss-sup {
      --sv-gutter: 32px;
   }
}

.ss-sup h1,
.ss-sup h2,
.ss-sup h3,
.ss-sup h4 {
   font-family: 'Poppins', 'proxima-nova', Arial, Helvetica, sans-serif;
   color: var(--sv-navy);
}

.ss-sup p {
   color: inherit;
}

.ss-sup a {
   color: var(--sv-pink-dark);
}

.ss-sup a:hover {
   color: var(--sv-pink);
}

.ss-sup [hidden] {
   display: none !important;
}

/* Content column, same maths as .hv2-wrap */
.ss-sup .sv-wrap {
   box-sizing: content-box;
   max-width: 1200px;
   margin-left: auto;
   margin-right: auto;
   padding-left: var(--sv-gutter);
   padding-right: var(--sv-gutter);
}

/* Soft hero band */
.ss-sup .sv-hero {
   background: var(--sv-hero);
   border-bottom: 1px solid var(--sv-border);
   padding: 36px 0 32px;
}

.ss-sup .sv-title {
   margin: 0;
   font-size: 30px;
   font-weight: 700;
   line-height: 1.15;
   letter-spacing: -0.2px;
   color: var(--sv-navy);
}

.ss-sup .sv-lead {
   margin: 10px 0 0;
   max-width: 640px;
   font-size: 16px;
   line-height: 1.55;
   color: var(--sv-slate);
}

@media (min-width: 960px) {
   .ss-sup .sv-hero {
      padding: 64px 0 56px;
   }

   .ss-sup .sv-title {
      font-size: 42px;
   }

   .ss-sup .sv-lead {
      font-size: 18px;
   }
}

/* Search pill */
.ss-sup .sv-search {
   position: relative;
   max-width: 620px;
   margin-top: 22px;
}

.ss-sup .sv-search > i {
   position: absolute;
   left: 20px;
   top: 50%;
   transform: translateY(-50%);
   color: var(--sv-slate);
   font-size: 16px;
   pointer-events: none;
}

.ss-sup .sv-search input {
   box-sizing: border-box;
   width: 100%;
   height: 54px;
   margin: 0;
   padding: 0 20px 0 50px !important;
   border: 1px solid var(--sv-border) !important;
   border-radius: 27px;
   background: #fff !important;
   box-shadow: 0 4px 16px rgba(20, 24, 58, 0.06);
   font-family: 'Poppins', sans-serif;
   font-size: 16px;
   color: var(--sv-navy);
   -webkit-appearance: none;
   appearance: none;
}

.ss-sup .sv-search input::placeholder {
   color: #8A8FA3;
   opacity: 1;
}

.ss-sup .sv-search input:focus {
   outline: none;
   border-color: var(--sv-pink) !important;
   box-shadow: 0 4px 16px rgba(20, 24, 58, 0.06), 0 0 0 3px rgba(232, 35, 110, 0.14);
}

/* Cards */
.ss-sup .sv-card {
   box-sizing: border-box;
   background: #fff;
   border: 1px solid var(--sv-border);
   border-radius: 20px;
   box-shadow: var(--sv-shadow);
   padding: 20px;
}

@media (min-width: 960px) {
   .ss-sup .sv-card {
      padding: 28px;
   }
}

.ss-sup .sv-lift {
   transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.ss-sup .sv-lift:hover {
   transform: translateY(-2px);
   box-shadow: var(--sv-shadow-hover);
   border-color: var(--sv-border-strong);
}

/* Coloured icon squares */
.ss-sup .sv-ico {
   flex: 0 0 auto;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 44px;
   height: 44px;
   border-radius: 12px;
   background: var(--sv-pink-soft);
   color: var(--sv-pink);
   font-size: 18px;
}

.ss-sup .sv-ico-blue { background: #E6EEFF; color: #2F5BD3; }
.ss-sup .sv-ico-amber { background: #FFF1DD; color: #B86A00; }
.ss-sup .sv-ico-green { background: var(--sv-green-soft); color: var(--sv-green); }
.ss-sup .sv-ico-navy { background: #E9EAF2; color: var(--sv-navy); }

/* Section headings */
.ss-sup .sv-h2 {
   margin: 0 0 16px;
   font-size: 22px;
   font-weight: 700;
   line-height: 1.25;
   color: var(--sv-navy);
}

.ss-sup .sv-h3 {
   margin: 0;
   font-size: 17px;
   font-weight: 600;
   line-height: 1.3;
   color: var(--sv-navy);
}

@media (min-width: 960px) {
   .ss-sup .sv-h2 {
      font-size: 26px;
      margin-bottom: 20px;
   }
}

/* Buttons: pill shaped, one pink primary, white secondary. */
.ss-sup .uk-button {
   border-radius: 999px;
   font-family: 'Poppins', sans-serif;
   font-weight: 600;
   text-transform: none;
   transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}

.ss-sup .uk-button-primary {
   background: var(--sv-pink) !important;
   border: 0 !important;
   color: #fff !important;
}

.ss-sup .uk-button-primary:hover,
.ss-sup .uk-button-primary:focus {
   background: var(--sv-pink-dark) !important;
   color: #fff !important;
}

.ss-sup .uk-button-default,
.ss-sup .uk-button-secondary {
   background: #fff !important;
   border: 1px solid var(--sv-border) !important;
   color: var(--sv-navy) !important;
}

.ss-sup .uk-button-default:hover,
.ss-sup .uk-button-secondary:hover {
   border-color: var(--sv-navy) !important;
   color: var(--sv-navy) !important;
}

/* Text link with arrow */
.ss-sup .sv-link {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   font-weight: 600;
   font-size: 14.5px;
   color: var(--sv-pink-dark);
   text-decoration: none;
}

/* Safari before 14.1 ignores gap on flex boxes; <html> gets .no-flexgap
   (templates/core/metaheader.php) and these margins stand in for it. */
.no-flexgap .ss-sup .sv-link > * + * {
   margin-left: 6px;
}

.no-flexgap .ss-sup .sv-link > :only-child {
   margin-right: 6px;
}

/* The arrow comes after the label (text, not an element). */
.no-flexgap .ss-sup .sv-link > i:only-child {
   margin-left: 6px;
   margin-right: 0;
}

.ss-sup .sv-link i {
   font-size: 12px;
   transition: transform .15s ease;
}

.ss-sup .sv-link:hover {
   color: var(--sv-pink);
   text-decoration: none;
}

.ss-sup .sv-link:hover i {
   transform: translateX(2px);
}

/* Accordion rows (Help Center FAQ, hand-built pages, contact page) */
.ss-sup .sv-faq,
.ss-help-page .uk-accordion,
.ss-help-page ul[uk-accordion] {
   list-style: none;
   margin: 0;
   padding: 0;
}

.ss-sup .sv-faq > li,
.ss-help-page .uk-accordion > *,
.ss-help-page ul[uk-accordion] > * {
   background: #fff;
   border: 1px solid var(--sv-border);
   border-radius: 16px;
   transition: border-color .15s ease, box-shadow .15s ease;
}

.ss-sup .sv-faq > li + li,
.ss-help-page .uk-accordion > * + *,
.ss-help-page ul[uk-accordion] > * + * {
   margin-top: 10px;
}

.ss-sup .sv-faq > li:hover,
.ss-help-page .uk-accordion > *:hover,
.ss-help-page ul[uk-accordion] > *:hover {
   border-color: var(--sv-border-strong);
}

.ss-sup .sv-faq > li.uk-open,
.ss-help-page .uk-accordion > .uk-open,
.ss-help-page ul[uk-accordion] > .uk-open {
   border-color: var(--sv-border-strong);
   box-shadow: var(--sv-shadow);
}

.ss-sup .sv-faq .uk-accordion-title,
.ss-help-page .uk-accordion-title {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 14px;
   padding: 16px 18px;
   font-size: 15.5px;
   font-weight: 600;
   line-height: 1.4;
   color: var(--sv-navy) !important;
   text-decoration: none;
}

.no-flexgap .ss-sup .sv-faq .uk-accordion-title > * + *,
.no-flexgap .ss-help-page .uk-accordion-title > * + * {
   margin-left: 14px;
}

.no-flexgap .ss-sup .sv-faq .uk-accordion-title > :only-child,
.no-flexgap .ss-help-page .uk-accordion-title > :only-child {
   margin-right: 14px;
}

.ss-sup .sv-faq .uk-accordion-title::before,
.ss-help-page .uk-accordion-title::before {
   content: none;
}

.ss-sup .sv-faq .uk-accordion-title::after,
.ss-help-page .uk-accordion-title::after {
   content: "\f078";
   flex: 0 0 auto;
   order: 2;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 28px;
   height: 28px;
   border-radius: 50%;
   background: var(--sv-neutral);
   color: var(--sv-slate);
   font-family: 'Font Awesome 6 Free';
   font-weight: 900;
   font-size: 11px;
   transition: transform .2s ease, background-color .15s ease, color .15s ease;
}

.ss-sup .sv-faq .uk-open > .uk-accordion-title::after,
.ss-help-page .uk-open > .uk-accordion-title::after {
   transform: rotate(180deg);
   background: var(--sv-pink-soft);
   color: var(--sv-pink);
}

.ss-sup .sv-faq .uk-accordion-content,
.ss-help-page .uk-accordion-content {
   margin: 0;
   padding: 0 18px 18px;
   font-size: 15px;
   line-height: 1.7;
   color: var(--sv-body);
}

.ss-sup .sv-faq .uk-accordion-content > :last-child,
.ss-help-page .uk-accordion-content > :last-child {
   margin-bottom: 0;
}

@media (min-width: 960px) {
   .ss-sup .sv-faq .uk-accordion-title,
   .ss-help-page .uk-accordion-title {
      padding: 18px 22px;
      font-size: 16px;
   }

   .ss-sup .sv-faq .uk-accordion-content,
   .ss-help-page .uk-accordion-content {
      padding: 0 22px 20px;
   }
}

/* Linked rows (policies, resources) */
.ss-sup .sv-row {
   position: relative;
   display: flex;
   align-items: flex-start;
   gap: 14px;
   height: 100%;
   text-decoration: none;
   color: var(--sv-body);
}

.no-flexgap .ss-sup .sv-row > * + * {
   margin-left: 14px;
}

.no-flexgap .ss-sup .sv-row > :only-child {
   margin-right: 14px;
}

.ss-sup .sv-row:hover {
   text-decoration: none;
   color: var(--sv-body);
}

.ss-sup .sv-row-txt {
   flex: 1 1 auto;
   min-width: 0;
   display: flex;
   flex-direction: column;
   gap: 4px;
}

.no-flexgap .ss-sup .sv-row-txt > * + * {
   margin-top: 4px;
}

.ss-sup .sv-row-txt strong {
   font-size: 16px;
   font-weight: 600;
   line-height: 1.3;
   color: var(--sv-navy);
}

.ss-sup .sv-row-txt span {
   font-size: 14px;
   line-height: 1.55;
   color: var(--sv-slate);
}

.ss-sup .sv-row-txt .sv-link {
   margin-top: 6px;
}

/* ------------------------------------------------------------------ */
/* /support home                                                       */
/* ------------------------------------------------------------------ */
.ss-help-home .sv-body {
   padding-top: 24px;
   padding-bottom: 48px;
}

.ss-help-home .sv-section {
   margin-top: 40px;
}

.ss-help-home .sv-start {
   display: flex;
   flex-direction: column;
   gap: 16px;
   border-color: var(--sv-pink-line);
   background: #FFFFFF;
}

.no-flexgap .ss-help-home .sv-start > * + * {
   margin-top: 16px;
}

.ss-help-home .sv-start p {
   margin: 6px 0 0;
   font-size: 15px;
   line-height: 1.6;
   color: var(--sv-slate);
}

.ss-help-home .sv-start-main {
   display: flex;
   align-items: flex-start;
   gap: 14px;
}

.no-flexgap .ss-help-home .sv-start-main > * + * {
   margin-left: 14px;
}

.no-flexgap .ss-help-home .sv-start-main > :only-child {
   margin-right: 14px;
}

.ss-help-home .sv-start-actions {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 12px 20px;
}

.no-flexgap .ss-help-home .sv-start-actions > * {
   margin-right: 20px;
   margin-bottom: 12px;
}

.no-flexgap .ss-help-home .sv-start-actions > :last-child {
   margin-right: 0;
}

.ss-help-home .sv-start-actions .uk-button {
   min-height: 48px;
   line-height: 48px;
   padding: 0 26px;
}

@media (max-width: 479px) {
   .ss-help-home .sv-start-actions .uk-button {
      width: 100%;
   }

   .ss-help-home .sv-start-actions .sv-link {
      width: 100%;
      justify-content: center;
   }
}

@media (min-width: 960px) {
   .ss-help-home .sv-start {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: 32px;
      padding: 28px 32px;
   }

   .no-flexgap .ss-help-home .sv-start > * + * {
      margin-top: 0;
      margin-left: 32px;
   }

   .no-flexgap .ss-help-home .sv-start > :only-child {
      margin-right: 32px;
   }

   .ss-help-home .sv-start .sv-h3 {
      font-size: 20px;
   }

   .ss-help-home .sv-start-actions {
      flex: 0 0 auto;
   }
}

/* Quick-action tiles */
.ss-help-home .sv-tiles {
   display: grid;
   grid-template-columns: 1fr;
   grid-gap: 12px;
   gap: 12px;
   margin-top: 16px;
}

@media (min-width: 640px) {
   .ss-help-home .sv-tiles {
      grid-template-columns: 1fr 1fr;
      grid-gap: 16px;
      gap: 16px;
   }
}

@media (min-width: 1100px) {
   .ss-help-home .sv-tiles {
      grid-template-columns: repeat(4, 1fr);
   }
}

.ss-help-home .sv-tile {
   position: relative;
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.no-flexgap .ss-help-home .sv-tile > * + * {
   margin-top: 10px;
}

.ss-help-home .sv-tile .sv-h3 {
   margin-top: 6px;
}

.ss-help-home .sv-tile p {
   flex: 1 1 auto;
   margin: 0;
   font-size: 14.5px;
   line-height: 1.6;
   color: var(--sv-slate);
}

/* The whole tile is clickable through its one link. */
.ss-help-home .sv-tile .sv-link::after {
   content: "";
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   inset: 0;
   border-radius: 20px;
}

/* FAQ + resources split */
.ss-help-home .sv-split {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   grid-gap: 40px;
   gap: 40px;
}

@media (min-width: 960px) {
   .ss-help-home .sv-split {
      grid-template-columns: minmax(0, 1fr) 340px;
      grid-gap: 40px;
      gap: 40px;
      align-items: start;
   }

   .ss-help-home .sv-aside {
      position: -webkit-sticky;
      position: sticky;
      top: 100px;
   }
}

.ss-help-home .sv-res {
   display: grid;
   grid-gap: 12px;
   gap: 12px;
}

.ss-help-home .sv-res .sv-card {
   padding: 18px;
}

.ss-help-home .sv-res .sv-row .sv-link::after,
.ss-help-home .sv-policies .sv-row .sv-link::after {
   content: "";
   position: absolute;
   top: -18px;
   right: -18px;
   bottom: -18px;
   left: -18px;
   inset: -18px;
   border-radius: 20px;
}

/* Policies grid */
.ss-help-home .sv-policies {
   display: grid;
   grid-template-columns: 1fr;
   grid-gap: 12px;
   gap: 12px;
}

.ss-help-home .sv-policies .sv-card {
   padding: 18px;
}

@media (min-width: 640px) {
   .ss-help-home .sv-policies {
      grid-template-columns: 1fr 1fr;
      grid-gap: 16px;
      gap: 16px;
   }
}

@media (min-width: 1100px) {
   .ss-help-home .sv-policies {
      grid-template-columns: repeat(4, 1fr);
   }
}

/* Closing contact card */
.ss-help-home .sv-more {
   display: flex;
   flex-direction: column;
   gap: 18px;
   margin-top: 40px;
   background: var(--sv-navy);
   border-color: var(--sv-navy);
   color: #D9DCEA;
}

.no-flexgap .ss-help-home .sv-more > * + * {
   margin-top: 18px;
}

.ss-help-home .sv-more .sv-h2 {
   margin: 0 0 8px;
   color: #fff;
}

.ss-help-home .sv-more p {
   margin: 0;
   max-width: 620px;
   font-size: 15px;
   line-height: 1.6;
   color: #D9DCEA;
}

.ss-help-home .sv-more-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
}

.no-flexgap .ss-help-home .sv-more-actions > * {
   margin-right: 10px;
   margin-bottom: 10px;
}

.no-flexgap .ss-help-home .sv-more-actions > :last-child {
   margin-right: 0;
}

.ss-help-home .sv-more-actions .uk-button {
   min-height: 48px;
   line-height: 48px;
   padding: 0 26px;
}

.ss-help-home .sv-more .uk-button-default {
   background: transparent !important;
   border-color: rgba(255, 255, 255, 0.4) !important;
   color: #fff !important;
}

.ss-help-home .sv-more .uk-button-default:hover {
   border-color: #fff !important;
   color: #fff !important;
}

@media (max-width: 479px) {
   .ss-help-home .sv-more-actions .uk-button {
      width: 100%;
   }
}

@media (min-width: 960px) {
   .ss-help-home .sv-more {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: 32px;
      padding: 36px 40px;
   }

   .no-flexgap .ss-help-home .sv-more > * + * {
      margin-top: 0;
      margin-left: 32px;
   }

   .no-flexgap .ss-help-home .sv-more > :only-child {
      margin-right: 32px;
   }

   .ss-help-home .sv-more-actions {
      flex: 0 0 auto;
   }
}

/* ------------------------------------------------------------------ */
/* Legal / plain CMS pages (support_page.php)                          */
/* ------------------------------------------------------------------ */
.ss-doc .sv-wrap-doc {
   max-width: 1092px;
}

.ss-doc .sv-hero {
   padding: 24px 0 28px;
}

@media (min-width: 960px) {
   .ss-doc .sv-hero {
      padding: 36px 0 44px;
   }

   .ss-doc .sv-title {
      font-size: 38px;
   }
}

.ss-sup .sv-crumbs {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 6px;
   list-style: none;
   margin: 0 0 14px;
   padding: 0;
   font-size: 13.5px;
   color: var(--sv-slate);
}

.no-flexgap .ss-sup .sv-crumbs > * {
   margin-right: 6px;
   margin-bottom: 6px;
}

.no-flexgap .ss-sup .sv-crumbs > :last-child {
   margin-right: 0;
}

.ss-sup .sv-crumbs li {
   display: inline-flex;
   align-items: center;
   gap: 6px;
}

.no-flexgap .ss-sup .sv-crumbs li > * + * {
   margin-left: 6px;
}

.no-flexgap .ss-sup .sv-crumbs li > :only-child {
   margin-right: 6px;
}

.ss-sup .sv-crumbs li + li::before {
   content: "\f054";
   font-family: 'Font Awesome 6 Free';
   font-weight: 900;
   font-size: 9px;
   color: #A0A5B8;
}

.ss-sup .sv-crumbs a {
   color: var(--sv-slate);
   text-decoration: none;
}

.ss-sup .sv-crumbs a:hover {
   color: var(--sv-pink-dark);
}

.ss-sup .sv-crumbs [aria-current] {
   color: var(--sv-navy);
   font-weight: 600;
}

.ss-doc .sv-doc-grid {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   grid-gap: 24px;
   gap: 24px;
   padding-top: 24px;
   padding-bottom: 56px;
}

@media (min-width: 960px) {
   .ss-doc .sv-doc-grid {
      grid-template-columns: minmax(0, 760px) 300px;
      justify-content: space-between;
      grid-gap: 32px;
      gap: 32px;
      padding-top: 32px;
      padding-bottom: 72px;
   }

   .ss-doc .sv-doc-side {
      position: -webkit-sticky;
      position: sticky;
      top: 100px;
      align-self: start;
   }
}

.ss-doc .sv-doc-side {
   display: grid;
   grid-gap: 16px;
   gap: 16px;
}

.ss-doc .sv-side-card {
   padding: 20px;
}

.ss-doc .sv-side-h {
   margin: 0 0 10px;
   font-size: 13px;
   font-weight: 600;
   letter-spacing: .06em;
   text-transform: uppercase;
   color: var(--sv-slate);
}

.ss-doc .sv-side-list {
   list-style: none;
   margin: 0 -8px;
   padding: 0;
}

.ss-doc .sv-side-list a {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 8px;
   padding: 9px 10px;
   border-radius: 10px;
   font-size: 14.5px;
   line-height: 1.35;
   color: var(--sv-navy);
   text-decoration: none;
}

.no-flexgap .ss-doc .sv-side-list a > * + * {
   margin-left: 8px;
}

.no-flexgap .ss-doc .sv-side-list a > :only-child {
   margin-right: 8px;
}

.ss-doc .sv-side-list a i {
   font-size: 10px;
   color: #A0A5B8;
}

.ss-doc .sv-side-list a:hover {
   background: var(--sv-neutral);
   color: var(--sv-navy);
}

.ss-doc .sv-side-list a[aria-current] {
   background: var(--sv-pink-soft);
   color: var(--sv-pink-dark);
   font-weight: 600;
}

.ss-doc .sv-side-list a[aria-current] i {
   color: var(--sv-pink);
}

.ss-doc .sv-help-mini p {
   margin: 6px 0 14px;
   font-size: 14.5px;
   line-height: 1.6;
   color: var(--sv-slate);
}

.ss-doc .sv-help-mini .uk-button {
   width: 100%;
   min-height: 44px;
   line-height: 44px;
}

.ss-doc .sv-help-mini .sv-link {
   margin-top: 12px;
}

/* Article typography */
.ss-doc .sv-doc-body {
   padding: 24px 20px;
   font-size: 16px;
   line-height: 1.7;
   color: var(--sv-body);
   overflow-wrap: break-word;
   word-wrap: break-word;
}

@media (min-width: 960px) {
   .ss-doc .sv-doc-body {
      padding: 44px 48px;
   }
}

/* CMS rows wrap themselves in section/uk-container: flatten them. */
.ss-doc .sv-doc-body section,
.ss-doc .sv-doc-body .uk-section {
   margin: 0 !important;
   padding: 0 !important;
   background: none;
}

.ss-doc .sv-doc-body .uk-container {
   max-width: none;
   margin: 0;
   padding: 0;
}

.ss-doc .sv-doc-body > :first-child,
.ss-doc .sv-doc-body > :first-child > :first-child,
.ss-doc .sv-doc-body > :first-child > :first-child > :first-child {
   margin-top: 0 !important;
}

.ss-doc .sv-doc-body p,
.ss-doc .sv-doc-body ul,
.ss-doc .sv-doc-body ol,
.ss-doc .sv-doc-body table,
.ss-doc .sv-doc-body blockquote {
   margin: 0 0 16px;
   font-size: 16px;
   line-height: 1.7;
   color: var(--sv-body);
}

.ss-doc .sv-doc-body h1,
.ss-doc .sv-doc-body h2,
.ss-doc .sv-doc-body .section-title {
   margin: 36px 0 12px;
   padding-top: 28px;
   border-top: 1px solid #EEF1F6;
   font-size: 20px;
   font-weight: 600;
   line-height: 1.35;
   color: var(--sv-navy);
}

.ss-doc .sv-doc-body h3,
.ss-doc .sv-doc-body h4,
.ss-doc .sv-doc-body h5 {
   margin: 24px 0 8px;
   font-size: 17px;
   font-weight: 600;
   line-height: 1.4;
   color: var(--sv-navy);
}

.ss-doc .sv-doc-body h1:first-child,
.ss-doc .sv-doc-body h2:first-child,
.ss-doc .sv-doc-body .section-title:first-child,
.ss-doc .sv-doc-body .updated-date + h2,
.ss-doc .sv-doc-body .updated-date + p + .section-title {
   border-top: 0;
   padding-top: 0;
}

@media (min-width: 960px) {
   .ss-doc .sv-doc-body h1,
   .ss-doc .sv-doc-body h2,
   .ss-doc .sv-doc-body .section-title {
      font-size: 22px;
   }
}

.ss-doc .sv-doc-body ul,
.ss-doc .sv-doc-body ol {
   padding-left: 22px;
}

.ss-doc .sv-doc-body li {
   margin: 0 0 8px;
   padding-left: 4px;
}

.ss-doc .sv-doc-body li > ul,
.ss-doc .sv-doc-body li > ol {
   margin: 8px 0 4px;
}

.ss-doc .sv-doc-body ul > li::marker {
   color: var(--sv-pink);
}

.ss-doc .sv-doc-body ol > li::marker {
   color: var(--sv-pink-dark);
   font-weight: 600;
}

.ss-doc .sv-doc-body strong,
.ss-doc .sv-doc-body b {
   font-weight: 600;
   color: var(--sv-navy);
}

.ss-doc .sv-doc-body a {
   color: var(--sv-pink-dark);
   text-decoration: underline;
   text-underline-offset: 2px;
}

.ss-doc .sv-doc-body a:hover {
   color: var(--sv-pink);
}

.ss-doc .sv-doc-body .updated-date {
   display: inline-block;
   margin-bottom: 20px;
   padding: 6px 12px;
   border-radius: 8px;
   background: var(--sv-neutral);
   font-size: 13.5px;
   line-height: 1.4;
   color: var(--sv-slate);
}

.ss-doc .sv-doc-body .updated-date strong {
   color: var(--sv-slate);
}

.ss-doc .sv-doc-body table {
   display: block;
   max-width: 100%;
   overflow-x: auto;
   border-collapse: collapse;
   font-size: 14.5px;
}

.ss-doc .sv-doc-body th,
.ss-doc .sv-doc-body td {
   padding: 10px 12px;
   border: 1px solid var(--sv-border);
   text-align: left;
   vertical-align: top;
}

.ss-doc .sv-doc-body th {
   background: var(--sv-neutral);
   font-weight: 600;
   color: var(--sv-navy);
}

.ss-doc .sv-doc-body blockquote {
   padding: 12px 18px;
   border-left: 3px solid var(--sv-pink);
   background: var(--sv-neutral);
   border-radius: 0 12px 12px 0;
   font-style: normal;
}

.ss-doc .sv-doc-body img {
   max-width: 100%;
   height: auto;
}

.ss-doc .sv-doc-body hr {
   margin: 28px 0;
   border: 0;
   border-top: 1px solid var(--sv-border);
}

/* ------------------------------------------------------------------ */
/* Hand-built pages (how-it-works, about-us): restyle UIkit markup     */
/* ------------------------------------------------------------------ */
.ss-help-page .uk-container {
   padding-left: var(--sv-gutter);
   padding-right: var(--sv-gutter);
}

.ss-help-page .uk-section {
   padding-top: 40px;
   padding-bottom: 40px;
   background: transparent;
}

.ss-help-page .uk-section-muted {
   background: #EEF1F7;
}

@media (min-width: 960px) {
   .ss-help-page .uk-section {
      padding-top: 64px;
      padding-bottom: 64px;
   }
}

/* Hero: the old gradient becomes the soft v2 band with dark text. */
.ss-help-page .banner_background {
   background: var(--sv-hero) !important;
   border-bottom: 1px solid var(--sv-border);
   padding-top: 36px;
   padding-bottom: 32px;
}

@media (min-width: 960px) {
   .ss-help-page .banner_background {
      padding-top: 64px;
      padding-bottom: 56px;
   }
}

.ss-help-page .banner_background,
.ss-help-page .banner_background.uk-light,
.ss-help-page .banner_background h1,
.ss-help-page .banner_background .uk-heading-medium {
   color: var(--sv-navy);
}

.ss-help-page .banner_background .uk-heading-medium {
   margin: 0;
   font-size: 30px;
   font-weight: 700;
   line-height: 1.15;
   letter-spacing: -0.2px;
}

.ss-help-page .banner_background .uk-text-lead {
   margin-top: 10px;
   max-width: 680px;
   font-size: 16px;
   line-height: 1.55;
   color: var(--sv-slate);
}

@media (min-width: 960px) {
   .ss-help-page .banner_background .uk-heading-medium {
      font-size: 42px;
   }

   .ss-help-page .banner_background .uk-text-lead {
      font-size: 18px;
   }
}

/* Headings */
.ss-help-page h2,
.ss-help-page .uk-heading-divider,
.ss-help-page .uk-heading-line {
   font-size: 22px;
   font-weight: 700;
   line-height: 1.25;
   color: var(--sv-navy);
}

@media (min-width: 960px) {
   .ss-help-page h2,
   .ss-help-page .uk-heading-divider,
   .ss-help-page .uk-heading-line {
      font-size: 28px;
   }
}

.ss-help-page .uk-heading-divider {
   padding-bottom: 0;
   border-bottom: 0;
}

.ss-help-page .uk-heading-line > ::before,
.ss-help-page .uk-heading-line > ::after {
   border-bottom-color: var(--sv-border);
}

.ss-help-page h3,
.ss-help-page h4,
.ss-help-page .uk-card-title {
   color: var(--sv-navy);
   font-weight: 600;
}

.ss-help-page .uk-card-title {
   font-size: 20px;
   line-height: 1.3;
}

.ss-help-page p,
.ss-help-page li {
   line-height: 1.7;
}

.ss-help-page .uk-text-lead {
   font-size: 17px;
   line-height: 1.6;
   color: var(--sv-navy);
}

.ss-help-page .uk-text-bold {
   font-weight: 600;
   color: var(--sv-navy);
}

.ss-help-page strong {
   color: var(--sv-navy);
   font-weight: 600;
}

/* Cards */
.ss-help-page .uk-card-default {
   background: #fff;
   border: 1px solid var(--sv-border);
   border-radius: 20px;
   box-shadow: var(--sv-shadow) !important;
   color: var(--sv-body);
}

.ss-help-page .uk-card-body {
   padding: 22px 20px;
}

@media (min-width: 960px) {
   .ss-help-page .uk-card-body {
      padding: 32px;
   }
}

.ss-help-page .uk-card-default.uk-text-center,
.ss-help-page .uk-grid-match .uk-card-default {
   transition: transform .18s ease, box-shadow .18s ease;
}

.ss-help-page .uk-card-default.uk-text-center:hover,
.ss-help-page .uk-grid-match .uk-card-default:hover {
   transform: translateY(-2px);
   box-shadow: var(--sv-shadow-hover) !important;
}

/* Dark sidebar card becomes a light accent card. */
.ss-help-page .uk-card-secondary,
.ss-help-page .uk-card-secondary.uk-light {
   background: #FFFFFF;
   border: 1px solid var(--sv-pink-line);
   border-radius: 20px;
   box-shadow: var(--sv-shadow);
   color: var(--sv-body);
}

.ss-help-page .uk-card-secondary h3,
.ss-help-page .uk-card-secondary li,
.ss-help-page .uk-card-secondary p {
   color: var(--sv-body);
}

.ss-help-page .uk-card-secondary h3,
.ss-help-page .uk-card-secondary strong {
   color: var(--sv-navy);
}

/* Small coloured boxes on how-it-works ("Using your eSIM") */
.ss-help-page .uk-card-primary,
.ss-help-page .uk-card-primary.uk-light {
   height: 100%;
   box-sizing: border-box;
   background: var(--sv-neutral);
   border: 1px solid var(--sv-border);
   border-radius: 16px;
   color: var(--sv-body);
}

.ss-help-page .uk-card-primary h3 {
   margin: 10px 0 6px;
   font-size: 17px;
   color: var(--sv-navy);
}

.ss-help-page .uk-card-primary p {
   margin: 0;
   font-size: 14.5px;
   color: var(--sv-slate);
}

.ss-help-page .uk-card-primary [uk-icon],
.ss-help-page .uk-text-primary,
.ss-help-page .uk-card-default > [uk-icon] {
   color: var(--sv-pink) !important;
}

.ss-help-page .uk-card-primary [uk-icon] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 56px;
   height: 56px;
   border-radius: 14px;
   background: var(--sv-pink-soft);
}

.ss-help-page .uk-card-primary [uk-icon] svg {
   width: 28px;
   height: 28px;
}

/* Round icon buttons (about-us values) become icon squares. */
.ss-help-page .uk-icon-button {
   width: 44px;
   height: 44px;
   border-radius: 12px;
   background: var(--sv-pink-soft);
   color: var(--sv-pink) !important;
}

/* Numbered steps */
.ss-help-page .uk-label {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 32px;
   height: 32px;
   padding: 0;
   border-radius: 50%;
   background: var(--sv-pink);
   color: #fff;
   font-family: 'Poppins', sans-serif;
   font-size: 14px;
   font-weight: 600;
   line-height: 1;
}

.ss-help-page .uk-list-divider > :nth-child(n+2) {
   border-top-color: #EEF1F6;
}

.ss-help-page .uk-list-large > :nth-child(n+2) {
   margin-top: 18px;
   padding-top: 18px;
}

/* Bullets and numbers in brand pink */
.ss-help-page .uk-list-bullet > ::before {
   background-image: radial-gradient(circle, var(--sv-pink) 0, var(--sv-pink) 3px, transparent 3.5px) !important;
}

.ss-help-page .uk-list-decimal > ::before {
   color: var(--sv-pink-dark);
   font-weight: 600;
}

.ss-help-page .uk-list > * {
   color: var(--sv-body);
}

/* Alerts */
.ss-help-page .uk-alert-primary,
.ss-help-page .uk-alert-warning {
   border-radius: 14px;
   padding: 14px 16px;
   font-size: 15px;
}

.ss-help-page .uk-alert-primary {
   background: #FFF4F8;
   border: 1px solid var(--sv-pink-line);
   color: var(--sv-navy);
}

.ss-help-page .uk-alert-primary [uk-icon] {
   color: var(--sv-pink);
}

.ss-help-page .uk-alert-warning {
   background: #FFF8EC;
   border: 1px solid #F3DFB8;
   color: #6A4300;
}

.ss-help-page .uk-alert-primary p,
.ss-help-page .uk-alert-warning p {
   margin: 0;
   color: inherit;
}

/* Accordion inside a card: neutral rows, no shadow on open. */
.ss-help-page .uk-card .uk-accordion > * {
   background: var(--sv-neutral);
   border-color: transparent;
   border-radius: 14px;
}

.ss-help-page .uk-card .uk-accordion > .uk-open {
   background: #fff;
   border-color: var(--sv-border);
   box-shadow: none;
}

.ss-help-page .uk-card .uk-accordion-title::after {
   background: #fff;
}

/* Quote */
.ss-help-page blockquote {
   margin: 0;
   padding-left: 18px;
   border-left: 3px solid var(--sv-pink);
   font-size: 18px;
   font-style: normal;
   line-height: 1.6;
   color: var(--sv-navy);
}

.ss-help-page blockquote footer {
   margin-top: 14px;
   font-size: 14px;
   color: var(--sv-slate);
}

.ss-help-page blockquote footer cite {
   font-style: normal;
   font-weight: 600;
}

/* Buttons */
.ss-help-page .uk-button {
   min-height: 46px;
   line-height: 46px;
   padding: 0 24px;
}

.ss-help-page .uk-button-large {
   min-height: 52px;
   line-height: 52px;
   padding: 0 30px;
   font-size: 16px;
}

/* Closing call to action (was a purple band) */
.ss-help-page .uk-section-primary {
   margin: 0 var(--sv-gutter) 48px;
   padding: 40px 20px;
   border-radius: 24px;
   background: var(--sv-navy) !important;
   color: #D9DCEA;
}

@media (min-width: 1264px) {
   .ss-help-page .uk-section-primary {
      max-width: 1200px;
      margin-left: auto;
      margin-right: auto;
   }
}

@media (min-width: 960px) {
   .ss-help-page .uk-section-primary {
      padding: 56px 40px;
      margin-bottom: 72px;
   }
}

.ss-help-page .uk-section-primary .uk-container {
   padding-left: 0;
   padding-right: 0;
}

.ss-help-page .uk-section-primary h2 {
   color: #fff;
}

.ss-help-page .uk-section-primary .uk-text-lead {
   max-width: 640px;
   margin-left: auto;
   margin-right: auto;
   font-size: 16px;
   color: #D9DCEA;
}

.ss-help-page .uk-section-primary .uk-button-secondary {
   background: var(--sv-pink) !important;
   border: 0 !important;
   color: #fff !important;
}

.ss-help-page .uk-section-primary .uk-button-secondary:hover {
   background: var(--sv-pink-dark) !important;
}

.ss-help-page .uk-section-primary .uk-button-default {
   background: transparent !important;
   border-color: rgba(255, 255, 255, 0.4) !important;
   color: #fff !important;
}

.ss-help-page .uk-section-primary .uk-button-default:hover {
   border-color: #fff !important;
}

@media (max-width: 639px) {
   .ss-help-page .uk-section-primary .uk-button {
      display: block;
      width: 100%;
      margin: 10px 0 0 !important;
   }
}

/* ------------------------------------------------------------------ */
/* /support/contact-us and the phone upload page                       */
/* Overrides the inline <style> blocks, so selectors carry .ss-sup.     */
/* ------------------------------------------------------------------ */
.ss-sup.ss-contact {
   background: var(--sv-bg);
   color: var(--sv-body);
}

.ss-sup.ss-contact .uk-container {
   padding-left: 16px;
   padding-right: 16px;
}

.ss-sup.ss-contact .uk-heading-medium {
   font-weight: 700;
   letter-spacing: -0.2px;
   color: var(--sv-navy);
}

.ss-sup.ss-contact .uk-text-lead {
   color: var(--sv-slate);
}

.ss-sup.ss-contact .uk-text-muted {
   color: var(--sv-slate) !important;
}

.ss-sup.ss-contact h2,
.ss-sup.ss-contact h3,
.ss-sup.ss-contact h4,
.ss-sup.ss-contact .ss-h2 {
   color: var(--sv-navy);
}

.ss-sup.ss-contact .ss-h2 {
   font-weight: 700;
   letter-spacing: -0.1px;
}

/* Cards: rounded with a gutter on phones too */
.ss-sup.ss-contact .ss-card {
   margin: 0;
   border: 1px solid var(--sv-border);
   border-radius: 18px;
   box-shadow: var(--sv-shadow);
}

@media (min-width: 640px) {
   .ss-sup.ss-contact .ss-card {
      border-radius: 20px;
   }
}

.ss-sup.ss-contact .ss-big-icon {
   color: var(--sv-pink);
}

/* Step indicator */
.ss-sup.ss-contact .ss-progress li {
   color: #8A8FA3;
}

.ss-sup.ss-contact .ss-progress li:not(:last-child)::after {
   height: 2px;
   border-radius: 2px;
   background: var(--sv-border);
}

.ss-sup.ss-contact .ss-progress li.is-done:not(:last-child)::after {
   background: var(--sv-pink-line);
}

.ss-sup.ss-contact .ss-num {
   border-color: var(--sv-border);
   color: var(--sv-slate);
   font-weight: 600;
}

.ss-sup.ss-contact .ss-progress li.is-active {
   color: var(--sv-navy);
}

.ss-sup.ss-contact .ss-progress li.is-active .ss-num {
   background: var(--sv-pink);
   border-color: var(--sv-pink);
   color: #fff;
   box-shadow: 0 0 0 4px rgba(232, 35, 110, 0.14);
}

.ss-sup.ss-contact .ss-progress li.is-done {
   color: var(--sv-pink-dark);
}

.ss-sup.ss-contact .ss-progress li.is-done .ss-num {
   background: var(--sv-pink-soft);
   border-color: var(--sv-pink-soft);
   color: var(--sv-pink-dark);
}

/* Option tiles */
.ss-sup.ss-contact .ss-tile {
   border: 1px solid var(--sv-border);
   border-radius: 16px;
   background: #fff;
   color: var(--sv-navy);
   font-family: 'Poppins', sans-serif;
   transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .15s ease;
}

.ss-sup.ss-contact .ss-tile > i {
   color: var(--sv-pink);
}

.ss-sup.ss-contact .ss-tile-title {
   color: var(--sv-navy);
}

.ss-sup.ss-contact .ss-tile-desc {
   color: var(--sv-slate);
}

.ss-sup.ss-contact .ss-tile-arrow {
   color: #A0A5B8;
}

.ss-sup.ss-contact .ss-tile:active {
   background: #FFF4F8;
   border-color: var(--sv-pink);
}

.ss-sup.ss-contact .ss-tile.is-on {
   border-color: var(--sv-pink);
   box-shadow: 0 0 0 1px var(--sv-pink) inset;
}

@media (min-width: 640px) {
   .ss-sup.ss-contact .ss-tile:hover,
   .ss-sup.ss-contact .ss-tile:focus-visible {
      transform: translateY(-2px);
      border-color: var(--sv-pink-line);
      box-shadow: var(--sv-shadow-hover);
      outline: none;
   }

   .ss-sup.ss-contact .ss-tile:hover .ss-tile-arrow {
      color: var(--sv-pink);
   }
}

.ss-sup.ss-contact .ss-tile .ss-suggest {
   background: var(--sv-pink);
}

.ss-sup.ss-contact .ss-back,
.ss-sup.ss-contact .ss-wizback {
   color: var(--sv-pink-dark);
   font-weight: 600;
   font-family: 'Poppins', sans-serif;
}

.ss-sup.ss-contact .ss-chip {
   background: var(--sv-pink-soft);
   color: var(--sv-pink-dark);
}

/* Checklist */
.ss-sup.ss-contact .ss-step {
   border-color: var(--sv-border);
   border-radius: 14px;
}

.ss-sup.ss-contact .ss-step.is-open {
   border-color: var(--sv-border-strong);
   box-shadow: var(--sv-shadow);
}

.ss-sup.ss-contact .ss-step-num {
   background: var(--sv-pink-soft);
   color: var(--sv-pink-dark);
}

.ss-sup.ss-contact .ss-step.is-open .ss-step-num {
   background: var(--sv-pink);
   color: #fff;
}

.ss-sup.ss-contact .ss-step-title {
   color: var(--sv-navy);
}

.ss-sup.ss-contact .ss-step-toggle,
.ss-sup.ss-contact .ss-checking,
.ss-sup.ss-contact .ss-fig figcaption b,
.ss-sup.ss-contact .ss-ec-hint strong,
.ss-sup.ss-contact .ss-req {
   color: var(--sv-pink-dark);
}

.ss-sup.ss-contact .ss-step-body {
   color: var(--sv-body);
}

.ss-sup.ss-contact .ss-step-body code {
   color: var(--sv-pink-dark);
   background: #FFF4F8;
}

.ss-sup.ss-contact .ss-fig img {
   border-color: var(--sv-border);
}

/* eSIM record card */
.ss-sup.ss-contact .ss-esim-card {
   border-color: var(--sv-border);
   border-radius: 16px;
}

.ss-sup.ss-contact .ss-ec-name {
   color: var(--sv-navy);
}

.ss-sup.ss-contact .ss-ec-state {
   background: var(--sv-pink-soft);
   color: var(--sv-pink-dark);
}

.ss-sup.ss-contact .ss-ec-state.ok { background: var(--sv-green-soft); color: var(--sv-green); }
.ss-sup.ss-contact .ss-ec-state.warn { background: #FFF1DD; color: #9A5A00; }
.ss-sup.ss-contact .ss-ec-state.bad { background: #FDECEC; color: #A12626; }

.ss-sup.ss-contact .ss-ec-stat {
   background: var(--sv-neutral);
   border-radius: 12px;
}

.ss-sup.ss-contact .ss-ec-stat .v {
   color: var(--sv-navy);
}

.ss-sup.ss-contact .ss-bar > span {
   background: var(--sv-pink);
}

.ss-sup.ss-contact .ss-terms {
   background: var(--sv-neutral);
   border-radius: 14px;
}

.ss-sup.ss-contact .ss-verdict {
   border-radius: 14px;
}

.ss-sup.ss-contact .ss-summary {
   background: #FFF4F8;
   border-color: var(--sv-pink-line);
   border-radius: 14px;
}

.ss-sup.ss-contact .ss-summary-title {
   color: var(--sv-pink-dark);
}

.ss-sup.ss-contact .ss-nudge {
   border-color: var(--sv-pink-line);
   border-radius: 16px;
   background: #FFF4F8;
}

.ss-sup.ss-contact .ss-nudge-t {
   color: var(--sv-navy);
}

.ss-sup.ss-contact .ss-nudge-t i {
   color: var(--sv-pink);
}

.ss-sup.ss-contact .ss-outcome {
   border-top-color: var(--sv-border);
}

/* Buttons: the inline styles square them off at 8px */
.ss-sup.ss-contact .uk-button,
.ss-sup.ss-contact .ss-login-cta .uk-button,
.ss-sup.ss-contact .ss-outcome-btns .uk-button,
.ss-sup.ss-contact .ss-fixed-btns .uk-button,
.ss-sup.ss-contact .ss-verdict .uk-button,
.ss-sup.ss-contact .ss-nudge .uk-button,
.ss-sup.ss-contact .ss-wiznext,
.ss-sup #contact-form .uk-button {
   border-radius: 999px;
}

/* Form fields */
.ss-sup #contact-form .uk-input,
.ss-sup #contact-form .uk-select,
.ss-sup #contact-form .uk-textarea,
.ss-sup.ss-contact .ss-in {
   border: 1px solid var(--sv-border);
   border-radius: 12px;
   background: #fff;
   color: var(--sv-navy);
   font-family: 'Poppins', sans-serif;
   transition: border-color .15s ease, box-shadow .15s ease;
}

.ss-sup #contact-form .uk-textarea {
   padding-top: 12px;
}

.ss-sup #contact-form .uk-input:focus,
.ss-sup #contact-form .uk-select:focus,
.ss-sup #contact-form .uk-textarea:focus,
.ss-sup.ss-contact .ss-in:focus {
   outline: none;
   border-color: var(--sv-pink);
   box-shadow: 0 0 0 3px rgba(232, 35, 110, 0.14);
}

.ss-sup #contact-form .uk-form-label {
   color: var(--sv-navy);
}

.ss-sup #contact-form .uk-checkbox:checked,
.ss-sup.ss-contact .uk-checkbox:checked {
   background-color: var(--sv-pink);
   border-color: var(--sv-pink);
}

/* Screenshot block (_contact_shots.php) */
.ss-sup.ss-contact .ss-shots {
   border-color: var(--sv-border);
   border-radius: 16px;
   background: #FAFBFD;
}

.ss-sup.ss-contact .ss-shot,
.ss-sup.ss-contact .ss-ask,
.ss-sup.ss-contact .ss-qr {
   border-color: var(--sv-border);
   border-radius: 14px;
}

.ss-sup.ss-contact .ss-shots-h,
.ss-sup.ss-contact .ss-shot-title,
.ss-sup.ss-contact .ss-ask-h,
.ss-sup.ss-contact .ss-qr-h {
   color: var(--sv-navy);
}

.ss-sup.ss-contact .ss-shot-num {
   background: var(--sv-pink);
}

.ss-sup.ss-contact .ss-pill {
   border-color: var(--sv-border);
   color: var(--sv-navy);
   font-family: 'Poppins', sans-serif;
}

.ss-sup.ss-contact .ss-pill.is-on {
   background: var(--sv-pink);
   border-color: var(--sv-pink);
   color: #fff;
}

.ss-sup.ss-contact .ss-file-btn {
   border-color: var(--sv-pink-line);
   border-radius: 14px;
   color: var(--sv-pink-dark);
}

.ss-sup.ss-contact .ss-file:focus-within .ss-file-btn,
.ss-sup.ss-contact .ss-file-btn:hover {
   border-color: var(--sv-pink);
   background: #FFF4F8;
}

.ss-sup.ss-contact .ss-badge {
   background: var(--sv-pink-soft);
   color: var(--sv-pink-dark);
}

/* "Other common questions" */
.ss-sup.ss-contact .uk-margin-large-top > h3 {
   font-size: 20px;
   font-weight: 700;
}

.ss-sup.ss-contact .ss-card-flat .uk-accordion > * + * {
   margin-top: 0;
   border-top: 1px solid #EEF1F6;
}

.ss-sup.ss-contact .ss-card .uk-accordion-title {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 14px;
   font-weight: 600;
   color: var(--sv-navy);
   text-decoration: none;
}

.no-flexgap .ss-sup.ss-contact .ss-card .uk-accordion-title > * + * {
   margin-left: 14px;
}

.no-flexgap .ss-sup.ss-contact .ss-card .uk-accordion-title > :only-child {
   margin-right: 14px;
}

.ss-sup.ss-contact .ss-card .uk-accordion-title::before {
   content: none;
}

.ss-sup.ss-contact .ss-card .uk-accordion-title::after {
   content: "\f078";
   flex: 0 0 auto;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 26px;
   height: 26px;
   border-radius: 50%;
   background: var(--sv-neutral);
   color: var(--sv-slate);
   font-family: 'Font Awesome 6 Free';
   font-weight: 900;
   font-size: 10px;
   transition: transform .2s ease;
}

.ss-sup.ss-contact .ss-card .uk-open > .uk-accordion-title::after {
   transform: rotate(180deg);
   background: var(--sv-pink-soft);
   color: var(--sv-pink);
}

.ss-sup.ss-contact .ss-card .uk-accordion-content {
   color: var(--sv-body);
   line-height: 1.65;
}

/* Phone upload page */
.ss-sup.ss-upload .ss-up-card,
.ss-sup.ss-upload .ss-wiz {
   border: 1px solid var(--sv-border);
   border-radius: 20px;
   background: #fff;
   box-shadow: var(--sv-shadow);
}

.ss-sup.ss-upload .ss-up-h {
   font-weight: 700;
   color: var(--sv-navy);
}

.ss-sup.ss-upload .ss-up-sub,
.ss-sup.ss-upload .ss-up-one,
.ss-sup.ss-upload .ss-wizcount {
   color: var(--sv-slate);
}

.ss-sup.ss-upload .ss-wizbar {
   height: 6px;
   background: var(--sv-pink-soft);
}

.ss-sup.ss-upload .ss-wizfill {
   background: var(--sv-pink);
}

/* ------------------------------------------------------------------ */
/* /device-compatibility                                               */
/* ------------------------------------------------------------------ */
.ss-devices .sv-hero {
   position: relative;
   z-index: 3;
   text-align: center;
}

.ss-devices .sv-lead {
   margin-left: auto;
   margin-right: auto;
}

.ss-devices .sv-search-wrap {
   max-width: 640px;
   margin: 22px auto 0;
   text-align: left;
}

.ss-devices .sv-search {
   margin: 0 auto;
   max-width: none;
}

.ss-devices .sv-search input {
   padding-right: 52px !important;
}

.ss-devices .sv-search input::-webkit-search-cancel-button,
.ss-devices .sv-search input::-webkit-search-decoration {
   -webkit-appearance: none;
   appearance: none;
}

.ss-devices .dc-clear {
   position: absolute;
   right: 9px;
   top: 50%;
   transform: translateY(-50%);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 36px;
   height: 36px;
   padding: 0;
   border: 0;
   border-radius: 50%;
   background: var(--sv-neutral);
   color: var(--sv-slate);
   font-size: 15px;
   cursor: pointer;
}

.ss-devices .dc-clear:hover {
   background: #E7EAF1;
   color: var(--sv-navy);
}

.ss-devices .dc-clear:focus-visible {
   outline: 2px solid var(--sv-pink);
   outline-offset: 2px;
}

.ss-devices .dc-count {
   margin: 12px 0 0;
   font-size: 14px;
   font-weight: 500;
   color: var(--sv-slate);
   text-align: center;
}

.ss-devices .sv-body {
   padding-top: 24px;
   padding-bottom: 56px;
}

/* Before you buy strip */
.ss-devices .dc-before {
   padding: 18px 20px;
   border: 1px solid var(--sv-border);
   border-radius: 16px;
   background: #fff;
}

.ss-devices .dc-before-h {
   margin: 0 0 12px;
   font-size: 16px;
   font-weight: 700;
   color: var(--sv-navy);
}

.ss-devices .dc-before-list {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   grid-gap: 12px;
   gap: 12px;
   margin: 0;
   padding: 0;
   list-style: none;
}

.ss-devices .dc-before-list li {
   display: flex;
   align-items: flex-start;
   gap: 10px;
   margin: 0;
   font-size: 14px;
   line-height: 1.55;
   color: var(--sv-body);
}

.no-flexgap .ss-devices .dc-before-list li > * + * {
   margin-left: 10px;
}

.no-flexgap .ss-devices .dc-before-list li > :only-child {
   margin-right: 10px;
}

.ss-devices .dc-before-list li > i {
   flex: 0 0 auto;
   width: 18px;
   margin-top: 3px;
   color: var(--sv-navy);
   text-align: center;
}

.ss-devices .dc-before-list strong {
   color: var(--sv-navy);
   font-weight: 600;
}

@media (min-width: 960px) {
   .ss-devices .dc-before {
      padding: 20px 24px;
   }

   .ss-devices .dc-before-list {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      grid-gap: 20px;
      gap: 20px;
   }
}

.ss-devices .dc-verified {
   display: flex;
   align-items: center;
   gap: 8px;
   margin: 22px 0 0;
   font-size: 15px;
   font-weight: 600;
   color: var(--sv-navy);
}

.no-flexgap .ss-devices .dc-verified > * + * {
   margin-left: 8px;
}

.no-flexgap .ss-devices .dc-verified > :only-child {
   margin-right: 8px;
}

.ss-devices .dc-verified i {
   color: var(--sv-green);
   font-size: 18px;
}

/* Type tabs and brand chips */
.ss-devices .dc-filters {
   margin-top: 16px;
   min-width: 0;
}

.ss-devices.dc-searching .dc-filters {
   display: none;
}

.ss-devices .dc-tabs {
   display: inline-flex;
   max-width: 100%;
   gap: 4px;
   padding: 4px;
   border-radius: 14px;
   background: #E9ECF2;
   overflow-x: auto;
   scrollbar-width: none;
   -webkit-overflow-scrolling: touch;
}

.no-flexgap .ss-devices .dc-tabs > * + * {
   margin-left: 4px;
}

.no-flexgap .ss-devices .dc-tabs > :only-child {
   margin-right: 4px;
}

.ss-devices .dc-tabs::-webkit-scrollbar,
.ss-devices .dc-chips::-webkit-scrollbar {
   display: none;
}

.ss-devices .dc-tab {
   flex: 0 0 auto;
   display: inline-flex;
   align-items: center;
   gap: 6px;
   min-height: 40px;
   margin: 0;
   padding: 0 14px;
   border: 0;
   border-radius: 10px;
   background: transparent;
   font-family: 'Poppins', sans-serif;
   font-size: 14px;
   font-weight: 600;
   color: var(--sv-slate);
   white-space: nowrap;
   cursor: pointer;
}

.no-flexgap .ss-devices .dc-tab > * + * {
   margin-left: 6px;
}

.no-flexgap .ss-devices .dc-tab > :only-child {
   margin-right: 6px;
}

.ss-devices .dc-tab:hover {
   color: var(--sv-navy);
}

.ss-devices .dc-tab[aria-selected="true"] {
   background: #fff;
   color: var(--sv-navy);
   box-shadow: 0 1px 4px rgba(20, 24, 58, 0.12);
}

.ss-devices .dc-tab:focus-visible,
.ss-devices .dc-chip:focus-visible,
.ss-devices .dc-link:focus-visible {
   outline: 2px solid var(--sv-pink);
   outline-offset: 2px;
}

.ss-devices .dc-tab-n {
   font-size: 12px;
   font-weight: 500;
   color: var(--sv-slate);
}

.ss-devices .dc-chips {
   display: flex;
   flex-wrap: nowrap;
   gap: 8px;
   margin-top: 12px;
   padding-bottom: 2px;
   overflow-x: auto;
   scrollbar-width: none;
   -webkit-overflow-scrolling: touch;
}

.no-flexgap .ss-devices .dc-chips > * + * {
   margin-left: 8px;
}

.no-flexgap .ss-devices .dc-chips > :only-child {
   margin-right: 8px;
}

@media (min-width: 960px) {
   .ss-devices .dc-chips {
      flex-wrap: wrap;
      overflow: visible;
   }

   .no-flexgap .ss-devices .dc-chips > * + * {
      margin-left: 0;
   }

   .no-flexgap .ss-devices .dc-chips > :only-child {
      margin-right: 0;
   }

   .no-flexgap .ss-devices .dc-chips > * {
      margin-right: 8px;
      margin-bottom: 8px;
   }

   .no-flexgap .ss-devices .dc-chips > :last-child {
      margin-right: 0;
   }
}

.ss-devices .dc-chip {
   flex: 0 0 auto;
   height: 34px;
   margin: 0;
   padding: 0 14px;
   border: 1px solid var(--sv-border);
   border-radius: 999px;
   background: #fff;
   font-family: 'Poppins', sans-serif;
   font-size: 13px;
   font-weight: 500;
   color: var(--sv-body);
   white-space: nowrap;
   cursor: pointer;
}

.ss-devices .dc-chip {
   display: inline-flex;
   align-items: center;
}

.ss-devices .dc-chip .dc-bico {
   margin-right: 6px;
   vertical-align: middle;
}

.ss-devices .dc-chip[data-brand] {
   padding-left: 6px;
}

.ss-devices .dc-chip[data-brand=""] {
   padding-left: 14px;
}

.ss-devices .dc-chip:hover {
   border-color: var(--sv-border-strong);
   color: var(--sv-navy);
}

.ss-devices .dc-chip[aria-pressed="true"] {
   border-color: var(--sv-navy);
   background: var(--sv-navy);
   color: #fff;
}

/* Device list */
.ss-devices .dc-list {
   margin-top: 8px;
}

.ss-devices .dc-type {
   margin-top: 28px;
}

.ss-devices .dc-type-h {
   display: flex;
   align-items: center;
   gap: 10px;
   margin: 0 0 4px;
   font-size: 20px;
   font-weight: 700;
   line-height: 1.25;
   color: var(--sv-navy);
}

.no-flexgap .ss-devices .dc-type-h > * + * {
   margin-left: 10px;
}

.no-flexgap .ss-devices .dc-type-h > :only-child {
   margin-right: 10px;
}

.ss-devices .dc-type-h i {
   color: var(--sv-pink);
   font-size: 17px;
}

/* With the script running the tabs label the list, unless searching. */
.ss-devices.dc-js .dc-type-h {
   display: none;
}

.ss-devices.dc-js.dc-searching .dc-type-h {
   display: flex;
}

.ss-devices.dc-js .dc-type {
   margin-top: 8px;
}

.ss-devices.dc-js.dc-searching .dc-type {
   margin-top: 28px;
}

.ss-devices .dc-brand {
   margin-top: 18px;
}

.ss-devices .dc-brand-h {
   display: flex;
   align-items: center;
   gap: 8px;
   margin: 0 0 8px;
   font-size: 13px;
   font-weight: 700;
   line-height: 1.3;
   letter-spacing: .4px;
   text-transform: uppercase;
   color: var(--sv-navy);
}

.no-flexgap .ss-devices .dc-brand-h > * + * {
   margin-left: 8px;
}

.no-flexgap .ss-devices .dc-brand-h > :only-child {
   margin-right: 8px;
}

.ss-devices .dc-brand-n {
   font-weight: 500;
   letter-spacing: 0;
   color: var(--sv-slate);
}

.ss-devices .dc-grid {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   grid-gap: 8px;
   gap: 8px;
   margin: 0;
   padding: 0;
   list-style: none;
}

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

@media (min-width: 960px) {
   .ss-devices .dc-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
   }
}

/* Brand icons in light neutral rounded squares */
.ss-devices .dc-bico {
   flex: 0 0 auto;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 28px;
   height: 28px;
   border-radius: 8px;
   background: var(--sv-neutral);
   color: var(--sv-navy);
   font-size: 15px;
   letter-spacing: 0;
}

.ss-devices .dc-bico-sm {
   width: 24px;
   height: 24px;
   border-radius: 7px;
   font-size: 13px;
}

.ss-devices .dc-bico img {
   display: block;
   width: auto;
   height: 16px;
   max-width: 100%;
   object-fit: contain;
}

.ss-devices .dc-bico-sm img {
   height: 14px;
}

/* Wordmarks (Samsung, Sony, ...) get a wider box, sized by height. */
.ss-devices .dc-bico-wide {
   box-sizing: border-box;
   width: 64px;
   padding: 0 7px;
}

.ss-devices .dc-bico-wide img {
   height: auto;
   max-height: 16px;
   width: 100%;
}

.ss-devices .dc-bico-sm.dc-bico-wide {
   width: 52px;
   padding: 0 6px;
}

.ss-devices .dc-bico-sm.dc-bico-wide img {
   max-height: 14px;
}

.ss-devices .dc-dev {
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: center;
   gap: 4px;
   min-width: 0;
   margin: 0;
   padding: 9px 10px 9px 10px;
   border: 1px solid var(--sv-border);
   border-radius: 12px;
   background: #fff;
}

.no-flexgap .ss-devices .dc-dev > * + * {
   margin-top: 4px;
}

.ss-devices .dc-dev-open {
   z-index: 5;
}

.ss-devices .dc-dev-row {
   display: flex;
   align-items: center;
   gap: 10px;
   min-width: 0;
}

.no-flexgap .ss-devices .dc-dev-row > * + * {
   margin-left: 10px;
}

.no-flexgap .ss-devices .dc-dev-row > :only-child {
   margin-right: 10px;
}

.ss-devices .dc-dev-name {
   flex: 1 1 auto;
   min-width: 0;
   font-size: 15px;
   font-weight: 600;
   line-height: 1.35;
   color: var(--sv-navy);
   overflow-wrap: anywhere;
}

.ss-devices .dc-info {
   flex: 0 0 auto;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 28px;
   height: 28px;
   margin: -2px 0;
   padding: 0;
   border: 1px solid var(--sv-border);
   border-radius: 50%;
   background: #fff;
   color: var(--sv-slate);
   font-size: 11px;
   cursor: pointer;
}

.ss-devices .dc-info:hover,
.ss-devices .dc-info[aria-expanded="true"] {
   border-color: var(--sv-border-strong);
   background: var(--sv-neutral);
   color: var(--sv-navy);
}

.ss-devices .dc-info:focus-visible {
   outline: 2px solid var(--sv-pink);
   outline-offset: 2px;
}

/* Without the script the note shows inline under the name. */
.ss-devices .dc-dev-note {
   display: block;
   padding-left: 34px;
   font-size: 12.5px;
   line-height: 1.45;
   color: var(--sv-slate);
   overflow-wrap: anywhere;
}

.ss-devices .dc-dev-note i {
   margin-right: 2px;
   color: #8A8FA3;
}

/* With the script it becomes a popover behind the info button. */
.ss-devices.dc-js .dc-dev-note {
   display: none;
   position: absolute;
   top: calc(100% + 6px);
   right: 0;
   z-index: 6;
   box-sizing: border-box;
   width: max-content;
   max-width: 280px;
   padding: 10px 12px;
   border: 1px solid var(--sv-border);
   border-radius: 12px;
   background: #fff;
   box-shadow: 0 10px 28px rgba(20, 24, 58, 0.14);
   font-size: 13px;
   line-height: 1.5;
   color: var(--sv-body);
}

.ss-devices.dc-js .dc-dev-note.is-open {
   display: block;
}

.ss-devices.dc-js .dc-dev-note i {
   display: none;
}

.ss-devices.dc-js .dc-dev-note.dc-pop-left {
   left: 0;
   right: auto;
}

.ss-devices.dc-js .dc-dev-note.dc-pop-full {
   left: 0;
   right: 0;
   width: auto;
   max-width: none;
}

.ss-devices.dc-js .dc-dev-note.dc-pop-up {
   top: auto;
   bottom: calc(100% + 6px);
}

.ss-devices .dc-none {
   margin: 20px 0 0;
   font-size: 15px;
   color: var(--sv-slate);
}

.ss-devices .dc-link {
   padding: 0;
   border: 0;
   background: none;
   font: inherit;
   font-weight: 600;
   color: var(--sv-pink-dark);
   text-decoration: underline;
   cursor: pointer;
}

/* Empty search state */
.ss-devices .dc-empty {
   margin-top: 24px;
   padding: 22px 20px;
   border: 1px solid var(--sv-border);
   border-radius: 16px;
   background: #fff;
}

.ss-devices .dc-empty-h {
   margin: 0 0 8px;
   font-size: 19px;
   font-weight: 700;
   line-height: 1.3;
   color: var(--sv-navy);
   overflow-wrap: anywhere;
}

.ss-devices .dc-empty p,
.ss-devices .dc-empty li {
   font-size: 15px;
   line-height: 1.6;
   color: var(--sv-body);
}

.ss-devices .dc-empty p {
   margin: 0;
}

.ss-devices .dc-empty-list {
   margin: 12px 0;
   padding-left: 20px;
}

.ss-devices .dc-empty-list li + li {
   margin-top: 6px;
}

.ss-devices .dc-empty strong {
   color: var(--sv-navy);
}

/* Bottom CTA */
.ss-devices .dc-cta {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   margin-top: 40px;
   padding: 20px;
   border: 1px solid var(--sv-border);
   border-radius: 16px;
   background: #fff;
}

.no-flexgap .ss-devices .dc-cta > * {
   margin-right: 16px;
   margin-bottom: 16px;
}

.no-flexgap .ss-devices .dc-cta > :last-child {
   margin-right: 0;
}

.ss-devices .dc-cta-h {
   margin: 0;
   font-size: 18px;
   font-weight: 700;
   color: var(--sv-navy);
}

.ss-devices .dc-cta p {
   margin: 4px 0 0;
   font-size: 15px;
   color: var(--sv-slate);
}

.ss-devices .dc-cta-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-height: 46px;
   padding: 0 24px;
   border-radius: 999px;
   background: var(--sv-pink);
   color: #fff !important;
   font-weight: 600;
   text-decoration: none !important;
}

.ss-devices .dc-cta-btn:hover {
   background: var(--sv-pink-dark);
}

@media (max-width: 639px) {
   .ss-devices .dc-cta-btn {
      width: 100%;
   }
}

/* Late fixes: keep these after the rules they refine. */
.ss-sup.ss-contact .ss-tile > .ss-tile-arrow {
   color: #A0A5B8;
   font-size: .85rem;
}

.ss-help-page .uk-card-default > .uk-card-title {
   font-size: 22px;
   font-weight: 700;
}

.ss-help-page .uk-list h4 {
   font-size: 17px;
}

/* ------------------------------------------------------------------ */
/* /support/delete-account (delete_account.php)                        */
/* Overrides the template's inline <style>, so selectors carry         */
/* .ss-sup.ss-delete.                                                  */
/* ------------------------------------------------------------------ */
.ss-sup.ss-delete {
   --sv-red: #B3261E;
   --sv-red-dark: #8F1D17;
   --sv-red-soft: #FDF1EF;
   --sv-red-line: #F2CFCA;
   background: var(--sv-hero);
}

.ss-sup.ss-delete::before {
   content: none;
}

.ss-sup.ss-delete .uk-container {
   padding-left: 16px;
   padding-right: 16px;
}

.ss-sup.ss-delete .ss-login-card {
   max-width: 640px;
   box-sizing: border-box;
   border: 1px solid var(--sv-border);
   border-radius: 20px;
   box-shadow: var(--sv-shadow);
   padding: 40px 40px !important;
}

.ss-sup.ss-delete .ss-login-eyebrow {
   margin: 0 0 8px;
   font-size: 13.5px;
   font-weight: 600;
   letter-spacing: 0;
   text-transform: none;
   color: var(--sv-slate);
}

.ss-sup.ss-delete .ss-login-title {
   font-family: 'Poppins', sans-serif;
   letter-spacing: -0.2px;
   color: var(--sv-navy);
}

.ss-sup.ss-delete .ss-login-sub {
   color: var(--sv-slate);
}

/* "How long it takes" */
.ss-sup.ss-delete .ss-disclosure {
   border: 1px solid var(--sv-border);
   border-radius: 16px;
   background: var(--sv-neutral);
   color: var(--sv-body);
}

.ss-sup.ss-delete .ss-disclosure h3 {
   margin-top: 0 !important;
   font-size: 15px;
   letter-spacing: 0;
   text-transform: none;
   color: var(--sv-navy);
}

.ss-sup.ss-delete .ss-disclosure strong {
   color: var(--sv-navy);
}

/* Fields */
.ss-sup.ss-delete .ss-login-card .uk-form-label {
   color: var(--sv-navy);
}

.ss-sup.ss-delete .ss-login-card .uk-input.uk-form-large,
.ss-sup.ss-delete .ss-login-card .uk-textarea {
   border: 1px solid var(--sv-border);
   border-radius: 12px;
   background: #fff;
   color: var(--sv-navy);
   font-family: 'Poppins', sans-serif;
}

.ss-sup.ss-delete .ss-login-card .uk-input.uk-form-large:focus,
.ss-sup.ss-delete .ss-login-card .uk-textarea:focus {
   border-color: var(--sv-navy);
   box-shadow: 0 0 0 3px rgba(20, 24, 58, 0.10);
}

.ss-sup.ss-delete .ss-checkbox-row {
   color: var(--sv-body);
}

.ss-sup.ss-delete .ss-checkbox-row input[type="checkbox"] {
   accent-color: var(--sv-navy);
}

/* The "this is permanent" confirmation reads as a calm warning card. */
.ss-sup.ss-delete .sv-danger-row {
   margin: 20px 0 12px;
   padding: 14px 16px;
   border: 1px solid var(--sv-red-line);
   border-left: 4px solid var(--sv-red);
   border-radius: 14px;
   background: var(--sv-red-soft);
   color: #5C1A15;
}

.ss-sup.ss-delete .sv-danger-row strong {
   color: var(--sv-red);
}

.ss-sup.ss-delete .sv-danger-row input[type="checkbox"] {
   accent-color: var(--sv-red);
}

/* Destructive submit: red, pill shaped, clearly not the pink buy button. */
.ss-sup.ss-delete .ss-login-card .uk-button-primary.uk-button-large {
   border-radius: 999px;
   background: var(--sv-red) !important;
   color: #fff !important;
   font-family: 'Poppins', sans-serif;
   text-transform: none;
   box-shadow: 0 6px 16px -6px rgba(179, 38, 30, 0.45);
   height: auto !important;
   min-height: 52px;
   padding: 12px 20px;
   line-height: 1.3;
   white-space: normal;
}

@media (max-width: 640px) {
   .ss-sup.ss-delete .ss-login-card .uk-button-primary.uk-button-large {
      min-height: 56px;
   }
}

.ss-sup.ss-delete .ss-login-card .uk-button-primary.uk-button-large:hover,
.ss-sup.ss-delete .ss-login-card .uk-button-primary.uk-button-large:focus {
   background: var(--sv-red-dark) !important;
   filter: none;
}

.ss-sup.ss-delete .ss-error {
   border-radius: 14px;
}

.ss-sup.ss-delete .ss-success {
   border-radius: 14px;
   background: var(--sv-green-soft);
   color: var(--sv-green);
}

/* Inline-styled links (privacy policy, email) */
.ss-sup.ss-delete .ss-login-card a[style] {
   color: var(--sv-pink-dark) !important;
}

.ss-sup.ss-delete .ss-login-card > p[style] {
   color: var(--sv-slate) !important;
}

@media (max-width: 640px) {
   .ss-sup.ss-delete .ss-login-card {
      padding: 26px 18px !important;
      border-radius: 18px;
   }

   .ss-sup.ss-delete .uk-container.uk-margin-large-top {
      margin-top: 24px !important;
      margin-bottom: 32px !important;
   }
}

/* ------------------------------------------------------------------ */
/* Help Center search results (support_home.php, ajax/searchContent)   */
/* ------------------------------------------------------------------ */
.ss-sup.ss-help-home .sv-search-box {
   max-width: 620px;
}

.ss-sup.ss-help-home .sv-sr {
   margin-top: 10px;
   max-height: 70vh;
   overflow-y: auto;
   padding: 8px;
   border: 1px solid var(--sv-border);
   border-radius: 20px;
   background: #fff;
   box-shadow: 0 10px 30px rgba(20, 24, 58, 0.12);
   transition: opacity .15s ease;
}

.ss-sup.ss-help-home .sv-sr.is-loading .sv-sr-group {
   opacity: .55;
}

.ss-sup.ss-help-home .sv-sr-status {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 14px 12px;
   font-size: 14.5px;
   color: var(--sv-slate);
}

.no-flexgap .ss-sup.ss-help-home .sv-sr-status > * + * {
   margin-left: 10px;
}

.no-flexgap .ss-sup.ss-help-home .sv-sr-status > :only-child {
   margin-right: 10px;
}

.ss-sup.ss-help-home .sv-sr-status i {
   color: var(--sv-pink);
}

.ss-sup.ss-help-home .sv-sr-group + .sv-sr-group {
   margin-top: 4px;
   padding-top: 4px;
   border-top: 1px solid #EEF1F6;
}

.ss-sup.ss-help-home .sv-sr-label {
   margin: 8px 12px 4px;
   font-size: 12px;
   font-weight: 600;
   letter-spacing: .06em;
   text-transform: uppercase;
   color: #8A8FA3;
}

.ss-sup.ss-help-home .sv-sr-list {
   list-style: none;
   margin: 0;
   padding: 0;
}

.ss-sup.ss-help-home .sv-sr-row {
   box-sizing: border-box;
   display: flex;
   align-items: center;
   gap: 12px;
   width: 100%;
   margin: 0;
   padding: 10px 12px;
   border: 0;
   border-radius: 14px;
   background: transparent;
   font-family: 'Poppins', sans-serif;
   text-align: left;
   color: var(--sv-navy);
   text-decoration: none;
   cursor: pointer;
}

.no-flexgap .ss-sup.ss-help-home .sv-sr-row > * + * {
   margin-left: 12px;
}

.no-flexgap .ss-sup.ss-help-home .sv-sr-row > :only-child {
   margin-right: 12px;
}

/* Same without :focus-visible, which Safari before 15.4 drops together
   with the whole selector list. */
.ss-sup.ss-help-home .sv-sr-row:hover,
.ss-sup.ss-help-home .sv-sr-row.is-active {
   background: var(--sv-neutral);
   color: var(--sv-navy);
   text-decoration: none;
   outline: none;
}

.ss-sup.ss-help-home .sv-sr-row:hover,
.ss-sup.ss-help-home .sv-sr-row.is-active,
.ss-sup.ss-help-home .sv-sr-row:focus-visible {
   background: var(--sv-neutral);
   color: var(--sv-navy);
   text-decoration: none;
   outline: none;
}

.ss-sup.ss-help-home .sv-sr-row.is-active {
   box-shadow: inset 0 0 0 2px rgba(232, 35, 110, 0.25);
}

.ss-sup.ss-help-home .sv-sr-ico {
   flex: 0 0 auto;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 36px;
   height: 36px;
   border-radius: 10px;
   background: var(--sv-pink-soft);
   color: var(--sv-pink);
   font-size: 15px;
}

.ss-sup.ss-help-home .sv-sr-link .sv-sr-ico {
   background: #E9EAF2;
   color: var(--sv-navy);
}

.ss-sup.ss-help-home .sv-sr-text {
   flex: 1 1 auto;
   min-width: 0;
   display: flex;
   flex-direction: column;
   gap: 2px;
}

.no-flexgap .ss-sup.ss-help-home .sv-sr-text > * + * {
   margin-top: 2px;
}

.ss-sup.ss-help-home .sv-sr-title {
   font-size: 15px;
   font-weight: 600;
   line-height: 1.35;
   color: var(--sv-navy);
}

.ss-sup.ss-help-home .sv-sr-sub {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   font-size: 13.5px;
   line-height: 1.45;
   color: var(--sv-slate);
}

.ss-sup.ss-help-home .sv-sr-chev {
   flex: 0 0 auto;
   font-size: 11px;
   color: #A0A5B8;
   transition: transform .2s ease, color .15s ease;
}

.ss-sup.ss-help-home .sv-sr-faq.is-open .sv-sr-chev {
   transform: rotate(180deg);
   color: var(--sv-pink);
}

.ss-sup.ss-help-home .sv-sr-faq.is-open .sv-sr-preview {
   display: none;
}

.ss-sup.ss-help-home .sv-sr-faq.is-open {
   margin: 4px 0;
   border-radius: 14px;
   background: #FFF6F9;
}

.ss-sup.ss-help-home .sv-sr-faq.is-open > .sv-sr-row:hover,
.ss-sup.ss-help-home .sv-sr-faq.is-open > .sv-sr-row.is-active {
   background: transparent;
}

.ss-sup.ss-help-home .sv-sr-answer {
   padding: 0 14px 14px 60px;
}

.ss-sup.ss-help-home .sv-sr-answer p {
   margin: 0 0 8px;
   font-size: 14.5px;
   line-height: 1.65;
   color: var(--sv-body);
}

@media (max-width: 479px) {
   .ss-sup.ss-help-home .sv-sr-answer {
      padding-left: 14px;
   }
}

.ss-sup.ss-help-home .sv-sr-empty {
   padding: 16px 14px;
}

.ss-sup.ss-help-home .sv-sr-empty p {
   margin: 0 0 4px;
   font-size: 14.5px;
   line-height: 1.55;
   color: var(--sv-slate);
}

.ss-sup.ss-help-home .sv-sr-empty .sv-sr-empty-h {
   font-weight: 600;
   color: var(--sv-navy);
}

.ss-sup.ss-help-home .sv-sr-empty-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   margin-top: 14px;
}

.no-flexgap .ss-sup.ss-help-home .sv-sr-empty-actions > * {
   margin-right: 10px;
   margin-bottom: 10px;
}

.no-flexgap .ss-sup.ss-help-home .sv-sr-empty-actions > :last-child {
   margin-right: 0;
}

.ss-sup.ss-help-home .sv-sr-empty-actions .uk-button {
   min-height: 44px;
   line-height: 44px;
   padding: 0 22px;
}

/* ------------------------------------------------------------------ */
/* /support/report-an-issue (report_issue.php)                         */
/* ------------------------------------------------------------------ */
.ss-sup.ss-report .sv-body {
   padding-top: 24px;
   padding-bottom: 48px;
}

.ss-sup.ss-report .ss-ri-card {
   max-width: 760px;
}

.ss-sup.ss-report .ss-ri-intro {
   margin: 0 0 20px;
   font-size: 14.5px;
   color: var(--sv-slate);
}

.ss-sup.ss-report .uk-form-label {
   color: var(--sv-navy);
   font-weight: 600;
}

.ss-sup.ss-report .ss-ri-opt {
   font-weight: 400;
   color: var(--sv-slate);
}

.ss-sup.ss-report .uk-input,
.ss-sup.ss-report .uk-select,
.ss-sup.ss-report .uk-textarea {
   border: 1px solid var(--sv-border);
   border-radius: 12px;
   background: #fff;
   color: var(--sv-navy);
   font-family: 'Poppins', sans-serif;
   transition: border-color .15s ease, box-shadow .15s ease;
}

.ss-sup.ss-report .uk-textarea {
   padding-top: 12px;
}

.ss-sup.ss-report .uk-input:focus,
.ss-sup.ss-report .uk-select:focus,
.ss-sup.ss-report .uk-textarea:focus {
   outline: none;
   border-color: var(--sv-pink);
   box-shadow: 0 0 0 3px rgba(232, 35, 110, 0.14);
}

.ss-sup.ss-report .ss-ri-hint {
   margin: 8px 0 0;
   font-size: 13px;
   color: var(--sv-slate);
}

/* Screenshot picker: one row per image, the next empty one revealed by JS */
.ss-sup.ss-report .ss-ri-shots {
   display: grid;
   grid-gap: 8px;
   gap: 8px;
   margin-top: 6px;
}

.ss-sup.ss-report .ss-ri-shot {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 10px;
}

.no-flexgap .ss-sup.ss-report .ss-ri-shot > * {
   margin-right: 10px;
   margin-bottom: 10px;
}

.no-flexgap .ss-sup.ss-report .ss-ri-shot > :last-child {
   margin-right: 0;
}

.ss-sup.ss-report .ss-ri-pick {
   position: relative;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   min-height: 44px;
   padding: 0 18px;
   border: 1px dashed var(--sv-border-strong);
   border-radius: 12px;
   background: #fff;
   color: var(--sv-navy);
   font-size: 14.5px;
   font-weight: 600;
   cursor: pointer;
}

.no-flexgap .ss-sup.ss-report .ss-ri-pick > * + * {
   margin-left: 8px;
}

.no-flexgap .ss-sup.ss-report .ss-ri-pick > :only-child {
   margin-right: 8px;
}

.ss-sup.ss-report .ss-ri-pick:hover,
.ss-sup.ss-report .ss-ri-pick:focus-within {
   border-color: var(--sv-navy);
}

.ss-sup.ss-report .ss-ri-pick.is-set {
   display: none;
}

.ss-sup.ss-report .ss-ri-file {
   position: absolute;
   width: 1px;
   height: 1px;
   opacity: 0;
   overflow: hidden;
}

.ss-sup.ss-report .ss-ri-name {
   min-width: 0;
   max-width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   padding: 10px 14px;
   border: 1px solid var(--sv-border);
   border-radius: 12px;
   background: var(--sv-neutral);
   font-size: 14px;
   color: var(--sv-navy);
}

.ss-sup.ss-report .ss-ri-remove {
   padding: 6px 4px;
   border: 0;
   background: none;
   color: var(--sv-pink-dark);
   font-family: 'Poppins', sans-serif;
   font-size: 14px;
   font-weight: 600;
   cursor: pointer;
}

.ss-sup.ss-report .ss-ri-remove:hover {
   text-decoration: underline;
}

.ss-sup.ss-report .ss-ri-shot-err {
   margin-top: 10px;
}

.ss-sup.ss-report .ss-ri-done .sv-h2 {
   margin-top: 14px;
   margin-bottom: 8px;
}

.ss-sup.ss-report .ss-ri-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   margin-top: 18px;
}

.no-flexgap .ss-sup.ss-report .ss-ri-actions > * {
   margin-right: 10px;
   margin-bottom: 10px;
}

.no-flexgap .ss-sup.ss-report .ss-ri-actions > :last-child {
   margin-right: 0;
}