/* Desktop styles */
.wp-block,
.wp-block-column,
.wp-block-group {
    max-width: var(--max-width, inherit);
}

/* Vertical alignment for groups */
.wp-block-group.is-vertical[class*="is-vertically-aligned-top"] {
    justify-content: flex-start;
    height: 100%;
}

.wp-block-group.is-vertical[class*="is-vertically-aligned-center"] {
    justify-content: center;
    height: 100%;
}

.wp-block-group.is-vertical[class*="is-vertically-aligned-bottom"] {
    justify-content: flex-end;
    height: 100%;
}

.wp-block-group.is-vertical[class*="is-vertically-aligned-space-between"] {
    justify-content: space-between;
    height: 100%;
}
/* Horizontal alignment for groups */
.wp-block-group.is-vertical[class*="is-horizontally-aligned-left"] {
    align-items: flex-start;
}

.wp-block-group.is-vertical[class*="is-horizontally-aligned-center"] {
    align-items: center;
}

.wp-block-group.is-vertical[class*="is-horizontally-aligned-right"] {
    align-items: flex-end;
}

.wp-block-group.is-vertical[class*="is-horizontally-aligned-stretch"] {
    align-items: stretch;
}

.wp-block-columns.is-wrap-reverse,
.is-wrap-reverse {
    flex-wrap: wrap-reverse !important;
}
@media screen and (min-width: 782px) {
    .wp-block-columns.is-wrap-reverse,
    .is-wrap-reverse {
        flex-wrap: nowrap !important;
    }
}

/* Tablet styles */
@media screen and (max-width: 1023px) {
    .wp-block,
    .wp-block-column,
    .wp-block-group {
        max-width: var(--tablet-max-width, var(--max-width, inherit));
    }

    [style*="--tablet-margin-top"] {
        margin-top: var(--tablet-margin-top) !important;
    }
    [style*="--tablet-margin-right"] {
        margin-right: var(--tablet-margin-right) !important;
    }
    [style*="--tablet-margin-bottom"] {
        margin-bottom: var(--tablet-margin-bottom) !important;
    }
    [style*="--tablet-margin-left"] {
        margin-left: var(--tablet-margin-left) !important;
    }

    [style*="--tablet-padding-top"] {
        padding-top: var(--tablet-padding-top) !important;
    }
    [style*="--tablet-padding-right"] {
        padding-right: var(--tablet-padding-right) !important;
    }
    [style*="--tablet-padding-bottom"] {
        padding-bottom: var(--tablet-padding-bottom) !important;
    }
    [style*="--tablet-padding-left"] {
        padding-left: var(--tablet-padding-left) !important;
    }
}

/* Mobile styles */
@media screen and (max-width: 767px) {
    .wp-block,
    .wp-block-column,
    .wp-block-group {
        max-width: var(
            --mobile-max-width,
            var(--tablet-max-width, var(--max-width, inherit))
        );
    }

    [style*="--mobile-margin-top"] {
        margin-top: var(--mobile-margin-top) !important;
    }
    [style*="--mobile-margin-right"] {
        margin-right: var(--mobile-margin-right) !important;
    }
    [style*="--mobile-margin-bottom"] {
        margin-bottom: var(--mobile-margin-bottom) !important;
    }
    [style*="--mobile-margin-left"] {
        margin-left: var(--mobile-margin-left) !important;
    }

    [style*="--mobile-padding-top"] {
        padding-top: var(--mobile-padding-top) !important;
    }
    [style*="--mobile-padding-right"] {
        padding-right: var(--mobile-padding-right) !important;
    }
    [style*="--mobile-padding-bottom"] {
        padding-bottom: var(--mobile-padding-bottom) !important;
    }
    [style*="--mobile-padding-left"] {
        padding-left: var(--mobile-padding-left) !important;
    }
}

div[class*="has-icon"] a {
    display: flex;
    flex-direction: row;
    align-items: center;
    svg {
        height: 1em;
        width: 1em;
        padding-right: 0.5em;
    }
}

.wp-block-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    li {
        line-height: 150%;
    }
}

/* Custom List Markers Styles */
.wp-block-list.has-custom-marker {
    list-style: none;
    padding-left: 0;
}

.wp-block-list.has-custom-marker li {
    position: relative;
    padding-left: calc(
        var(--marker-width) + 1em
    ); /* Adjust spacing between marker and text */
}

.wp-block-list.has-custom-marker li::before {
    content: "";
    position: absolute;
    left: 0.5em;
    top: 0.4em; /* Adjust vertical alignment */
    width: var(--marker-width); /* Adjust marker size */
    height: var(--marker-height); /* Adjust marker size */
    background-color: var(--marker-color, currentColor);
    mask-image: var(--list-marker);
    -webkit-mask-image: var(--list-marker);
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
}
ol.wp-block-list.has-custom-marker {
    list-style: none;
    counter-reset: list-counter;
}
ol.wp-block-list.has-custom-marker li {
    counter-increment: list-counter;
    padding-left: 3.5em;
}
ol.wp-block-list.has-custom-marker li::before {
    content: counter(list-counter);
    color: var(--marker-color);
    height: 2em;
    width: 2em;
    mask-image: none;
    background: none;
    top: 0.5rem;
    line-height: calc(2em + 2px);
    text-align: center;
    border: 1px solid var(--marker-color);
    border-radius: 100%;
}

/* Editor-specific styles */
/* .editor-styles-wrapper .wp-block-list.has-custom-marker { */
/*     list-style: none; */
/*     padding-left: 0; */
/* } */

/* .editor-styles-wrapper .wp-block-list.has-custom-marker li { */
/*     position: relative; */
/*     padding-left: 2em; */
/* } */

/* .editor-styles-wrapper .wp-block-list.has-custom-marker li::before { */
/*     content: ""; */
/*     position: absolute; */
/*     left: 0; */
/*     top: 0.25em; */
/*     width: 1.2em; */
/*     height: 1.2em; */
/*     background-color: var(--marker-color, currentColor); */
/*     mask-image: var(--list-marker); */
/*     -webkit-mask-image: var(--list-marker); */
/*     mask-size: contain; */
/*     -webkit-mask-size: contain; */
/*     mask-repeat: no-repeat; */
/*     -webkit-mask-repeat: no-repeat; */
/*     mask-position: center; */
/*     -webkit-mask-position: center; */
/* } */

/* Nested lists support */
.wp-block-list.has-custom-marker li > ul,
.wp-block-list.has-custom-marker li > ol {
    padding-left: 1em;
}

/* Optional: Hover effect */
.wp-block-list.has-custom-marker li:hover::before {
    opacity: 0.8;
}

.wp-block-quote {
    margin-left: 1.5rem;
    border-left: 0.25em solid var(--wp--preset--color--ctrp-purple);
}