/* ==========================================================================
   Accredify Component Library — All Component Styles
   ========================================================================== */

:root {
  --acl-navy:       #143c64;
  --acl-gold:       #b4913c;
  --acl-gold-light: #f5e9c8;
  --acl-green:      #2e7d32;
  --acl-orange:     #e65100;
  --acl-red:        #c62828;
  --acl-grey:       #f4f6f8;
  --acl-border:     #dde1e4;
  --acl-radius:     8px;
  --acl-shadow:     0 2px 12px rgba(0,0,0,.10);
  --acl-transition: .25s ease;
}

/* ── Admin helpers ──────────────────────────────────────────────────────── */
.acl-admin-table { width:100%; border-collapse:collapse; }
.acl-admin-table th, .acl-admin-table td { padding:10px 14px; border-bottom:1px solid var(--acl-border); text-align:left; vertical-align:middle; }
.acl-admin-table th { background:var(--acl-navy); color:#fff; font-size:13px; }
.acl-top-action { margin-bottom:16px; }
.acl-type-chooser { padding:24px 0; }
.acl-type-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; margin-top:16px; }
.acl-type-card { display:block; padding:20px; background:#fff; border:2px solid var(--acl-border); border-radius:var(--acl-radius); text-decoration:none; color:#333; transition:border-color var(--acl-transition),transform var(--acl-transition); }
.acl-type-card:hover { border-color:var(--acl-gold); transform:translateY(-2px); }
.acl-type-card__title { font-weight:700; color:var(--acl-navy); margin-bottom:4px; }
.acl-type-card__desc { font-size:12px; color:#666; }
.acl-item-row { margin-bottom:8px; }
.acl-add-btn { font-size:13px !important; margin-top:8px !important; }
.acl-placeholder { background:#fffde7; border:1px dashed #f9a825; border-radius:var(--acl-radius); padding:12px 16px; margin:12px 0; font-size:13px; color:#5d4037; }

/* ── Timeline ───────────────────────────────────────────────────────────── */
.acl-timeline { position:relative; padding:24px 0; }
.acl-tl__line { position:absolute; left:50%; top:0; bottom:0; width:3px; background:var(--acl-gold); transform:translateX(-50%); }
.acl-tl__item { display:flex; width:100%; margin-bottom:32px; position:relative; }
.acl-tl__item--left  { justify-content:flex-end; padding-right:calc(50% + 24px); }
.acl-tl__item--right { justify-content:flex-start; padding-left:calc(50% + 24px); }
.acl-tl__dot { position:absolute; left:50%; top:16px; width:14px; height:14px; background:var(--acl-navy); border:3px solid var(--acl-gold); border-radius:50%; transform:translateX(-50%); z-index:1; }
.acl-tl__content { background:#fff; border:1px solid var(--acl-border); border-radius:var(--acl-radius); box-shadow:var(--acl-shadow); padding:16px 20px; max-width:380px; }
.acl-tl__date  { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.8px; color:var(--acl-gold); margin-bottom:4px; }
.acl-tl__title { font-size:16px; font-weight:700; color:var(--acl-navy); margin-bottom:6px; }
.acl-tl__desc  { font-size:14px; color:#555; line-height:1.6; }
.acl-tl__img img { max-width:100%; border-radius:4px; margin-top:8px; }
@media (max-width:640px) {
  .acl-tl__line { left:20px; }
  .acl-tl__item--left, .acl-tl__item--right { padding-left:48px; padding-right:0; justify-content:flex-start; }
  .acl-tl__dot { left:20px; }
}

/* ── Accordion ──────────────────────────────────────────────────────────── */
.acl-accordion { border:1px solid var(--acl-border); border-radius:var(--acl-radius); overflow:hidden; }
.acl-accordion__item { border-bottom:1px solid var(--acl-border); }
.acl-accordion__item:last-child { border-bottom:none; }
.acl-accordion__trigger { width:100%; display:flex; justify-content:space-between; align-items:center; padding:14px 18px; background:#fff; border:none; cursor:pointer; font-size:15px; font-weight:600; color:var(--acl-navy); text-align:left; transition:background var(--acl-transition); }
.acl-accordion__trigger:hover, .acl-accordion__trigger[aria-expanded="true"] { background:var(--acl-grey); }
.acl-accordion__icon { font-size:18px; transition:transform var(--acl-transition); }
.acl-accordion__trigger[aria-expanded="true"] .acl-accordion__icon { transform:rotate(45deg); }
.acl-accordion__panel { padding:0 18px; max-height:0; overflow:hidden; transition:max-height .3s ease, padding .3s ease; }
.acl-accordion__panel:not([hidden]) { padding:14px 18px; max-height:1000px; }

/* ── Callouts ───────────────────────────────────────────────────────────── */
.acl-callout { display:flex; gap:12px; align-items:flex-start; padding:16px 20px; border-radius:var(--acl-radius); margin:16px 0; border-left:5px solid; }
.acl-callout--info    { background:#e3f2fd; border-color:#1565c0; }
.acl-callout--warning { background:#fff8e1; border-color:#f9a825; }
.acl-callout--success { background:#e8f5e9; border-color:var(--acl-green); }
.acl-callout--danger  { background:#fce4ec; border-color:var(--acl-red); }
.acl-callout__icon { font-size:22px; flex-shrink:0; margin-top:2px; }
.acl-callout__title { display:block; font-weight:700; margin-bottom:4px; color:var(--acl-navy); }
/* Specific callout types */
.acl-tip-box      { background:#f0f9ff; border-color:#0277bd; }
.acl-did-you-know { background:#f3e5f5; border-color:#6a1b9a; }
.acl-pmi-note     { background:#e8eaf6; border-color:#283593; }
.acl-exam-tip     { background:#fce4ec; border-color:#880e4f; }
.acl-common-mistake { background:#fff3e0; border-color:var(--acl-orange); }
.acl-common-mistake__row { margin-bottom:10px; }
.acl-common-mistake__wrong { color:var(--acl-red);   margin-bottom:4px; font-size:14px; }
.acl-common-mistake__right { color:var(--acl-green); font-size:14px; }
.acl-pmi-note__src { font-size:12px; color:#666; margin-top:6px; font-style:italic; }

/* ── Comparison Table ───────────────────────────────────────────────────── */
.acl-comparison-table { overflow-x:auto; margin:16px 0; }
.acl-comparison-table table { width:100%; border-collapse:collapse; }
.acl-comparison-table th { background:var(--acl-navy); color:#fff; padding:10px 14px; text-align:left; }
.acl-comparison-table td { padding:10px 14px; border-bottom:1px solid var(--acl-border); }
.acl-comparison-table tr:hover td { background:var(--acl-grey); }
.acl-ct__label { font-weight:600; color:var(--acl-navy); }

/* ── Process Diagram ────────────────────────────────────────────────────── */
.acl-process-diagram { display:flex; align-items:flex-start; gap:0; overflow-x:auto; padding:16px 0; }
.acl-pd__step { background:#fff; border:2px solid var(--acl-navy); border-radius:var(--acl-radius); padding:16px; min-width:140px; max-width:180px; text-align:center; flex-shrink:0; }
.acl-pd__icon  { font-size:28px; margin-bottom:6px; }
.acl-pd__num   { font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--acl-gold); margin-bottom:4px; }
.acl-pd__title { font-weight:700; color:var(--acl-navy); font-size:14px; margin-bottom:4px; }
.acl-pd__desc  { font-size:12px; color:#666; line-height:1.5; }
.acl-pd__arrow { font-size:24px; color:var(--acl-gold); padding:0 6px; display:flex; align-items:center; margin-top:28px; }

/* ── Animated Flow ──────────────────────────────────────────────────────── */
.acl-animated-flow { margin:16px 0; }
.acl-af__inner { display:flex; flex-direction:column; gap:0; align-items:center; }
.acl-af-node { padding:12px 24px; border-radius:var(--acl-radius); margin:4px 0; text-align:center; min-width:200px; max-width:360px; opacity:0; transform:translateY(12px); transition:opacity .4s ease, transform .4s ease; }
.acl-af-node--visible { opacity:1; transform:translateY(0); }
.acl-af-node--start   { background:var(--acl-navy); color:#fff; border-radius:24px; }
.acl-af-node--process { background:#fff; border:2px solid var(--acl-navy); }
.acl-af-node--decision { background:var(--acl-gold-light); border:2px solid var(--acl-gold); clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%); padding:28px 24px; }
.acl-af-node--end     { background:var(--acl-green); color:#fff; border-radius:24px; }
.acl-af-node__label { font-weight:700; font-size:14px; }
.acl-af-node__desc  { font-size:12px; margin-top:4px; opacity:.85; }
.acl-af-arrow { color:var(--acl-gold); font-size:20px; }
.acl-af-arrow__label { font-size:11px; color:#888; }

/* ── Lifecycle ──────────────────────────────────────────────────────────── */
.acl-lifecycle { display:flex; gap:24px; align-items:flex-start; flex-wrap:wrap; margin:16px 0; }
.acl-lc__svg  { width:320px; height:320px; flex-shrink:0; }
.acl-lc__slice { cursor:pointer; transition:opacity .2s; }
.acl-lc__slice:hover { opacity:.85; }
.acl-lc__detail { flex:1; min-width:200px; padding:16px; background:#fff; border:1px solid var(--acl-border); border-radius:var(--acl-radius); }
.acl-lc__detail-title { font-weight:700; color:var(--acl-navy); margin-bottom:8px; }
.acl-lc__detail-desc  { font-size:14px; color:#555; line-height:1.6; }

/* ── Image Gallery ──────────────────────────────────────────────────────── */
.acl-image-gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; margin:16px 0; }
.acl-gallery__cell { position:relative; overflow:hidden; border-radius:var(--acl-radius); cursor:pointer; }
.acl-gallery__img  { width:100%; height:140px; object-fit:cover; display:block; transition:transform .3s; }
.acl-gallery__cell:hover .acl-gallery__img { transform:scale(1.04); }
.acl-gallery__caption { position:absolute; bottom:0; left:0; right:0; background:rgba(0,0,0,.6); color:#fff; font-size:11px; padding:4px 8px; }
.acl-lightbox { position:fixed; inset:0; background:rgba(0,0,0,.85); z-index:9999; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; }
.acl-lightbox[hidden] { display:none; }
.acl-lightbox__close { position:absolute; top:16px; right:20px; font-size:28px; color:#fff; cursor:pointer; }
.acl-lightbox__img   { max-width:90vw; max-height:80vh; border-radius:4px; }
.acl-lightbox__caption { color:#eee; font-size:14px; }

/* ── Video Player ───────────────────────────────────────────────────────── */
.acl-video-player { margin:16px 0; }
.acl-video-player iframe, .acl-video-player video { width:100%; aspect-ratio:16/9; border-radius:var(--acl-radius); border:none; display:block; }
.acl-video-player__caption { font-size:13px; color:#666; margin-top:6px; font-style:italic; }

/* ── Quiz / Knowledge Check / Practice Question ─────────────────────────── */
.acl-quiz { margin:16px 0; background:#fff; border:1px solid var(--acl-border); border-radius:var(--acl-radius); overflow:hidden; }
.acl-quiz__header { background:var(--acl-navy); color:#fff; padding:12px 20px; font-weight:600; }
.acl-quiz__question-block { padding:20px; border-bottom:1px solid var(--acl-border); }
.acl-quiz__q-text { font-size:15px; font-weight:600; color:var(--acl-navy); margin-bottom:12px; }
.acl-quiz__options { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.acl-quiz__option { display:flex; align-items:flex-start; gap:10px; padding:10px 14px; border:2px solid var(--acl-border); border-radius:var(--acl-radius); cursor:pointer; transition:border-color .2s, background .2s; }
.acl-quiz__option:hover { border-color:var(--acl-navy); background:var(--acl-grey); }
.acl-quiz__option--selected { border-color:var(--acl-navy); background:#e8eef5; }
.acl-quiz__option--correct  { border-color:var(--acl-green); background:#e8f5e9; }
.acl-quiz__option--wrong    { border-color:var(--acl-red);   background:#fce4ec; }
.acl-quiz__option input[type="radio"] { margin-top:2px; flex-shrink:0; }
.acl-quiz__option-text { font-size:14px; line-height:1.5; }
.acl-quiz__explanation { font-size:13px; color:#555; font-style:italic; margin-top:6px; padding:8px 12px; background:#f9f9f9; border-radius:4px; display:none; }
.acl-quiz__explanation--visible { display:block; }
.acl-quiz__actions { padding:16px 20px; display:flex; gap:10px; flex-wrap:wrap; }
.acl-quiz__score-banner { margin:16px 20px; padding:12px 16px; border-radius:var(--acl-radius); font-weight:700; font-size:16px; }
.acl-quiz__score-banner--pass { background:#e8f5e9; color:var(--acl-green); border-left:5px solid var(--acl-green); }
.acl-quiz__score-banner--fail { background:#fff3e0; color:var(--acl-orange); border-left:5px solid var(--acl-orange); }
.acl-quiz__progress { height:4px; background:var(--acl-grey); }
.acl-quiz__progress-fill { height:100%; background:var(--acl-gold); transition:width .3s; }

/* ── Scenario ───────────────────────────────────────────────────────────── */
.acl-scenario { margin:16px 0; }
.acl-sc__inner { background:#fff; border:1px solid var(--acl-border); border-radius:var(--acl-radius); overflow:hidden; }
.acl-sc__node { padding:24px; }
.acl-sc__text { font-size:15px; line-height:1.7; color:#333; margin-bottom:16px; }
.acl-sc__choices { display:flex; flex-direction:column; gap:10px; }
.acl-sc__choice { padding:12px 16px; background:var(--acl-grey); border:2px solid var(--acl-border); border-radius:var(--acl-radius); cursor:pointer; font-size:14px; transition:border-color .2s; }
.acl-sc__choice:hover { border-color:var(--acl-navy); }
.acl-sc__end { padding:24px; background:var(--acl-gold-light); text-align:center; }
.acl-sc__restart { margin-top:12px; }

/* ── Reflection ─────────────────────────────────────────────────────────── */
.acl-reflection { margin:16px 0; background:#f9fbff; border:1px solid #c5d5e8; border-radius:var(--acl-radius); padding:20px; }
.acl-reflection__question { font-size:16px; font-weight:600; color:var(--acl-navy); margin-bottom:8px; }
.acl-reflection__guidance { font-size:13px; color:#555; margin-bottom:12px; font-style:italic; }
.acl-reflection__textarea { width:100%; border:1px solid var(--acl-border); border-radius:4px; padding:10px; font-size:14px; resize:vertical; }
.acl-reflection__note { font-size:11px; color:#888; margin-top:6px; }

/* ── Flip Cards ─────────────────────────────────────────────────────────── */
.acl-flipcards { margin:16px 0; }
.acl-fc__controls { display:flex; align-items:center; gap:10px; margin-bottom:12px; flex-wrap:wrap; }
.acl-fc__counter { font-size:13px; color:#666; flex:1; text-align:center; }
.acl-fc__deck { perspective:1000px; min-height:200px; position:relative; }
.acl-fc__card { position:absolute; width:100%; top:0; left:0; cursor:pointer; display:none; }
.acl-fc__card--active { display:block; }
.acl-fc__inner { position:relative; width:100%; min-height:200px; transform-style:preserve-3d; transition:transform .5s ease; border-radius:var(--acl-radius); }
.acl-fc__card--flipped .acl-fc__inner { transform:rotateY(180deg); }
.acl-fc__front, .acl-fc__back { position:absolute; width:100%; min-height:200px; backface-visibility:hidden; border-radius:var(--acl-radius); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:32px; text-align:center; }
.acl-fc__front { background:var(--acl-navy); color:#fff; }
.acl-fc__back  { background:var(--acl-gold-light); color:var(--acl-navy); transform:rotateY(180deg); }
.acl-fc__cat  { font-size:11px; text-transform:uppercase; letter-spacing:1px; opacity:.7; margin-bottom:8px; }
.acl-fc__term { font-size:22px; font-weight:700; }
.acl-fc__def  { font-size:16px; line-height:1.6; }

/* ── Matching ───────────────────────────────────────────────────────────── */
.acl-matching { margin:16px 0; }
.acl-matching__inner { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.acl-match-col { display:flex; flex-direction:column; gap:8px; }
.acl-match-item { padding:10px 14px; background:#fff; border:2px solid var(--acl-border); border-radius:var(--acl-radius); font-size:14px; cursor:pointer; transition:border-color .2s; user-select:none; }
.acl-match-item--selected { border-color:var(--acl-navy); background:#e8eef5; }
.acl-match-item--correct  { border-color:var(--acl-green); background:#e8f5e9; cursor:default; }
.acl-match-item--wrong    { border-color:var(--acl-red);   background:#fce4ec; }
.acl-match-left  { font-weight:600; color:var(--acl-navy); }
.acl-matching__check { margin-top:12px; }
.acl-matching__result { margin-top:10px; font-weight:600; }

/* ── Drag and Drop ──────────────────────────────────────────────────────── */
.acl-drag-drop { margin:16px 0; }
.acl-dd__bank { display:flex; gap:8px; flex-wrap:wrap; padding:12px; background:var(--acl-grey); border-radius:var(--acl-radius); margin-bottom:16px; min-height:52px; }
.acl-dd__item { padding:8px 14px; background:#fff; border:2px solid var(--acl-border); border-radius:20px; font-size:13px; cursor:grab; user-select:none; transition:border-color .2s, box-shadow .2s; }
.acl-dd__item:hover { border-color:var(--acl-navy); box-shadow:var(--acl-shadow); }
.acl-dd__item--dragging { opacity:.5; }
.acl-dd__zones { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; }
.acl-dd__zone { padding:12px; background:#fff; border:2px dashed var(--acl-border); border-radius:var(--acl-radius); min-height:80px; transition:border-color .2s, background .2s; }
.acl-dd__zone--over { border-color:var(--acl-navy); background:#e8eef5; }
.acl-dd__zone-label { font-weight:700; color:var(--acl-navy); font-size:13px; margin-bottom:8px; }
.acl-dd__zone-items { display:flex; gap:6px; flex-wrap:wrap; }
.acl-dd__item--correct { border-color:var(--acl-green); background:#e8f5e9; }
.acl-dd__item--wrong   { border-color:var(--acl-red);   background:#fce4ec; }
.acl-dd__check  { margin-top:12px; }
.acl-dd__result { margin-top:10px; font-weight:600; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width:640px) {
  .acl-matching__inner { grid-template-columns:1fr; }
  .acl-process-diagram { flex-direction:column; align-items:center; }
  .acl-pd__arrow { transform:rotate(90deg); }
  .acl-lifecycle { flex-direction:column; }
  .acl-lc__svg { width:100%; height:auto; }
}

/* ── Bulk import step indicator ─────────────────────────────────────────── */
.acl-steps {
  display: flex;
  gap: 24px;
  list-style: none;
  padding: 12px 0;
  margin: 0 0 24px;
  border-bottom: 2px solid #e0e6ed;
}
.acl-steps li {
  font-size: 14px;
  color: #aaa;
  font-weight: 500;
}
.acl-steps .acl-step--active {
  color: #1565c0;
  font-weight: 700;
}
.acl-steps .acl-step--done {
  color: #27ae60;
}
.acl-steps .acl-step--done::after {
  content: ' ✔';
}