/* ------------------------------------------------------------------
   WA India Button – styles
   ------------------------------------------------------------------ */

/* CSS custom properties – fallback values if the theme doesn't define them */
:root {
  --color-white: #ffffff;
  --color-dark: #000000;
  --color-whatsapp: #25d366;
  --font-weight--semibold: 600;
  --border-radius--large: 50px;
}

/* Block wrapper */
.wp-block-wa-india-button {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 2em;
}

/* ---- Base button ---- */
.btn-wa {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.75em 1.6em;
  font-size: 1em;
  font-weight: var(--font-weight--semibold);
  color: var(--color-white);
  background: var(--color-whatsapp);
  border: none;
  border-radius: var(--border-radius--large);
  text-decoration: none;
  cursor: pointer;
  transition:
    background 0.25s ease,
    transform 0.2s ease,
    box-shadow 0.25s ease;
  white-space: nowrap;
}

.btn-wa:hover {
  background: color-mix(in srgb, var(--color-whatsapp) 85%, var(--color-dark));
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0, 170, 64, 0.35);
}

.btn-wa svg {
  width: 1.2em;
  height: 1.2em;
  flex-shrink: 0;
}

/* ---- Extra-large variant ---- */
.btn-wa--xl {
  font-size: 1.125em;
  padding: 0.85em 2em;
}