/**
 * CDSWerx Advanced Carousel Widget Styles
 *
 * Phase 2: Customized CDSWerx Advanced Carousel CSS.
 * Includes: Slick core CSS, carousel layout, skin defaults, media position,
 * icon view/shape, subtitle, list marker, CTA button wrap, nav position,
 * and 11 banner animation effects.
 *
 * @package CDSWerx_Widget_Library
 * @since 2.13.0
 */

/* ==========================================================================
   1. SLICK CORE CSS (Required for Slick Slider 1.8.1 to function)
   ========================================================================== */

.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.slick-list:focus {
    outline: none;
}

.slick-list.dragging {
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.slick-track:before,
.slick-track:after {
    display: table;
    content: '';
}

.slick-track:after {
    clear: both;
}

.slick-loading .slick-track {
    visibility: hidden;
}

.slick-slide {
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}

[dir='rtl'] .slick-slide {
    float: right;
}

.slick-slide img {
    display: block;
}

.slick-slide.slick-loading img {
    display: none;
}

.slick-slide.dragging img {
    pointer-events: none;
}

.slick-initialized .slick-slide {
    display: block;
}

.slick-loading .slick-slide {
    visibility: hidden;
}

.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
    display: none;
}

/* ==========================================================================
   2. CAROUSEL LAYOUT (Ported from jet-carousel.css → cdswerx BEM)
   ========================================================================== */

.cdswerx-carousel {
    position: relative;
}

/* --- Equal Columns Height --- */

.cdswerx-carousel-wrap.cdswerx-equal-cols .slick-track {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}

.cdswerx-carousel-wrap.cdswerx-equal-cols .cdswerx-carousel__item {
    float: none;
    height: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.cdswerx-carousel-wrap.cdswerx-equal-cols .cdswerx-carousel__item img {
    -o-object-fit: cover;
    object-fit: cover;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

.cdswerx-carousel-wrap.cdswerx-equal-cols .cdswerx-carousel__item .cdswerx-carousel__item-inner,
.cdswerx-carousel-wrap.cdswerx-equal-cols .cdswerx-carousel__item .cdswerx-carousel-banner,
.cdswerx-carousel-wrap.cdswerx-equal-cols .cdswerx-carousel__item .cdswerx-carousel-banner__link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.cdswerx-carousel-wrap.cdswerx-equal-cols .cdswerx-carousel__item .cdswerx-carousel__item-inner,
.cdswerx-carousel-wrap.cdswerx-equal-cols .cdswerx-carousel__item .cdswerx-carousel__item-inner > *:last-child,
.cdswerx-carousel-wrap.cdswerx-equal-cols .cdswerx-carousel__item .cdswerx-carousel-banner__link {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

/* Prevent "both" mode media from consuming all space when equal height enabled */
.cdswerx-carousel-wrap.cdswerx-equal-cols [class*="cdswerx-carousel-media-left"] .cdswerx-carousel__media--both,
.cdswerx-carousel-wrap.cdswerx-equal-cols [class*="cdswerx-carousel-media-right"] .cdswerx-carousel__media--both {
    -webkit-box-flex: 0;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
}

/* --- Carousel Items --- */

.cdswerx-carousel__item {
    padding: 0;
}

.cdswerx-carousel__item .cdswerx-carousel-banner {
    float: none;
}

.cdswerx-carousel__item-link:focus-visible {
    outline: auto;
}

.cdswerx-carousel .cdswerx-carousel__item-title a {
    color: inherit;
}

.cdswerx-carousel__content {
    position: relative;
    z-index: 2;
}

.cdswerx-carousel__content,
.cdswerx-carousel__item-title,
.cdswerx-carousel__item-text {
    -webkit-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    transition: all 200ms linear;
}

.cdswerx-carousel .col-row {
    display: block;
}

/* --- Arrows --- */

.cdswerx-carousel .cdswerx-arrow {
    position: absolute;
    top: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;
    z-index: 999;
    -webkit-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    transition: all 200ms linear;
}

.cdswerx-carousel .cdswerx-arrow svg {
    width: 1em;
    height: 1em;
}

.cdswerx-carousel .cdswerx-arrow:before {
    display: block;
    width: 100%;
    text-align: center;
    line-height: 0;
    -webkit-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    transition: all 200ms linear;
}

.cdswerx-carousel .cdswerx-arrow.prev-arrow {
    left: 0;
}

.cdswerx-carousel .cdswerx-arrow.next-arrow {
    right: 0;
}

/* --- Dots --- */

.cdswerx-carousel .cdswerx-slick-dots {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative;
    z-index: 99;
    padding: 0;
    margin-left: 0;
    background-clip: content-box;
}

.cdswerx-carousel .cdswerx-slick-dots li {
    padding: 5px;
    margin: 0;
    list-style: none;
}

.cdswerx-carousel .cdswerx-slick-dots li span {
    --cdswerx-dot-w: 10px;
    --cdswerx-dot-h: 10px;
    -webkit-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    transition: all 200ms linear;
    display: block;
    cursor: pointer;
    width: var(--cdswerx-dot-w);
    height: var(--cdswerx-dot-h);
    -webkit-border-radius: 5px;
    border-radius: 5px;
    padding: 0;
    text-indent: 10em;
    overflow: hidden;
}

/* Hover & active dots inherit normal size unless overridden */
.cdswerx-carousel .cdswerx-slick-dots li:hover span {
    width: var(--cdswerx-dot-w);
    height: var(--cdswerx-dot-h);
}

.cdswerx-carousel .cdswerx-slick-dots li.slick-active span {
    width: var(--cdswerx-dot-w);
    height: var(--cdswerx-dot-h);
}

.cdswerx-carousel .cdswerx-slick-dots li span:before {
    display: none;
}

/* --- Fraction Navigation --- */

.cdswerx-carousel__fraction-navigation {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative;
    padding: 0 10px;
}

/* --- Pre-init hidden state --- */

.elementor-cdswerx-advanced-carousel .cdswerx-carousel .cdswerx-carousel__slider:not(.slick-initialized) {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    visibility: hidden;
}

.elementor-cdswerx-advanced-carousel .cdswerx-carousel .cdswerx-carousel__slider:not(.slick-initialized) ~ .cdswerx-arrow {
    visibility: hidden;
}

.elementor-widget-cdswerx-advanced-carousel {
    max-width: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    min-width: 0;
    overflow: hidden;
}

/* ==========================================================================
   3. SKIN DEFAULTS (Ported from jet-carousel-skin.css)
   ========================================================================== */

.cdswerx-carousel .cdswerx-carousel__item-title {
    margin: 0;
    padding: 0;
}

.cdswerx-carousel .cdswerx-carousel__item .cdswerx-carousel__item-button {
    background-color: #6ec1e4;
}

.cdswerx-carousel .cdswerx-arrow {
    width: 36px;
    height: 36px;
    -webkit-border-radius: 18px;
    border-radius: 18px;
    margin-top: -18px;
    color: #fff;
    font-size: 23px;
}

.cdswerx-carousel .cdswerx-arrow.prev-arrow {
    left: 20px;
}

.cdswerx-carousel .cdswerx-arrow.next-arrow {
    right: 20px;
}

/* Disabled-state parity with cdswerx-carousel: dim the arrow when at
   first/last slide with infinite loop off. Slick adds .slick-disabled
   to the same custom-arrow element it received via prevArrow/nextArrow.
   Three selector forms cover both possible DOM placements (class on the
   arrow element itself, or class on an ancestor wrapper). */
.cdswerx-carousel .cdswerx-arrow.slick-disabled,
.cdswerx-carousel .slick-disabled .cdswerx-arrow,
.cdswerx-carousel .slick-disabled.cdswerx-arrow {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

.cdswerx-carousel .cdswerx-slick-dots li.slick-active span {
    background-color: #61ce70;
}

.cdswerx-carousel .cdswerx-slick-dots li:hover span {
    background-color: #6ec1e4;
}

.cdswerx-carousel .cdswerx-slick-dots li span {
    background-color: #7a7a7a;
}

/* ==========================================================================
   3b. MEDIA POSITION (Phase 2 — Responsive flex direction for simple items)
   ========================================================================== */

/* Item inner flex container */
.cdswerx-carousel__item-inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

/* Full Box link mode — <a> replaces <div> for item-inner */
a.cdswerx-carousel__item-link {
    color: inherit;
    text-decoration: none;
}

/* Desktop media positions */
[class*="cdswerx-carousel-media-top"] .cdswerx-carousel__item-inner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: column !important;
    flex-direction: column !important; /* beats .cdswerx-equal-cols specificity */
}

[class*="cdswerx-carousel-media-bottom"] .cdswerx-carousel__item-inner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse !important;
    -ms-flex-direction: column-reverse !important;
    flex-direction: column-reverse !important; /* beats .cdswerx-equal-cols specificity */
}

[class*="cdswerx-carousel-media-left"] .cdswerx-carousel__item-inner {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row !important;
    flex-direction: row !important; /* beats .cdswerx-equal-cols specificity */
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}

[class*="cdswerx-carousel-media-right"] .cdswerx-carousel__item-inner {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse !important;
    flex-direction: row-reverse !important; /* beats .cdswerx-equal-cols specificity */
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}

/* When left/right, media fills remaining space; content defaults to auto (overridden by Elementor inline style when Content Width is set) */
[class*="cdswerx-carousel-media-left"] .cdswerx-carousel__media,
[class*="cdswerx-carousel-media-right"] .cdswerx-carousel__media {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    min-width: 0;
}

[class*="cdswerx-carousel-media-left"] .cdswerx-carousel__content,
[class*="cdswerx-carousel-media-right"] .cdswerx-carousel__content {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    min-width: 0;
}

[class*="cdswerx-carousel-media-left"] .cdswerx-carousel__media img,
[class*="cdswerx-carousel-media-right"] .cdswerx-carousel__media img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

/* Reset stale media-position flex-direction for banners layout (BUG 11: prefix_class leaks) */
.cdswerx-carousel-layout-banners .cdswerx-carousel__item .cdswerx-carousel__item-inner {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: column !important;
    flex-direction: column !important;
}

/* Tablet overrides */
@media (max-width: 1024px) {
    .cdswerx-carousel-tablet-media-top .cdswerx-carousel__item-inner {
        -ms-flex-direction: column;
        flex-direction: column;
    }
    .cdswerx-carousel-tablet-media-bottom .cdswerx-carousel__item-inner {
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
    }
    .cdswerx-carousel-tablet-media-left .cdswerx-carousel__item-inner {
        -ms-flex-direction: row !important;
        flex-direction: row !important;
        -ms-flex-align: stretch;
        align-items: stretch;
    }
    .cdswerx-carousel-tablet-media-right .cdswerx-carousel__item-inner {
        -ms-flex-direction: row-reverse !important;
        flex-direction: row-reverse !important;
        -ms-flex-align: stretch;
        align-items: stretch;
    }
    .cdswerx-carousel-tablet-media-left .cdswerx-carousel__media,
    .cdswerx-carousel-tablet-media-right .cdswerx-carousel__media {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        min-width: 0;
    }
    .cdswerx-carousel-tablet-media-left .cdswerx-carousel__content,
    .cdswerx-carousel-tablet-media-right .cdswerx-carousel__content {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        min-width: 0;
    }
    .cdswerx-carousel-tablet-media-left .cdswerx-carousel__media img,
    .cdswerx-carousel-tablet-media-right .cdswerx-carousel__media img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
    }
}

/* Mobile overrides */
@media (max-width: 767px) {
    .cdswerx-carousel-mobile-media-top .cdswerx-carousel__item-inner {
        -ms-flex-direction: column;
        flex-direction: column;
    }
    .cdswerx-carousel-mobile-media-bottom .cdswerx-carousel__item-inner {
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
    }
    .cdswerx-carousel-mobile-media-left .cdswerx-carousel__item-inner {
        -ms-flex-direction: row !important;
        flex-direction: row !important;
        -ms-flex-align: stretch;
        align-items: stretch;
    }
    .cdswerx-carousel-mobile-media-right .cdswerx-carousel__item-inner {
        -ms-flex-direction: row-reverse !important;
        flex-direction: row-reverse !important;
        -ms-flex-align: stretch;
        align-items: stretch;
    }
    .cdswerx-carousel-mobile-media-left .cdswerx-carousel__media,
    .cdswerx-carousel-mobile-media-right .cdswerx-carousel__media {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        min-width: 0;
    }
    .cdswerx-carousel-mobile-media-left .cdswerx-carousel__content,
    .cdswerx-carousel-mobile-media-right .cdswerx-carousel__content {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        min-width: 0;
    }
    .cdswerx-carousel-mobile-media-left .cdswerx-carousel__media img,
    .cdswerx-carousel-mobile-media-right .cdswerx-carousel__media img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
    }
}

/* ==========================================================================
   3c. MEDIA — ICON VIEW & SHAPE (Phase 2)
   ========================================================================== */

.cdswerx-carousel__media {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.cdswerx-carousel__icon {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    line-height: 1;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.cdswerx-carousel__icon svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
}

/* Stacked view */
.cdswerx-carousel-icon-view-stacked .cdswerx-carousel__icon {
    padding: 30px;
}

/* Framed view */
.cdswerx-carousel-icon-view-framed .cdswerx-carousel__icon {
    padding: 30px;
    border: 3px solid;
}

/* Shapes */
.cdswerx-carousel-icon-shape-circle .cdswerx-carousel__icon {
    border-radius: 50%;
}

.cdswerx-carousel-icon-shape-rounded .cdswerx-carousel__icon {
    border-radius: 10px;
}

.cdswerx-carousel-icon-shape-square .cdswerx-carousel__icon {
    border-radius: 0;
}

/* ==========================================================================
   3d. SUBTITLE (Phase 2)
   ========================================================================== */

.cdswerx-carousel__item-subtitle,
.cdswerx-carousel-banner__subtitle {
    display: block;
}

/* ==========================================================================
   3e. CTA BUTTON WRAP (Phase 2)
   ========================================================================== */

.cdswerx-carousel__button-wrap {
    margin-top: 10px;
}

/* ==========================================================================
   3f. LIST MARKER STYLES (Phase 2 — Ported from Icon Box pattern)
   ========================================================================== */

/* Base list defaults — outside position with left indent so wrapped text aligns
   flush with the first line, not under the bullet. Resets browser margin.
   Users can override via the List Margin / List Padding Elementor controls. */
.cdswerx-carousel__item-text ul,
.cdswerx-carousel__item-text ol {
    margin: 0;
    padding: 0 0 0 1.5em;
    list-style-position: outside;
}

/* None mode — hide markers, keep ul/li tags */
.cdswerx-carousel__item-text--marker-none ul,
.cdswerx-carousel__item-text--marker-none ol {
    list-style: none;
}

/* Numbers marker — ordered list style with decimal */
.cdswerx-carousel__item-text--marker-numbers ul,
.cdswerx-carousel__item-text--marker-numbers ol {
    list-style-type: decimal;
    padding-left: 1.5em;
}

/* Bullets marker — style set via Elementor control selector */
.cdswerx-carousel__item-text--marker-bullets ul,
.cdswerx-carousel__item-text--marker-bullets ol {
    padding-left: 1.5em;
}

/* Icon marker — remove default markers, custom icon prepended */
.cdswerx-carousel__item-text--icon-marker ul,
.cdswerx-carousel__item-text--icon-marker ol {
    list-style: none;
    padding-left: 0;
}

.cdswerx-carousel__item-text--icon-marker li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}

.cdswerx-carousel__list-marker {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    margin-right: 0.35em;
    line-height: inherit;
}

.cdswerx-carousel__list-marker svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
}

/* List Style Position — Inside: bullets/markers flush-left with surrounding text */
.cdswerx-carousel__item-text--list-inside ul,
.cdswerx-carousel__item-text--list-inside ol {
    list-style-position: inside;
    padding-left: 0;
}

/* List Hover Underline — animated underline on li a hover */
.cdswerx-carousel__item-text--list-underline li a {
    background-image: linear-gradient(transparent calc(100% - 1px), currentColor 1px);
    background-size: 0 100%;
    background-repeat: no-repeat;
    transition: background-size 0.55s cubic-bezier(0.32, 0.32, 0.15, 1.17);
    text-decoration: none;
}

.cdswerx-carousel__item-text--list-underline li a:hover {
    background-size: 100% 100%;
}

/* ==========================================================================
   3g. SVG CUSTOM COLOR (Phase 2)
   ========================================================================== */

.cdswerx-carousel__media--custom-color svg {
    fill: currentColor;
}

.cdswerx-carousel__media--custom-color svg [fill]:not([fill="none"]) {
    fill: currentColor;
}

.cdswerx-carousel__media--custom-color svg [stroke]:not([stroke="none"]) {
    stroke: currentColor;
}

/* ==========================================================================
   3i. ICON-ONLY WRAP (icon mode — icon box style, no image slot)
   ========================================================================== */

.cdswerx-carousel__icon-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center; /* overridden by carousel_icon_alignment */
    margin-bottom: 15px;     /* overridden by carousel_icon_spacing */
}

/* ==========================================================================
   3j. BOTH MODE (image background + overlay + icon on top)
   ========================================================================== */

/* Image fills the media div as a background layer */
.cdswerx-carousel__media--both {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%; /* required for justify-content to position the icon within the full media width */
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center; /* overridden by carousel_icon_alignment */
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.cdswerx-carousel__item-img {
    max-width: 100%;
    height: auto;
}

.cdswerx-carousel__media--both .cdswerx-carousel__item-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

/* Semi-transparent colour/gradient layer between image and icon */
.cdswerx-carousel__media-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

/* Icon sits on top of the overlay */
.cdswerx-carousel__media--both .cdswerx-carousel__icon {
    position: relative;
    z-index: 2;
}

/* ==========================================================================
   4. BANNER BASE STYLES & 11 ANIMATION EFFECTS
   (Ported from jet-banner.css → cdswerx-carousel-banner BEM)
   ========================================================================== */

/* --- Banner Base --- */

.cdswerx-carousel-banner {
    position: relative;
    overflow: hidden;
    float: left;
    max-width: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

.cdswerx-carousel-banner * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.cdswerx-carousel-banner__content {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    text-align: center;
}

.cdswerx-carousel-banner__content-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column;
    flex-flow: column;
    height: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.cdswerx-carousel-banner .cdswerx-carousel-banner__title,
.cdswerx-carousel-banner .cdswerx-carousel-banner__text {
    margin: 0;
    padding: 0;
}

.cdswerx-carousel-banner__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0;
    background: #000;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-transition: opacity 0.35s;
    -o-transition: opacity 0.35s;
    transition: opacity 0.35s;
}

.cdswerx-carousel-banner__img {
    display: block;
    width: 100%;
}

.cdswerx-carousel-banner:hover .cdswerx-carousel-banner__overlay {
    opacity: .2;
}

/* --- Effect: None --- */

.cdswerx-carousel-banner.cdswerx-effect-none .cdswerx-carousel-banner__content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

/* --- Effect: Lily --- */

.cdswerx-effect-lily .cdswerx-carousel-banner__img {
    max-width: none;
    width: calc(100% + 50px);
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(-40px, 0, 0);
    transform: translate3d(-40px, 0, 0);
}

.cdswerx-effect-lily .cdswerx-carousel-banner__content {
    text-align: left;
}

.cdswerx-effect-lily .cdswerx-carousel-banner__content-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 2em;
    width: 100%;
    height: 50%;
    z-index: 2;
}

.cdswerx-effect-lily .cdswerx-carousel-banner__title,
.cdswerx-effect-lily .cdswerx-carousel-banner__text {
    -webkit-transform: translate3d(0, 40px, 0);
    transform: translate3d(0, 40px, 0);
}

.cdswerx-effect-lily .cdswerx-carousel-banner__title {
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
}

.cdswerx-effect-lily .cdswerx-carousel-banner__text {
    color: rgba(255, 255, 255, 0.8);
    opacity: 0;
    -webkit-transition: opacity 0.2s, -webkit-transform 0.35s;
    transition: opacity 0.2s, transform 0.35s;
}

.cdswerx-effect-lily:hover .cdswerx-carousel-banner__text {
    opacity: 1;
}

.cdswerx-effect-lily:hover .cdswerx-carousel-banner__img,
.cdswerx-effect-lily:hover .cdswerx-carousel-banner__title,
.cdswerx-effect-lily:hover .cdswerx-carousel-banner__text {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.cdswerx-effect-lily:hover .cdswerx-carousel-banner__text {
    -webkit-transition-delay: 0.05s;
    transition-delay: 0.05s;
    -webkit-transition-duration: 0.35s;
    transition-duration: 0.35s;
}

/* --- Effect: Sadie --- */

.cdswerx-effect-sadie .cdswerx-carousel-banner__title {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    -webkit-transition: color 0.35s, -webkit-transform 0.35s;
    transition: color 0.35s, transform 0.35s;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
}

.cdswerx-effect-sadie .cdswerx-carousel-banner__text {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 2em;
    width: 100%;
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
}

.cdswerx-effect-sadie:hover .cdswerx-carousel-banner__title {
    -webkit-transform: translate3d(0, -50%, 0) translate3d(0, -40px, 0);
    transform: translate3d(0, -50%, 0) translate3d(0, -40px, 0);
}

.cdswerx-effect-sadie:hover .cdswerx-carousel-banner__text {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

/* --- Effect: Layla --- */

.cdswerx-effect-layla .cdswerx-carousel-banner__content {
    padding: 3em;
}

.cdswerx-effect-layla .cdswerx-carousel-banner__content::before,
.cdswerx-effect-layla .cdswerx-carousel-banner__content::after {
    position: absolute;
    content: '';
    opacity: 0;
    z-index: 2;
}

.cdswerx-effect-layla .cdswerx-carousel-banner__content::before {
    top: 40px;
    right: 20px;
    bottom: 40px;
    left: 20px;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    -webkit-transform: scale(0, 1);
    transform: scale(0, 1);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

.cdswerx-effect-layla .cdswerx-carousel-banner__content::after {
    top: 20px;
    right: 40px;
    bottom: 20px;
    left: 40px;
    border-right: 1px solid #fff;
    border-left: 1px solid #fff;
    -webkit-transform: scale(1, 0);
    transform: scale(1, 0);
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
}

.cdswerx-effect-layla .cdswerx-carousel-banner__title {
    padding-top: 26%;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
}

.cdswerx-effect-layla .cdswerx-carousel-banner__text {
    padding: 0.5em 2em;
    text-transform: none;
    opacity: 0;
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
}

.cdswerx-effect-layla .cdswerx-carousel-banner__content::before,
.cdswerx-effect-layla .cdswerx-carousel-banner__content::after,
.cdswerx-effect-layla .cdswerx-carousel-banner__text {
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
}

.cdswerx-effect-layla:hover .cdswerx-carousel-banner__content::before,
.cdswerx-effect-layla:hover .cdswerx-carousel-banner__content::after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

.cdswerx-effect-layla:hover .cdswerx-carousel-banner__title,
.cdswerx-effect-layla:hover .cdswerx-carousel-banner__text {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.cdswerx-effect-layla:hover .cdswerx-carousel-banner__content::after,
.cdswerx-effect-layla:hover .cdswerx-carousel-banner__title,
.cdswerx-effect-layla:hover .cdswerx-carousel-banner__text {
    -webkit-transition-delay: 0.15s;
    transition-delay: 0.15s;
}

/* --- Effect: Oscar --- */

.cdswerx-effect-oscar .cdswerx-carousel-banner__content {
    padding: 3em;
}

.cdswerx-effect-oscar .cdswerx-carousel-banner__content::before {
    position: absolute;
    top: 30px;
    right: 30px;
    bottom: 30px;
    left: 30px;
    border: 1px solid #fff;
    content: '';
}

.cdswerx-effect-oscar .cdswerx-carousel-banner__title {
    margin: 20% 0 10px 0;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
}

.cdswerx-effect-oscar .cdswerx-carousel-banner__img {
    width: 100%;
}

.cdswerx-effect-oscar .cdswerx-carousel-banner__content::before,
.cdswerx-effect-oscar .cdswerx-carousel-banner__text {
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: scale(0);
    transform: scale(0);
}

.cdswerx-effect-oscar:hover .cdswerx-carousel-banner__title {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.cdswerx-effect-oscar:hover .cdswerx-carousel-banner__content::before,
.cdswerx-effect-oscar:hover .cdswerx-carousel-banner__text {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

/* --- Effect: Marley --- */

.cdswerx-effect-marley .cdswerx-carousel-banner__content {
    text-align: right;
}

.cdswerx-effect-marley .cdswerx-carousel-banner__title,
.cdswerx-effect-marley .cdswerx-carousel-banner__text {
    position: absolute;
    right: 30px;
    left: 30px;
    padding: 10px 0;
}

.cdswerx-effect-marley .cdswerx-carousel-banner__text {
    bottom: 30px;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
}

.cdswerx-effect-marley .cdswerx-carousel-banner__title {
    top: 30px;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
}

.cdswerx-effect-marley .cdswerx-carousel-banner__title::after {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 4px;
    background: #fff;
    content: '';
    -webkit-transform: translate3d(0, 40px, 0);
    transform: translate3d(0, 40px, 0);
}

.cdswerx-effect-marley .cdswerx-carousel-banner__title::after,
.cdswerx-effect-marley .cdswerx-carousel-banner__text {
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
}

.cdswerx-effect-marley:hover .cdswerx-carousel-banner__title {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.cdswerx-effect-marley:hover .cdswerx-carousel-banner__title::after,
.cdswerx-effect-marley:hover .cdswerx-carousel-banner__text {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

/* --- Effect: Ruby --- */

.cdswerx-effect-ruby .cdswerx-carousel-banner__content {
    padding: 2em;
}

.cdswerx-effect-ruby .cdswerx-carousel-banner__img {
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
}

.cdswerx-effect-ruby .cdswerx-carousel-banner__title {
    margin-top: 20%;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
}

.cdswerx-effect-ruby .cdswerx-carousel-banner__text {
    margin: 1em 0 0;
    padding: 1.5em;
    border: 1px solid #fff;
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(0, 20px, 0) scale(1.1);
    transform: translate3d(0, 20px, 0) scale(1.1);
}

.cdswerx-effect-ruby:hover .cdswerx-carousel-banner__img {
    -webkit-transform: scale(1);
    transform: scale(1);
}

.cdswerx-effect-ruby:hover .cdswerx-carousel-banner__title {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.cdswerx-effect-ruby:hover .cdswerx-carousel-banner__text {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0) scale(1);
    transform: translate3d(0, 0, 0) scale(1);
}

/* --- Effect: Roxy --- */

.cdswerx-effect-roxy .cdswerx-carousel-banner__img {
    max-width: none;
    width: calc(100% + 60px);
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(-50px, 0, 0);
    transform: translate3d(-50px, 0, 0);
}

.cdswerx-effect-roxy .cdswerx-carousel-banner__content::before {
    position: absolute;
    top: 30px;
    right: 30px;
    bottom: 30px;
    left: 30px;
    border: 1px solid #fff;
    content: '';
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0);
}

.cdswerx-effect-roxy .cdswerx-carousel-banner__content {
    padding: 3em;
    text-align: left;
}

.cdswerx-effect-roxy .cdswerx-carousel-banner__title {
    padding: 30% 0 10px 0;
}

.cdswerx-effect-roxy .cdswerx-carousel-banner__text {
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
}

.cdswerx-effect-roxy:hover .cdswerx-carousel-banner__img {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.cdswerx-effect-roxy:hover .cdswerx-carousel-banner__content::before,
.cdswerx-effect-roxy:hover .cdswerx-carousel-banner__text {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

/* --- Effect: Bubba --- */

.cdswerx-effect-bubba .cdswerx-carousel-banner__content::before,
.cdswerx-effect-bubba .cdswerx-carousel-banner__content::after {
    position: absolute;
    top: 30px;
    right: 30px;
    bottom: 30px;
    left: 30px;
    content: '';
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
}

.cdswerx-effect-bubba .cdswerx-carousel-banner__content::before {
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    -webkit-transform: scale(0, 1);
    transform: scale(0, 1);
}

.cdswerx-effect-bubba .cdswerx-carousel-banner__content::after {
    border-right: 1px solid #fff;
    border-left: 1px solid #fff;
    -webkit-transform: scale(1, 0);
    transform: scale(1, 0);
}

.cdswerx-effect-bubba .cdswerx-carousel-banner__title {
    padding-top: 30%;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
}

.cdswerx-effect-bubba .cdswerx-carousel-banner__text {
    padding: 20px 2.5em;
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
}

.cdswerx-effect-bubba:hover .cdswerx-carousel-banner__content::before,
.cdswerx-effect-bubba:hover .cdswerx-carousel-banner__content::after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

.cdswerx-effect-bubba:hover .cdswerx-carousel-banner__title,
.cdswerx-effect-bubba:hover .cdswerx-carousel-banner__text {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

/* --- Effect: Romeo --- */

.cdswerx-effect-romeo {
    -webkit-perspective: 1000px;
    perspective: 1000px;
}

.cdswerx-effect-romeo .cdswerx-carousel-banner__img {
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: scale(1.45);
    transform: scale(1.45);
    -o-object-fit: cover;
    object-fit: cover;
}

.cdswerx-effect-romeo .cdswerx-carousel-banner__content::before,
.cdswerx-effect-romeo .cdswerx-carousel-banner__content::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%;
    height: 1px;
    background: #fff;
    content: '';
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
}

.cdswerx-effect-romeo .cdswerx-carousel-banner__title,
.cdswerx-effect-romeo .cdswerx-carousel-banner__text {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
}

.cdswerx-effect-romeo .cdswerx-carousel-banner__title {
    -webkit-transform: translate3d(0, -50%, 0) translate3d(0, -150%, 0);
    transform: translate3d(0, -50%, 0) translate3d(0, -150%, 0);
}

.cdswerx-effect-romeo .cdswerx-carousel-banner__text {
    padding: 0.25em 2em;
    -webkit-transform: translate3d(0, -50%, 0) translate3d(0, 150%, 0);
    transform: translate3d(0, -50%, 0) translate3d(0, 150%, 0);
}

.cdswerx-effect-romeo:hover .cdswerx-carousel-banner__content::before {
    opacity: 0.5;
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(45deg);
    transform: translate3d(-50%, -50%, 0) rotate(45deg);
}

.cdswerx-effect-romeo:hover .cdswerx-carousel-banner__content::after {
    opacity: 0.5;
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(-45deg);
    transform: translate3d(-50%, -50%, 0) rotate(-45deg);
}

.cdswerx-effect-romeo:hover .cdswerx-carousel-banner__img {
    opacity: 0.6;
    -webkit-transform: scale(1);
    transform: scale(1);
}

.cdswerx-effect-romeo:hover .cdswerx-carousel-banner__title {
    -webkit-transform: translate3d(0, -50%, 0) translate3d(0, -100%, 0);
    transform: translate3d(0, -50%, 0) translate3d(0, -100%, 0);
}

.cdswerx-effect-romeo:hover .cdswerx-carousel-banner__text {
    -webkit-transform: translate3d(0, -50%, 0) translate3d(0, 100%, 0);
    transform: translate3d(0, -50%, 0) translate3d(0, 100%, 0);
}

/* --- Effect: Sarah --- */

.cdswerx-effect-sarah .cdswerx-carousel-banner__img {
    max-width: none;
    width: calc(100% + 20px);
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.cdswerx-effect-sarah .cdswerx-carousel-banner__content {
    text-align: left;
    padding: 2em;
}

.cdswerx-effect-sarah .cdswerx-carousel-banner__title {
    position: relative;
    overflow: hidden;
    padding: 0.5em 0;
}

.cdswerx-effect-sarah .cdswerx-carousel-banner__title::after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #fff;
    content: '';
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
}

.cdswerx-effect-sarah .cdswerx-carousel-banner__text {
    padding: 1em 0;
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
}

.cdswerx-effect-sarah:hover .cdswerx-carousel-banner__title::after {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.cdswerx-effect-sarah:hover .cdswerx-carousel-banner__text {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

/* --- Effect: Chico --- */

.cdswerx-effect-chico .cdswerx-carousel-banner__img {
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: scale(1.12);
    transform: scale(1.12);
}

.cdswerx-effect-chico .cdswerx-carousel-banner__content {
    padding: 3em;
}

.cdswerx-effect-chico .cdswerx-carousel-banner__content::before {
    position: absolute;
    top: 30px;
    right: 30px;
    bottom: 30px;
    left: 30px;
    border: 1px solid #fff;
    content: '';
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.cdswerx-effect-chico .cdswerx-carousel-banner__content::before,
.cdswerx-effect-chico .cdswerx-carousel-banner__text {
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
}

.cdswerx-effect-chico .cdswerx-carousel-banner__title {
    padding: 20% 0 20px 0;
}

.cdswerx-effect-chico .cdswerx-carousel-banner__text {
    margin: 0 auto;
    max-width: 70%;
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
}

.cdswerx-effect-chico:hover .cdswerx-carousel-banner__img {
    -webkit-transform: scale(1);
    transform: scale(1);
}

.cdswerx-effect-chico:hover .cdswerx-carousel-banner__content::before,
.cdswerx-effect-chico:hover .cdswerx-carousel-banner__text {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

/* ==========================================================================
   5. TEMPLATE EDIT LINK (Editor only)
   ========================================================================== */

.cdswerx-edit-template-link {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    color: #555;
    text-decoration: none;
}

.cdswerx-edit-template-link:hover {
    color: #0073aa;
}