/* ════════════════════════════════════════════════
   ACCESSIBILITY PANEL — sama seperti panel di Portal
════════════════════════════════════════════════ */
#a11yPanel, #a11yBackdrop, #fabA11y{
  --a11y-sec:      #158684;
  --a11y-sec-dark: #0f6e6c;
  --a11y-pri:      #fd8200;
  --a11y-text:     #111827;
  --a11y-muted:    #6b7280;
  --a11y-border:   #e5e7eb;
  --a11y-card:     #ffffff;
  font-family: 'Poppins', 'Plus Jakarta Sans', sans-serif;
}

/* ── FAB trigger (kiri-bawah, agar tidak bentrok dengan live chat) ── */
#fabA11y{
  position: fixed; left: 20px; bottom: 20px; z-index: 999995;
  width: 48px; height: 48px; border-radius: 50%; border: none;
  background: #2196f3; color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,0.30);
  transition: transform 0.18s;
}
#fabA11y:hover{ transform: scale(1.10); }
#fabA11y svg{ width: 22px; height: 22px; }

/* ── Backdrop ── */
.a11y-backdrop{
  position: fixed; inset: 0; z-index: 999994;
  background: rgba(0,0,0,0.35);
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s;
}
.a11y-backdrop.open{ opacity: 1; pointer-events: all; }

/* ── Panel ── */
.a11y-panel{
  position: fixed; left: 16px; bottom: 80px; z-index: 999996;
  width: 320px; max-width: calc(100vw - 32px);
  background: var(--a11y-card); border-radius: 22px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.28), 0 4px 16px rgba(0,0,0,0.12);
  overflow: hidden;
  transform: translateY(20px) scale(0.96);
  opacity: 0; pointer-events: none;
  transition: transform 0.3s cubic-bezier(.34,1.56,.64,1), opacity 0.25s;
}
.a11y-panel.open{
  transform: translateY(0) scale(1);
  opacity: 1; pointer-events: all;
}

.a11y-header{
  background: linear-gradient(135deg, #f0f9f7 0%, #dcf1ee 100%);
  padding: 16px 20px;
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid rgba(21,134,132,.10);
}
.a11y-header svg{ color: var(--a11y-sec); width: 20px; height: 20px; flex-shrink: 0; }
.a11y-header-title{
  font-size: 12px; font-weight: 800; letter-spacing: 2px;
  text-transform: uppercase; color: var(--a11y-sec-dark); flex: 1;
}
.a11y-close{
  width: 28px; height: 28px; border-radius: 50%; border: none;
  background: rgba(21,134,132,.10); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--a11y-sec); transition: background 0.15s;
}
.a11y-close:hover{ background: rgba(21,134,132,.20); }
.a11y-close svg{ width: 14px; height: 14px; }

.a11y-body{ padding: 16px; display: flex; flex-direction: column; gap: 0; }

.a11y-section{ padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid #f0f0f0; }
.a11y-section:last-child{ border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.a11y-label{
  font-size: 10px; font-weight: 700; letter-spacing: 1.8px;
  text-transform: uppercase; color: #999; margin-bottom: 10px;
}

.a11y-btn-row{ display: flex; gap: 8px; }
.a11y-btn{
  flex: 1; padding: 10px 4px;
  border-radius: 12px; border: 1.5px solid #e8e8e8;
  background: #f6f6f6; cursor: pointer;
  font-family: inherit;
  font-weight: 700; color: #555;
  transition: all 0.2s; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.a11y-btn:hover{ border-color: var(--a11y-sec); color: var(--a11y-sec); background: #f0f9f7; }
.a11y-btn.active{
  background: var(--a11y-sec); border-color: var(--a11y-sec); color: #fff;
  box-shadow: 0 2px 8px rgba(21,134,132,.28);
}
.a11y-btn svg{ width: 16px; height: 16px; }

/* Theme buttons */
.a11y-theme-row{ display: flex; gap: 8px; }
.a11y-theme-btn{
  flex: 1; padding: 10px 6px;
  border-radius: 12px; border: 1.5px solid #e8e8e8;
  background: #f6f6f6; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
.a11y-theme-btn:hover{ border-color: var(--a11y-sec); background: #f0f9f7; }
.a11y-theme-btn.active{ border-color: var(--a11y-sec); background: #f0f9f7; box-shadow: 0 2px 8px rgba(21,134,132,.18); }
.a11y-theme-btn svg{ width: 20px; height: 20px; color: #333; }

/* Toggle switch */
.a11y-toggle-row{
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 0;
}
.a11y-toggle-label{
  display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 600; color: #333;
}
.a11y-toggle-label svg{ width: 17px; height: 17px; color: #666; }
.a11y-switch{ position: relative; width: 46px; height: 26px; flex-shrink: 0; }
.a11y-switch input{ opacity: 0; width: 0; height: 0; }
.a11y-switch-track{
  position: absolute; inset: 0; border-radius: 13px;
  background: #ddd; cursor: pointer;
  transition: background 0.25s;
}
.a11y-switch input:checked + .a11y-switch-track{ background: var(--a11y-sec); }
.a11y-switch-track::after{
  content: ''; position: absolute;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; top: 3px; left: 3px;
  transition: transform 0.25s cubic-bezier(.34,1.56,.64,1);
  box-shadow: 0 1px 4px rgba(0,0,0,0.20);
}
.a11y-switch input:checked + .a11y-switch-track::after{ transform: translateX(20px); }

/* Reset button */
.a11y-reset{
  width: 100%; padding: 12px;
  border-radius: 12px; border: 1.5px dashed #ddd;
  background: transparent; cursor: pointer;
  font-family: inherit;
  font-size: 13px; font-weight: 600; color: #999;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  transition: all 0.2s; margin-top: 4px;
}
.a11y-reset:hover{ border-color: var(--a11y-sec); color: var(--a11y-sec); background: #f0f9f7; }
.a11y-reset svg{ width: 14px; height: 14px; }

@media (max-width: 480px){
  #fabA11y{ left: 14px; bottom: 18px; }
  .a11y-panel{ left: 12px; bottom: 76px; }
}