/* Craft Description — Shortcode CSS */

/* ── Mode DESCRIPTIONS (segmented control) ──────────────── */
.crd-sc-wrapper { font-family: inherit; margin: 0 0 24px; }

.crd-sc-nav {
    display: flex;
    background: var(--crd-nav-bg, #eaecf3);
    border-radius: var(--crd-nav-radius, 12px);
    padding: 5px;
    gap: 3px;
    overflow-x: auto;
    scrollbar-width: none;
}
.crd-sc-nav::-webkit-scrollbar { display: none; }

.crd-sc-nav-item {
    flex: 1;
    min-width: 80px;
    padding: 14px 10px;
    background: transparent;
    border: none;
    border-radius: var(--crd-btn-radius, 8px);
    cursor: pointer;
    font-size: var(--crd-font-size, 15px);
    font-weight: 500;
    color: var(--crd-inactive-color, #ffffff);
    text-align: center;
    white-space: nowrap;
    transition: color .15s, background .15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.crd-sc-nav-item:hover:not(.crd-sc-active) {
    color: var(--crd-hover-color, rgba(255,255,255,.5));
    background: transparent;
}
.crd-sc-nav-item.crd-sc-active {
    background: var(--crd-active-bg, #ffffff);
    color: var(--crd-active-color, #111111);
    font-weight: 700;
    border-radius: var(--crd-btn-radius, 8px);
}
.crd-sc-nav-item .dashicons { font-size: 16px; width: 16px; height: 16px; line-height: 1; }

.crd-sc-panels { background: var(--crd-panel-bg, #ffffff); }
.crd-sc-panel { display: none; padding: 28px 4px; }
.crd-sc-panel[hidden] { display: none; }
.crd-sc-panel.crd-sc-panel-active { display: block; animation: crd-fadein .2s ease; }

@keyframes crd-fadein { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }

.crd-sc-panel h2 { margin-top:0; font-size:1.3em; color:#111827; margin-bottom:12px; }
.crd-sc-panel p  { margin:0 0 16px; line-height:1.75; color:#374151; }
.crd-sc-panel p:last-child { margin-bottom:0; }
.crd-sc-panel ul,.crd-sc-panel ol { padding-left:20px; margin:0 0 16px; color:#374151; line-height:1.75; }
.crd-sc-panel a  { color:#2271b1; }
.crd-sc-panel img { max-width:100%; height:auto; border-radius:6px; }

/* ── Mode FAQ ────────────────────────────────────────────── */
.crd-sc-faq { }
.crd-sc-acc-item { border-bottom: 1px solid var(--crd-faq-border, #e8e9ec); }
.crd-sc-acc-item:last-child { border-bottom: none; }

.crd-sc-acc-trigger {
    width: 100%; display: flex; align-items: center; gap: 10px;
    padding: 16px 4px;
    background: var(--crd-faq-trigger-bg, transparent);
    border: none; cursor: pointer;
    font-size: var(--crd-faq-font-size, 15px);
    font-weight: 500;
    color: var(--crd-faq-color, #111111);
    text-align: left; transition: color .15s;
}
.crd-sc-acc-trigger:hover { color: var(--crd-faq-hover-color, rgba(0,0,0,.45)); }
.crd-sc-acc-trigger > span:nth-child(2) { flex: 1; }

.crd-sc-acc-arrow {
    width: 10px; height: 10px;
    border-right: 2px solid var(--crd-faq-arrow-color, #3d4460);
    border-bottom: 2px solid var(--crd-faq-arrow-color, #3d4460);
    transform: rotate(45deg);
    transition: transform .2s; flex-shrink: 0;
}
.crd-sc-acc-open .crd-sc-acc-arrow { transform: rotate(-135deg); }
.crd-sc-acc-body[hidden] { display: none; }
.crd-sc-acc-content {
    padding: 4px 4px 20px;
    color: var(--crd-faq-content-color, #374151);
    line-height: 1.75; font-size: 15px;
}
.crd-sc-acc-content p { margin: 0 0 14px; }
.crd-sc-acc-content p:last-child { margin-bottom: 0; }

/* ── Notice ──────────────────────────────────────────────── */
.crd-sc-notice { background:#fff8e1; border-left:4px solid #f0b429; padding:12px 16px; border-radius:4px; font-size:13px; color:#7a5c00; margin:0 0 20px; }

@media (max-width: 600px) {
    .crd-sc-nav-item { flex:0 0 auto; font-size:14px; padding:12px 14px; }
    .crd-sc-panel { padding:20px 0; }
}