@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');

.aafe-morphing-card-stack-wrapper h1,
.aafe-morphing-card-stack-wrapper h2,
.aafe-morphing-card-stack-wrapper h3,
.aafe-morphing-card-stack-wrapper h4,
.aafe-morphing-card-stack-wrapper h5,
.aafe-morphing-card-stack-wrapper h6 {
    font-family: 'Sora', sans-serif;
}

.aafe-morphing-card-stack-wrapper p,
.aafe-morphing-card-stack-wrapper span,
.aafe-morphing-card-stack-wrapper li,
.aafe-morphing-card-stack-wrapper a {
    font-family: 'Inter', sans-serif;
}

.aafe-morphing-card-stack-wrapper {
    width: 100%;
    position: relative;
    display: block;
}

/* Layout Toggle Buttons */
.aafe-morphing-card-stack__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background-color: var(--aafe-toggle-container-bg, #f8f9fa);
    padding: 4px;
    border-radius: var(--aafe-toggle-radius, 8px);
    width: fit-content;
    margin: 0 auto 16px auto;
}

.aafe-morphing-card-stack__toggle-btn {
    border: none !important;
    background-color: var(--aafe-toggle-btn-bg, transparent) !important;
    border-radius: var(--aafe-toggle-btn-radius, 6px) !important;
    padding: 8px !important;
    margin: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    line-height: 1 !important;
    cursor: pointer;
    color: var(--aafe-toggle-color, #6b7280) !important;
    transition: all 0.2s ease;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.aafe-morphing-card-stack__toggle-btn:hover {
    color: var(--aafe-toggle-hover-color, #111827) !important;
    background-color: var(--aafe-toggle-hover-bg, #e5e7eb) !important;
}

.aafe-morphing-card-stack__toggle-btn.is-active {
    background-color: var(--aafe-toggle-active-bg, #111827) !important;
    color: var(--aafe-toggle-active-color, #ffffff) !important;
}

.aafe-morphing-card-stack__toggle-btn svg,
.aafe-morphing-card-stack__toggle-btn i {
    width: 16px !important;
    height: 16px !important;
    font-size: 16px !important;
    fill: currentColor;
    display: block !important;
}

/* Container */
.aafe-morphing-card-stack__container {
    margin: 0 auto;
    position: relative;
    perspective: 1000px;
    transform-style: preserve-3d;
}

/* Stack Layout */
.aafe-morphing-card-stack__container[data-layout="stack"] {
    position: relative;
    width: calc(var(--aafe-stack-width, 14rem) + 40px);
    height: calc(var(--aafe-stack-height, 12rem) + 60px);
    margin: 0 auto;
    perspective: 1000px;
}

.aafe-morphing-card-stack__container[data-layout="stack"] .aafe-morphing-card-stack__card {
    position: absolute;
    width: var(--aafe-stack-width, 14rem);
    height: var(--aafe-stack-height, 12rem);
    top: 0;
    left: 0;
    cursor: pointer;
    transform-origin: center bottom;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.aafe-morphing-card-stack__container[data-layout="stack"] .aafe-morphing-card-stack__card.is-top {
    cursor: grab;
    touch-action: pan-y;
}

.aafe-morphing-card-stack__container[data-layout="stack"] .aafe-morphing-card-stack__card.is-dragging {
    cursor: grabbing;
    transition: none !important;
}

/* Grid Layout */
.aafe-morphing-card-stack__container[data-layout="grid"] {
    display: grid;
    grid-template-columns: repeat(var(--aafe-grid-columns, 2), 1fr);
    gap: var(--aafe-grid-gap, 0.75rem);
    width: 100%;
}

.aafe-morphing-card-stack__container[data-layout="grid"] .aafe-morphing-card-stack__card {
    position: relative;
    width: 100%;
}

.aafe-morphing-card-stack__container[data-layout="grid"] .aafe-morphing-card-stack__card-inner {
    flex-direction: column;
}

/* List Layout */
.aafe-morphing-card-stack__container[data-layout="list"] {
    display: flex;
    flex-direction: column;
    gap: var(--aafe-list-gap, 0.75rem);
    width: 100%;
}

.aafe-morphing-card-stack__container[data-layout="list"] .aafe-morphing-card-stack__card {
    position: relative;
    width: 100%;
}

/* Card Styling */
.aafe-morphing-card-stack__card {
    background-color: var(--aafe-card-bg, #ffffff);
    border: 1px solid var(--aafe-card-border-color, #e5e7eb);
    border-radius: var(--aafe-card-radius, 16px);
    padding: var(--aafe-card-padding, 24px);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}

.aafe-morphing-card-stack__card:hover {
    background-color: var(--aafe-card-hover-bg, var(--aafe-card-bg, #ffffff));
}

.aafe-morphing-card-stack__card.is-expanded {
    box-shadow: 0 0 0 2px var(--aafe-card-active-ring, #111827);
    z-index: 50 !important;
}

.aafe-morphing-card-stack__card-inner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.aafe-morphing-card-stack__icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: var(--aafe-icon-box-size, 40px);
    height: var(--aafe-icon-box-size, 40px);
    border-radius: var(--aafe-icon-radius, 8px);
    background-color: var(--aafe-icon-bg, #f3f4f6);
    color: var(--aafe-icon-color, #111827);
    transition: all 0.3s ease;
}

.aafe-morphing-card-stack__card:hover .aafe-morphing-card-stack__icon {
    background-color: var(--aafe-icon-hover-bg, var(--aafe-icon-bg, #f3f4f6));
    color: var(--aafe-icon-hover-color, var(--aafe-icon-color, #111827));
}

.aafe-morphing-card-stack__icon svg,
.aafe-morphing-card-stack__icon i {
    width: var(--aafe-icon-size, 20px);
    height: var(--aafe-icon-size, 20px);
    font-size: var(--aafe-icon-size, 20px);
    fill: currentColor;
    display: block !important;
    transition: all 0.3s ease;
}

.aafe-morphing-card-stack__content {
    flex: 1;
    min-width: 0;
}

.aafe-morphing-card-stack__title {
    margin: 0;
    color: var(--aafe-title-color, inherit);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.3s ease;
}

.aafe-morphing-card-stack__desc {
    margin: 4px 0 0 0;
    color: var(--aafe-desc-color, inherit);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* Line clamps per layout */
.aafe-morphing-card-stack__container[data-layout="stack"] .aafe-morphing-card-stack__desc {
    -webkit-line-clamp: 3;
}
.aafe-morphing-card-stack__container[data-layout="grid"] .aafe-morphing-card-stack__desc {
    -webkit-line-clamp: 2;
}
.aafe-morphing-card-stack__container[data-layout="list"] .aafe-morphing-card-stack__desc {
    -webkit-line-clamp: 1;
}

/* Swipe Indicator */
.aafe-morphing-card-stack__swipe-hint {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    color: var(--aafe-swipe-hint-color, #9ca3af);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    white-space: nowrap;
}

.aafe-morphing-card-stack__card.is-top .aafe-morphing-card-stack__swipe-hint {
    opacity: 1;
}

/* Dots Pagination for Stack Mode */
.aafe-morphing-card-stack__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--aafe-dot-gap, 8px);
    margin-top: 1.5rem;
}

.aafe-morphing-card-stack__dot {
    width: var(--aafe-dot-size, 8px) !important;
    height: var(--aafe-dot-size, 8px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    border-radius: 9999px !important;
    background-color: var(--aafe-dot-color, #e5e7eb) !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer;
    transition: all 0.3s ease;
    line-height: 1 !important;
    box-shadow: none !important;
    outline: none !important;
}

.aafe-morphing-card-stack__dot:hover {
    background-color: var(--aafe-dot-hover-color, #d1d5db) !important;
}

.aafe-morphing-card-stack__dot.is-active {
    width: var(--aafe-dot-active-width, 24px) !important;
    background-color: var(--aafe-dot-active-color, #111827) !important;
}

/* FLIP Animation Classes */
.is-animating {
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                width 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                height 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                top 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                left 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                opacity 0.4s ease !important;
}

/* Link Overlay */
.aafe-morphing-card-stack__link-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    text-indent: -9999px;
}

/* Global Hover Effects mapping */
.aafe-morphing-card-stack-wrapper[data-hover="lift"] .aafe-morphing-card-stack__card:hover { transform: translateY(-6px); box-shadow: 0 12px 40px var(--aafe-glow-color, rgba(0,0,0,0.15)); }
.aafe-morphing-card-stack-wrapper[data-hover="scale"] .aafe-morphing-card-stack__card:hover { transform: scale(var(--aafe-hover-scale, 1.03)); }
.aafe-morphing-card-stack-wrapper[data-hover="glow"] .aafe-morphing-card-stack__card:hover { box-shadow: 0 0 20px var(--aafe-glow-color, rgba(59,130,246,0.5)); border-color: var(--aafe-glow-color, #3b82f6); }
.aafe-morphing-card-stack-wrapper[data-hover="border-pop"] .aafe-morphing-card-stack__card:hover { border-color: #111827; transform: scale(1.01); }