/* ============================================================
   Scoped layout & styles for M/Sl Social buttons
   (won't affect other .btn/.btn-block on the site)
   ============================================================ */

/* Wrapper + title */
.m-sl-social-container { margin-top: 0; text-align: center; }
.m-sl-title { font-size: 16px; font-weight: 600; margin-bottom: 8px; }

/* Centered one-row layout using CSS grid */
.m-sl-grid {
  display: grid;
  grid-auto-flow: column;          /* single row */
  justify-content: center;         /* center horizontally */
  align-items: center;             /* align vertically */
  gap: 12px;                       /* equal spacing */
}

/* --- OVERRIDES only inside our container (no global bleed) --- */

/* Mageplaza uses .btn-block to make full width; undo that here */
.m-sl-social-container .btn-block {
  display: inline-flex;
  width: auto;
}

/* Keep Mageplaza .btn-social icon layout consistent */
.m-sl-social-container .btn-social {
  position: relative;
  padding-left: 48px;              /* space for icon */
  padding-right: 16px;
  min-height: 40px;
  align-items: center;
  font-weight: 600;
  font-size: 14px;
}

.m-sl-social-container .btn-social .fa {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
}

/* Brand colors (mirror Mageplaza look, scoped) */
.m-sl-social-container .btn-google   { color:#fff; background:#dd4b39; border-color:#dd4b39; }
.m-sl-social-container .btn-google:hover   { background:#c23321; border-color:#b52f1c; }

.m-sl-social-container .btn-facebook { color:#fff; background:#3b5998; border-color:#3b5998; }
.m-sl-social-container .btn-facebook:hover { background:#334d84; border-color:#2d4474; }

.m-sl-social-container .btn-apple    { color:#fff; background:#333;    border-color:#333; }
.m-sl-social-container .btn-apple:hover    { background:#1f1f1f; border-color:#1a1a1a; }

/* Subtle hover motion (optional) */
.m-sl-social-container .btn:hover {
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
  transform: translateY(-1px);
}
.m-sl-social-container .btn:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Error text if popup blocked */
.m-sl-error { margin-top: 10px; color: #b91c1c; font-size: 13px; }

/* Responsive: stack cleanly on small screens */
@media (max-width: 640px) {
  .m-sl-grid { grid-auto-flow: row; }
  .m-sl-social-container .btn-block { width: 100%; }
}