/* ark-wcd - Styles (bottom positions + SVG fallback + visibility fixes) */

:root{
  --ark-wcd-primary: #1ab744;
  --ark-wcd-text: #fff;
  --ark-wcd-size: 40px;
  --ark-wcd-pulse-duration: 1.5s;
  --ark-wcd-offset-vertical: 30px;
  --ark-wcd-offset-horizontal: 30px;
  --ark-wcd-box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}
section.ark-dashboard {
    display: flex;
    justify-content: space-evenly;
    flex-direction: row;
    flex-wrap: nowrap;
}
/* wrapper base */
#ark-wcd-wrapper {
  pointer-events: none;
  position: fixed;
  z-index: 9999999;
  width: var(--ark-wcd-size);
  height: var(--ark-wcd-size);
}

/* Position classes (right/left + top/middle/bottom) */
#ark-wcd-wrapper.ark-wcd-pos-right-middle { right: var(--ark-wcd-offset-horizontal); top: 50%; transform: translateY(-50%); }
#ark-wcd-wrapper.ark-wcd-pos-left-middle  { left: var(--ark-wcd-offset-horizontal); top: 50%; transform: translateY(-50%); }
#ark-wcd-wrapper.ark-wcd-pos-right-top    { right: var(--ark-wcd-offset-horizontal); top: var(--ark-wcd-offset-vertical); transform: none; }
#ark-wcd-wrapper.ark-wcd-pos-left-top     { left: var(--ark-wcd-offset-horizontal); top: var(--ark-wcd-offset-vertical); transform: none; }
#ark-wcd-wrapper.ark-wcd-pos-right-bottom { right: var(--ark-wcd-offset-horizontal); bottom: var(--ark-wcd-offset-vertical); transform: none; top: auto; }
#ark-wcd-wrapper.ark-wcd-pos-left-bottom  { left: var(--ark-wcd-offset-horizontal); bottom: var(--ark-wcd-offset-vertical); transform: none; top: auto; }

/* Pulse layers (absolute inside wrapper) */
.ark-wcd-pulse {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--ark-wcd-size);
  height: var(--ark-wcd-size);
  border-radius: 50%;
  background: var(--ark-wcd-primary);
  pointer-events: none;
  opacity: 0.9;
}

/* Anchor button (clickable) */
.ark-wcd-button {
  position: absolute;
  left: 0;
  top: 0;
  display:inline-block;
  width: var(--ark-wcd-size);
  height: var(--ark-wcd-size);
  border-radius: 50%;
  line-height: var(--ark-wcd-size);
  box-shadow: var(--ark-wcd-box-shadow);
  cursor: pointer;
  background: var(--ark-wcd-primary);
  color: var(--ark-wcd-text);
  text-decoration: none;
  pointer-events: auto; /* allow link clicks */
  text-align: center;
  overflow: hidden;
}

/* Icon image: ensure visible */
.ark-wcd-icon img {
  display: block;
  margin: 0 auto;
  width: auto;
  height: auto;
  vertical-align: middle;
}

/* Pulse animation */
@keyframes ark-wcd-pulse {
  0% { transform: scale(0.1); opacity: 0; }
  50% { opacity: 0.25; }
  100% { transform: scale(2); opacity: 0; }
}
.pulse-1 { animation: ark-wcd-pulse var(--ark-wcd-pulse-duration) infinite; }
.pulse-2 { animation: ark-wcd-pulse var(--ark-wcd-pulse-duration) infinite 0.3s; }
.pulse-3 { animation: ark-wcd-pulse var(--ark-wcd-pulse-duration) infinite 0.6s; }

.ark-wcd-button:hover,
.ark-wcd-button:focus { transform: scale(1.2); transition: transform .15s ease-in-out; }

/* Mobile fallback: middle -> bottom on small screens */
@media (max-width: 768px) {
  #ark-wcd-wrapper.ark-wcd-pos-right-middle,
  #ark-wcd-wrapper.ark-wcd-pos-left-middle {
    top: auto;
    bottom: var(--ark-wcd-offset-vertical);
    transform: none;
  }
}

/* Admin page layout helpers (small) */
.afcb-container { display:flex; justify-content:space-between; gap:20px; margin-top:24px; }
.afcb-settings-form { width:58%; padding:20px; background:#fff; box-shadow:0 6px 18px rgba(0,0,0,0.06); border-radius:6px; }
#afcb-about-developer { width:38%; padding:18px; background:#f9f9f9; box-shadow:0 6px 18px rgba(0,0,0,0.06); border-radius:6px; }