/* Multi Button Block Styles */

.dgs-multi-button {
    margin: var(--space-m) 0;
}

.dgs-multi-button__container {
    width: 100%;
}

/* Grid layout with column options */
.dgs-multi-button__container--grid {
    display: grid;
}

.dgs-multi-button__grid-1 {
    grid-template-columns: var(--grid-1);
}

.dgs-multi-button__grid-2 {
    grid-template-columns: var(--grid-2);
}

.dgs-multi-button__grid-3 {
    grid-template-columns: var(--grid-3);
}

.dgs-multi-button__grid-4 {
    grid-template-columns: var(--grid-4);
}

/* Flex layout (optional) */
.dgs-multi-button__container--flex {
    display: flex;
    flex-wrap: wrap;
}

/* Button width options */
.dgs-multi-button__fit-content .dgs-multi-button__button {
    width: auto;
}

.dgs-multi-button__same-width .dgs-multi-button__button {
    width: 100%;
}

.dgs-multi-button__container--flex.dgs-multi-button__fit-content {
    display: inline-flex;
}

/* Fit content grid layouts */
.dgs-multi-button__container--grid.dgs-multi-button__fit-content.dgs-multi-button__grid-1 {
    grid-template-columns: fit-content(100%);
}

.dgs-multi-button__container--grid.dgs-multi-button__fit-content.dgs-multi-button__grid-2 {
    grid-template-columns: repeat(
        2,
        fit-content(calc(50% - var(--grid-gap) / 2))
    );
}

.dgs-multi-button__container--grid.dgs-multi-button__fit-content.dgs-multi-button__grid-3 {
    grid-template-columns: repeat(
        3,
        fit-content(calc(33.33% - var(--grid-gap) * 2 / 3))
    );
}

.dgs-multi-button__container--grid.dgs-multi-button__fit-content.dgs-multi-button__grid-4 {
    grid-template-columns: repeat(
        4,
        fit-content(calc(25% - var(--grid-gap) * 3 / 4))
    );
}

/* Spacing options */
.dgs-multi-button__spacing--small {
    gap: var(--space-xs);
}

.dgs-multi-button__spacing--medium {
    gap: var(--space-m);
}

.dgs-multi-button__spacing--large {
    gap: var(--space-l);
}

/* Alignment options */
.dgs-multi-button__align--left {
    justify-content: flex-start;
}
@media only screen and (max-width: 767px) {
    .dgs-multi-button__align--left {
        justify-content: center !important;
    }
    .dgs-multi-button__heading {
        text-align: center;
    }
}

.dgs-multi-button__align--center {
    justify-content: center;
}

.dgs-multi-button__align--right {
    justify-content: flex-end;
}

@media only screen and (max-width: 767px) {
    .wp-block-image img {
        box-sizing: border-box;
        height: auto;
        max-width: 100%;
        vertical-align: bottom;
        margin: auto;
        display: block;
    }
    .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
        flex-basis: 100% !important;
        justify-content: center;
        display: flex !important;
        flex-direction: column;
        text-align: center;
    }
}
/* Button styles */
.dgs-multi-button__button {
    display: inline-block;
    text-align: center;
    border-radius: var(--btn-border-radius);
    padding: 15px 30px;
    text-decoration: none;
    transition: var(--transition);
}

/* Rounded button modifier */
.dgs-multi-button__button--rounded {
    border-radius: 50px;
}

/* Action button styles */
.dgs-multi-button__button.btn--action {
    background-color: var(--action);
    color: var(--white);
    border: 2px solid var(--action);
}

.dgs-multi-button__button.btn--action:hover {
    background-color: var(--action-hover);
    border-color: var(--action-hover);
    color: var(--white);
}

.dgs-multi-button__button.btn--action-light {
    background-color: var(--action-light);
    color: var(--action-dark);
    border: 2px solid var(--action-light);
}

.dgs-multi-button__button.btn--action-light:hover {
    background-color: var(--action);
    border-color: var(--action);
    color: var(--white);
}

.dgs-multi-button__button.btn--action-dark {
    background-color: var(--action-dark);
    color: var(--white);
    border: 2px solid var(--action-dark);
}

.dgs-multi-button__button.btn--action-dark:hover {
    background-color: var(--action-ultra-dark);
    border-color: var(--action-ultra-dark);
    color: var(--white);
}

/* Primary button styles */
.dgs-multi-button__button.btn--primary {
    background-color: var(--primary);
    color: var(--white);
    border: 2px solid var(--primary);
}

.dgs-multi-button__button.btn--primary:hover {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
    color: var(--white);
}

.dgs-multi-button__button.btn--primary-light {
    background-color: var(--primary-light);
    color: var(--primary-dark);
    border: 2px solid var(--primary-light);
}

.dgs-multi-button__button.btn--primary-light:hover {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}

.dgs-multi-button__button.btn--primary-dark {
    background-color: var(--primary-dark);
    color: var(--white);
    border: 2px solid var(--primary-dark);
}

.dgs-multi-button__button.btn--primary-dark:hover {
    background-color: var(--primary-ultra-dark);
    border-color: var(--primary-ultra-dark);
    color: var(--white);
}

/* Secondary button styles */
.dgs-multi-button__button.btn--secondary {
    background-color: var(--secondary);
    color: var(--white);
    border: 2px solid var(--secondary);
}

.dgs-multi-button__button.btn--secondary:hover {
    background-color: var(--secondary-hover);
    border-color: var(--secondary-hover);
    color: var(--white);
}

.dgs-multi-button__button.btn--secondary-light {
    background-color: var(--secondary-light);
    color: var(--secondary-dark);
    border: 2px solid var(--secondary-light);
}

.dgs-multi-button__button.btn--secondary-light:hover {
    background-color: var(--secondary);
    border-color: var(--secondary);
    color: var(--white);
}

.dgs-multi-button__button.btn--secondary-dark {
    background-color: var(--secondary-dark);
    color: var(--white);
    border: 2px solid var(--secondary-dark);
}

.dgs-multi-button__button.btn--secondary-dark:hover {
    background-color: var(--secondary-ultra-dark);
    border-color: var(--secondary-ultra-dark);
    color: var(--white);
}

/* Accent button styles */
.dgs-multi-button__button.btn--accent {
    background-color: var(--accent);
    color: var(--white);
    border: 2px solid var(--accent);
}

.dgs-multi-button__button.btn--accent:hover {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
    color: var(--white);
}

.dgs-multi-button__button.btn--accent-light {
    background-color: var(--accent-light);
    color: var(--accent-dark);
    border: 2px solid var(--accent-light);
}

.dgs-multi-button__button.btn--accent-light:hover {
    background-color: var(--accent);
    border-color: var(--accent);
    color: var(--white);
}

.dgs-multi-button__button.btn--accent-dark {
    background-color: var(--accent-dark);
    color: var(--white);
    border: 2px solid var(--accent-dark);
}

.dgs-multi-button__button.btn--accent-dark:hover {
    background-color: var(--accent-ultra-dark);
    border-color: var(--accent-ultra-dark);
    color: var(--white);
}

/* Neutral button styles */
.dgs-multi-button__button.btn--neutral {
    background-color: var(--neutral);
    color: var(--white);
    border: 2px solid var(--neutral);
}

.dgs-multi-button__button.btn--neutral:hover {
    background-color: var(--neutral-dark);
    border-color: var(--neutral-dark);
    color: var(--white);
}

.dgs-multi-button__button.btn--neutral-light {
    background-color: var(--neutral-light);
    color: var(--neutral-dark);
    border: 2px solid var(--neutral-light);
}

.dgs-multi-button__button.btn--neutral-light:hover {
    background-color: var(--neutral);
    border-color: var(--neutral);
    color: var(--white);
}

.dgs-multi-button__button.btn--neutral-dark {
    background-color: var(--neutral-dark);
    color: var(--white);
    border: 2px solid var(--neutral-dark);
}

.dgs-multi-button__button.btn--neutral-dark:hover {
    background-color: var(--neutral-ultra-dark);
    border-color: var(--neutral-ultra-dark);
    color: var(--white);
}

/* Outline button styles */
.dgs-multi-button__button--outline {
    background-color: transparent !important;
}

/* Action outline */
.dgs-multi-button__button--outline.btn--action {
    color: var(--action) !important;
}

.dgs-multi-button__button--outline.btn--action:hover {
    background-color: var(--action) !important;
    color: var(--white) !important;
}

.dgs-multi-button__button--outline.btn--action-light {
    color: var(--action-light) !important;
    border-color: var(--action-light) !important;
}

.dgs-multi-button__button--outline.btn--action-light:hover {
    background-color: var(--action-light) !important;
    color: var(--action-dark) !important;
}

.dgs-multi-button__button--outline.btn--action-dark {
    color: var(--action-dark) !important;
    border-color: var(--action-dark) !important;
}

.dgs-multi-button__button--outline.btn--action-dark:hover {
    background-color: var(--action-dark) !important;
    color: var(--white) !important;
}

/* Primary outline */
.dgs-multi-button__button--outline.btn--primary {
    color: var(--primary) !important;
}

.dgs-multi-button__button--outline.btn--primary:hover {
    background-color: var(--primary) !important;
    color: var(--white) !important;
}

.dgs-multi-button__button--outline.btn--primary-light {
    color: var(--primary-light) !important;
    border-color: var(--primary-light) !important;
}

.dgs-multi-button__button--outline.btn--primary-light:hover {
    background-color: var(--primary-light) !important;
    color: var(--primary-dark) !important;
}

.dgs-multi-button__button--outline.btn--primary-dark {
    color: var(--primary-dark) !important;
    border-color: var(--primary-dark) !important;
}

.dgs-multi-button__button--outline.btn--primary-dark:hover {
    background-color: var(--primary-dark) !important;
    color: var(--white) !important;
}

/* Secondary outline */
.dgs-multi-button__button--outline.btn--secondary {
    color: var(--secondary) !important;
}

.dgs-multi-button__button--outline.btn--secondary:hover {
    background-color: var(--secondary) !important;
    color: var(--white) !important;
}

.dgs-multi-button__button--outline.btn--secondary-light {
    color: var(--secondary-light) !important;
    border-color: var(--secondary-light) !important;
}

.dgs-multi-button__button--outline.btn--secondary-light:hover {
    background-color: var(--secondary-light) !important;
    color: var(--secondary-dark) !important;
}

.dgs-multi-button__button--outline.btn--secondary-dark {
    color: var(--secondary-dark) !important;
    border-color: var(--secondary-dark) !important;
}

.dgs-multi-button__button--outline.btn--secondary-dark:hover {
    background-color: var(--secondary-dark) !important;
    color: var(--white) !important;
}

/* Accent outline */
.dgs-multi-button__button--outline.btn--accent {
    color: var(--accent) !important;
}

.dgs-multi-button__button--outline.btn--accent:hover {
    background-color: var(--accent) !important;
    color: var(--white) !important;
}

.dgs-multi-button__button--outline.btn--accent-light {
    color: var(--accent-light) !important;
    border-color: var(--accent-light) !important;
}

.dgs-multi-button__button--outline.btn--accent-light:hover {
    background-color: var(--accent-light) !important;
    color: var(--accent-dark) !important;
}

.dgs-multi-button__button--outline.btn--accent-dark {
    color: var(--accent-dark) !important;
    border-color: var(--accent-dark) !important;
}

.dgs-multi-button__button--outline.btn--accent-dark:hover {
    background-color: var(--accent-dark) !important;
    color: var(--white) !important;
}

/* Neutral outline */
.dgs-multi-button__button--outline.btn--neutral {
    color: var(--neutral) !important;
}

.dgs-multi-button__button--outline.btn--neutral:hover {
    background-color: var(--neutral) !important;
    color: var(--white) !important;
}

.dgs-multi-button__button--outline.btn--neutral-light {
    color: var(--neutral-light) !important;
    border-color: var(--neutral-light) !important;
}

.dgs-multi-button__button--outline.btn--neutral-light:hover {
    background-color: var(--neutral-light) !important;
    color: var(--neutral-dark) !important;
}

.dgs-multi-button__button--outline.btn--neutral-dark {
    color: var(--neutral-dark) !important;
    border-color: var(--neutral-dark) !important;
}

.dgs-multi-button__button--outline.btn--neutral-dark:hover {
    background-color: var(--neutral-dark) !important;
    color: var(--white) !important;
}

/* Responsive styles */
@media (max-width: 767px) {
    .dgs-multi-button__container--flex .dgs-multi-button__button {
        width: fit-content !important;
        margin: auto;
    }

    .dgs-multi-button__container--flex.dgs-multi-button__fit-content {
        flex-direction: column;
        width: 100%;
    }
}