/* Divi Accessibility Suite — interactive demo styles */

.a11y-demo { display: grid; grid-template-columns: 320px 1fr; gap: 0; }
@media (max-width: 960px) { .a11y-demo { grid-template-columns: 1fr; } }

/* Settings panel (styled like the plugin dashboard) */
.a11y-panel { background: #15123d; color: #d7d4fb; padding: 22px; display: flex; flex-direction: column; gap: 6px; }
.a11y-panel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; color: #fff; font-weight: 800; }
.a11y-panel-head svg { width: 30px; height: 30px; flex: none; }
.a11y-panel p.hint { font-size: .85rem; color: #a6a2dd; margin: 0 0 10px; }
.a11y-opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .06); }
.a11y-opt .label { display: block; color: #fff; font-weight: 700; font-size: .92rem; line-height: 1.3; }
.a11y-opt .group { display: block; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: #9a95d8; font-weight: 700; margin-bottom: 2px; }
.a11y-opt .switch { color: #fff; }
.a11y-panel .switch .track { background: #4a4680; }
.a11y-panel .switch input:checked + .track { background: #12c99b; }
.a11y-score { margin-top: 12px; padding: 14px; border-radius: 12px; background: rgba(18, 201, 155, .12); color: #b6f5e2; font-size: .9rem; }
.a11y-score strong { color: #fff; font-size: 1.05rem; }
.a11y-score .bar { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .12); margin-top: 8px; overflow: hidden; }
.a11y-score .bar span { display: block; height: 100%; background: #12c99b; width: 0; transition: width .3s ease; }
.a11y-actions { display: flex; gap: 8px; margin-top: 8px; }
.a11y-actions button { flex: 1; font: inherit; font-size: .85rem; font-weight: 700; padding: 9px 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .25); background: transparent; color: #fff; cursor: pointer; }
.a11y-actions button:hover { background: rgba(255, 255, 255, .1); }

/* Preview column */
.a11y-preview { display: flex; flex-direction: column; min-width: 0; }
.a11y-reader { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: #0e0b2e; color: #e8e6ff; font-size: .88rem; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; border-top: 1px solid rgba(255, 255, 255, .08); min-height: 46px; }
.a11y-reader svg { width: 18px; height: 18px; flex: none; color: #34e0b0; }
.a11y-reader .muted { color: #8d88c9; }

/* The sample "website" with deliberate accessibility problems */
.a11y-sample { --s-text: #2a2840; background: #fff; color: var(--s-text); font-size: 15px; line-height: 1.55; position: relative; flex: 1; }
.a11y-sample *:focus { outline: none; }
.a11y-sample.fx-focus *:focus-visible { outline: 3px solid #ffb020; outline-offset: 3px; border-radius: 6px; box-shadow: 0 0 0 6px rgba(255, 176, 32, .25); }

.s-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid #eee; }
.s-logo { font-weight: 800; font-size: 1.05rem; color: #1a1830; display: flex; align-items: center; gap: 8px; }
.s-logo i { width: 22px; height: 22px; border-radius: 6px; background: linear-gradient(135deg, #ff7a59, #ffb020); display: block; }
.s-icons { display: flex; gap: 6px; }
.s-icons button { width: 36px; height: 36px; border-radius: 50%; border: 0; background: #f4f3f8; color: #2a2840; display: grid; place-items: center; cursor: pointer; }
.s-icons button svg { width: 18px; height: 18px; }

.s-hero { position: relative; padding: 26px 20px; background: linear-gradient(110deg, #ffe9e0, #fff4d6, #e9f7ff, #ffe9e0); background-size: 300% 100%; animation: s-pan 6s linear infinite; overflow: hidden; }
.s-hero h3 { margin: 0 0 6px; font-size: 1.35rem; color: #1a1830; }
.s-hero p.low { color: #b9b7c8; margin: 0 0 14px; max-width: 30em; }
.s-badge { position: absolute; right: 18px; top: 16px; width: 58px; height: 58px; border-radius: 50%; background: #ff7a59; color: #fff; font-weight: 800; font-size: .75rem; display: grid; place-items: center; animation: s-spin 4s linear infinite; }
.s-cta { display: inline-block; padding: 9px 18px; border-radius: 999px; background: #ffd9cc; color: #ffffff; font-weight: 700; cursor: pointer; user-select: none; }
.s-cta.was-clicked { background: #1a1830; }
.s-cta-count { font-size: .8rem; color: #6b6985; margin-left: 10px; }

@keyframes s-pan { to { background-position: 300% 0; } }
@keyframes s-spin { to { transform: rotate(360deg); } }
.a11y-sample.fx-motion .s-hero, .a11y-sample.fx-motion .s-badge { animation: none; }

.s-products { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; padding: 18px 20px; }
.s-products figure { margin: 0; position: relative; }
.s-products img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; display: block; }
.s-products figcaption { font-weight: 700; margin-top: 6px; font-size: .9rem; }
.s-products a { color: #c9c7d6; font-size: .85rem; }

.s-form { padding: 4px 20px 22px; display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.s-form .s-field { flex: 1 1 200px; display: flex; flex-direction: column; gap: 4px; }
.s-form label { font-weight: 700; font-size: .85rem; color: #1a1830; }
.s-form label .req { color: #d6334a; }
.s-form input { font: inherit; padding: 10px 12px; border: 1.5px solid #e2e0ea; border-radius: 8px; }
.s-form button { font: inherit; font-weight: 700; padding: 10px 18px; border-radius: 8px; border: 0; background: #1a1830; color: #fff; cursor: pointer; }
.a11y-sample.fx-forms .s-form input[required] { border-color: #8b86b8; }

/* Issue flags drawn by the checker */
.a11y-flag { outline: 2px dashed #e5484d !important; outline-offset: 2px; }
.a11y-flag-label {
  position: absolute;
  z-index: 3;
  background: #e5484d;
  color: #fff;
  font: 700 11px/1.2 var(--font, system-ui);
  padding: 3px 7px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .4);
}
.a11y-flag-label.ok { background: #0fb98a; }