/* ===== CSS VARIABLE SYSTEM ===== */
:root {
    /* --- A: Primary Palette --- */
    --af-color-primary: #2d5a3f;
    /* Xanh rêu đậm (deep moss) */
    --af-color-accent: #c7973e;
    /* Vàng lá khô / vàng đất (golden amber) */
    --af-color-accent-muted: rgba(199, 151, 62, 0.10);

    /* --- B: Text Colors --- */
    --af-title-color: #1a2e1f;
    /* Đen rừng (forest black-green) */
    --af-desc-color: #4a5e4f;
    /* Xám xanh rêu */
    --af-desc-color-alt: #697a6e;
    /* Xám lá nhạt */
    --af-number-color: #1a2e1f;
    --af-step-color: #2d5a3f;
    /* Xanh rêu */
    --af-badge-color: #2d5a3f;
    --af-tab-inactive-color: #697a6e;
    --af-tab-active-color: #fafaf7;
    /* Trắng ấm */
    --af-accordion-active-title: #3d7a52;
    /* Xanh lá tươi */
    --af-icon-fg: #fafaf7;
    --af-on-bg-text: #fafaf7;

    /* --- C: Backgrounds --- */
    --af-page-bg: #eef2eb;
    /* Xám xanh nhạt (sage mist) */
    --af-content-bg: #f5f3ec;
    /* Kem lá khô — warm parchment */
    --af-item-bg-alt: #e4ece0;
    /* Xanh xám nhạt (soft sage) */
    --af-badge-bg: #dce8d6;
    /* Xanh rêu rất nhạt */
    --af-visual-header-bg: #f2f5ef;
    /* Sương mù nhạt */
    --af-icon-bg: #2d5a3f;
    --af-step-bg: #fafaf7;
    --af-tab-inactive-bg: #e4ece0;
    --af-tab-active-bg: #2d5a3f;
    --af-quote-bg: #fafaf7;
    --af-progress-track-bg: #c5d1c0;
    /* Đá rêu */
    --af-progress-fill-bg: #3d7a52;
    /* Xanh lá tươi */
    --af-bg-overlay: rgba(26, 46, 31, 0.50);

    /* --- D: Borders --- */
    --af-border-color: #c5d1c0;
    /* Xám rêu */
    --af-border-alt-color: #a8bea0;
    /* Xám lá đậm hơn */
    --af-border-radius: 12px;
    --af-border-radius-sm: 6px;
    --af-border-radius-pill: 999px;
    --af-star-empty-color: #c5d1c0;
    --af-star-fill-color: #d4a843;
    /* Vàng lá cây (golden leaf) */

    /* --- E: Axis & Connectors --- */
    --af-axis-color: #2d5a3f;
    --af-axis-h-color: #2d5a3f;
    --af-connector-color: #3d7a52;
    /* Xanh lá tươi */
    --af-dot-color: #2d5a3f;
    --af-step-connector-color: #3d7a52;
    --af-step-border-color: #3d7a52;
    --af-bubble-stroke-color: #c5d1c0;
    --af-quote-boxed-accent: #c7973e;
    /* Vàng đất */

    /* --- F: Shadows --- */
    --af-shadow-card: 0 10px 25px rgba(45, 90, 63, 0.12);
    --af-shadow-box: 0 10px 30px rgba(45, 90, 63, 0.06);
    --af-shadow-zig: 0 4px 20px rgba(45, 90, 63, 0.08);
    --af-shadow-accent: 0 4px 10px rgba(45, 90, 63, 0.15);
    --af-shadow-btn: 0 4px 6px -1px rgba(45, 90, 63, 0.12);

    /* --- G: Misc UI --- */
    --af-visual-subtle-bg: rgba(45, 90, 63, 0.04);
    /* side-split visual bg */
    --af-bullet-glow: 0 0 14px 3px rgba(45, 90, 63, 0.35);
    /* bullet soft glow */
    --af-btn-hover-color: #3d7a52;
    /* btn hover accent */
    --af-btn-hover-bg: #e4ece0;
    /* btn hover bg */
}

/* Base styles for Card Mode */
body {
    margin: 0;
    padding: 0;
    background: var(--af-page-bg);
    font-family: Arial, sans-serif;
    color: var(--af-title-color);
    line-height: 1.5;
}

/* Header */
.af-page-header {
    width: 100%;
    min-height: 0;
    background: var(--af-content-bg);
    display: none;
    /* Mặc định ẩn */
}

.af-cards-container {
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

/* Standardized Card Sizes */
.af-card-item {
    background-color: var(--af-content-bg, #ffffff);
    width: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: var(--af-shadow-card);
    border-radius: var(--af-border-radius);
    position: relative;
    overflow: hidden;
    break-after: page;
    transition: all 0.3s ease;
    margin: 0 auto;
    /* Reset margin, centering by default */
}

/* Spacing Logic: 
   - Không có khoảng hở nào ở card đầu tiên trên trang.
   - Các card Standard có margin-top/bottom dựa trên kích thước:
     - Medium: 40px
     - Large: 80px
     - Classic: 60px
     - Square: 40px
     - A4/Letter: 100px
   - Nếu card LÀ Full Width, các margin này sẽ được reset về 0 !important.
*/
.af-card-item:not([data-af-std-layout$="-fw"]) {
    margin-top: 40px;
    margin-bottom: 40px;
}

.af-card-item[data-af-std-layout*="medium"]:not([data-af-std-layout$="-fw"]) {
    margin-top: 40px;
    margin-bottom: 40px;
}

.af-card-item[data-af-std-layout*="large"]:not([data-af-std-layout$="-fw"]) {
    margin-top: 80px;
    margin-bottom: 80px;
}

.af-card-item[data-af-std-layout*="classic"]:not([data-af-std-layout$="-fw"]) {
    margin-top: 60px;
    margin-bottom: 60px;
}

.af-card-item[data-af-std-layout*="square"]:not([data-af-std-layout$="-fw"]) {
    margin-top: 40px;
    margin-bottom: 40px;
}

.af-card-item[data-af-std-layout*="a4"]:not([data-af-std-layout$="-fw"]),
.af-card-item[data-af-std-layout*="letter"]:not([data-af-std-layout$="-fw"]) {
    margin-top: 100px;
    margin-bottom: 100px;
}

/* Triệt tiêu margin-top của card đầu tiên */
.af-card-item:first-child {
    margin-top: 0 !important;
}

/* 1. Sizes (Dùng selector chứa chuỗi để áp dụng cho mọi layout của size đó) */
.af-card-item[data-af-std-layout*="medium"] {
    max-width: 700px;
    min-height: 350px;
    /* Thay vì dùng aspect-ratio cứng, dùng min-height để cho phép nở */
}

.af-card-item[data-af-std-layout*="large"] {
    max-width: 1100px;
    min-height: 620px;
}

.af-card-item[data-af-std-layout*="classic"] {
    max-width: 800px;
    min-height: 600px;
    /* 4:3 ratio based on 800px width */
}

.af-card-item[data-af-std-layout*="square"] {
    max-width: 600px;
    min-height: 600px;
    /* 1:1 ratio */
}

.af-card-item[data-af-std-layout*="a4"] {
    max-width: 800px;
    min-height: 1130px;
    /* 1:1.414 ratio */
}

.af-card-item[data-af-std-layout*="letter"] {
    max-width: 800px;
    min-height: 1035px;
    /* 1:1.294 ratio (8.5x11) */
}

/* 2. Full Width Variation (Đồng nhất qua hậu tố -fw) */
[data-af-std-layout$="-fw"] {
    max-width: none !important;
    width: 100% !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    /* Triệt tiêu margin top */
    margin-bottom: 0 !important;
    /* Triệt tiêu margin bottom */
    border: none !important;
}

/* Fix chiều cao cho Medium khi Full Width để không bị quá cao */
.af-card-item[data-af-std-layout*="medium"][data-af-std-layout$="-fw"] {
    min-height: 350px;
}

/* Fix chiều cao cho Large khi Full Width (Tỷ lệ 16:9 của 1100px ~ 620px) */
.af-card-item[data-af-std-layout*="large"][data-af-std-layout$="-fw"] {
    min-height: 620px;
}

/* Fix chiều cao cho Classic khi Full Width (4:3) */
.af-card-item[data-af-std-layout*="classic"][data-af-std-layout$="-fw"] {
    min-height: 600px;
}

/* Fix chiều cao cho Square khi Full Width (1:1) */
.af-card-item[data-af-std-layout*="square"][data-af-std-layout$="-fw"] {
    min-height: 600px;
}

/* Fix chiều cao cho A4 khi Full Width (Tỷ lệ dọc 1:1.414 của 800px ~ 1131px, khóa 1000px cho FW) */
.af-card-item[data-af-std-layout*="a4"][data-af-std-layout$="-fw"] {
    min-height: 1000px;
}

/* Fix chiều cao cho Letter khi Full Width (8.5x11) */
.af-card-item[data-af-std-layout*="letter"][data-af-std-layout$="-fw"] {
    min-height: 1000px;
}

/* 2.1 Full Width with Constrained Content (Nền full width, nội dung giữ nguyên kích thước - Flat Strip) */
[data-af-std-layout$="-fw"].af-content-constrained {
    background-color: var(--af-content-bg, #ffffff) !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    border: none !important;
    /* Vertical padding is now size-specific (assigned below) */
}

/* Size-specific vertical padding for Constrained Content Mode */
[data-af-std-layout*="medium"][data-af-std-layout$="-fw"].af-content-constrained {
    padding-top: 40px;
    padding-bottom: 40px;
}

[data-af-std-layout*="large"][data-af-std-layout$="-fw"].af-content-constrained {
    padding-top: 100px;
    padding-bottom: 100px;
}

[data-af-std-layout*="classic"][data-af-std-layout$="-fw"].af-content-constrained {
    padding-top: 80px;
    padding-bottom: 80px;
}

[data-af-std-layout*="square"][data-af-std-layout$="-fw"].af-content-constrained {
    padding-top: 60px;
    padding-bottom: 60px;
}

[data-af-std-layout*="a4"][data-af-std-layout$="-fw"].af-content-constrained,
[data-af-std-layout*="letter"][data-af-std-layout$="-fw"].af-content-constrained {
    padding-top: 120px;
    padding-bottom: 120px;
}

/* The container only acts as a width wrapper (Flat look, NO border, shadow, or radius) */
[data-af-std-layout$="-fw"].af-content-constrained .af-card-container {
    background-color: transparent !important;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
}

/* Ensure content itself is transparent to show the strip's background */
[data-af-std-layout$="-fw"].af-content-constrained .af-card-content {
    background-color: transparent !important;
}

/* Apply rounded corners to the image box in constrained mode (since card radius is removed) */
[data-af-std-layout$="-fw"].af-content-constrained .af-card-image-box {
    border-radius: 12px;
    overflow: hidden;
}

/* Size-specific content constraints */
[data-af-std-layout*="medium"][data-af-std-layout$="-fw"].af-content-constrained .af-card-container {
    max-width: 700px;
}

[data-af-std-layout*="large"][data-af-std-layout$="-fw"].af-content-constrained .af-card-container {
    max-width: 1100px;
}

[data-af-std-layout*="classic"][data-af-std-layout$="-fw"].af-content-constrained .af-card-container {
    max-width: 800px;
}

[data-af-std-layout*="square"][data-af-std-layout$="-fw"].af-content-constrained .af-card-container {
    max-width: 600px;
}

[data-af-std-layout*="a4"][data-af-std-layout$="-fw"].af-content-constrained .af-card-container {
    max-width: 800px;
}

[data-af-std-layout*="letter"][data-af-std-layout$="-fw"].af-content-constrained .af-card-container {
    max-width: 800px;
}

/* Layout Engine */
.af-card-container {
    display: flex;
    width: 100%;
    flex: 1;
    position: relative;
    align-items: stretch;
    min-height: inherit;
    /* Đảm bảo thừa kế min-height*/
}

/* 1. Layout: No Image (Đồng nhất với data-af-std-layout) */
[data-af-std-layout*="-none"] .af-card-image-box {
    display: none;
}

/* 2. Layout: Image Top (Đồng nhất với data-af-std-layout) */
[data-af-std-layout*="-top"] {
    display: flex;
    flex-direction: column;
}

[data-af-std-layout*="-top"] .af-card-container {
    flex-direction: column;
    height: 100%;
}

[data-af-std-layout*="-top"] .af-card-image-box {
    flex: 0 0 auto;
    /* Không cho phép co giãn */
    height: 120px;
    /* Đặt chiều cao banner cố định cho Medium, sẽ override theo size bên dưới */
    width: 100%;
    overflow: hidden;
    display: block;
    position: relative;
}

/* Tinh chỉnh chiều cao banner theo từng Size để tỷ lệ vẫn đẹp khi nở */
.af-card-item[data-af-std-layout*="medium-top"] .af-card-image-box {
    height: 120px;
}

.af-card-item[data-af-std-layout*="large-top"] .af-card-image-box {
    height: 200px;
}

.af-card-item[data-af-std-layout*="classic-top"] .af-card-image-box {
    height: 180px;
}

.af-card-item[data-af-std-layout*="square-top"] .af-card-image-box {
    height: 200px;
}

.af-card-item[data-af-std-layout*="a4-top"] .af-card-image-box {
    height: 300px;
}

.af-card-item[data-af-std-layout*="letter-top"] .af-card-image-box {
    height: 280px;
}

[data-af-std-layout*="-top"] .af-card-content {
    flex: 1 0 auto;
    /* Cho phép content tự nở ra */
    display: flex;
    flex-direction: column;
    justify-content: var(--af-content-v-align, center);
}

/* 3. Layout: Image Left (Đồng nhất với data-af-std-layout) */
[data-af-std-layout*="-left"] .af-card-container {
    flex-direction: row;
}

[data-af-std-layout*="-left"] .af-card-image-box {
    width: 30%;
    flex: 0 0 30%;
    display: block;
    height: auto;
}

/* 4. Layout: Image Right (Đồng nhất với data-af-std-layout) */
[data-af-std-layout*="-right"] .af-card-container {
    flex-direction: row-reverse;
}

[data-af-std-layout*="-right"] .af-card-image-box {
    width: 30%;
    flex: 0 0 30%;
    display: block;
    height: auto;
}

/* 5. Layout: Background Image (Đồng nhất với data-af-std-layout) */
[data-af-std-layout*="-bg"] .af-card-image-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: block;
}

[data-af-std-layout*="-bg"] .af-card-content {
    position: relative;
    z-index: 2;
    background: var(--af-bg-overlay);
}

[data-af-std-layout*="-bg"] [data-af-std-part="title"],
[data-af-std-layout*="-bg"] [data-af-std-part="description"] {
    color: var(--af-on-bg-text);
}

.af-card-image-box {
    overflow: hidden;
}

.af-card-image-box img,
.af-card-image-box svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Nội dung */
.af-card-content {
    flex: 1;
    padding: var(--af-content-padding, 40px);
    display: flex;
    flex-direction: column;

    /* Vertical Alignment - Trục chính của Flex Column / Trục dọc của Grid */
    justify-content: var(--af-content-v-align, center);
    align-content: var(--af-content-v-align, center);

    /* Horizontal Alignment - Trục phụ của Flex Column / Trục ngang của Grid */
    align-items: var(--af-content-h-align, stretch);
    justify-items: var(--af-content-h-align, stretch);
    justify-content: var(--af-content-h-align, stretch);
    /* For grid horizontal track alignment */

    text-align: var(--af-text-align, left);
    background-color: var(--af-content-bg);
    font-family: var(--af-font-family, inherit);
}

/* Căn giữa content trong card full-width (giữ độ rộng nội dung nhưng không tạo gap ảnh) */
.af-full-width .af-card-container {
    justify-content: center;
}

[data-af-std-part="title"] {
    font-family: inherit;
    font-size: var(--af-title-size, 48px);
    font-weight: 700;
    margin: 0 0 24px 0;
    color: var(--af-title-color);
}

[data-af-std-part="description"] {
    font-family: inherit;
    font-size: var(--af-desc-size, 20px);
    font-weight: 400;
    line-height: 1.6;
    color: var(--af-desc-color);
    margin: 0;
}

/* Responsive cho mobile preview */
@media (max-width: 768px) {
    .af-card-item {
        aspect-ratio: auto;
        min-height: 400px;
        padding: 0;
        /* Bo padding de anh cham canh card */
    }

    [data-af-std-part="title"] {
        font-size: 28px;
    }

    .af-card-content {
        padding: 20px;
    }
}

/* Add Card Button Styles */
.af-add-card-wrapper {
    width: 100%;
    max-width: 1000px;
    display: none;
    /* Hidden by default, shown by inspector */
    justify-content: center;
    margin-top: 60px;
    margin-bottom: 80px;
}

.af-add-card-btn {
    background: var(--af-content-bg);
    border: 2px dashed var(--af-star-empty-color);
    color: var(--af-desc-color-alt);
    padding: 12px 30px;
    border-radius: var(--af-border-radius-sm);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: var(--af-shadow-btn);
}

.af-add-card-btn:hover {
    border-color: var(--af-btn-hover-color);
    color: var(--af-btn-hover-color);
    background: var(--af-btn-hover-bg);
    transform: translateY(-2px);
    box-shadow: var(--af-shadow-accent);
}

.af-add-card-btn svg {
    flex-shrink: 0;
}

/* Standardized Content Grid System */
.af-card-content[data-af-grid^="cols-"],
.af-card-content[data-af-grid^="rows-"] {
    display: grid !important;
}

/* Column-focused Grids (Wrap when items exceed columns) */
.af-card-content[data-af-grid^="cols-"] {
    grid-auto-flow: row;
    gap: 30px;
}

.af-card-content[data-af-grid="cols-1"] {
    grid-template-columns: 1fr;
}

.af-card-content[data-af-grid="cols-2-equal"] {
    grid-template-columns: 1fr 1fr;
}

.af-card-content[data-af-grid="cols-2-left"] {
    grid-template-columns: 2fr 1fr;
}

.af-card-content[data-af-grid="cols-2-right"] {
    grid-template-columns: 1fr 2fr;
}

.af-card-content[data-af-grid="cols-3"] {
    grid-template-columns: repeat(3, 1fr);
}

.af-card-content[data-af-grid="cols-4"] {
    grid-template-columns: repeat(4, 1fr);
}

/* Row-focused Grids */
.af-card-content[data-af-grid^="rows-"] {
    gap: 20px;
}

/* rows-1: Force all items into a single horizontal line */
.af-card-content[data-af-grid="rows-1"] {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
}

.af-card-content[data-af-grid="rows-2-equal"] {
    grid-template-rows: 1fr 1fr;
}

.af-card-content[data-af-grid="rows-2-top"] {
    grid-template-rows: 2fr 1fr;
}

.af-card-content[data-af-grid="rows-2-bottom"] {
    grid-template-rows: 1fr 2fr;
}

/* --- Universal Master Structure: af-content-item --- */
.af-content-item {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;

    /* Cấu hình căn lề duy nhất */
    text-align: inherit;
    align-items: var(--af-flex-align, flex-start);

    /* Cho phép Item co giãn theo nội dung để có thể "trôi" trong ô Grid */
    width: auto;
    max-width: 100%;
}

/* Trường hợp Horizontal Alignment là Stretch thì mới ép 100% width */
.af-card-item[data-af-h-align="stretch"] .af-content-item {
    width: 100%;
}

/* 1. Visual Zone */
.af-part-visual {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    position: relative;
}

[data-af-visual-pos="left"] .af-part-visual {
    margin-right: 15px;
    margin-bottom: 0;
}

[data-af-visual-pos="right"] .af-part-visual {
    margin-left: 15px;
    margin-bottom: 0;
}

.af-visual-container {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    overflow: hidden;
    width: 32px;
    /* Default size */
    height: 32px;
}

.af-visual-container i {
    font-size: 24px;
    color: var(--af-title-color);
}

.af-visual-container span {
    font-size: 32px;
    font-weight: 700;
    color: var(--af-title-color);
    line-height: 1;
    margin: 0;
    padding: 0;
    display: block;
}

/* 2. Info Zone */
.af-part-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Nghe lệnh trực tiếp từ biến căn lề toàn cục */
    align-items: var(--af-flex-align, flex-start);
    text-align: inherit;
}

/* Header/Trigger */
.af-part-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: var(--af-flex-align, flex-start);
}

/* Mapping text-align to flexbox alignment for visual and badge */
.af-content-item {
    --af-flex-align: flex-start;
    --af-connector-x: 18px;
    --af-connector-y: 18px;
}

[data-af-visual-pos="top"],
.af-content-item:not([data-af-visual-pos]) {
    flex-direction: column !important;
    align-items: var(--af-flex-align);
}

[data-af-visual-pos="left"] {
    flex-direction: row !important;
    align-items: flex-start;
    /* Điều khiển cả khối nội dung trôi theo căn lề chung */
    justify-content: var(--af-flex-align, flex-start);
}

[data-af-visual-pos="right"] {
    flex-direction: row-reverse !important;
    align-items: flex-start;
    justify-content: var(--af-flex-align, flex-start);
}

.af-card-item[data-af-text-align="center"] .af-content-item {
    --af-flex-align: center;
    --af-connector-x: 50%;
}

.af-card-item[data-af-text-align="right"] .af-content-item {
    --af-flex-align: flex-end;
    --af-connector-x: calc(100% - 18px);
}

.af-part-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--af-badge-color);
    background: var(--af-badge-bg);
    padding: 4px 10px;
    border-radius: var(--af-border-radius-sm);
    width: fit-content;
    align-self: var(--af-flex-align, flex-start);
    /* Theo cha là .af-content-item */
}

.af-part-title {
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    color: var(--af-title-color);
}

/* Body Payload */
.af-part-content-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.af-part-description {
    font-size: 16px;
    line-height: 1.6;
    color: var(--af-desc-color);
    margin: 0;
}

.af-part-footer {
    margin-top: 8px;
}

.af-btn-outline {
    padding: 8px 20px;
    border: 1px solid var(--af-border-color);
    background: transparent;
    border-radius: var(--af-border-radius-sm);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.af-btn-outline:hover {
    border-color: var(--af-number-color);
    background: var(--af-visual-header-bg);
}

/* --- Universal Variants & Positioning --- */
.af-content-item[data-af-visual-pos="left"] {
    flex-direction: row;
    gap: 20px;
    align-items: flex-start;
}

.af-content-item[data-af-visual-pos="right"] {
    flex-direction: row-reverse;
    gap: 20px;
    align-items: flex-start;
}

.af-content-item[data-af-visual-pos="top"] {
    flex-direction: column;
    gap: 15px;
}

/* Variant: Boxes */
/* Variant: Boxes */
.af-content-item[data-af-variant="box"] {
    background: var(--af-content-bg);
    border: 1px solid var(--af-border-color);
    padding: 24px;
    border-radius: var(--af-border-radius);
    box-shadow: var(--af-shadow-box);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Style 0: Accent Top (Image 0) */
.af-content-item[data-af-variant="box"][data-af-visual-style="accent-top"] {
    border-top: 8px solid var(--af-color-primary);
    background: var(--af-item-bg-alt);
    margin-top: 25px;
    padding-top: 40px;
    position: relative;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: var(--af-flex-align, flex-start);
}

.af-content-item[data-af-variant="box"][data-af-visual-style="accent-top"] .af-part-info,
.af-content-item[data-af-variant="box"][data-af-visual-style="accent-top"] .af-part-header,
.af-content-item[data-af-variant="box"][data-af-visual-style="accent-top"] .af-part-content-body {
    display: flex;
    flex-direction: column;
    align-items: inherit;
}

.af-content-item[data-af-variant="box"][data-af-visual-style="accent-top"] .af-part-visual {
    position: absolute;
    top: -24px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    z-index: 5;
    display: flex !important;
    /* Ensure visible even if layout rules try to hide it */
}

.af-content-item[data-af-variant="box"][data-af-visual-style="accent-top"] .af-visual-container {
    width: 48px;
    height: 48px;
    background: var(--af-icon-bg);
    border: 4px solid var(--af-item-bg-alt);
    border-radius: 50%;
    box-shadow: var(--af-shadow-accent);
}

.af-content-item[data-af-variant="box"][data-af-visual-style="accent-top"] .af-visual-container span {
    color: var(--af-icon-fg) !important;
    font-size: 20px !important;
}

/* Style 1: Soft Filled (Layout focus) */
.af-content-item[data-af-variant="box"][data-af-visual-style="soft-filled"] {
    background: var(--af-content-bg);
    opacity: 0.95;
    border: 1px solid var(--af-border-color);
    padding: 40px 30px;
    border-radius: var(--af-border-radius);
    box-shadow: var(--af-shadow-box);
    display: flex;
    flex-direction: column;
    align-items: var(--af-flex-align, flex-start);
}

.af-content-item[data-af-variant="box"][data-af-visual-style="soft-filled"] .af-part-info,
.af-content-item[data-af-variant="box"][data-af-visual-style="soft-filled"] .af-part-header,
.af-content-item[data-af-variant="box"][data-af-visual-style="soft-filled"] .af-part-content-body {
    display: flex;
    flex-direction: column;
    align-items: inherit;
}

.af-content-item[data-af-variant="box"][data-af-visual-style="soft-filled"] .af-part-visual {
    margin-bottom: 25px;
    display: flex !important;
    justify-content: center;
}

.af-content-item[data-af-variant="box"][data-af-visual-style="soft-filled"] .af-visual-container {
    width: 44px;
    height: 44px;
    background: var(--af-icon-bg);
    border-radius: 50%;
}

.af-content-item[data-af-variant="box"][data-af-visual-style="soft-filled"] .af-visual-container span {
    color: var(--af-icon-fg) !important;
    font-size: 20px !important;
}

/* Style 2: Header Split (Image 2) - UPDATED TO MATCH EXACTLY */
/* Style 2: Header Split - COMPLETE RELAYOUT */
.af-content-item[data-af-variant="box"][data-af-visual-style="header-split"] {
    padding: 0 !important;
    overflow: hidden !important;
    background: var(--af-content-bg) !important;
    border-radius: var(--af-border-radius) !important;
    border: 1px solid var(--af-border-color) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    box-shadow: var(--af-shadow-zig) !important;
}

.af-content-item[data-af-variant="box"][data-af-visual-style="header-split"] .af-part-visual {
    background: var(--af-visual-header-bg) !important;
    padding: 25px 0 !important;
    margin: 0 !important;
    width: 100% !important;
    border-bottom: 1px solid var(--af-border-color) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.af-content-item[data-af-variant="box"][data-af-visual-style="header-split"] .af-part-info {
    padding: 30px 25px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: var(--af-flex-align, center) !important;
    gap: 15px !important;
}

.af-content-item[data-af-variant="box"][data-af-visual-style="header-split"] .af-part-header,
.af-content-item[data-af-variant="box"][data-af-visual-style="header-split"] .af-part-content-body {
    display: flex;
    flex-direction: column;
    align-items: inherit;
    gap: 8px;
}

/* Style 3: Leaf (Diagonal rounding) */
.af-content-item[data-af-variant="box"][data-af-visual-style="leaf"] {
    border-radius: 40px 4px 40px 4px;
    background: var(--af-content-bg);
    padding: 40px 30px;
    border: 1px solid var(--af-border-color);
    display: flex;
    flex-direction: column;
    align-items: var(--af-flex-align, flex-start);
}

.af-content-item[data-af-variant="box"][data-af-visual-style="leaf"] .af-part-info,
.af-content-item[data-af-variant="box"][data-af-visual-style="leaf"] .af-part-header,
.af-content-item[data-af-variant="box"][data-af-visual-style="leaf"] .af-part-content-body {
    display: flex;
    flex-direction: column;
    align-items: inherit;
}

.af-content-item[data-af-variant="box"][data-af-visual-style="leaf"] .af-part-visual {
    margin-bottom: 25px;
    display: flex !important;
    justify-content: center;
}

.af-content-item[data-af-variant="box"][data-af-visual-style="leaf"] .af-visual-container {
    width: 44px;
    height: 44px;
    background: var(--af-icon-bg);
    border-radius: 50%;
}

.af-content-item[data-af-variant="box"][data-af-visual-style="leaf"] .af-visual-container span {
    color: var(--af-icon-fg) !important;
    font-size: 20px !important;
}

/* NEW Style 4: Side Split (Left bar) */
.af-content-item[data-af-variant="box"][data-af-visual-style="side-split"] {
    flex-direction: row !important;
    padding: 0;
    overflow: hidden;
    background: var(--af-content-bg);
    border-radius: var(--af-border-radius);
    border: 1px solid var(--af-border-color);
    align-items: stretch !important;
}

.af-content-item[data-af-variant="box"][data-af-visual-style="side-split"] .af-part-visual {
    background: var(--af-visual-subtle-bg);
    width: 60px !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    margin: 0;
}

.af-content-item[data-af-variant="box"][data-af-visual-style="side-split"] .af-part-info {
    padding: 24px 30px;
    flex: 1;
    text-align: inherit;
    align-items: var(--af-flex-align, flex-start);
}

.af-content-item[data-af-variant="box"][data-af-visual-style="side-split"] .af-visual-container {
    width: auto;
    height: auto;
}

.af-content-item[data-af-variant="box"][data-af-visual-style="side-split"] .af-visual-container span {
    font-size: 24px !important;
    font-weight: 400;
    color: var(--af-number-color);
}

/* Style 5: Seamless - JOINED BOXES */
.af-card-content[data-af-visual-style="seamless"] {
    gap: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible;
}

.af-content-item[data-af-variant="box"][data-af-visual-style="seamless"] {
    background: var(--af-content-bg) !important;
    border: 1px solid var(--af-border-color) !important;
    box-shadow: var(--af-shadow-box) !important;
    border-radius: 0 !important;
    padding: 35px 25px;
    position: relative;
    margin: 0;
    align-items: var(--af-flex-align, flex-start);
    text-align: inherit;
}

/* Border collapse: remove right/bottom borders on items */
.af-card-content[data-af-visual-style="seamless"] .af-content-item {
    border-right-width: 0 !important;
}

.af-card-content[data-af-visual-style="seamless"] .af-content-item:last-child {
    border-right-width: 1px !important;
}

/* Rounding based on layout */
.af-card-content[data-af-visual-style="seamless"][data-af-grid^="cols-"] .af-content-item:first-child {
    border-radius: var(--af-border-radius) 0 0 var(--af-border-radius) !important;
}

.af-card-content[data-af-visual-style="seamless"][data-af-grid^="cols-"] .af-content-item:last-child {
    border-radius: 0 var(--af-border-radius) var(--af-border-radius) 0 !important;
}

/* Vertical layout (Rows) */
.af-card-content[data-af-visual-style="seamless"][data-af-grid^="rows-"] .af-content-item {
    border-right-width: 1px !important;
    border-bottom-width: 0 !important;
}

.af-card-content[data-af-visual-style="seamless"][data-af-grid^="rows-"] .af-content-item:last-child {
    border-bottom-width: 1px !important;
}

.af-card-content[data-af-visual-style="seamless"][data-af-grid^="rows-"] .af-content-item:first-child {
    border-radius: var(--af-border-radius) var(--af-border-radius) 0 0 !important;
}

.af-card-content[data-af-visual-style="seamless"][data-af-grid^="rows-"] .af-content-item:last-child {
    border-radius: 0 0 var(--af-border-radius) var(--af-border-radius) !important;
}

.af-content-item[data-af-variant="box"][data-af-visual-style="seamless"] .af-part-visual {
    display: none !important;
}

.af-content-item[data-af-variant="box"][data-af-visual-style="seamless"] .af-part-info {
    padding: 0;
    display: flex !important;
    flex-direction: column;
    align-items: var(--af-flex-align, flex-start);
}

/* Style 6: Accent Left (Image 0) */
.af-content-item[data-af-variant="box"][data-af-visual-style="accent-left"] {
    border-left: 8px solid var(--af-color-primary);
    background: var(--af-item-bg-alt);
    border-radius: var(--af-border-radius-sm);
    padding: 40px 30px;
    box-shadow: var(--af-shadow-zig);
    display: flex;
    flex-direction: column;
    align-items: var(--af-flex-align, center);
}

.af-content-item[data-af-variant="box"][data-af-visual-style="accent-left"] .af-part-info,
.af-content-item[data-af-variant="box"][data-af-visual-style="accent-left"] .af-part-header,
.af-content-item[data-af-variant="box"][data-af-visual-style="accent-left"] .af-part-content-body {
    display: flex;
    flex-direction: column;
    align-items: inherit;
}

.af-content-item[data-af-variant="box"][data-af-visual-style="accent-left"] .af-part-visual {
    display: none !important;
}

/* Style 7: Flat Left (Image 1) */
.af-content-item[data-af-variant="box"][data-af-visual-style="flat-left"] {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-left: 6px solid var(--af-color-primary) !important;
    border-radius: 0 !important;
    padding: 20px 30px;
    display: flex;
    flex-direction: column;
    align-items: var(--af-flex-align, center);
}

.af-content-item[data-af-variant="box"][data-af-visual-style="flat-left"] .af-part-info,
.af-content-item[data-af-variant="box"][data-af-visual-style="flat-left"] .af-part-header,
.af-content-item[data-af-variant="box"][data-af-visual-style="flat-left"] .af-part-content-body {
    display: flex;
    flex-direction: column;
    align-items: inherit;
}

.af-content-item[data-af-variant="box"][data-af-visual-style="flat-left"] .af-part-visual {
    display: none !important;
}

/* Style 8: Flat Top (Image 2) */
.af-content-item[data-af-variant="box"][data-af-visual-style="flat-top"] {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-top: 6px solid var(--af-color-primary) !important;
    border-radius: 0 !important;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    align-items: var(--af-flex-align, center);
}

.af-content-item[data-af-variant="box"][data-af-visual-style="flat-top"] .af-part-info,
.af-content-item[data-af-variant="box"][data-af-visual-style="flat-top"] .af-part-header,
.af-content-item[data-af-variant="box"][data-af-visual-style="flat-top"] .af-part-content-body {
    display: flex;
    flex-direction: column;
    align-items: inherit;
}

.af-content-item[data-af-variant="box"][data-af-visual-style="flat-top"] .af-part-visual {
    display: none !important;
}

/* Style 9: Zig Horizontal - Timeline with axis + connectors */
.af-card-content[data-af-visual-style="zig-h"],
.af-card-content[data-af-visual-style="zig-h"][data-af-grid^="cols-"],
.af-card-content[data-af-visual-style="zig-h"][data-af-grid^="rows-"] {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 0 !important;
    position: relative !important;
    min-height: 580px !important;
    padding: 20px 0 !important;
    overflow: visible !important;
    grid-template-columns: none !important;
    grid-auto-flow: unset !important;
}

/* Horizontal Axis Line */
.af-card-content[data-af-visual-style="zig-h"]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 20px;
    right: 20px;
    height: 2px;
    background: var(--af-axis-h-color);
    transform: translateY(-50%);
    opacity: 0.25;
    z-index: 0;
}

/* H-Zig Item: 3-row grid stretched to full container height */
.af-card-content[data-af-visual-style="zig-h"] .af-content-item {
    display: grid !important;
    grid-template-rows: 1fr auto 1fr !important;
    row-gap: 0 !important;
    flex: 1 1 0 !important;
    min-width: 140px !important;
    max-width: 380px !important;
    padding: 0 12px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    position: relative !important;
}

/* af-part-visual = DOT at center row */
.af-card-content[data-af-visual-style="zig-h"] .af-content-item .af-part-visual {
    display: flex !important;
    grid-row: 2 !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    z-index: 3 !important;
    padding: 0 !important;
    margin: 0 !important;
    height: 12px !important;
    /* Force exact row height = dot height */
    min-height: 12px !important;
    max-height: 12px !important;
    overflow: visible !important;
}

.af-card-content[data-af-visual-style="zig-h"] .af-content-item .af-visual-container {
    width: 12px !important;
    height: 12px !important;
    min-width: 12px !important;
    background: var(--af-dot-color) !important;
    border-radius: 50% !important;
    border: none !important;
    position: relative !important;
    z-index: 3 !important;
    display: block !important;
}

.af-content-item[data-af-variant="box"][data-af-visual-style="zig-h"] .af-visual-container span,
.af-content-item[data-af-variant="box"][data-af-visual-style="zig-h"] .af-visual-container svg {
    display: none !important;
}

.af-content-item[data-af-variant="box"][data-af-visual-style="zig-h"] .af-part-connector {
    display: none !important;
}

/* Info box: card appearance on af-part-info */
.af-card-content[data-af-visual-style="zig-h"] .af-content-item .af-part-info {
    background: var(--af-item-bg-alt) !important;
    border: 1px solid var(--af-border-alt-color) !important;
    border-radius: var(--af-border-radius) !important;
    padding: 20px 24px !important;
    box-shadow: var(--af-shadow-zig) !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    position: relative !important;
    z-index: 10 !important;
}

/* ODD: info at top (row 1, bottom-aligned) */
.af-card-content[data-af-visual-style="zig-h"] .af-content-item:nth-child(odd) .af-part-info {
    grid-row: 1 !important;
    align-self: end !important;
    margin-bottom: 27px !important;
}

/* ODD: stem anchored to box bottom, goes DOWN to dot */
.af-card-content[data-af-visual-style="zig-h"] .af-content-item:nth-child(odd) .af-part-info::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 33px;
    /* Lengthened from 27px to reach dot center */
    top: 100%;
    /* Starts at box bottom edge */
    background: var(--af-connector-color);
    opacity: 0.35;
    z-index: 1;
}

/* EVEN: info at bottom (row 3, top-aligned) */
.af-card-content[data-af-visual-style="zig-h"] .af-content-item:nth-child(even) .af-part-info {
    grid-row: 3 !important;
    align-self: start !important;
    margin-top: 27px !important;
}

/* EVEN: stem anchored to box top, goes UP to dot */
.af-card-content[data-af-visual-style="zig-h"] .af-content-item:nth-child(even) .af-part-info::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 33px;
    /* Lengthened from 27px to reach dot center */
    bottom: 100%;
    /* Starts at box top edge, goes up */
    background: var(--af-connector-color);
    opacity: 0.35;
    z-index: 1;
}

/* Internal text alignment */
.af-content-item[data-af-variant="box"][data-af-visual-style="zig-h"] .af-part-header,
.af-content-item[data-af-variant="box"][data-af-visual-style="zig-h"] .af-part-content-body {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Style 10: Zig Vertical - Container 3-col grid */
.af-card-content[data-af-visual-style="zig-v"],
.af-card-content[data-af-visual-style="zig-v"][data-af-grid^="cols-"],
.af-card-content[data-af-visual-style="zig-v"][data-af-grid^="rows-"] {
    display: grid !important;
    grid-template-columns: 1fr 100px 1fr !important;
    /* 100px center gap for breathing room */
    grid-auto-flow: row !important;
    grid-auto-rows: auto !important;
    row-gap: 40px !important;
    column-gap: 0 !important;
    padding: 30px 40px !important;
    /* Side padding restored */
    position: relative !important;
    overflow: visible !important;
    width: 100% !important;
    align-items: center !important;
}

/* Vertical Axis at left: 50% = center of 30px col */
.af-card-content[data-af-visual-style="zig-v"]::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--af-axis-color);
    transform: translateX(-50%);
    opacity: 0.2;
    z-index: 0;
}

/* Item = the BOX itself placed in left or right column */
.af-content-item[data-af-variant="box"][data-af-visual-style="zig-v"],
[data-af-h-align="stretch"] .af-content-item[data-af-variant="box"][data-af-visual-style="zig-v"] {
    width: 100% !important;
    max-width: 420px !important;
    /* Prevent touching outer borders */
    margin: 0 !important;
    background: var(--af-item-bg-alt) !important;
    border: 1px solid var(--af-border-alt-color) !important;
    border-radius: var(--af-border-radius) !important;
    padding: 25px 30px !important;
    position: relative !important;
    z-index: 10 !important;
    box-shadow: var(--af-shadow-zig) !important;
    display: block !important;
}

/* Force separate rows for zigzag stagger */
.af-card-content[data-af-visual-style="zig-v"] .af-content-item:nth-child(1) {
    grid-row: 1 !important;
}

.af-card-content[data-af-visual-style="zig-v"] .af-content-item:nth-child(2) {
    grid-row: 2 !important;
}

.af-card-content[data-af-visual-style="zig-v"] .af-content-item:nth-child(3) {
    grid-row: 3 !important;
}

.af-card-content[data-af-visual-style="zig-v"] .af-content-item:nth-child(4) {
    grid-row: 4 !important;
}

.af-card-content[data-af-visual-style="zig-v"] .af-content-item:nth-child(5) {
    grid-row: 5 !important;
}

.af-card-content[data-af-visual-style="zig-v"] .af-content-item:nth-child(6) {
    grid-row: 6 !important;
}

.af-card-content[data-af-visual-style="zig-v"] .af-content-item:nth-child(7) {
    grid-row: 7 !important;
}

.af-card-content[data-af-visual-style="zig-v"] .af-content-item:nth-child(8) {
    grid-row: 8 !important;
}

.af-card-content[data-af-visual-style="zig-v"] .af-content-item:nth-child(9) {
    grid-row: 9 !important;
}

.af-card-content[data-af-visual-style="zig-v"] .af-content-item:nth-child(10) {
    grid-row: 10 !important;
}

/* Odd items on the left column */
.af-card-content[data-af-visual-style="zig-v"] .af-content-item:nth-child(odd) {
    grid-column: 1 !important;
    justify-self: end !important;
    text-align: right !important;
    --af-flex-align: flex-end !important;
}

/* Even items on the right column */
.af-card-content[data-af-visual-style="zig-v"] .af-content-item:nth-child(even) {
    grid-column: 3 !important;
    justify-self: start !important;
    text-align: left !important;
    --af-flex-align: flex-start !important;
}

/* Connector: 15px = half of 30px center col */
.af-content-item[data-af-variant="box"][data-af-visual-style="zig-v"]::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 2px;
    background: var(--af-connector-color);
    opacity: 0.35;
    z-index: 2;
}

/* Odd: connector from box RIGHT edge → axis (50px = half of 100px gap) */
.af-card-content[data-af-visual-style="zig-v"] .af-content-item:nth-child(odd)::after {
    left: 100% !important;
    width: 50px !important;
    right: auto !important;
}

/* Even: connector from box LEFT edge → axis */
.af-card-content[data-af-visual-style="zig-v"] .af-content-item:nth-child(even)::after {
    right: 100% !important;
    width: 50px !important;
    left: auto !important;
}

/* Junction dot: 10px circle, center at 15px from box edge */
.af-content-item[data-af-variant="box"][data-af-visual-style="zig-v"]::before {
    content: '';
    position: absolute;
    top: 50%;
    width: 10px;
    height: 10px;
    background: var(--af-dot-color);
    border-radius: 50%;
    transform: translateY(-50%);
    z-index: 3;
    opacity: 0.6;
}

/* Odd dot: stays at axis (50px from left of the gap) */
.af-card-content[data-af-visual-style="zig-v"] .af-content-item:nth-child(odd)::before {
    left: calc(100% + 45px) !important;
    right: auto !important;
}

/* Even dot: stays at axis (50px from right of the gap) */
.af-card-content[data-af-visual-style="zig-v"] .af-content-item:nth-child(even)::before {
    right: calc(100% + 45px) !important;
    left: auto !important;
}

/* Internal layout */
.af-content-item[data-af-variant="box"][data-af-visual-style="zig-v"] .af-part-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
}

.af-content-item[data-af-variant="box"][data-af-visual-style="zig-v"] .af-part-header,
.af-content-item[data-af-variant="box"][data-af-visual-style="zig-v"] .af-part-content-body {
    display: flex !important;
    flex-direction: column !important;
    align-items: var(--af-flex-align, flex-start) !important;
    gap: 10px !important;
    width: 100% !important;
}

/* Hide af-part-visual (dot is via item ::before) */
.af-content-item[data-af-variant="box"][data-af-visual-style="zig-v"] .af-part-visual {
    display: none !important;
}




/* Variant: Bullet */
.af-content-item[data-af-variant="bullet"] .af-visual-container {
    width: 28px;
    height: 28px;
    background: transparent;
    margin-top: 4px;
    overflow: visible;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.af-content-item[data-af-variant="bullet"] .af-visual-container::before,
.af-content-item[data-af-variant="bullet"] .af-visual-container::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Robust centering */
    background: var(--af-color-accent);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.af-content-item[data-af-variant="bullet"] .af-visual-container::before {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.af-content-item[data-af-variant="bullet"] .af-visual-container::after {
    width: 0;
    height: 0;
}

/* Sub-styles for Bullet */
.af-content-item[data-af-variant="bullet"][data-af-visual-style="ring-thin"] .af-visual-container::before {
    box-shadow: 0 0 0 2px var(--af-content-bg), 0 0 0 3.5px var(--af-color-accent);
}

.af-content-item[data-af-variant="bullet"][data-af-visual-style="ring-thick"] .af-visual-container::before {
    box-shadow: 0 0 0 2px var(--af-content-bg), 0 0 0 5.5px var(--af-color-accent);
}

.af-content-item[data-af-variant="bullet"][data-af-visual-style="soft"] .af-visual-container::before {
    box-shadow: var(--af-bullet-glow);
    filter: drop-shadow(0 0 2px var(--af-color-accent));
}

.af-content-item[data-af-variant="bullet"][data-af-visual-style="square"] .af-visual-container::before {
    border-radius: 2.5px;
    width: 12px;
    height: 12px;
}

.af-content-item[data-af-variant="bullet"][data-af-visual-style="diamond"] .af-visual-container::before {
    border-radius: 1.5px;
    width: 10px;
    height: 10px;
    transform: translate(-50%, -50%) rotate(45deg);
}

/* Plus & Slash (Handled via SVG injection for precision) */
.af-content-item[data-af-variant="bullet"][data-af-visual-style="plus"] .af-visual-container::before,
.af-content-item[data-af-variant="bullet"][data-af-visual-style="plus"] .af-visual-container::after,
.af-content-item[data-af-variant="bullet"][data-af-visual-style="slash"] .af-visual-container::before,
.af-content-item[data-af-variant="bullet"][data-af-visual-style="slash"] .af-visual-container::after {
    display: none !important;
    /* Hide dot pseudo-elements */
}

.af-content-item[data-af-variant="bullet"] .af-visual-container svg {
    width: 20px;
    height: 20px;
    color: var(--af-color-accent);
    display: block;
}

/* Variant: Circle / Sequence */
.af-content-item[data-af-variant="circle"] .af-visual-container {
    width: 44px;
    height: 44px;
    background: var(--af-number-color);
    color: var(--af-icon-fg);
    border-radius: 50%;
}

.af-content-item[data-af-variant="circle"] .af-visual-container span {
    color: var(--af-icon-fg) !important;
    font-size: 18px !important;
}

/* ===== Circle Layout Styles (Nodes, Segments, Fan) ===== */

/* Shared SVG styling */
.af-circle-layout-svg {
    display: block;
    margin: 0 auto;
    flex-shrink: 0;
}

/* When circle layout is active: restructure the card content */
.af-card-content[data-af-circle-layout] {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 0 !important;
    position: relative !important;
}

/* The SVG takes center */
.af-card-content[data-af-circle-layout] .af-circle-layout-svg {
    flex: 0 0 220px !important;
    order: 0 !important;
}

/* Hide individual visual containers when circle layout is active */
.af-card-content[data-af-circle-layout] .af-content-item .af-part-visual {
    display: none !important;
}

/* Items become text-only blocks */
.af-card-content[data-af-circle-layout] .af-content-item {
    flex: 1 1 auto !important;
    padding: 8px 16px !important;
    min-width: 0 !important;
}

/* --- Nodes & Segments shared grid layout --- */
.af-card-content[data-af-circle-layout="nodes"],
.af-card-content[data-af-circle-layout="segments"],
.af-card-content[data-af-circle-layout="clover"],
.af-card-content[data-af-circle-layout="cycle"],
.af-card-content[data-af-circle-layout="garlic"] {
    display: grid !important;
    grid-template-columns: 1fr 220px 1fr !important;
    grid-template-rows: repeat(auto-fill, auto) !important;
    align-items: center !important;
    justify-items: stretch !important;
    gap: 8px 12px !important;
    flex-direction: unset !important;
    padding: 24px !important;
}

.af-card-content[data-af-circle-layout="nodes"] .af-circle-layout-svg,
.af-card-content[data-af-circle-layout="segments"] .af-circle-layout-svg,
.af-card-content[data-af-circle-layout="clover"] .af-circle-layout-svg,
.af-card-content[data-af-circle-layout="cycle"] .af-circle-layout-svg,
.af-card-content[data-af-circle-layout="garlic"] .af-circle-layout-svg {
    grid-column: 2 !important;
    align-self: center !important;
    justify-self: center !important;
}

/* Left side items: ALL content right-aligned, flush to edge */
.af-card-content[data-af-circle-layout] .af-content-item[data-af-circle-side="left"] {
    text-align: right !important;
}

.af-card-content[data-af-circle-layout] .af-content-item[data-af-circle-side="left"] .af-part-info,
.af-card-content[data-af-circle-layout] .af-content-item[data-af-circle-side="left"] .af-part-header,
.af-card-content[data-af-circle-layout] .af-content-item[data-af-circle-side="left"] .af-part-content-body {
    text-align: right !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
}

.af-card-content[data-af-circle-layout] .af-content-item[data-af-circle-side="left"] .af-part-badge,
.af-card-content[data-af-circle-layout] .af-content-item[data-af-circle-side="left"] .af-part-title,
.af-card-content[data-af-circle-layout] .af-content-item[data-af-circle-side="left"] .af-part-description {
    text-align: right !important;
}

.af-card-content[data-af-circle-layout] .af-content-item[data-af-circle-side="left"] .af-part-footer {
    text-align: right !important;
    display: flex !important;
    justify-content: flex-end !important;
}

/* Right side items: ALL content left-aligned */
.af-card-content[data-af-circle-layout] .af-content-item[data-af-circle-side="right"] {
    text-align: left !important;
}

.af-card-content[data-af-circle-layout] .af-content-item[data-af-circle-side="right"] .af-part-info,
.af-card-content[data-af-circle-layout] .af-content-item[data-af-circle-side="right"] .af-part-header,
.af-card-content[data-af-circle-layout] .af-content-item[data-af-circle-side="right"] .af-part-content-body {
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

.af-card-content[data-af-circle-layout] .af-content-item[data-af-circle-side="right"] .af-part-footer {
    text-align: left !important;
    display: flex !important;
    justify-content: flex-start !important;
}

/* --- Fan layout --- */
.af-card-content[data-af-circle-layout="fan"] {
    display: grid !important;
    gap: 16px !important;
    align-items: start !important;
    justify-items: center !important;
    padding: 24px !important;
    flex-direction: unset !important;
}

.af-card-content[data-af-circle-layout="fan"] .af-circle-layout-svg {
    justify-self: center !important;
}

.af-card-content[data-af-circle-layout="fan"] .af-content-item {
    text-align: center !important;
    width: 100% !important;
}

.af-card-content[data-af-circle-layout="fan"] .af-content-item .af-part-info,
.af-card-content[data-af-circle-layout="fan"] .af-content-item .af-part-header,
.af-card-content[data-af-circle-layout="fan"] .af-content-item .af-part-content-body {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.af-card-content[data-af-circle-layout="fan"] .af-content-item .af-part-footer {
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
}

/* Circle layout items: clean text styles */
.af-card-content[data-af-circle-layout] .af-content-item .af-part-info {
    width: 100% !important;
}

.af-card-content[data-af-circle-layout] .af-content-item .af-part-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    margin-bottom: 4px !important;
}

.af-card-content[data-af-circle-layout] .af-content-item .af-part-description {
    font-size: 13px !important;
    color: var(--af-desc-color-alt) !important;
    line-height: 1.5 !important;
}

/* Variant: Number - Base */
.af-content-item[data-af-variant="number"] {
    position: relative;
}

/* Number: Default (def) - Large bold stat number */
.af-content-item[data-af-variant="number"][data-af-visual-style="def"] .af-visual-container {
    width: auto !important;
    height: auto !important;
    border: none !important;
    background: none !important;
}

.af-content-item[data-af-variant="number"][data-af-visual-style="def"] .af-visual-container span {
    font-size: 48px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    color: var(--af-number-color) !important;
}

/* Number: Donut (Circular Progress) */
.af-content-item[data-af-variant="number"][data-af-visual-style="donut"] .af-part-visual {
    display: flex !important;
    justify-content: center !important;
}

.af-content-item[data-af-variant="number"][data-af-visual-style="donut"] .af-visual-container {
    width: 100px !important;
    min-width: 100px !important;
    height: 100px !important;
    min-height: 100px !important;
    border: none !important;
    background: none !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
}

.af-content-item[data-af-variant="number"][data-af-visual-style="donut"] .af-visual-container span {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: var(--af-number-color) !important;
    z-index: 2 !important;
    position: relative !important;
    line-height: 1 !important;
}

.af-content-item[data-af-variant="number"][data-af-visual-style="donut"] .af-visual-container .af-donut-ring {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100px !important;
    height: 100px !important;
}

/* Number: Bar (Progress Bar) */
.af-content-item[data-af-variant="number"][data-af-visual-style="bar"] .af-part-visual {
    width: 100% !important;
}

.af-content-item[data-af-variant="number"][data-af-visual-style="bar"] .af-visual-container {
    width: 100% !important;
    height: auto !important;
    border: none !important;
    background: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    overflow: visible !important;
}

.af-content-item[data-af-variant="number"][data-af-visual-style="bar"] .af-visual-container span {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: var(--af-number-color) !important;
    flex-shrink: 0 !important;
    order: 2 !important;
}

.af-content-item[data-af-variant="number"][data-af-visual-style="bar"] .af-visual-container .af-progress-bar {
    flex: 1 !important;
    height: 8px !important;
    background: var(--af-progress-track-bg) !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    order: 1 !important;
}

.af-content-item[data-af-variant="number"][data-af-visual-style="bar"] .af-visual-container .af-progress-bar .af-progress-fill {
    height: 100% !important;
    background: var(--af-progress-fill-bg) !important;
    border-radius: 4px !important;
    transition: width 0.5s ease !important;
}

/* Number: Star (Star Rating) */
.af-content-item[data-af-variant="number"][data-af-visual-style="star"] .af-visual-container {
    width: auto !important;
    height: auto !important;
    border: none !important;
    background: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    overflow: visible !important;
}

.af-content-item[data-af-variant="number"][data-af-visual-style="star"] .af-visual-container span {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: var(--af-number-color) !important;
}

.af-content-item[data-af-variant="number"][data-af-visual-style="star"] .af-visual-container .af-star-row {
    display: flex !important;
    gap: 2px !important;
}

.af-content-item[data-af-variant="number"][data-af-visual-style="star"] .af-visual-container .af-star-row svg {
    width: 20px !important;
    height: 20px !important;
    fill: var(--af-star-fill-color) !important;
}

.af-content-item[data-af-variant="number"][data-af-visual-style="star"] .af-visual-container .af-star-row svg.af-star-empty {
    fill: var(--af-star-empty-color) !important;
}

/* Variant: Quote - Base */
.af-content-item[data-af-variant="quote"] {
    position: relative;
}

/* Quote: Default (def) - Large faded icon */
.af-content-item[data-af-variant="quote"][data-af-visual-style="def"] .af-part-visual {
    opacity: 0.2;
}

.af-content-item[data-af-variant="quote"][data-af-visual-style="def"] .af-visual-container span {
    font-size: 60px !important;
    line-height: 0.5;
}

.af-content-item[data-af-variant="quote"][data-af-visual-style="def"] .af-part-description {
    font-style: italic;
    font-family: 'Playfair Display', serif;
}

/* Quote: Bubble - Single SVG path approach */
.af-content-item[data-af-variant="quote"][data-af-visual-style="bubble"] {
    background: transparent !important;
    border: none !important;
    padding: 25px !important;
    margin-bottom: 25px !important;
    position: relative !important;
}

.af-content-item[data-af-variant="quote"][data-af-visual-style="bubble"]::before,
.af-content-item[data-af-variant="quote"][data-af-visual-style="bubble"]::after {
    display: none !important;
}

/* SVG shape styling */
.af-bubble-shape {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    pointer-events: none !important;
    z-index: 0 !important;
    overflow: visible !important;
}

.af-bubble-shape path {
    fill: var(--af-bubble-bg, #ffffff);
    stroke: var(--af-bubble-stroke-color);
    stroke-width: 1.5;
    stroke-linejoin: round;
}

.af-content-item[data-af-variant="quote"][data-af-visual-style="bubble"] .af-part-visual {
    opacity: 0.3 !important;
    position: relative !important;
    z-index: 1 !important;
}

.af-content-item[data-af-variant="quote"][data-af-visual-style="bubble"] .af-part-info {
    position: relative !important;
    z-index: 1 !important;
}

.af-content-item[data-af-variant="quote"][data-af-visual-style="bubble"] .af-visual-container span {
    font-size: 40px !important;
    line-height: 0.8 !important;
}

.af-content-item[data-af-variant="quote"][data-af-visual-style="bubble"] .af-visual-container::after {
    display: none !important;
}

.af-content-item[data-af-variant="quote"][data-af-visual-style="bubble"] .af-part-title {
    font-family: 'Playfair Display', serif !important;
    font-size: 24px !important;
}

/* Quote: Boxed (Content inside a box, floating quote) */
.af-content-item[data-af-variant="quote"][data-af-visual-style="boxed"] .af-part-visual {
    position: absolute !important;
    top: -25px !important;
    left: 20px !important;
    opacity: 1 !important;
    background: var(--af-quote-bg) !important;
    padding: 0 10px !important;
    color: var(--af-quote-boxed-accent) !important;
    z-index: 10 !important;
}

.af-content-item[data-af-variant="quote"][data-af-visual-style="boxed"] .af-visual-container span {
    font-size: 50px !important;
    line-height: 1 !important;
}

.af-content-item[data-af-variant="quote"][data-af-visual-style="boxed"] .af-part-info {
    border: 1.5px solid var(--af-border-color) !important;
    padding: 30px 24px 24px 24px !important;
    border-radius: var(--af-border-radius) !important;
    background: var(--af-quote-bg) !important;
    margin-top: 10px !important;
    box-shadow: var(--af-shadow-btn) !important;
}

.af-content-item[data-af-variant="quote"][data-af-visual-style="boxed"] .af-part-description {
    font-style: italic !important;
}

/* Variant: Steps Base */
.af-content-item[data-af-variant="step"] {
    position: relative;
}

.af-content-item[data-af-variant="step"] .af-part-visual {
    z-index: 2;
    position: relative;
}

.af-content-item[data-af-variant="step"] .af-visual-container {
    width: 36px;
    height: 36px;
    border: 2px solid var(--af-step-border-color);
    border-radius: 50%;
    color: var(--af-step-color);
    background: var(--af-step-bg);
    z-index: 2;
    position: relative;
}

.af-content-item[data-af-variant="step"] .af-visual-container span {
    font-size: 14px !important;
    color: var(--af-step-color) !important;
}

/* --- LAYER 2: VISUAL PART STYLES (Independent from Layout) --- */
/* These rules ONLY control the SHAPE of af-visual-container.
   They compose with any Step Layout (V-ZIG, H-ZIG, H-TOP, V-LEFT, etc.)
   without needing combination selectors. */

/* Style: Circle (Default - overrides step base when explicitly set) */
[data-af-visual-style="circle"] .af-visual-container {
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    border: 2px solid var(--af-step-border-color) !important;
    background: var(--af-step-bg) !important;
    overflow: hidden !important;
}

/* Style: Arrow / Chevron - orientation-aware ribbon */
/* Base: boosted specificity to override step base (.af-content-item[variant] selectors) */
.af-content-item[data-af-visual-style="arrow"] .af-visual-container {
    border-radius: 0 !important;
    border: none !important;
    background: var(--af-color-accent) !important;
    display: grid !important;
    place-items: center !important;
}

.af-content-item[data-af-visual-style="arrow"] .af-visual-container span {
    color: var(--af-icon-fg) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
}

/* Arrow HORIZONTAL ► : H-TOP + H-ZIG */
.af-content-item[data-af-variant="step"][data-af-visual-style="arrow"][data-af-sub-variant="horizontal-top"] .af-part-visual,
.af-content-item[data-af-variant="step"][data-af-visual-style="arrow"][data-af-sub-variant="horizontal-zig"] .af-part-visual {
    position: relative !important;
    width: 100% !important;
    height: 42px !important;
    margin: 0 !important;
    /* Reset H-ZIG margin */
}

.af-content-item[data-af-variant="step"][data-af-visual-style="arrow"][data-af-sub-variant="horizontal-top"] .af-visual-container,
.af-content-item[data-af-variant="step"][data-af-visual-style="arrow"][data-af-sub-variant="horizontal-zig"] .af-visual-container {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    height: auto !important;
    background: var(--af-color-accent) !important;
    border: none !important;
    border-radius: 0 !important;
    display: grid !important;
    place-items: center !important;
    clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%) !important;
}

/* Arrow VERTICAL ▼ : V-LEFT (flex, explicit width) */
.af-content-item[data-af-variant="step"][data-af-visual-style="arrow"][data-af-sub-variant="vertical-left"] .af-part-visual {
    position: relative !important;
    flex-shrink: 0 !important;
    width: 50px !important;
}

/* Arrow VERTICAL ▼ : V-ZIG (grid, width from grid column) */
.af-content-item[data-af-variant="step"][data-af-visual-style="arrow"][data-af-sub-variant="vertical-zig"] .af-part-visual {
    position: relative !important;
}

.af-content-item[data-af-variant="step"][data-af-visual-style="arrow"][data-af-sub-variant="vertical-left"] .af-visual-container,
.af-content-item[data-af-variant="step"][data-af-visual-style="arrow"][data-af-sub-variant="vertical-zig"] .af-visual-container {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    height: auto !important;
    background: var(--af-color-accent) !important;
    border: none !important;
    border-radius: 0 !important;
    display: grid !important;
    place-items: center !important;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), 50% 100%, 0 calc(100% - 20px)) !important;
}



/* Style: Dot / Bullet (small solid circle, no number) */
/* Specificity 0,0,5,0 — beats ALL sub-variant rules (0,0,4,0) regardless of source order */
.af-content-item[data-af-variant="step"][data-af-visual-style="dot"][data-af-sub-variant] .af-visual-container {
    width: 14px !important;
    height: 14px !important;
    border-radius: 50% !important;
    border: none !important;
    background: var(--af-color-accent) !important;
    overflow: hidden !important;
}

.af-content-item[data-af-visual-style="dot"] .af-visual-container span {
    display: none !important;
}

.af-content-item[data-af-visual-style="dot"] .af-visual-container i {
    display: none !important;
}

/* Dot connector: center of 14px = 7px, specificity 0,0,5,0 to beat layout connectors */
.af-content-item[data-af-variant="step"][data-af-visual-style="dot"][data-af-visual-pos="top"] .af-part-connector {
    top: 7px !important;
}

.af-content-item[data-af-variant="step"][data-af-visual-style="dot"]:not([data-af-visual-pos="top"]) .af-part-connector {
    left: 7px !important;
    top: 7px !important;
}

/* V-ZIG Dot: first/last child connector endpoints (7px = center of 14px dot) */
.af-content-item[data-af-variant="step"][data-af-visual-style="dot"][data-af-sub-variant="vertical-zig"]:first-child .af-part-connector {
    top: 7px !important;
}

.af-content-item[data-af-variant="step"][data-af-visual-style="dot"][data-af-sub-variant="vertical-zig"]:last-child .af-part-connector {
    height: 7px !important;
}

/* Style: Pill (rounded ribbon) - orientation-aware */
/* Base: text color and alignment */
.af-content-item[data-af-visual-style="pill"] .af-visual-container {
    border-radius: 999px !important;
    border: none !important;
    background: var(--af-color-accent-muted) !important;
    /* Light indigo background */
    display: grid !important;
    place-items: center !important;
}

.af-content-item[data-af-visual-style="pill"] .af-visual-container span {
    color: var(--af-step-color) !important;
    /* Indigo text */
    font-size: 18px !important;
    font-weight: 700 !important;
}

/* Pill HORIZONTAL : H-TOP + H-ZIG (Full width capsule) */
.af-content-item[data-af-variant="step"][data-af-visual-style="pill"][data-af-sub-variant="horizontal-top"] .af-part-visual,
.af-content-item[data-af-variant="step"][data-af-visual-style="pill"][data-af-sub-variant="horizontal-zig"] .af-part-visual {
    position: relative !important;
    width: 100% !important;
    height: 42px !important;
    margin: 0 !important;
    /* Reset H-ZIG margin */
}

.af-content-item[data-af-variant="step"][data-af-visual-style="pill"][data-af-sub-variant="horizontal-top"] .af-visual-container,
.af-content-item[data-af-variant="step"][data-af-visual-style="pill"][data-af-sub-variant="horizontal-zig"] .af-visual-container {
    position: absolute !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    background: var(--af-color-accent-muted) !important;
    border: none !important;
    border-radius: 999px !important;
    display: grid !important;
    place-items: center !important;
}

/* Pill VERTICAL : V-LEFT + V-ZIG (Fixed width vertical ribbon) */
.af-content-item[data-af-variant="step"][data-af-visual-style="pill"][data-af-sub-variant="vertical-left"] .af-part-visual {
    position: relative !important;
    flex-shrink: 0 !important;
    width: 50px !important;
}

.af-content-item[data-af-variant="step"][data-af-visual-style="pill"][data-af-sub-variant="vertical-zig"] .af-part-visual {
    position: relative !important;
}

.af-content-item[data-af-variant="step"][data-af-visual-style="pill"][data-af-sub-variant="vertical-left"] .af-visual-container,
.af-content-item[data-af-variant="step"][data-af-visual-style="pill"][data-af-sub-variant="vertical-zig"] .af-visual-container {
    position: absolute !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    background: var(--af-color-accent-muted) !important;
    border: none !important;
    border-radius: 999px !important;
    display: grid !important;
    place-items: center !important;
}

/* Pill: hide connector — same as arrow */
.af-content-item[data-af-variant="step"][data-af-visual-style="pill"][data-af-visual-pos] .af-part-connector {
    display: none !important;
}

/* Style: Rect (rectangular ribbon) - orientation-aware */
/* Base: text color and alignment */
.af-content-item[data-af-visual-style="rect"] .af-visual-container {
    border-radius: 0 !important;
    /* Square corners */
    border: none !important;
    background: var(--af-color-accent-muted) !important;
    display: grid !important;
    place-items: center !important;
}

.af-content-item[data-af-visual-style="rect"] .af-visual-container span {
    color: var(--af-step-color) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
}

/* Rect HORIZONTAL : H-TOP + H-ZIG (Full width rectangle) */
.af-content-item[data-af-variant="step"][data-af-visual-style="rect"][data-af-sub-variant="horizontal-top"] .af-part-visual,
.af-content-item[data-af-variant="step"][data-af-visual-style="rect"][data-af-sub-variant="horizontal-zig"] .af-part-visual {
    position: relative !important;
    width: 100% !important;
    height: 42px !important;
    margin: 0 !important;
}

.af-content-item[data-af-variant="step"][data-af-visual-style="rect"][data-af-sub-variant="horizontal-top"] .af-visual-container,
.af-content-item[data-af-variant="step"][data-af-visual-style="rect"][data-af-sub-variant="horizontal-zig"] .af-visual-container {
    position: absolute !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    background: var(--af-color-accent-muted) !important;
    border: none !important;
    border-radius: 0 !important;
    display: grid !important;
    place-items: center !important;
}

/* Rect VERTICAL : V-LEFT + V-ZIG (Fixed width vertical ribbon) */
.af-content-item[data-af-variant="step"][data-af-visual-style="rect"][data-af-sub-variant="vertical-left"] .af-part-visual {
    position: relative !important;
    flex-shrink: 0 !important;
    width: 50px !important;
}

.af-content-item[data-af-variant="step"][data-af-visual-style="rect"][data-af-sub-variant="vertical-zig"] .af-part-visual {
    position: relative !important;
}

.af-content-item[data-af-variant="step"][data-af-visual-style="rect"][data-af-sub-variant="vertical-left"] .af-visual-container,
.af-content-item[data-af-variant="step"][data-af-visual-style="rect"][data-af-sub-variant="vertical-zig"] .af-visual-container {
    position: absolute !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    background: var(--af-color-accent-muted) !important;
    border: none !important;
    border-radius: 0 !important;
    display: grid !important;
    place-items: center !important;
}

/* Rect: hide connector */
.af-content-item[data-af-variant="step"][data-af-visual-style="rect"][data-af-visual-pos] .af-part-connector {
    display: none !important;
}

/* Style: Minimal (underline/side-line ribbon) - orientation-aware */
/* Base: text color and alignment */
.af-content-item[data-af-visual-style="minimal"] .af-visual-container {
    border-radius: 0 !important;
    border: none !important;
    background: transparent !important;
    display: grid !important;
    place-items: center !important;
}

.af-content-item[data-af-visual-style="minimal"] .af-visual-container span {
    color: var(--af-step-color) !important;
    font-size: 18px !important;
    font-weight: 600 !important;
}

/* Minimal HORIZONTAL : H-TOP + H-ZIG (Underline ribbon) */
/* Minimal HORIZONTAL : H-TOP */
.af-content-item[data-af-variant="step"][data-af-visual-style="minimal"][data-af-sub-variant="horizontal-top"] .af-part-visual {
    position: relative !important;
    width: 100% !important;
    height: 42px !important;
    margin: 0 !important;
}

.af-content-item[data-af-variant="step"][data-af-visual-style="minimal"][data-af-sub-variant="horizontal-top"] .af-visual-container {
    position: absolute !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    border-bottom: 2px solid var(--af-step-border-color) !important;
}

/* Minimal HORIZONTAL : H-ZIG (Alternate Top/Bottom) */
.af-content-item[data-af-variant="step"][data-af-visual-style="minimal"][data-af-sub-variant="horizontal-zig"] .af-part-visual {
    position: relative !important;
    width: 100% !important;
    height: 42px !important;
    margin: 0 !important;
}

.af-content-item[data-af-variant="step"][data-af-visual-style="minimal"][data-af-sub-variant="horizontal-zig"]:nth-child(odd) .af-visual-container {
    position: absolute !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    border-top: 2px solid var(--af-step-border-color) !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.af-content-item[data-af-variant="step"][data-af-visual-style="minimal"][data-af-sub-variant="horizontal-zig"]:nth-child(even) .af-visual-container {
    position: absolute !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    border-bottom: 2px solid var(--af-step-border-color) !important;
    border-radius: 0 !important;
    background: transparent !important;
}

/* Minimal VERTICAL : V-LEFT */
.af-content-item[data-af-variant="step"][data-af-visual-style="minimal"][data-af-sub-variant="vertical-left"] .af-part-visual {
    position: relative !important;
    flex-shrink: 0 !important;
    width: 50px !important;
}

.af-content-item[data-af-variant="step"][data-af-visual-style="minimal"][data-af-sub-variant="vertical-left"] .af-visual-container {
    position: absolute !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    border-right: 2px solid var(--af-step-border-color) !important;
}

/* Minimal VERTICAL : V-ZIG (Alternate Left/Right) */
.af-content-item[data-af-variant="step"][data-af-visual-style="minimal"][data-af-sub-variant="vertical-zig"] .af-part-visual {
    position: relative !important;
}

.af-content-item[data-af-variant="step"][data-af-visual-style="minimal"][data-af-sub-variant="vertical-zig"]:nth-child(odd) .af-visual-container {
    position: absolute !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    border-left: 2px solid var(--af-step-border-color) !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.af-content-item[data-af-variant="step"][data-af-visual-style="minimal"][data-af-sub-variant="vertical-zig"]:nth-child(even) .af-visual-container {
    position: absolute !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    border-right: 2px solid var(--af-step-border-color) !important;
    border-radius: 0 !important;
    background: transparent !important;
}

/* Minimal: hide connector */
.af-content-item[data-af-variant="step"][data-af-visual-style="minimal"][data-af-visual-pos] .af-part-connector {
    display: none !important;
}



/* Arrow: hide connector — specificity 0,0,5,0 beats H-TOP display:block 0,0,4,0 */
.af-content-item[data-af-variant="step"][data-af-visual-style="arrow"][data-af-visual-pos] .af-part-connector {
    display: none !important;
}

/* --- STEP SUB-VARIANTS REFACTORED --- */

/* Base Step Item & Visual */
.af-content-item[data-af-variant="step"] {
    width: 100% !important;
    /* Force 100% to allow connectors to span grid cells */
}

/* H-TOP: Visual Part MUST be 100% width to allow connector to span across items */
.af-content-item[data-af-variant="step"][data-af-visual-pos="top"] .af-part-visual {
    width: 100%;
}

/* V-LEFT / V-ZIG: Visual Part MUST be 100% height to allow connector to span down items */
.af-content-item[data-af-variant="step"]:not([data-af-visual-pos="top"]) .af-part-visual {
    align-self: stretch;
    align-items: flex-start;
    padding-top: 0;
}

/* Base Connector */
.af-content-item[data-af-variant="step"] .af-part-connector {
    position: absolute;
    background: var(--af-step-connector-color);
    opacity: 0.3;
    z-index: 1;
}

/* Horizontal Connector (Specific for H-TOP style) */
.af-content-item[data-af-variant="step"][data-af-visual-pos="top"] .af-part-connector {
    display: block !important;
    left: 50% !important;
    top: 18px !important;
    height: 2px !important;
    width: calc(100% + 20px) !important;
    background: var(--af-step-connector-color) !important;
    opacity: 0.3 !important;
    z-index: 1 !important;
}

/* Vertical Connector (For LEFT/RIGHT, starts from center) */
.af-content-item[data-af-variant="step"]:not([data-af-visual-pos="top"]) .af-part-connector {
    left: 18px;
    top: 18px;
    /* Center of the icon at the top of stretching visual part */
    width: 2px;
    height: calc(100% + 30px);
    /* 100% is full item height + 30px Column Gap */
}

[data-af-visual-pos="right"] .af-part-connector {
    left: auto;
    right: 18px;
}

/* PRESETS / MODIFIERS */

/* Vertical Zig-Zag (Strict Modifier) */
.af-content-item[data-af-variant="step"][data-af-sub-variant="vertical-zig"] {
    display: grid !important;
    grid-template-columns: 1fr 36px 1fr !important;
    gap: 0 15px !important;
    width: 100% !important;
    align-items: flex-start !important;
    position: relative !important;
    overflow: visible !important;
    padding: 0 !important;
}

/* Visual Part: Cot giua, KHOA ROW 1 */
.af-content-item[data-af-variant="step"][data-af-sub-variant="vertical-zig"] .af-part-visual {
    grid-column: 2 !important;
    grid-row: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    align-self: stretch !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    position: relative !important;
    overflow: visible !important;
}

/* Info Part: KHOA ROW 1 */
.af-content-item[data-af-variant="step"][data-af-sub-variant="vertical-zig"] .af-part-info {
    grid-row: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
}

/* Odd: Info ben trai */
.af-content-item[data-af-variant="step"][data-af-sub-variant="vertical-zig"]:nth-child(odd) .af-part-info {
    grid-column: 1 !important;
    --af-flex-align: flex-end;
    text-align: right !important;
}

/* Even: Info ben phai */
.af-content-item[data-af-variant="step"][data-af-sub-variant="vertical-zig"]:nth-child(even) .af-part-info {
    grid-column: 3 !important;
    --af-flex-align: flex-start;
    text-align: left !important;
}

/* Visual Container */
.af-content-item[data-af-variant="step"][data-af-sub-variant="vertical-zig"] .af-visual-container {
    width: 36px !important;
    height: 36px !important;
    background: var(--af-step-bg) !important;
    z-index: 5 !important;
    position: relative !important;
    border-radius: 50% !important;
}

/* Connector: Truc doc xuyen suot */
.af-content-item[data-af-variant="step"][data-af-sub-variant="vertical-zig"] .af-part-connector {
    display: block !important;
    left: 50% !important;
    width: 2px !important;
    background: var(--af-step-connector-color) !important;
    opacity: 0.3 !important;
    z-index: 2 !important;
    transform: translateX(-50%) !important;
    top: 0 !important;
    height: calc(100% + 31px) !important;
}

/* First item: Line starts at center of first circle */
.af-content-item[data-af-variant="step"][data-af-sub-variant="vertical-zig"]:first-child .af-part-connector {
    top: 18px !important;
}

/* Last item: Line ends at center of last circle */
.af-content-item[data-af-variant="step"][data-af-sub-variant="vertical-zig"]:last-child .af-part-connector {
    height: 18px !important;
}


/* Horizontal Zig-Zag (Strict Modifier) */
.af-content-item[data-af-sub-variant="horizontal-zig"] {
    display: grid !important;
    grid-template-rows: 1fr auto 1fr !important;
    /* Top content | Visual axis | Bottom content */
    justify-items: center !important;
    position: relative !important;
    min-height: 280px !important;
    padding: 0 !important;
}

/* Visual Part: Luon nam o giua (row 2) */
.af-content-item[data-af-sub-variant="horizontal-zig"] .af-part-visual {
    grid-row: 2 !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 3 !important;
    margin: 10px 0 !important;
}

/* ODD Items: Noi dung nam TREN truc */
.af-content-item[data-af-sub-variant="horizontal-zig"]:nth-child(odd) .af-part-info {
    grid-row: 1 !important;
    align-self: end !important;
    text-align: center !important;
    --af-flex-align: center;
    padding-bottom: 10px !important;
}

/* EVEN Items: Noi dung nam DUOI truc */
.af-content-item[data-af-sub-variant="horizontal-zig"]:nth-child(even) .af-part-info {
    grid-row: 3 !important;
    align-self: start !important;
    text-align: center !important;
    --af-flex-align: center;
    padding-top: 10px !important;
}

/* Connector: Duong ngang tai truc visual */
.af-content-item[data-af-sub-variant="horizontal-zig"] .af-part-connector {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: calc(100% + 20px) !important;
    /* Span across gap to next item */
    height: 2px !important;
    transform: translateY(-50%) !important;
    background: var(--af-step-connector-color) !important;
    opacity: 0.3 !important;
    z-index: 1 !important;
}

/* Visual Container */
.af-content-item[data-af-sub-variant="horizontal-zig"] .af-visual-container {
    background: var(--af-step-bg) !important;
    z-index: 5 !important;
}

/* Continuity Logic: Hide the connector on the very last item of the sequence */
.af-content-item[data-af-variant="step"]:last-child .af-part-connector {
    display: none !important;
}

/* SVG Icon Styling */
.af-visual-container svg {
    width: 32px;
    height: 32px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

/* --- FLOW: ACCORDION (Universal) --- */
.af-card-content[data-af-flow="accordion"] {
    display: flex !important;
    flex-direction: column;
    gap: 0;
}

.af-card-content[data-af-flow="accordion"] .af-content-item {
    border-bottom: 1px solid var(--af-border-color);
    padding: 15px 0;
    cursor: pointer;
}

.af-card-content[data-af-flow="accordion"] .af-part-visual,
.af-card-content[data-af-flow="accordion"] .af-part-badge {
    display: none !important;
}

.af-card-content[data-af-flow="accordion"] .af-content-item .af-part-content-body {
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    opacity: 0;
}

.af-card-content[data-af-flow="accordion"] .af-content-item.active .af-part-content-body {
    max-height: 1000px;
    opacity: 1;
    margin-top: 15px;
}

/* --- FLOW: TABS (Universal) --- */
.af-card-content[data-af-flow="tabs"] {
    display: flex !important;
    flex-direction: column;
    gap: 24px;
}

.af-tabs-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    border-bottom: 1px solid var(--af-border-color);
    padding-bottom: 12px;
}

.af-tab-trigger {
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    background: var(--af-tab-inactive-bg);
    color: var(--af-tab-inactive-color);
    transition: all 0.2s;
}

.af-tab-trigger.active {
    background: var(--af-tab-active-bg);
    color: var(--af-tab-active-color);
}

/* Tabs Specific: Hide Visual, only show Active Item */
.af-card-content[data-af-flow="tabs"] .af-part-visual {
    display: none !important;
}

.af-card-content[data-af-flow="tabs"] .af-content-item:not(.active) {
    display: none !important;
}

/* Variant Hide/Show for Interactive Flows */
.af-card-content[data-af-flow="accordion"] .af-part-connector,
.af-card-content[data-af-flow="tabs"] .af-part-connector {
    display: none !important;
}

/* Refined Visual for Accordion/Tabs */
.af-content-item.active .af-part-title {
    color: var(--af-accordion-active-title);
}

/* ===== THEME PRESETS ===== */

/* Preset: Forest — Rừng nhiệt đới: xanh rêu, xanh lá, vàng đất, xám đá */
.af-theme-forest {
    --af-color-primary: #2d5a3f;
    --af-color-accent: #c7973e;
    --af-color-accent-muted: rgba(199, 151, 62, 0.10);
    --af-title-color: #1a2e1f;
    --af-desc-color: #4a5e4f;
    --af-desc-color-alt: #697a6e;
    --af-number-color: #1a2e1f;
    --af-step-color: #2d5a3f;
    --af-badge-color: #2d5a3f;
    --af-tab-inactive-color: #697a6e;
    --af-tab-active-color: #fafaf7;
    --af-accordion-active-title: #3d7a52;
    --af-icon-fg: #fafaf7;
    --af-on-bg-text: #fafaf7;
    --af-page-bg: #eef2eb;
    --af-content-bg: #f5f3ec;
    --af-item-bg-alt: #e4ece0;
    --af-badge-bg: #dce8d6;
    --af-visual-header-bg: #f2f5ef;
    --af-icon-bg: #2d5a3f;
    --af-step-bg: #fafaf7;
    --af-tab-inactive-bg: #e4ece0;
    --af-tab-active-bg: #2d5a3f;
    --af-quote-bg: #fafaf7;
    --af-progress-track-bg: #c5d1c0;
    --af-progress-fill-bg: #3d7a52;
    --af-bg-overlay: rgba(26, 46, 31, 0.50);
    --af-border-color: #c5d1c0;
    --af-border-alt-color: #a8bea0;
    --af-border-radius: 12px;
    --af-border-radius-sm: 6px;
    --af-border-radius-pill: 999px;
    --af-star-empty-color: #c5d1c0;
    --af-star-fill-color: #d4a843;
    --af-axis-color: #2d5a3f;
    --af-axis-h-color: #2d5a3f;
    --af-connector-color: #3d7a52;
    --af-dot-color: #2d5a3f;
    --af-step-connector-color: #3d7a52;
    --af-step-border-color: #3d7a52;
    --af-bubble-stroke-color: #c5d1c0;
    --af-quote-boxed-accent: #c7973e;
    --af-shadow-card: 0 10px 25px rgba(45, 90, 63, 0.12);
    --af-shadow-box: 0 10px 30px rgba(45, 90, 63, 0.06);
    --af-shadow-zig: 0 4px 20px rgba(45, 90, 63, 0.08);
    --af-shadow-accent: 0 4px 10px rgba(45, 90, 63, 0.15);
    --af-shadow-btn: 0 4px 6px -1px rgba(45, 90, 63, 0.12);
    --af-visual-subtle-bg: rgba(45, 90, 63, 0.04);
    --af-bullet-glow: 0 0 14px 3px rgba(45, 90, 63, 0.35);
    --af-btn-hover-color: #3d7a52;
    --af-btn-hover-bg: #e4ece0;
    --af-content-bg: #f5f3ec;
    /* Kem lá khô — warm parchment */
}

/* Preset: Ocean Blue */
.af-theme-ocean {
    --af-color-primary: #0369a1;
    --af-color-accent: #0ea5e9;
    --af-color-accent-muted: rgba(14, 165, 233, 0.08);
    --af-title-color: #0c1a2e;
    --af-desc-color: #3b526b;
    --af-desc-color-alt: #64748b;
    --af-number-color: #0c1a2e;
    --af-step-color: #0ea5e9;
    --af-badge-color: #0369a1;
    --af-tab-inactive-color: #64748b;
    --af-tab-active-color: #ffffff;
    --af-accordion-active-title: #0369a1;
    --af-icon-fg: #ffffff;
    --af-on-bg-text: #ffffff;
    --af-page-bg: #f0f9ff;
    --af-content-bg: #f0faff;
    --af-item-bg-alt: #e0f2fe;
    --af-badge-bg: #e0f2fe;
    --af-visual-header-bg: #f0f9ff;
    --af-icon-bg: #0369a1;
    --af-step-bg: #ffffff;
    --af-tab-inactive-bg: #e0f2fe;
    --af-tab-active-bg: #0369a1;
    --af-quote-bg: #ffffff;
    --af-progress-track-bg: #bae6fd;
    --af-progress-fill-bg: #0ea5e9;
    --af-bg-overlay: rgba(12, 26, 46, 0.45);
    --af-border-color: #bae6fd;
    --af-border-alt-color: #7dd3fc;
    --af-border-radius: 12px;
    --af-border-radius-sm: 6px;
    --af-border-radius-pill: 999px;
    --af-star-empty-color: #bae6fd;
    --af-star-fill-color: #0ea5e9;
    --af-axis-color: #0369a1;
    --af-axis-h-color: #0369a1;
    --af-connector-color: #0369a1;
    --af-dot-color: #0369a1;
    --af-step-connector-color: #0ea5e9;
    --af-step-border-color: #0ea5e9;
    --af-bubble-stroke-color: #bae6fd;
    --af-quote-boxed-accent: #0ea5e9;
    --af-shadow-card: 0 10px 25px rgba(3, 105, 161, 0.12);
    --af-shadow-box: 0 10px 30px rgba(3, 105, 161, 0.06);
    --af-shadow-zig: 0 4px 20px rgba(3, 105, 161, 0.08);
    --af-shadow-accent: 0 4px 10px rgba(3, 105, 161, 0.15);
    --af-shadow-btn: 0 4px 6px -1px rgba(3, 105, 161, 0.12);
    --af-visual-subtle-bg: rgba(3, 105, 161, 0.04);
    --af-bullet-glow: 0 0 14px 3px rgba(14, 165, 233, 0.40);
    --af-btn-hover-color: #0ea5e9;
    --af-btn-hover-bg: #e0f2fe;
    --af-content-bg: #f0faff;
    /* Xanh sương biển — ocean mist */
}

/* Preset: Midnight Dark */
.af-theme-midnight {
    --af-color-primary: #a78bfa;
    --af-color-accent: #f59e0b;
    --af-color-accent-muted: rgba(245, 158, 11, 0.08);
    --af-title-color: #f1f5f9;
    --af-desc-color: #94a3b8;
    --af-desc-color-alt: #64748b;
    --af-number-color: #f1f5f9;
    --af-step-color: #a78bfa;
    --af-badge-color: #a78bfa;
    --af-tab-inactive-color: #64748b;
    --af-tab-active-color: #0f172a;
    --af-accordion-active-title: #a78bfa;
    --af-icon-fg: #0f172a;
    --af-on-bg-text: #f1f5f9;
    --af-page-bg: #0f172a;
    --af-content-bg: #162032;
    --af-item-bg-alt: #1a2438;
    --af-badge-bg: #2e1065;
    --af-visual-header-bg: #0f172a;
    --af-icon-bg: #a78bfa;
    --af-step-bg: #1e293b;
    --af-tab-inactive-bg: #1e293b;
    --af-tab-active-bg: #a78bfa;
    --af-quote-bg: #1e293b;
    --af-progress-track-bg: #334155;
    --af-progress-fill-bg: #a78bfa;
    --af-bg-overlay: rgba(15, 23, 42, 0.55);
    --af-border-color: #334155;
    --af-border-alt-color: #475569;
    --af-border-radius: 12px;
    --af-border-radius-sm: 6px;
    --af-border-radius-pill: 999px;
    --af-star-empty-color: #475569;
    --af-star-fill-color: #f59e0b;
    --af-axis-color: #a78bfa;
    --af-axis-h-color: #a78bfa;
    --af-connector-color: #a78bfa;
    --af-dot-color: #a78bfa;
    --af-step-connector-color: #a78bfa;
    --af-step-border-color: #a78bfa;
    --af-bubble-stroke-color: #334155;
    --af-quote-boxed-accent: #f59e0b;
    --af-shadow-card: 0 10px 40px rgba(0, 0, 0, 0.4);
    --af-shadow-box: 0 10px 30px rgba(0, 0, 0, 0.3);
    --af-shadow-zig: 0 4px 20px rgba(0, 0, 0, 0.35);
    --af-shadow-accent: 0 4px 10px rgba(0, 0, 0, 0.4);
    --af-shadow-btn: 0 4px 6px -1px rgba(0, 0, 0, 0.35);
    --af-visual-subtle-bg: rgba(167, 139, 250, 0.06);
    --af-bullet-glow: 0 0 14px 3px rgba(167, 139, 250, 0.45);
    --af-btn-hover-color: #a78bfa;
    --af-btn-hover-bg: #2e1065;
    --af-content-bg: #162032;
    /* Xanh đêm đậm — deep night blue */
}