@import url('https://fonts.googleapis.com/css2?family=El+Messiri:wght@400..700&display=swap');

/* ============================================================
   CALL TO ACTION — THEME 5 (Mint Meadow) — BUTTONS GROUP
   File: ebctaf5-5.css | HTML prefix: ebctaf5
   Identity: organic meadow / soft mint / botanical
     bg decor:  blurred mint orbs + leaf dot
     primary:   mint gradient pill, soft green shadow
     secondary: cream translucent pill, mint border
     ripple:    mint fade
     fonts:     Fraunces (latin) + Amiri (arabic)
   ============================================================ */

.ebctaf5 {
  /* =========================================================
     GLOBAL / CORE
     ========================================================= */
  --ebctaf5-font-family: 'El Messiri', sans-serif;

  --ebctaf5-animation-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ebctaf5-animation-infinite: infinite;
  --ebctaf5-animation-alternate: alternate;
  --ebctaf5-animation-alternate-reverse: alternate-reverse;
  --ebctaf5-animation-linear: linear;

  --ebctaf5-blur-glass: 12px;
  --ebctaf5-blur-soft: 28px;
  --ebctaf5-radius-pill: 999px;
  --ebctaf5-radius-circle: 50%;
  --ebctaf5-radius-chip: 18px;

  --ebctaf5-transition-duration: 0.35s;

  /* =========================================================
     COLORS — BG / GLOW
     ========================================================= */
  --ebctaf5-bg-color: transparent;
  --ebctaf5-glow-a-color: rgba(63, 174, 131, 0.24);
  --ebctaf5-glow-b-color: rgba(47, 138, 104, 0.18);
  --ebctaf5-glow-a-size: 190px;
  --ebctaf5-glow-b-size: 140px;
  --ebctaf5-leaf-color: #3fae83;
  --ebctaf5-leaf-size: 10px;

  /* =========================================================
     COLORS — BUTTONS PRIMARY
     ========================================================= */
  --ebctaf5-btn-pri-background: linear-gradient(135deg, #3fae83, #2e8a68);
  --ebctaf5-btn-pri-color: #ffffff;
  --ebctaf5-btn-pri-border: none;
  --ebctaf5-btn-pri-shadow: 0 14px 28px -12px rgba(46, 138, 104, 0.6);
  --ebctaf5-btn-pri-hover-background: linear-gradient(135deg, #5cb894, #2f8a68);
  --ebctaf5-btn-pri-hover-shadow: 0 20px 38px -14px rgba(46, 138, 104, 0.7);
  --ebctaf5-btn-pri-hover-transform: translateY(-3px);
  --ebctaf5-btn-sheen-color: rgba(255, 255, 255, 0.28);
  --ebctaf5-btn-sheen-size: 36%;
  --ebctaf5-btn-sheen-rotate: 20deg;

  /* =========================================================
     COLORS — BUTTONS SECONDARY
     ========================================================= */
  --ebctaf5-btn-sec-background: rgba(255, 253, 250, 0.92);
  --ebctaf5-btn-sec-color: #2f7a5e;
  --ebctaf5-btn-sec-border-width: 1px;
  --ebctaf5-btn-sec-border-color: rgba(47, 138, 104, 0.45);
  --ebctaf5-btn-sec-shadow: 0 10px 22px -12px rgba(46, 138, 104, 0.4);
  --ebctaf5-btn-sec-hover-background: #ffffff;
  --ebctaf5-btn-sec-hover-color: #24563f;
  --ebctaf5-btn-sec-hover-border-color: rgba(47, 138, 104, 0.75);
  --ebctaf5-btn-sec-hover-shadow: 0 14px 28px -12px rgba(46, 138, 104, 0.5);
  --ebctaf5-btn-sec-hover-transform: translateY(-3px);

  /* =========================================================
     COLORS — ICON + RIPPLE
     ========================================================= */
  --ebctaf5-btn-ico-color: inherit;
  --ebctaf5-btn-ico-hover-transform: scale(1.15);
  --ebctaf5-ripple-color: rgba(63, 174, 131, 0.3);

  /* =========================================================
     TYPOGRAPHY
     ========================================================= */
  --ebctaf5-btn-font-size: 0.94rem;
  --ebctaf5-btn-font-weight: 600;
  --ebctaf5-btn-letter-spacing: 0.01em;
  --ebctaf5-btn-font-size-mobile: 0.88rem;
  --ebctaf5-btn-font-size-mini: 0.82rem;

  /* =========================================================
     SPACING
     ========================================================= */
  --ebctaf5-btns-gap: 1rem;
  --ebctaf5-btns-gap-mobile: 0.75rem;
  --ebctaf5-btn-padding-y: 1rem;
  --ebctaf5-btn-padding-x: 1.85rem;
  --ebctaf5-btn-gap: 0.6rem;
  --ebctaf5-btn-padding-y-mobile: 0.9rem;
  --ebctaf5-btn-padding-x-mobile: 1.35rem;

  /* =========================================================
     LAYOUT
     ========================================================= */
  --ebctaf5-btns-align: flex-start;
  --ebctaf5-btns-align-center: center;
  --ebctaf5-btns-wrap: wrap;

  /* =========================================================
     BORDER
     ========================================================= */
  --ebctaf5-btn-pri-border-radius: var(--ebctaf5-radius-pill);
  --ebctaf5-btn-sec-border-radius: var(--ebctaf5-radius-pill);

  /* =========================================================
     ANIMATION
     ========================================================= */
  --ebctaf5-glow-drift-a-duration: 9s;
  --ebctaf5-glow-drift-b-duration: 12s;
  --ebctaf5-glow-drift-a-distance: 22px;
  --ebctaf5-glow-drift-b-distance: -24px;
  --ebctaf5-leaf-sway-duration: 4s;
  --ebctaf5-leaf-sway-distance: 6px;
  --ebctaf5-sheen-duration: 0.7s;
  --ebctaf5-ripple-duration: 0.6s;

  /* =========================================================
     BASE RULES
     ========================================================= */
  position: relative;
  display: inline-flex;
  font-family: "El Messiri", sans-serif;
  direction: rtl;
}

/* ============================ BG DECOR ============================ */
.ebctaf5-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: var(--ebctaf5-btn-pri-border-radius);
}
.ebctaf5-glow {
  position: absolute;
  border-radius: var(--ebctaf5-radius-circle);
  filter: blur(var(--ebctaf5-blur-soft));
}
.ebctaf5-glow-a {
  width: var(--ebctaf5-glow-a-size);
  height: var(--ebctaf5-glow-a-size);
  top: -60%;
  inset-inline-start: -16%;
  background: var(--ebctaf5-glow-a-color);
  animation-name: ebctaf5-glow-drift-a;
  animation-duration: var(--ebctaf5-glow-drift-a-duration);
  animation-timing-function: var(--ebctaf5-animation-ease);
  animation-iteration-count: var(--ebctaf5-animation-infinite);
  animation-direction: var(--ebctaf5-animation-alternate);
}
.ebctaf5-glow-b {
  width: var(--ebctaf5-glow-b-size);
  height: var(--ebctaf5-glow-b-size);
  bottom: -70%;
  inset-inline-end: -14%;
  background: var(--ebctaf5-glow-b-color);
  animation-name: ebctaf5-glow-drift-b;
  animation-duration: var(--ebctaf5-glow-drift-b-duration);
  animation-timing-function: var(--ebctaf5-animation-ease);
  animation-iteration-count: var(--ebctaf5-animation-infinite);
  animation-direction: var(--ebctaf5-animation-alternate-reverse);
}
/* organic leaf dot */
.ebctaf5-glow-a::after {
  content: "";
  position: absolute;
  width: var(--ebctaf5-leaf-size);
  height: var(--ebctaf5-leaf-size);
  top: 40%;
  inset-inline-start: 30%;
  border-radius: var(--ebctaf5-radius-circle) 0 var(--ebctaf5-radius-circle) 0;
  background: var(--ebctaf5-leaf-color);
  animation-name: ebctaf5-leaf-sway;
  animation-duration: var(--ebctaf5-leaf-sway-duration);
  animation-timing-function: var(--ebctaf5-animation-ease);
  animation-iteration-count: var(--ebctaf5-animation-infinite);
  animation-direction: var(--ebctaf5-animation-alternate-reverse);
}

/* ============================ BUTTONS ROW ============================ */
.ebctaf5-btns {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: var(--ebctaf5-btns-align);
  flex-wrap: var(--ebctaf5-btns-wrap);
  gap: var(--ebctaf5-btns-gap);
}

/* ============================ BUTTON BASE ============================ */
.ebctaf5-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ebctaf5-btn-gap);
  padding: var(--ebctaf5-btn-padding-y) var(--ebctaf5-btn-padding-x);
  font-family: "El Messiri", sans-serif;
  font-size: var(--ebctaf5-btn-font-size);
  font-weight: var(--ebctaf5-btn-font-weight);
  letter-spacing: var(--ebctaf5-btn-letter-spacing);
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  transition: transform var(--ebctaf5-transition-duration) var(--ebctaf5-animation-ease),
    background var(--ebctaf5-transition-duration) var(--ebctaf5-animation-ease),
    box-shadow var(--ebctaf5-transition-duration) var(--ebctaf5-animation-ease),
    border-color var(--ebctaf5-transition-duration) var(--ebctaf5-animation-ease);
}

.ebctaf5-btn-ico {
  display: inline-flex;
  font-size: 1.25em;
  color: inherit;
  transition: transform var(--ebctaf5-transition-duration) var(--ebctaf5-animation-ease);
}

/* ============================ PRIMARY ============================ */
.ebctaf5-btn-pri {
  background: var(--ebctaf5-btn-pri-background);
  color: var(--ebctaf5-btn-pri-color);
  border: var(--ebctaf5-btn-pri-border);
  border-radius: var(--ebctaf5-btn-pri-border-radius);
  box-shadow: var(--ebctaf5-btn-pri-shadow);
  background-size: 170% 170%;
}
.ebctaf5-btn-pri:hover {
  background: var(--ebctaf5-btn-pri-hover-background);
  background-position: 100% 50%;
  transform: var(--ebctaf5-btn-pri-hover-transform);
  box-shadow: var(--ebctaf5-btn-pri-hover-shadow);
}
.ebctaf5-btn-pri:hover .ebctaf5-btn-ico {
  transform: var(--ebctaf5-btn-ico-hover-transform);
}
/* sheen sweep */
.ebctaf5-btn-pri::before {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  width: var(--ebctaf5-btn-sheen-size);
  left: -60%;
  background: linear-gradient(90deg, transparent, var(--ebctaf5-btn-sheen-color), transparent);
  transform: rotate(var(--ebctaf5-btn-sheen-rotate));
  transition: left var(--ebctaf5-sheen-duration) var(--ebctaf5-animation-ease);
}
.ebctaf5-btn-pri:hover::before {
  left: 130%;
}

/* ============================ SECONDARY ============================ */
.ebctaf5-btn-sec {
  background: var(--ebctaf5-btn-sec-background);
  color: var(--ebctaf5-btn-sec-color);
  border: var(--ebctaf5-btn-sec-border-width) solid var(--ebctaf5-btn-sec-border-color);
  border-radius: var(--ebctaf5-btn-sec-border-radius);
  box-shadow: var(--ebctaf5-btn-sec-shadow);
  backdrop-filter: blur(var(--ebctaf5-blur-glass));
  -webkit-backdrop-filter: blur(var(--ebctaf5-blur-glass));
}
.ebctaf5-btn-sec:hover {
  background: var(--ebctaf5-btn-sec-hover-background);
  color: var(--ebctaf5-btn-sec-hover-color);
  border-color: var(--ebctaf5-btn-sec-hover-border-color);
  box-shadow: var(--ebctaf5-btn-sec-hover-shadow);
  transform: var(--ebctaf5-btn-sec-hover-transform);
}
.ebctaf5-btn-sec:hover .ebctaf5-btn-ico {
  transform: var(--ebctaf5-btn-ico-hover-transform);
}

/* ============================ RIPPLE ============================ */
.ebctaf5-ripple {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: var(--ebctaf5-radius-circle);
  background: var(--ebctaf5-ripple-color);
  transform: translate(-50%, -50%) scale(0);
  animation-name: ebctaf5-ripple-out;
  animation-duration: var(--ebctaf5-ripple-duration);
  animation-timing-function: var(--ebctaf5-animation-ease);
  animation-fill-mode: forwards;
  pointer-events: none;
}

/* ============================ KEYFRAMES ============================ */
@keyframes ebctaf5-glow-drift-a {
  0% { transform: translate(0, 0); }
  100% { transform: translate(var(--ebctaf5-glow-drift-a-distance), var(--ebctaf5-glow-drift-b-distance)); }
}
@keyframes ebctaf5-glow-drift-b {
  0% { transform: translate(0, 0); }
  100% { transform: translate(var(--ebctaf5-glow-drift-b-distance), var(--ebctaf5-glow-drift-a-distance)); }
}
@keyframes ebctaf5-leaf-sway {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(var(--ebctaf5-leaf-sway-distance), 0) rotate(8deg); }
}
@keyframes ebctaf5-ripple-out {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(30); opacity: 0; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
/* Mini Screen */
@media (max-width: 320px) {
  .ebctaf5 {
    --ebctaf5-btn-font-size: var(--ebctaf5-btn-font-size-mini);
    --ebctaf5-btn-padding-y: var(--ebctaf5-btn-padding-y-mobile);
    --ebctaf5-btn-padding-x: var(--ebctaf5-btn-padding-x-mobile);
    --ebctaf5-btns-gap: var(--ebctaf5-btns-gap-mobile);
    --ebctaf5-btns-align: var(--ebctaf5-btns-align-center);
  }
}
/* Small Phone */
@media (min-width: 321px) and (max-width: 375px) {
  .ebctaf5 {
    --ebctaf5-btn-font-size: var(--ebctaf5-btn-font-size-mobile);
    --ebctaf5-btn-padding-y: var(--ebctaf5-btn-padding-y-mobile);
    --ebctaf5-btn-padding-x: var(--ebctaf5-btn-padding-x-mobile);
    --ebctaf5-btns-align: var(--ebctaf5-btns-align-center);
  }
}
/* Medium Phone */
@media (min-width: 376px) and (max-width: 425px) {
  .ebctaf5 {
    --ebctaf5-btn-font-size: var(--ebctaf5-btn-font-size-mobile);
    --ebctaf5-btn-padding-y: var(--ebctaf5-btn-padding-y-mobile);
    --ebctaf5-btns-align: var(--ebctaf5-btns-align-center);
  }
}
/* Large Phone */
@media (min-width: 426px) and (max-width: 480px) {
  .ebctaf5 {
    --ebctaf5-btn-font-size: var(--ebctaf5-btn-font-size-mobile);
    --ebctaf5-btns-align: var(--ebctaf5-btns-align-center);
  }
}
/* Small Tablet */
@media (min-width: 481px) and (max-width: 600px) {
  .ebctaf5 {
    --ebctaf5-btns-align: var(--ebctaf5-btns-align-center);
  }
}
/* Medium Tablet */
@media (min-width: 601px) and (max-width: 768px) {
  .ebctaf5 {
    --ebctaf5-btns-align: var(--ebctaf5-btns-align-center);
  }
}
/* Large Tablet */
@media (min-width: 769px) and (max-width: 1024px) {
  /* base */
}
/* Small Desktop */
@media (min-width: 1025px) and (max-width: 1280px) {
  /* base */
}
/* Medium Desktop */
@media (min-width: 1281px) and (max-width: 1440px) {
  /* base */
}
/* Large Desktop */
@media (min-width: 1441px) and (max-width: 1920px) {
  /* base */
}
/* Extra Large Screens */
@media (min-width: 1921px) {
  /* base */
}

@media (prefers-reduced-motion: reduce) {
  .ebctaf5-glow {
    animation: none !important;
  }
  .ebctaf5-glow-a::after {
    animation: none !important;
  }
  .ebctaf5-btn-pri::before {
    transition: none;
  }
  .ebctaf5-ripple {
    animation: none !important;
    display: none;
  }
}