/* WPBAT Frontend CSS */
/* ── OVERLAY ── */
.wpbat-overlay {
  position: fixed; inset: 0; z-index: 999990;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  opacity: 0; visibility: hidden; transition: opacity .32s, visibility .32s;
  /* Force LTR: prevents body.rtl from misaligning the modal */
  direction: ltr !important;
  text-align: left;
}
.wpbat-overlay.wpbat-visible { opacity: 1; visibility: visible; }
.wpbat-overlay[hidden]       { display: none !important; }

/* Overlay backgrounds */
.wpbat-overlay-inner {
  position: absolute; inset: 0;
  transition: backdrop-filter .32s;
  pointer-events: none;
}

/* ── MODAL ── */
.wpbat-modal {
  position: relative; width: 100%; max-height: 90vh;
  overflow-y: auto; overflow-x: hidden;
  transform: scale(.9) translateY(20px);
  transition: transform .32s cubic-bezier(.25,.46,.45,.94);
  will-change: transform;
  box-sizing: border-box;
  /* Restore RTL inside modal content for Arabic text */
  direction: rtl;
  text-align: right;
}
/* For LTR sites: reset modal direction back to normal */
body:not(.rtl) .wpbat-modal {
  direction: ltr;
  text-align: left;
}
.wpbat-visible .wpbat-modal { transform: scale(1) translateY(0); }

/* Entrance animations */
.wpbat-entrance-slide-in-up    .wpbat-modal { transform: translateY(60px) scale(.98); }
.wpbat-entrance-slide-in-down  .wpbat-modal { transform: translateY(-60px) scale(.98); }
.wpbat-entrance-slide-in-left  .wpbat-modal { transform: translateX(60px); }
.wpbat-entrance-slide-in-right .wpbat-modal { transform: translateX(-60px); }
.wpbat-entrance-fade-in        .wpbat-modal { transform: none; }
.wpbat-visible .wpbat-modal { transform: none !important; }

/* ── CLOSE BUTTON ── */
.wpbat-close-btn {
  position: absolute; top: 12px; right: 12px; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%; cursor: pointer;
  transition: background .15s, transform .15s; line-height: 1;
}
.wpbat-close-btn:hover { transform: scale(1.15); }

/* ── ELEMENTS ── */
.wpbat-element { display: block; }
.wpbat-btn-link {
  display: inline-block; text-decoration: none; cursor: pointer;
  transition: transform .15s, box-shadow .15s, opacity .15s;
}
/* Hover animations */
.wpbat-anim-grow:hover   { transform: scale(1.05); }
.wpbat-anim-shrink:hover { transform: scale(0.96); }
.wpbat-anim-float:hover  { transform: translateY(-3px); }
.wpbat-anim-glow:hover   { box-shadow: 0 0 18px 4px currentColor !important; }
.wpbat-anim-pulse        { animation: wpbat-pulse 2s infinite; }
.wpbat-anim-wobble:hover { animation: wpbat-wobble .5s; }
@keyframes wpbat-pulse   { 0%,100%{box-shadow:0 0 0 0 rgba(40,120,255,.6)} 70%{box-shadow:0 0 0 10px rgba(40,120,255,0)} }
@keyframes wpbat-wobble  { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-3deg)} 75%{transform:rotate(3deg)} }

/* countdown */
.wpbat-countdown { display: inline-flex; flex-wrap: wrap; }
.wpbat-cd-num  { font-variant-numeric: tabular-nums; }

/* ── COLUMN ZONES ── */
.wpbat-cols { display: flex; }
.wpbat-col  { flex: 1; min-width: 0; }
@media (max-width: 640px) { .wpbat-cols { flex-direction: column; } }

/* ── ALIGN UTILITIES ── */
.wpbat-align-left    { text-align: left; }
.wpbat-align-center  { text-align: center; }
.wpbat-align-right   { text-align: right; }
.wpbat-align-justify { text-align: justify; }

/* text/links inherit */
.wpbat-element a { color: inherit; }

/* ── SECTION LAYOUT ── */
.wpbat-section {
  display: flex;
  box-sizing: border-box;
}
.wpbat-section > * {
  flex-shrink: 0;
  max-width: 100%;
}
/* Stretch children in height when section has align-items:stretch */
.wpbat-section[style*="align-items:stretch"] > *,
.wpbat-section:not([style*="align-items"]) > * {
  align-self: stretch;
}
/* Nested sections inside stretched children should fill the height */
.wpbat-section[style*="align-items:stretch"] > * > .wpbat-section,
.wpbat-section:not([style*="align-items"]) > * > .wpbat-section {
  min-height: 100% !important;
}

/* Container element styles */
.wpbat-container {
  box-sizing: border-box;
  width: 100%;
}

/* ── ENTRANCE ANIMATIONS ────────────────────────────────────── */
@keyframes wpbat-fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes wpbat-fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes wpbat-fadeInDown {
  from { opacity: 0; transform: translateY(-30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes wpbat-fadeInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes wpbat-fadeInRight {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes wpbat-zoomIn {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes wpbat-bounceIn {
  from { opacity: 0; transform: scale(0.3); }
  50% { transform: scale(1.05); }
  70% { transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes wpbat-slideInUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* Entrance animation classes */
.wpbat-anim-fadeIn { animation: wpbat-fadeIn 0.4s ease-out both; }
.wpbat-anim-fadeInUp { animation: wpbat-fadeInUp 0.4s ease-out both; }
.wpbat-anim-fadeInDown { animation: wpbat-fadeInDown 0.4s ease-out both; }
.wpbat-anim-fadeInLeft { animation: wpbat-fadeInLeft 0.4s ease-out both; }
.wpbat-anim-fadeInRight { animation: wpbat-fadeInRight 0.4s ease-out both; }
.wpbat-anim-zoomIn { animation: wpbat-zoomIn 0.4s ease-out both; }
.wpbat-anim-bounceIn { animation: wpbat-bounceIn 0.6s ease-out both; }
@keyframes wpbat-slideInDown {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}

.wpbat-anim-slideInDown { animation: wpbat-slideInDown 0.4s ease-out both; }