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

/* ============================================================
   FLOATING CONTACT — THEME 5 (Mint Meadow)
   Identity: organic garden / mint sage / natural
   Layout:   Leaf Rail — سكة عمودية بأزرار ورقية عضوية بزوايا
             منحنية طبيعية، اللوحة زجاجية خضراء تنبثق للجانب
             الداخلي من السكة، نبض حكيم أخضر، ترغر أوراقي
   Fonts:    El Messiri
   ============================================================ */

.ebctad5-wrapper {
  --ebctad5-font-family: 'El Messiri', sans-serif;

  --ebctad5-animation-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ebctad5-transition-duration: 0.45s;

  --ebctad5-blur-glass: 14px;
  --ebctad5-radius-pill: 999px;
  --ebctad5-radius-card: 24px;

  --ebctad5-overlay-bg: rgba(16, 36, 26, 0.42);
  --ebctad5-panel-bg: rgba(226, 245, 233, 0.92);
  --ebctad5-panel-border: 1px solid rgba(108, 158, 120, 0.55);
  --ebctad5-panel-shadow: 0 26px 55px -22px rgba(16, 36, 26, 0.5);
  --ebctad5-panel-title-color: #24412c;
  --ebctad5-panel-badge-bg: #d7ead8;
  --ebctad5-panel-badge-border: rgba(108, 158, 120, 0.7);
  --ebctad5-panel-badge-color: #2f5a3c;
  --ebctad5-dot-color: #3ddc97;
  --ebctad5-close-color: #2f5a3c;
  --ebctad5-close-hover-bg: #cfe5d2;
  --ebctad5-item-bg: rgba(255, 255, 255, 0.7);
  --ebctad5-item-border: 1px solid rgba(108, 158, 120, 0.5);
  --ebctad5-item-hover-border: rgba(57, 115, 76, 0.9);
  --ebctad5-item-label-color: #24412c;
  --ebctad5-item-val-color: #55705c;
  --ebctad5-item-icon-bg: linear-gradient(135deg, #a9d5ac, #5fa86f);
  --ebctad5-item-icon-color: #ffffff;
  --ebctad5-btn-bg: rgba(226, 245, 233, 0.9);
  --ebctad5-btn-border: 1px solid rgba(108, 158, 120, 0.65);
  --ebctad5-btn-hover-border: rgba(57, 115, 76, 0.9);
  --ebctad5-btn-text-color: #24412c;
  --ebctad5-btn-icon-bg: linear-gradient(135deg, #d7ead8, #a9d5ac);
  --ebctad5-btn-icon-color: #24412c;
  --ebctad5-trigger-bg: linear-gradient(135deg, #6fbf83, #3f8a55);
  --ebctad5-trigger-icon-color: #ffffff;
  --ebctad5-divider-bg: rgba(108, 158, 120, 0.45);
  --ebctad5-pulse-color: rgba(79, 150, 96, 0.5);

  position: fixed;
  bottom: 1.5rem;
  inset-inline-end: 1.5rem;
  z-index: 9999;
  font-family: var(--ebctad5-font-family);
  direction: rtl;
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  opacity: 0;
  pointer-events: none;
  transform: translateY(18px);
  transition: opacity var(--ebctad5-transition-duration) var(--ebctad5-animation-ease), transform var(--ebctad5-transition-duration) var(--ebctad5-animation-ease);
}
.ebctad5-wrapper.ebctad5-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }

/* ============================ OVERLAY ============================ */
.ebctad5-overlay {
  position: fixed;
  inset: 0;
  background: var(--ebctad5-overlay-bg);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ebctad5-transition-duration) var(--ebctad5-animation-ease);
}
.ebctad5-wrapper.ebctad5-open .ebctad5-overlay { opacity: 1; pointer-events: auto; }

/* ============================ PANEL ============================ */
.ebctad5-panel {
  position: absolute;
  bottom: 0;
  inset-inline-end: calc(100% + 0.9rem);
  width: 320px;
  max-width: calc(100vw - 3rem);
  border-radius: var(--ebctad5-radius-card);
  background: var(--ebctad5-panel-bg);
  border: var(--ebctad5-panel-border);
  box-shadow: var(--ebctad5-panel-shadow);
  backdrop-filter: blur(var(--ebctad5-blur-glass));
  -webkit-backdrop-filter: blur(var(--ebctad5-blur-glass));
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateX(14px);
  transition: opacity var(--ebctad5-transition-duration) var(--ebctad5-animation-ease), transform var(--ebctad5-transition-duration) var(--ebctad5-animation-ease);
}
.ebctad5-wrapper.ebctad5-open .ebctad5-panel { opacity: 1; pointer-events: auto; transform: translateX(0); }

.ebctad5-panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.2rem 1.3rem 0.55rem; }
.ebctad5-panel-title-group { display: flex; flex-direction: column; gap: 0.5rem; }
.ebctad5-panel-badge { display: inline-flex; align-items: center; gap: 0.45rem; align-self: flex-start; padding: 0.3rem 0.85rem; border-radius: var(--ebctad5-radius-pill); background: var(--ebctad5-panel-badge-bg); border: 1px solid var(--ebctad5-panel-badge-border); color: var(--ebctad5-panel-badge-color); font-size: 0.72rem; font-weight: 700; }
.ebctad5-dot-online { width: 8px; height: 8px; border-radius: 50%; background: var(--ebctad5-dot-color); box-shadow: 0 0 0 3px rgba(61, 220, 151, 0.25); animation: ebctad5-dot-blink 1.8s infinite; }
@keyframes ebctad5-dot-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.ebctad5-panel-title { margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--ebctad5-panel-title-color); }

.ebctad5-panel-close {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(215, 234, 216, 0.8);
  color: var(--ebctad5-close-color);
  font-size: 0.95rem;
  cursor: pointer;
  transition: background var(--ebctad5-transition-duration) var(--ebctad5-animation-ease);
}
.ebctad5-panel-close:hover { background: var(--ebctad5-close-hover-bg); }

.ebctad5-panel-body { display: flex; flex-direction: column; gap: 0.7rem; padding: 0.7rem 1.3rem 1.3rem; }
.ebctad5-panel-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border-radius: 20px;
  background: var(--ebctad5-item-bg);
  border: 1px solid var(--ebctad5-item-border);
  text-decoration: none;
  transition: border-color var(--ebctad5-transition-duration) var(--ebctad5-animation-ease), transform var(--ebctad5-transition-duration) var(--ebctad5-animation-ease);
}
.ebctad5-panel-item:hover { border-color: var(--ebctad5-item-hover-border); transform: translateY(-2px); }
.ebctad5-panel-info { display: flex; flex-direction: column; gap: 0.18rem; }
.ebctad5-panel-label { font-size: 0.95rem; font-weight: 700; color: var(--ebctad5-item-label-color); }
.ebctad5-panel-val { font-size: 0.78rem; color: var(--ebctad5-item-val-color); }
.ebctad5-panel-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50% 50% 50% 12px; background: var(--ebctad5-item-icon-bg); color: var(--ebctad5-item-icon-color); font-size: 1.05rem; flex: 0 0 auto; }

/* ============================ DOCK ============================ */
.ebctad5-dock { display: flex; flex-direction: column; gap: 0.6rem; }

.ebctad5-btn {
  position: relative;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 0.7rem;
  padding: 0.45rem;
  border-radius: var(--ebctad5-radius-pill);
  background: var(--ebctad5-btn-bg);
  border: var(--ebctad5-btn-border);
  color: var(--ebctad5-btn-text-color);
  font-family: var(--ebctad5-font-family);
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: border-color var(--ebctad5-transition-duration) var(--ebctad5-animation-ease), transform var(--ebctad5-transition-duration) var(--ebctad5-animation-ease);
}
.ebctad5-btn:hover { border-color: var(--ebctad5-btn-hover-border); transform: translateX(-3px); }
.ebctad5-btn-text { padding-inline-start: 0.5rem; white-space: nowrap; }
.ebctad5-icon-box { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50% 50% 50% 14px; background: var(--ebctad5-btn-icon-bg); color: var(--ebctad5-btn-icon-color); font-size: 1.1rem; flex: 0 0 auto; }

.ebctad5-btn-trigger { background: var(--ebctad5-trigger-bg); border: none; color: var(--ebctad5-trigger-icon-color); }
.ebctad5-btn-trigger .ebctad5-icon-box { background: rgba(255, 255, 255, 0.22); color: #ffffff; border-radius: 50% 50% 50% 14px; }
.ebctad5-icon-close { display: none; }
.ebctad5-wrapper.ebctad5-open .ebctad5-icon-open { display: none; }
.ebctad5-wrapper.ebctad5-open .ebctad5-icon-close { display: block; }

.ebctad5-pulse {
  position: absolute;
  inset: 0;
  border-radius: var(--ebctad5-radius-pill);
  border: 2px solid var(--ebctad5-pulse-color);
  pointer-events: none;
  animation: ebctad5-pulse 2.4s infinite;
}
@keyframes ebctad5-pulse {
  0% { transform: scale(1); opacity: 0.85; }
  70% { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}

.ebctad5-dock-divider { width: 46px; height: 1px; background: var(--ebctad5-divider-bg); align-self: center; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 320px) {
  .ebctad5-wrapper { bottom: 0.8rem; inset-inline-end: 0.8rem; }
  .ebctad5-btn-text { display: none; }
  .ebctad5-btn { padding: 0.4rem; }
  .ebctad5-icon-box { width: 42px; height: 42px; }
  .ebctad5-panel { bottom: calc(100% + 0.9rem); inset-inline-end: 0; width: 280px; max-width: calc(100vw - 1.6rem); }
  .ebctad5-panel-body { padding: 0.6rem 1rem 1rem; }
  .ebctad5-panel-item { padding: 0.75rem 0.85rem; }
}
@media (min-width: 321px) and (max-width: 375px) {
  .ebctad5-wrapper { bottom: 0.9rem; inset-inline-end: 0.9rem; }
  .ebctad5-btn-text { display: none; }
  .ebctad5-icon-box { width: 44px; height: 44px; }
  .ebctad5-panel { bottom: calc(100% + 0.9rem); inset-inline-end: 0; width: 292px; max-width: calc(100vw - 1.8rem); }
}
@media (min-width: 376px) and (max-width: 425px) {
  .ebctad5-wrapper { bottom: 1rem; inset-inline-end: 1rem; }
  .ebctad5-panel { bottom: calc(100% + 0.9rem); inset-inline-end: 0; width: 300px; max-width: calc(100vw - 2rem); }
}
@media (min-width: 426px) and (max-width: 480px) {
  .ebctad5-wrapper { bottom: 1.1rem; inset-inline-end: 1.1rem; }
  .ebctad5-panel { bottom: calc(100% + 0.9rem); inset-inline-end: 0; width: 310px; max-width: calc(100vw - 2.2rem); }
}
@media (min-width: 481px) and (max-width: 600px) {
  .ebctad5-wrapper { bottom: 1.2rem; inset-inline-end: 1.2rem; }
  .ebctad5-panel { bottom: calc(100% + 0.9rem); inset-inline-end: 0; max-width: calc(100vw - 2.4rem); }
}
@media (min-width: 601px) and (max-width: 768px) {
  .ebctad5-wrapper { bottom: 1.3rem; inset-inline-end: 1.3rem; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .ebctad5-wrapper { bottom: 1.4rem; inset-inline-end: 1.4rem; }
}
@media (min-width: 1025px) and (max-width: 1280px) {
  /* base */
}
@media (min-width: 1281px) and (max-width: 1440px) {
  /* base */
}
@media (min-width: 1441px) and (max-width: 1920px) {
  /* base */
}
@media (min-width: 1921px) {
  /* base */
}

@media (prefers-reduced-motion: reduce) {
  .ebctad5-wrapper,
  .ebctad5-panel,
  .ebctad5-overlay,
  .ebctad5-btn,
  .ebctad5-panel-close,
  .ebctad5-panel-item,
  .ebctad5-pulse,
  .ebctad5-dot-online {
    animation: none !important;
    transition: none !important;
  }
  .ebctad5-pulse { display: none !important; }
}