.dynamic-template[data-v-10e2da42] {
    /* Apply font from CSS variable if set */
    font-family: var(--template-font-family, inherit);
}

/* Uploaded templates often use a generic `card` class name.
   Neutralize framework color vars without forcing a template-wide text color. */
.dynamic-template[data-v-10e2da42] .card {
    --bs-card-color: inherit;
    --bs-body-color: inherit;
    width: var(--card-width, auto);
    height: var(--card-height, auto);
}
.dynamic-template--legacy[data-v-10e2da42] img {
    max-width: 100%;
    height: auto;
}
.dynamic-template--legacy[data-v-10e2da42] * {
    box-sizing: border-box;
}

/* Preserve card's own rounded corners and borders */
/* Cards should clip overflow to prevent elements from extending outside boundaries */
/* Allow internal content to overflow - don't clip card content */
.dynamic-template--legacy[data-v-10e2da42] {
    /* Default to visible to allow internal content like bottom text */
    overflow: visible !important;
    /* Ensure content can extend beyond if needed */
    min-height: 100%;
}

/* If the card itself has overflow-hidden class, override it to allow content */
.dynamic-template--legacy > div:first-child[class*='overflow-hidden'][data-v-10e2da42] {
    /* Override overflow-hidden on the card itself to prevent bottom clipping */
    overflow: visible !important;
    /* Ensure card can grow to fit content */
    min-height: 100%;
}

/* Inner divs should respect parent overflow - don't force visible */
/* Templates can use overflow-visible class if they need it, but by default clip */
.dynamic-template[data-v-10e2da42] > div {
    /* Don't force overflow - let templates control it via classes */
}

/* Apply parent font as baseline only; allow element-level font classes to override. */
[data-v-10e2da42] .parent-container-font-wrapper .dynamic-template {
    font-family: var(--parent-font-family, inherit) !important;
}

/* Preserve card border and rounded classes */
.dynamic-template[data-v-10e2da42] .rounded-t-full {
    border-top-left-radius: 9999px !important;
    border-top-right-radius: 9999px !important;
}
.dynamic-template[data-v-10e2da42] .rounded-b-lg {
    border-bottom-left-radius: 0.5rem !important;
    border-bottom-right-radius: 0.5rem !important;
}
.dynamic-template[data-v-10e2da42] .rounded-lg {
    border-radius: 0.5rem !important;
}
.dynamic-template[data-v-10e2da42] .rounded-xl {
    border-radius: 0.75rem !important;
}
.dynamic-template[data-v-10e2da42] .rounded-2xl {
    border-radius: 1rem !important;
}
.dynamic-template[data-v-10e2da42] .rounded-3xl {
    border-radius: 1.5rem !important;
}
.dynamic-template[data-v-10e2da42] .rounded-full {
    border-radius: 9999px !important;
}

/* Ensure borders are preserved */
.dynamic-template[data-v-10e2da42] [class*='border-2'] {
    border-width: 2px !important;
    border-style: solid !important;
}
.dynamic-template[data-v-10e2da42] [class*='border-4'] {
    border-width: 4px !important;
    border-style: solid !important;
}

/* Ensure border colors are applied when border width is set */
.dynamic-template[data-v-10e2da42] [class*='border-lime-500'] {
    border-color: #84cc16 !important;
}
.dynamic-template[data-v-10e2da42] [class*='border-lime-600'] {
    border-color: #65a30d !important;
}
.dynamic-template[data-v-10e2da42] [class*='border-lime-900'] {
    border-color: #365314 !important;
}
.dynamic-template[data-v-10e2da42] [class*='border-8'] {
    border-width: 8px !important;
    border-style: solid !important;
}
.dynamic-template[data-v-10e2da42] [class*='border-12'] {
    border-width: 12px !important;
    border-style: solid !important;
}

/* Center images properly */
.dynamic-template[data-v-10e2da42] img[alt*='Legend' i] {
    -o-object-position: center !important;
       object-position: center !important;
}

/* Ensure gradients are properly rendered - but don't override explicit background-size */
/* Only apply default background-size if not explicitly set */
.dynamic-template[data-v-10e2da42] [style*='background-image'][style*='gradient'] {
    /* Don't override background-size if it's already set in the style attribute */
    /* The inline style will take precedence */
}

/* For grid patterns (multiple gradients with background-size), use repeat */
.dynamic-template[data-v-10e2da42] [style*='linear-gradient'][style*='background-size'] {
    /* Grid patterns need repeat to tile */
    background-repeat: repeat !important;
}

/* Ensure background-size is preserved when both background-image and background-size are set */
.dynamic-template[data-v-10e2da42] [style*='background-image'][style*='background-size'] {
    /* Don't override - let inline styles control */
}

/* For non-repeating gradients without explicit size, use no-repeat and cover.
   Repeating gradients are texture patterns and should keep their native repeat behavior. */
.dynamic-template[data-v-10e2da42] [style*='background-image'][style*='gradient']:not([style*='background-size']):not([style*='repeating-']) {
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
}

/* Do not globally override URL backgrounds.
   Data-URL patterns (like tiled triangles) must preserve repeat/size from template source. */

/* Ensure standard Tailwind gradient classes work */
.dynamic-template[data-v-10e2da42] .bg-gradient-to-t,
.dynamic-template[data-v-10e2da42] .bg-gradient-to-b,
.dynamic-template[data-v-10e2da42] .bg-gradient-to-l,
.dynamic-template[data-v-10e2da42] .bg-gradient-to-r,
.dynamic-template[data-v-10e2da42] .bg-gradient-to-tr,
.dynamic-template[data-v-10e2da42] .bg-gradient-to-tl,
.dynamic-template[data-v-10e2da42] .bg-gradient-to-br,
.dynamic-template[data-v-10e2da42] .bg-gradient-to-bl {
    background-image: var(--tw-gradient-stops);
}

/* Ensure gradient color stops work */
.dynamic-template[data-v-10e2da42] .from-fuchsia-500 {
    --tw-gradient-from: #a855f7;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(168, 85, 247, 0));
}
.dynamic-template[data-v-10e2da42] .via-yellow-400 {
    --tw-gradient-stops: var(--tw-gradient-from), #facc15, var(--tw-gradient-to, rgba(250, 204, 21, 0));
}
.dynamic-template[data-v-10e2da42] .to-yellow-200 {
    --tw-gradient-to: #fef08a;
}

/* Ensure background-size is preserved when background-image is set */
/* Don't force background-repeat - let inline styles control it */
/* Grid patterns (with background-size) need repeat, single gradients need no-repeat */

/* Ensure perfect centering for elements with left-1/2 and -translate-x-1/2 */
/* When both left: 50% and translateX(-50%) are present, ensure perfect centering */
.dynamic-template[data-v-10e2da42] [style*='left: 50%'][style*='translateX(-50%)'] {
    /* Ensure transform-origin is center for proper centering */
    transform-origin: center center !important;
    /* Remove any conflicting right/width that might interfere */
    right: auto !important;
}

/* Also handle case where translateX(-50%) is in a combined transform */
.dynamic-template[data-v-10e2da42] [style*='left: 50%'][style*='transform'][style*='-50%'] {
    transform-origin: center center !important;
}