/* =========================================================
   Click to Copy Button — Structural Reset
   Only layout and reset rules live here. All visual properties
   (colors, backgrounds, borders, typography, padding) are set
   by Elementor's generated CSS from the widget controls.
   ========================================================= */

.ctcew-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    margin: 0;

    /* Reset native <button> appearance */
    background: none;
    color: inherit;
    border: none;
    outline: none;
    box-shadow: none;
    font: inherit;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    letter-spacing: inherit;

    /* Interaction */
    cursor: pointer;

    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    appearance: none;
    -webkit-appearance: none;
}

/* Full-width variant (applied when Alignment = "Full Width") */
.ctcew-button--full-width {
    display: flex;
    width: 100%;
}

/* =========================================================
   Hover / Focus — prevent browser default outlines
   ========================================================= */

.ctcew-button:hover,
.ctcew-button:focus,
.ctcew-button:focus-visible {
    outline: none;
}

/* Subtle click feedback */
.ctcew-button:active {
    transform: scale(0.99);
}

/* =========================================================
   Coupon Text
   ========================================================= */

.ctcew-button__text {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: inherit;
    font: inherit;
    line-height: inherit;
}

/* =========================================================
   Icon
   ========================================================= */

.ctcew-button__icon {
    display: block;
    flex-shrink: 0;
    fill: currentColor;
    color: inherit;
    /* Default size — overridden by Elementor Icon Size control */
    width: 1em;
    height: 1em;
}

/* =========================================================
   Copied Icon — show/hide via CSS class toggle
   ========================================================= */

.ctcew-button__normal-icon,
.ctcew-button__copied-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Normal state: show normal icon, hide copied icon */
.ctcew-button .ctcew-button__copied-icon {
    display: none !important;
}

/* Copied state: hide normal icon, show copied icon */
.ctcew-button--copied .ctcew-button__normal-icon {
    display: none !important;
}

.ctcew-button--copied .ctcew-button__copied-icon {
    display: inline-flex !important;
}