/* ============================================================
   SSO SIGN-IN — CARD OVERRIDE (paste AFTER your .vi-* icon CSS)
   Markup unchanged: .socl-signup > p > strong + button.zwc-socl-signup-btn.vi-*
   ============================================================ */
.zws-signup-box .socl-signup :where(a,.socl-signup,.zwc-socl-signup-btn).vi-google{
       transform: none;
   }
.zws-other-info-section {
    display: flex;
    align-items: flex-start;
}

.zws-signup-box .socl-signup :where(a,.socl-signup,.zwc-socl-signup-btn).vi-apple:after{ 
    margin: inherit;
}
/* ---- GRID WRAPPER ---- */
/* .zws-signup-box .socl-signup p {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  margin-block: 20px;
} */
 .zws-signup-box .socl-signup p {
  display: grid;
  grid-template-columns: repeat(6, 1fr);   /* was repeat(3,1fr) → one row of 6 */
  gap: 8px;                                 /* was 12px — 6-up needs less */
  width: 100%;
  box-sizing: border-box;
  margin-block: 20px;
}

/* ---- DIVIDER: "or sign in using" ---- */
.zws-signup-box .socl-signup p strong {
  grid-column: 1 / -1;              /* full row above the buttons */
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-block: 4px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--sp-social-text-color, #6b7280);
  white-space: nowrap;
}
.zws-signup-box .socl-signup p strong::before,
.zws-signup-box .socl-signup p strong::after {
  content: "";
  flex: 1 1 0;                      /* equal lines on both sides */
  min-width: 0;
  height: 1px;
  background: #e2e5e9;
}

/* ---- BUTTON = CARD ---- */
/* .zws-signup-box .socl-signup .zwc-socl-signup-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto !important;
  min-width: 0;
  height: 56px !important;
  padding-inline: 16px !important;
  border: 1px solid #e2e5e9 !important;
  border-radius: 8px;
  background-color: #fff !important;
  background-image: none !important;   
  font-size: 14px !important;          
  font-family: var(--primaryfont-semibold);
  color: #000;
  overflow: visible !important;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
} */
.zws-signup-box .socl-signup .zwc-socl-signup-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;                       /* was 8px — no label to space from */
  width: 100% !important;       /* was auto — fill the ~60px cell */
  min-width: 0;
  height: 56px !important;
  padding-inline: 0 !important; /* was 16px — no room in a 6-up row */
  border: 1px solid #e2e5e9 !important;
  border-radius: 8px;
  background-color: #fff !important;
  background-image: none !important;
  font-size: 0 !important;      /* was 14px — hides the "Sign in" text, icon-only */
  overflow: visible !important;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.zws-signup-box .socl-signup .zwc-socl-signup-btn:hover {
  border-color: #c4c9d0;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

/* ---- ICON BOX (sprite moved here so only ONE icon shows) ---- */
.zws-signup-box .socl-signup .zwc-socl-signup-btn::before {
  content: "";
  flex: none;
  background: var(--common-elements) no-repeat;
  background-size: 950px auto;
  width: 30px;
  height: 30px;
}

/* per-icon: your EXACT existing positions/sizes, on ::before */
.zws-signup-box .socl-signup .zwc-socl-signup-btn.vi-google::before    { 
    background-size: 950px auto;
    background-position: -5px -5px;
    width: 29px;
    height: 28px;
 }
.zws-signup-box .socl-signup .zwc-socl-signup-btn.vi-facebook::before  { 
    background-position: -178px 3px;
    width: 30px;
    height: 30px;
    background-size: 800px auto;
 }
.zws-signup-box .socl-signup .zwc-socl-signup-btn.vi-twitter::before   { 
background-position: -186px 4px;
    background-size: 720px auto;
    width: 30px;
    height: 30px;
 }
.zws-signup-box .socl-signup .zwc-socl-signup-btn.vi-linkedin::before  { 
    background-position: -280px 2px;
    background-size: 950px auto;
    width: 35px;
    height: 29px;
 }
.zws-signup-box .socl-signup .zwc-socl-signup-btn.vi-office365::before { 
    background-position: -350px 1px;
    background-size: 1050px auto;
    width: 30px;
    height: 30px;
    transform: scale(.8);
 }

/* ---- APPLE (glyph is on ::after, not the sprite background) ---- */
.zws-signup-box .socl-signup .zwc-socl-signup-btn.vi-apple            { background-color: #fff !important;}
.zws-signup-box .socl-signup .zwc-socl-signup-btn.vi-apple::before    { content: none; }
.zws-signup-box .socl-signup .zwc-socl-signup-btn.vi-apple::after {
  position: static;
  transform: none;
  order: -1;                    /* sit left of the label */
  filter: brightness(0);
  background-image: var(--common-elements);
  background-position: -444px 0;
  background-size: 650px auto;
  width: 20px;
  height: 21px;
    margin: inherit;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 520px) {
  .zws-signup-box .socl-signup p { grid-template-columns: repeat(3, 1fr); }
}
.zws-signup-box .socl-signup .zwc-socl-signup-btn.vi-apple.zwc-socl-signup-btn.sig-android{
display:none !important;
}