/* --- Base Reset for Chapmans Buttons --- */
.elementor-widget-button[class*="chapmans-"] .elementor-button {
    overflow: hidden !important;
    position: relative;
    
    /* CHANGE THIS LINE: from display: flex to display: inline-flex */
    display: inline-flex !important; 
    
    align-items: center;
    justify-content: center;
    
    /* This ensures the button only stays as wide as the text + padding */
    width: auto !important; 
    
    padding: 8px 24px !important;
    border-radius: 100px !important;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1) !important;
}

/* 1. The Original Text */
.elementor-widget-button[class*="chapmans-"] .elementor-button .elementor-button-text {
    display: block !important;
    transform: translateY(0);
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1) !important;
}

/* 2. The Duplicate Hover Text */
.elementor-widget-button[class*="chapmans-"] .elementor-button::after {
    content: attr(data-hover);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(100%); /* Start completely below the window */
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1) !important;
    pointer-events: none;
}

/* --- THE HOVER ACTION --- */

/* Original text flies UP and out of the window */
.elementor-widget-button[class*="chapmans-"] .elementor-button:hover .elementor-button-text {
    transform: translateY(-150%) !important; 
}

/* Duplicate text slides UP into the window */
.elementor-widget-button[class*="chapmans-"] .elementor-button:hover::after {
    transform: translateY(0) !important;
}

/* --- COLOR SPECIFICS --- */

/* Primary Red */
.elementor-button-chapmans-red .elementor-button { background-color:var( --e-global-color-primary )!important; color: #fff !important; }
.elementor-button-chapmans-red .elementor-button:hover { background-color: #fff !important; color:var( --e-global-color-primary )!important; border: 2px solidvar( --e-global-color-primary )!important; }

/* Primary White (Added border for visibility on cream bg) */
.elementor-button-chapmans-white .elementor-button { background-color: #fff !important; color:var( --e-global-color-primary )!important; border: 1px solidvar( --e-global-color-primary )!important; }
.elementor-button-chapmans-white .elementor-button:hover { background-color:var( --e-global-color-primary )!important; color: #fff !important; }

/* Outline */
.elementor-button-chapmans-outline .elementor-button { background-color: transparent !important; color: #ffffff !important; border: 1px solid #ffffff !important; }
.elementor-button-chapmans-outline .elementor-button:hover { background-color: #ffffff !important; color:var( --e-global-color-primary )!important; }