/* ============================================================
   CTA BUTTONS — brcnctafeul
   Architecture: Fully Tokenized Semantic CSS Architecture
   Colors strictly: #5bc0de + white + black (+ WhatsApp green #25D366)
   Zero Magic Numbers — 100% Configurable via CSS Variables
   ============================================================ */

.brcnctafeul {
  /* ============================================================
     1. SIZES & LAYOUT TOKENS
     ============================================================ */
  --brcnctafeul-display: flex;
  --brcnctafeul-direction: rtl;
  --brcnctafeul-width: 100%;

  /* Button Group */
  --brcnctafeul-btns-display: flex;
  --brcnctafeul-btns-align: center;
  --brcnctafeul-btns-justify: flex-start;
  --brcnctafeul-btns-wrap: wrap;
  --brcnctafeul-btns-gap: 0.9rem;
  --brcnctafeul-btns-width: auto;
  --brcnctafeul-btns-z-index: 1;

  /* Button Common */
  --brcnctafeul-btn-display: inline-flex;
  --brcnctafeul-btn-align: center;
  --brcnctafeul-btn-justify: center;
  --brcnctafeul-btn-flex: initial;
  --brcnctafeul-btn-gap: 0.6rem;
  --brcnctafeul-btn-padding-y: 0.95rem;
  --brcnctafeul-btn-padding-x: 1.7rem;
  --brcnctafeul-btn-radius: 999px;
  --brcnctafeul-btn-border-width: 2px;
  --brcnctafeul-btn-border-style: solid;
  --brcnctafeul-btn-ico-size: 1.2em;
  --brcnctafeul-btn-ico-line-height: 1;
  --brcnctafeul-btn-hover-lift: -3px;

  /* Button Sheen */
  --brcnctafeul-sheen-width: 40%;
  --brcnctafeul-sheen-top: -20%;
  --brcnctafeul-sheen-bottom: -20%;
  --brcnctafeul-sheen-left-start: -60%;
  --brcnctafeul-sheen-left-end: 130%;
  --brcnctafeul-sheen-transform-rotate: 20deg;

  /* Ripple Click Effect */
  --brcnctafeul-ripple-size: 12px;
  --brcnctafeul-ripple-radius: 50%;
  --brcnctafeul-ripple-scale-start: 0;
  --brcnctafeul-ripple-scale-end: 30;

  /* Note Text */
  --brcnctafeul-note-display: flex;
  --brcnctafeul-note-align: center;
  --brcnctafeul-note-gap: 0.5rem;
  --brcnctafeul-note-margin-top: 1rem;

  /* Sticky Mobile Bar */
  --brcnctafeul-sticky-position: fixed;
  --brcnctafeul-sticky-bottom: 0;
  --brcnctafeul-sticky-inset-inline: 0;
  --brcnctafeul-sticky-z-index: 960;
  --brcnctafeul-sticky-border-top-width: 2px;
  --brcnctafeul-sticky-border-top-style: solid;
  --brcnctafeul-sticky-padding-top: 0.6rem;
  --brcnctafeul-sticky-padding-x: 0.8rem;
  --brcnctafeul-sticky-padding-bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px));
  --brcnctafeul-sticky-btns-gap: 0.6rem;
  --brcnctafeul-sticky-btn-padding-y: 0.75rem;
  --brcnctafeul-sticky-btn-padding-x: 0.6rem;
  --brcnctafeul-body-padding-bottom: 72px;

  /* ============================================================
     2. COLOR & BACKGROUND TOKENS
     Strictly: #5bc0de + white + black (+ WhatsApp green)
     ============================================================ */
  /* Primary WhatsApp Button */
  --brcnctafeul-pri-bg: #25D366;
  --brcnctafeul-pri-color: #ffffff;
  --brcnctafeul-pri-border-color: #25D366;
  --brcnctafeul-pri-hover-bg: #1EBE5B;
  --brcnctafeul-pri-hover-border-color: #1EBE5B;
  --brcnctafeul-pri-hover-color: #ffffff;

  /* Secondary Call / Action Button */
  --brcnctafeul-sec-bg: #5bc0de;
  --brcnctafeul-sec-color: #000000;
  --brcnctafeul-sec-border-color: #5bc0de;
  --brcnctafeul-sec-hover-bg: #ffffff;
  --brcnctafeul-sec-hover-border-color: #ffffff;
  --brcnctafeul-sec-hover-color: #000000;

  /* Sheen & Ripple */
  --brcnctafeul-sheen-color: rgba(255, 255, 255, 0.35);
  --brcnctafeul-sheen-gradient: linear-gradient(90deg, transparent, var(--brcnctafeul-sheen-color), transparent);
  --brcnctafeul-ripple-bg: rgba(255, 255, 255, 0.4);

  /* Note Colors */
  --brcnctafeul-note-color: #000000;
  --brcnctafeul-note-ico-color: #5bc0de;

  /* Sticky Mobile Bar */
  --brcnctafeul-sticky-bg: #000000;
  --brcnctafeul-sticky-border-top-color: #5bc0de;

  /* ============================================================
     3. TYPOGRAPHY TOKENS
     ============================================================ */
  --brcnctafeul-btn-font-size: 0.94rem;
  --brcnctafeul-btn-font-weight: 700;
  --brcnctafeul-btn-white-space: nowrap;

  --brcnctafeul-note-font-size: 0.85rem;
  --brcnctafeul-note-font-weight: 600;
  --brcnctafeul-note-line-height: 1.5;

  --brcnctafeul-sticky-btn-font-size: 0.84rem;

  /* ============================================================
     4. SHADOW & GLOW TOKENS
     ============================================================ */
  --brcnctafeul-pri-shadow: 0 14px 28px -10px rgba(37, 211, 102, 0.6);
  --brcnctafeul-pri-hover-shadow: 0 20px 38px -12px rgba(37, 211, 102, 0.7);
  --brcnctafeul-pri-pulse-glow: 0 0 0 0 rgba(37, 211, 102, 0.45);
  --brcnctafeul-pri-pulse-spread: 0 0 0 14px rgba(37, 211, 102, 0);

  --brcnctafeul-sec-shadow: 0 14px 28px -10px rgba(91, 192, 222, 0.55);
  --brcnctafeul-sec-hover-shadow: 0 20px 38px -12px rgba(91, 192, 222, 0.7);

  --brcnctafeul-sticky-shadow: 0 -10px 25px rgba(0, 0, 0, 0.5);

  /* ============================================================
     5. TRANSITION & ANIMATION TOKENS
     ============================================================ */
  --brcnctafeul-transition-duration: 0.3s;
  --brcnctafeul-transition-timing: ease;
  --brcnctafeul-sheen-duration: 0.75s;
  --brcnctafeul-sheen-timing: ease;
  --brcnctafeul-ripple-duration: 0.6s;
  --brcnctafeul-ripple-timing: ease;
  --brcnctafeul-pulse-duration: 2.6s;
  --brcnctafeul-pulse-timing: ease-out;
}

/* Base Component */
.brcnctafeul {
  position: relative;
  display: var(--brcnctafeul-display);
  direction: var(--brcnctafeul-direction);
  width: var(--brcnctafeul-width);
}

.brcnctafeul-btns {
  position: relative;
  z-index: var(--brcnctafeul-btns-z-index);
  display: var(--brcnctafeul-btns-display);
  align-items: var(--brcnctafeul-btns-align);
  justify-content: var(--brcnctafeul-btns-justify);
  flex-wrap: var(--brcnctafeul-btns-wrap);
  gap: var(--brcnctafeul-btns-gap);
  width: var(--brcnctafeul-btns-width);
}

.brcnctafeul-btn {
  position: relative;
  display: var(--brcnctafeul-btn-display);
  align-items: var(--brcnctafeul-btn-align);
  justify-content: var(--brcnctafeul-btn-justify);
  flex: var(--brcnctafeul-btn-flex);
  gap: var(--brcnctafeul-btn-gap);
  padding: var(--brcnctafeul-btn-padding-y) var(--brcnctafeul-btn-padding-x);
  font-size: var(--brcnctafeul-btn-font-size);
  font-weight: var(--brcnctafeul-btn-font-weight);
  border-radius: var(--brcnctafeul-btn-radius);
  white-space: var(--brcnctafeul-btn-white-space);
  cursor: pointer;
  overflow: hidden;
  border-width: var(--brcnctafeul-btn-border-width);
  border-style: var(--brcnctafeul-btn-border-style);
  border-color: transparent;
  transition:
    transform var(--brcnctafeul-transition-duration) var(--brcnctafeul-transition-timing),
    background var(--brcnctafeul-transition-duration) var(--brcnctafeul-transition-timing),
    box-shadow var(--brcnctafeul-transition-duration) var(--brcnctafeul-transition-timing),
    border-color var(--brcnctafeul-transition-duration) var(--brcnctafeul-transition-timing),
    color var(--brcnctafeul-transition-duration) var(--brcnctafeul-transition-timing);
}

.brcnctafeul-btn-ico {
  font-size: var(--brcnctafeul-btn-ico-size);
  line-height: var(--brcnctafeul-btn-ico-line-height);
}

/* WhatsApp Primary Button */
.brcnctafeul-btn-pri {
  background: var(--brcnctafeul-pri-bg);
  color: var(--brcnctafeul-pri-color);
  border-color: var(--brcnctafeul-pri-border-color);
  box-shadow: var(--brcnctafeul-pri-shadow);
  animation: brcnctafeul-pulse var(--brcnctafeul-pulse-duration) var(--brcnctafeul-pulse-timing) infinite;
}

.brcnctafeul-btn-pri:hover {
  background: var(--brcnctafeul-pri-hover-bg);
  border-color: var(--brcnctafeul-pri-hover-border-color);
  color: var(--brcnctafeul-pri-hover-color);
  transform: translateY(var(--brcnctafeul-btn-hover-lift));
  box-shadow: var(--brcnctafeul-pri-hover-shadow);
}

/* Secondary Call / Action Button */
.brcnctafeul-btn-sec {
  background: var(--brcnctafeul-sec-bg);
  color: var(--brcnctafeul-sec-color);
  border-color: var(--brcnctafeul-sec-border-color);
  box-shadow: var(--brcnctafeul-sec-shadow);
}

.brcnctafeul-btn-sec:hover {
  background: var(--brcnctafeul-sec-hover-bg);
  border-color: var(--brcnctafeul-sec-hover-border-color);
  color: var(--brcnctafeul-sec-hover-color);
  transform: translateY(var(--brcnctafeul-btn-hover-lift));
  box-shadow: var(--brcnctafeul-sec-hover-shadow);
}

/* Sheen Light Reflection */
.brcnctafeul-btn-pri::before,
.brcnctafeul-btn-sec::before {
  content: "";
  position: absolute;
  top: var(--brcnctafeul-sheen-top);
  bottom: var(--brcnctafeul-sheen-bottom);
  width: var(--brcnctafeul-sheen-width);
  left: var(--brcnctafeul-sheen-left-start);
  background: var(--brcnctafeul-sheen-gradient);
  transform: rotate(var(--brcnctafeul-sheen-transform-rotate));
  transition: left var(--brcnctafeul-sheen-duration) var(--brcnctafeul-sheen-timing);
  pointer-events: none;
}

.brcnctafeul-btn:hover::before {
  left: var(--brcnctafeul-sheen-left-end);
}

/* Ripple Click Animation */
.brcnctafeul-ripple {
  position: absolute;
  width: var(--brcnctafeul-ripple-size);
  height: var(--brcnctafeul-ripple-size);
  border-radius: var(--brcnctafeul-ripple-radius);
  background: var(--brcnctafeul-ripple-bg);
  transform: translate(-50%, -50%) scale(var(--brcnctafeul-ripple-scale-start));
  animation: brcnctafeul-out var(--brcnctafeul-ripple-duration) var(--brcnctafeul-ripple-timing) forwards;
  pointer-events: none;
}

@keyframes brcnctafeul-out {
  0% {
    transform: translate(-50%, -50%) scale(var(--brcnctafeul-ripple-scale-start));
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(var(--brcnctafeul-ripple-scale-end));
    opacity: 0;
  }
}

/* Pulse Animation for WhatsApp Button */
@keyframes brcnctafeul-pulse {
  0% {
    box-shadow: var(--brcnctafeul-pri-shadow), var(--brcnctafeul-pri-pulse-glow);
  }
  70% {
    box-shadow: var(--brcnctafeul-pri-shadow), var(--brcnctafeul-pri-pulse-spread);
  }
  100% {
    box-shadow: var(--brcnctafeul-pri-shadow), var(--brcnctafeul-pri-pulse-glow);
  }
}

/* Note Text */
.brcnctafeul-note {
  --brcnctafeul-note-display: flex;
  --brcnctafeul-note-align: center;
  --brcnctafeul-note-gap: 0.55rem;
  --brcnctafeul-note-margin-top: 1.1rem;
  --brcnctafeul-note-font-size: 0.86rem;
  --brcnctafeul-note-font-weight: 600;
  --brcnctafeul-note-line-height: 1.6;
  --brcnctafeul-note-color: inherit;
  --brcnctafeul-note-ico-color: #5bc0de;

  display: var(--brcnctafeul-note-display, flex);
  align-items: var(--brcnctafeul-note-align, center);
  gap: var(--brcnctafeul-note-gap, 0.55rem);
  margin-top: var(--brcnctafeul-note-margin-top, 1.1rem);
  font-size: var(--brcnctafeul-note-font-size, 0.86rem);
  font-weight: var(--brcnctafeul-note-font-weight, 600);
  line-height: var(--brcnctafeul-note-line-height, 1.6);
  color: var(--brcnctafeul-note-color, inherit);
  width: 100%;
  clear: both;
}

.brcnctafeul-note i {
  color: var(--brcnctafeul-note-ico-color);
  flex-shrink: 0;
  font-size: 1.05em;
}

/* Sticky Mobile Bottom Bar */
.brcnctafeul-sticky {
  position: var(--brcnctafeul-sticky-position);
  bottom: var(--brcnctafeul-sticky-bottom);
  inset-inline: var(--brcnctafeul-sticky-inset-inline);
  z-index: var(--brcnctafeul-sticky-z-index);
  display: none;
  background: var(--brcnctafeul-sticky-bg);
  border-top-width: var(--brcnctafeul-sticky-border-top-width);
  border-top-style: var(--brcnctafeul-sticky-border-top-style);
  border-top-color: var(--brcnctafeul-sticky-border-top-color);
  padding-top: var(--brcnctafeul-sticky-padding-top);
  padding-inline: var(--brcnctafeul-sticky-padding-x);
  padding-bottom: var(--brcnctafeul-sticky-padding-bottom);
  box-shadow: var(--brcnctafeul-sticky-shadow);
}

.brcnctafeul-sticky .brcnctafeul-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--brcnctafeul-sticky-btns-gap);
  width: 100%;
}

.brcnctafeul-sticky .brcnctafeul-btn {
  padding: var(--brcnctafeul-sticky-btn-padding-y) var(--brcnctafeul-sticky-btn-padding-x);
  font-size: var(--brcnctafeul-sticky-btn-font-size);
  animation: none;
}

/* ============================================================
   RESPONSIVE OVERRIDES
   ============================================================ */
@media (max-width: 480px) {
  .brcnctafeul:not(.brcnctafeul-sticky) {
    --brcnctafeul-width: 100%;
    --brcnctafeul-btns-width: 100%;
    --brcnctafeul-btns-gap: 0.7rem;
    --brcnctafeul-btn-flex: 1 1 100%;
    --brcnctafeul-btn-padding-y: 0.85rem;
    --brcnctafeul-btn-padding-x: 1.3rem;
    --brcnctafeul-btn-font-size: 0.88rem;
  }
}

@media (max-width: 768px) {
  .brcnctafeul-sticky {
    display: block;
  }
  body {
    padding-bottom: var(--brcnctafeul-body-padding-bottom, 72px);
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .brcnctafeul-btn,
  .brcnctafeul-btn::before {
    transition: none !important;
    animation: none !important;
  }
  .brcnctafeul-ripple {
    display: none !important;
  }
}