/* Sticky Footer CTA Public CSS */
:root {
    --sfcta-gap: 8px;
    --sfcta-radius: 0px;
    --sfcta-max-width: 100%; /* For wrap mode */
    --sfcta-min-item: 64px;
}

.sfcta {
    position: fixed;
    left: 0;
    right: 0;
    z-index: var(--sfcta-z, 9999);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    box-sizing: border-box;
    transition: transform 0.3s ease;
}

.sfcta * {
    box-sizing: border-box;
}

.sfcta--bottom { bottom: 0; }
.sfcta--top { top: 0; }

.sfcta__nav {
    display: flex; /* Default flex for flat layout */
    align-items: center;
    justify-content: space-around;
    background: var(--sfcta-bg);
    height: var(--sfcta-height);
    padding: 0 10px;
    width: 100%;
    margin: 0 auto;
    /* Shadows */
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
}

/* Preset A: Single / Gradient */
.sfcta--preset-a .sfcta__nav {
    background: linear-gradient(to right, var(--sfcta-bg), var(--sfcta-bg2));
}

/* Preset B: Raised Item */
.sfcta--preset-b .sfcta__nav {
    background: var(--sfcta-bg);
    overflow: visible; /* Allow protrusion */
}

/* Preset C: Wave */
.sfcta--preset-c {
    /* The bar itself might need to interpret the wave space */
    filter: drop-shadow(0 -2px 5px rgba(0,0,0,0.1));
}
.sfcta--preset-c .sfcta__nav {
    background: var(--sfcta-bg); 
    box-shadow: none; /* Shadow on container due to wave */
}
.sfcta__wave {
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 100%;
    height: var(--sfcta-wave-height, 30px);
    line-height: 0;
}
.sfcta__wave svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Items */
.sfcta__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--sfcta-text);
    flex: 1;
    height: 100%;
    min-width: var(--sfcta-min-item);
    position: relative;
    padding: 4px;
    gap: 4px;
    transition: background 0.2s;
}

.sfcta__item:hover, .sfcta__item:focus {
    background: rgba(0,0,0,0.05);
}

.sfcta__icon {
    display: block;
    width: var(--sfcta-icon-size);
    height: var(--sfcta-icon-size);
    line-height: 1;
    color: var(--sfcta-icon);
}
.sfcta__icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.sfcta__label {
    font-size: var(--sfcta-font-size);
    line-height: 1.2;
    white-space: nowrap;
}

.sfcta__label--short {
    display: none;
}

/* Responsive States (Toggled by JS) */
.sfcta--labels-short .sfcta__label--full {
    display: none;
}
.sfcta--labels-short .sfcta__label--short {
    display: block;
}

.sfcta--icon-only .sfcta__label {
    display: none;
}
/* Ensure nice centering when icon only */
.sfcta--icon-only .sfcta__item {
    padding: 10px;
}

/* Preset B Primary Item */
.sfcta--preset-b .sfcta__item--primary {
    background: var(--sfcta-card-bg);
    color: var(--sfcta-card-text);
    border-radius: var(--sfcta-card-radius);
    transform: translateY(var(--sfcta-card-offset));
    height: calc(var(--sfcta-height) + 20px); /* Taller */
    max-height: 80px; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    z-index: 10;
    flex: 0 0 auto; /* Don't stretch */
    min-width: 80px;
    margin: 0 10px;
}
.sfcta--preset-b .sfcta__item--primary .sfcta__icon {
    color: currentColor; /* Use text color for icon in primary */
    width: calc(var(--sfcta-icon-size) * 1.2);
    height: calc(var(--sfcta-icon-size) * 1.2);
}

/* Scroll Mode */
.sfcta--scroll .sfcta__nav {
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 0; /* Hide scrollbar if possible */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
.sfcta--scroll .sfcta__nav::-webkit-scrollbar {
    display: none;
}
.sfcta--scroll .sfcta__item {
    scroll-snap-align: center;
    flex: 0 0 auto;
    width: auto;
    padding-left: 15px;
    padding-right: 15px;
}

/* Wrap Mode */
.sfcta--wrap .sfcta__nav {
    flex-wrap: wrap;
    height: auto;
    min-height: var(--sfcta-height);
}
.sfcta--wrap .sfcta__item {
    flex: 1 1 25%; /* 4 items per row default */
}

/* Mobile Hiding */
@media (max-width: 600px) {
    .sfcta-hide-mobile { display: none !important; }
}
@media (min-width: 601px) {
    .sfcta-hide-desktop { display: none !important; }
}