/* ── Tanur Social Login — Button Styles ───────────────────────────────────── */

:root {
  --tsl-bg:       #1a1a2e;
  --tsl-bg-hover: #16213e;
  --tsl-accent:   #8B5CF6;
  --tsl-border:   rgba(139, 92, 246, 0.25);
  --tsl-text:     #f1f1f1;
  --tsl-radius:   8px;
  --tsl-gap:      10px;
}

/* Wrapper */
.tsl-wrap {
  display:        flex;
  flex-direction: column;
  gap:            var(--tsl-gap);
  margin:         0 0 20px;
  width:          100%;
}

/* Heading (checkout) */
.tsl-heading {
  font-size:   0.85rem;
  color:       #aaa;
  margin:      0 0 4px;
  font-family: inherit;
}

/* Base button */
.tsl-btn {
  display:         flex;
  align-items:     center;
  gap:             12px;
  padding:         11px 18px;
  border-radius:   var(--tsl-radius);
  background:      var(--tsl-bg);
  border:          1px solid var(--tsl-border);
  color:           var(--tsl-text);
  font-size:       0.92rem;
  font-weight:     500;
  font-family:     inherit;
  text-decoration: none;
  transition:      background 0.18s, border-color 0.18s, box-shadow 0.18s;
  cursor:          pointer;
  width:           100%;
  box-sizing:      border-box;
}

.tsl-btn:hover,
.tsl-btn:focus {
  background:   var(--tsl-bg-hover);
  border-color: var(--tsl-accent);
  box-shadow:   0 0 0 2px rgba(139, 92, 246, 0.18);
  color:        #fff;
  text-decoration: none;
}

/* Icon sizing */
.tsl-btn .tsl-icon {
  width:       20px;
  height:      20px;
  flex-shrink: 0;
}

/* Per-provider accent on hover */
.tsl-btn-facebook {
  background: #1877f2;
  border-color: #1877f2;
}
.tsl-btn-facebook:hover {
  background:   #0f65d8;
  border-color: var(--tsl-accent);
}

.tsl-btn-linkedin {
  background:   #0077b5;
  border-color: #0077b5;
}
.tsl-btn-linkedin:hover {
  background:   #006097;
  border-color: var(--tsl-accent);
}

/* Google white */
.tsl-btn-google {
  background:   #fff;
  border-color: #ddd;
  color:        #3c4043;
}
.tsl-btn-google:hover {
  background:   #f7f7f7;
  border-color: var(--tsl-accent);
  color:        #3c4043;
}

/* OR divider */
.tsl-or {
  display:     flex;
  align-items: center;
  gap:         10px;
  color:       #888;
  font-size:   0.82rem;
  margin:      4px 0;
}
.tsl-or::before,
.tsl-or::after {
  content:    '';
  flex:       1;
  height:     1px;
  background: rgba(139, 92, 246, 0.2);
}

/* ── WordPress login page overrides ── */
#login .tsl-wrap {
  margin-bottom: 16px;
}

/* ── Checkout widget ── */
.tsl-checkout {
  background:    rgba(26, 26, 46, 0.6);
  border:        1px solid rgba(139, 92, 246, 0.2);
  border-radius: 10px;
  padding:       18px 20px;
  margin-bottom: 24px;
}

/* ── Responsive ── */
@media (min-width: 640px) {
  .tsl-wrap {
    flex-direction: row;
    flex-wrap:      wrap;
  }
  .tsl-btn {
    width: auto;
    flex:  1 1 180px;
  }
  .tsl-or {
    flex-basis: 100%;
  }
}