/* Sbaya Mobile — Help Center brand skin.
   Built against DESIGN-METHODOLOGY.md from the start (not spot-patched
   after the fact): light page, near-black text, white cards with a
   border, blue/cyan as accent only, real hover/focus states, one
   consistent container width. This page uses Elementor's legacy
   section/column architecture (not the newer container system), so
   selectors target elementor-section/-column directly. */

.elementor-16885{
  --paper:#FAFAFC; --elev:#F1F2F6; --card:#FFFFFF;
  --line:#E5E6EC; --ink:#0F1115; --soft:#565E6B;
  --blue:#29ABE2; --cyan:#49E0FF;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  color:var(--ink);
}
.elementor-16885 .elementor-section{ max-width:1440px !important; margin:0 auto !important; }
.elementor-16885 .elementor-section.elementor-section-boxed > .elementor-container{
  max-width:1440px !important;
  padding-left:clamp(24px,4vw,64px) !important;
  padding-right:clamp(24px,4vw,64px) !important;
}
.elementor-16885 > .elementor-section{
  padding-top:clamp(40px,6vw,64px) !important;
  padding-bottom:clamp(40px,6vw,64px) !important;
}

/* Page title */
.elementor-16885 h1.elementor-heading-title{
  font-size:clamp(28px,3.6vw,42px) !important; font-weight:800 !important;
  line-height:1.15 !important; color:var(--ink) !important;
}

/* Category tiles — now real links, give them a real card + hover state */
.elementor-16885 .elementor-icon-list-items{ list-style:none; margin:0; padding:0; }
.elementor-16885 .elementor-icon-list-item{
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:20px; text-align:center; transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.elementor-16885 .elementor-icon-list-item:hover{
  background:var(--elev); border-color:var(--blue); transform:translateY(-2px);
}
.elementor-16885 .elementor-icon-list-item a{
  display:flex !important; flex-direction:column; align-items:center; gap:10px;
  text-decoration:none !important;
}
.elementor-16885 .elementor-icon-list-icon{
  width:44px; height:44px; border-radius:50%;
  background:linear-gradient(100deg,var(--cyan),var(--blue));
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
/* Elementor's icon-list SVGs render with real path data but stay
   invisible in this widget context — rather than keep chasing that
   render quirk, hide it and draw a clean icon per category via a
   mask-image ::before, matched by each widget's real Elementor ID. */
.elementor-16885 .elementor-icon-list-icon svg{ display:none; }
.elementor-16885 .elementor-icon-list-icon::before{
  content:''; display:block; width:20px; height:20px;
  background-color:#02141F;
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
}
.elementor-16885 .elementor-element-81ae7e7 .elementor-icon-list-icon::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}
.elementor-16885 .elementor-element-5ecfdf2 .elementor-icon-list-icon::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3Cpolyline points='3.27 6.96 12 12.01 20.73 6.96'/%3E%3Cline x1='12' y1='22.08' x2='12' y2='12'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3Cpolyline points='3.27 6.96 12 12.01 20.73 6.96'/%3E%3Cline x1='12' y1='22.08' x2='12' y2='12'/%3E%3C/svg%3E");
}
.elementor-16885 .elementor-element-6ea2801 .elementor-icon-list-icon::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='4' width='22' height='16' rx='2' ry='2'/%3E%3Cline x1='1' y1='10' x2='23' y2='10'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='4' width='22' height='16' rx='2' ry='2'/%3E%3Cline x1='1' y1='10' x2='23' y2='10'/%3E%3C/svg%3E");
}
.elementor-16885 .elementor-element-55949c7 .elementor-icon-list-icon::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='3' width='15' height='13'/%3E%3Cpolygon points='16 8 20 8 23 11 23 16 16 16 16 8'/%3E%3Ccircle cx='5.5' cy='18.5' r='2.5'/%3E%3Ccircle cx='18.5' cy='18.5' r='2.5'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='3' width='15' height='13'/%3E%3Cpolygon points='16 8 20 8 23 11 23 16 16 16 16 8'/%3E%3Ccircle cx='5.5' cy='18.5' r='2.5'/%3E%3Ccircle cx='18.5' cy='18.5' r='2.5'/%3E%3C/svg%3E");
}
.elementor-16885 .elementor-element-a4b89a7 .elementor-icon-list-icon::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1 4 1 10 7 10'/%3E%3Cpath d='M3.51 15a9 9 0 1 0 2.13-9.36L1 10'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1 4 1 10 7 10'/%3E%3Cpath d='M3.51 15a9 9 0 1 0 2.13-9.36L1 10'/%3E%3C/svg%3E");
}
.elementor-16885 .elementor-element-2f9e33a .elementor-icon-list-icon::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E");
}
.elementor-16885 .elementor-element-b637e6e .elementor-icon-list-icon::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/%3E%3Cline x1='7' y1='7' x2='7.01' y2='7'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/%3E%3Cline x1='7' y1='7' x2='7.01' y2='7'/%3E%3C/svg%3E");
}
.elementor-16885 .elementor-element-478def0 .elementor-icon-list-icon::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 1 1 5.83 1c0 2-3 3-3 3'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 1 1 5.83 1c0 2-3 3-3 3'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
}
.elementor-16885 .elementor-icon-list-text{
  font-size:14px !important; font-weight:600 !important; color:var(--ink) !important;
}

/* Category grid — real gap between tiles on mobile, they were touching
   with zero breathing room. */
.elementor-16885 .elementor-element-91cc6d1 .elementor-container,
.elementor-16885 [data-id]:has(> .elementor-container > .elementor-column .elementor-widget-icon-list){
  gap:16px;
}
@media(max-width:767px){
  .elementor-16885 .elementor-column{ padding:8px !important; }
}

/* FAQ section */
.elementor-16885 h6.elementor-heading-title{
  font-size:12px !important; font-weight:600 !important; letter-spacing:.1em !important;
  text-transform:uppercase !important; color:var(--blue) !important;
}
.elementor-16885 h2.elementor-heading-title{
  font-size:clamp(24px,2.8vw,34px) !important; font-weight:800 !important;
  line-height:1.2 !important; color:var(--ink) !important; margin:8px 0 12px !important;
}
.elementor-16885 p.elementor-heading-title{ font-size:16px !important; color:var(--soft) !important; }
.elementor-16885 .elementor-button{
  background:linear-gradient(100deg,var(--cyan),var(--blue)) !important;
  color:#02141F !important; border:none !important; border-radius:100px !important;
  padding:13px 24px !important; font-weight:700 !important; font-size:14px !important;
  transition:filter .2s ease, transform .2s ease;
}
.elementor-16885 .elementor-button:hover{ filter:brightness(1.1); transform:translateY(-1px); }

/* FAQ answers column — card treatment for the text-editor content */
.elementor-16885 .elementor-widget-text-editor{
  background:var(--card); border:1px solid var(--line); border-radius:14px; padding:24px;
}
.elementor-16885 .elementor-widget-text-editor p{
  font-size:15px !important; line-height:1.7 !important; color:var(--soft) !important;
  margin-bottom:16px !important;
}
.elementor-16885 .elementor-widget-text-editor p:last-child{ margin-bottom:0 !important; }
.elementor-16885 .elementor-widget-text-editor strong{ color:var(--ink) !important; }

.elementor-16885 :is(a,button):focus-visible{
  outline:2px solid var(--blue) !important; outline-offset:2px !important;
  box-shadow:0 0 0 4px rgba(41,171,226,.2) !important;
}

@media(max-width:900px){
  .elementor-16885 > .elementor-section{ padding-top:32px !important; padding-bottom:32px !important; }
}

/* FAQ section columns (d82b91d = heading+button, 540d5584 = real FAQ
   text) are Elementor legacy 50/50 columns. Removing the entrance
   animation fixed the invisible-content bug, but the gap persisted --
   forcing explicit full-width stacking on mobile rather than relying
   on Elementor's own column-collapse behaviour, to remove all doubt. */
@media(max-width:767px){
  .elementor-element-d82b91d,
  .elementor-element-540d5584{
    width:100% !important;
  }
  .elementor-element-76432cdb > .elementor-container{
    flex-wrap:wrap !important;
  }
}