/*
 * WooCommerce Perfume Samples — Button Styles
 * ============================================
 *
 * Easy theming: override these CSS custom properties in your theme's stylesheet.
 *
 * Example — make the button match your brand:
 *
 *   .wcps-sample-wrap {
 *       --wcps-bg:        #1a1a2e;
 *       --wcps-bg-hover:  #16213e;
 *       --wcps-text:      #e0c097;
 *       --wcps-radius:    30px;
 *       --wcps-font-size: 15px;
 *   }
 */

/* ── Custom Properties (defaults) ── */
.wcps-sample-wrap {
    --wcps-bg:            #6b4c8a;
    --wcps-bg-hover:      #5a3d78;
    --wcps-bg-disabled:   #b0b0b0;
    --wcps-text:          #ffffff;
    --wcps-font-size:     0.95em;
    --wcps-font-weight:   600;
    --wcps-padding-y:     12px;
    --wcps-padding-x:     24px;
    --wcps-radius:        6px;
    --wcps-gap:           8px;
    --wcps-transition:    0.2s ease;
    --wcps-shadow:        0 2px 6px rgba(0, 0, 0, 0.15);
    --wcps-shadow-hover:  0 4px 12px rgba(0, 0, 0, 0.2);
    --wcps-success:       #2e7d32;
    --wcps-info:          #e65100;
    --wcps-error:         #c62828;

    margin-top: 16px;
    margin-bottom: 8px;
}

/* ── Button ── */
.wcps-sample-button {
    display: inline-flex;
    align-items: center;
    background-color: var(--button-color);
    border-color: var(--button-color);
    color: var(--button-text);
    border-width: var(--btn-border-size);
    border-radius: var(--btn-radius);
    border-style: solid;
    min-width: var(--btn-width);
    line-height: var(--btn-line-height);
    letter-spacing: var(--btn-letter-spacing);
    text-transform: var(--btn-text-transform);
    text-decoration: var(--btn-text-decoration);
    font-style: var(--btn-text-style);
    font-weight: var(--btn-weight);
    padding: var(--btn-pad-y) var(--btn-pad-x);
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.wcps-sample-button:hover:not(:disabled) {
    background-color: var(--action);
    border-color: var(--action);
}

.wcps-sample-button:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: var(--wcps-shadow);
}

.wcps-sample-button:disabled,
.wcps-sample-button.wcps-added {
    background-color: var(--wcps-bg-disabled);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.wcps-sample-button.wcps-loading {
    pointer-events: none;
    opacity: 0.7;
}

/* ── Notices ── */
.wcps-notice {
    margin-top: 10px;
    font-size: 0.88em;
    font-weight: 500;
    line-height: 1.4;
}

.wcps-notice--success {
    color: var(--wcps-success);
}

.wcps-notice--info {
    color: var(--wcps-info);
}

.wcps-notice--error {
    color: var(--wcps-error);
}