/**
 * Universal Wishlist — Buttons CSS
 *
 * Styles the Add / Remove wishlist button and heart icon.
 *
 * @package Universal_Wishlist
 */

/* ==========================================================================
   1. CSS VARIABLES
   ========================================================================== */

.uwl-wishlist-button,
.uwl-remove-button,
.uwl-clear-button,
.uwl-add-all-amazon,
.uwl-add-amazon,
.uwl-wishlist-link {
    --uwl-color-primary:       #e63946;
    --uwl-color-primary-dark:  #c1121f;
    --uwl-color-primary-light: #fde2e4;
    --uwl-color-text:          #1d1d1f;
    --uwl-color-muted:         #6b7280;
    --uwl-color-border:        #d1d5db;
    --uwl-color-bg:            #ffffff;
    --uwl-color-bg-hover:      #f9fafb;
    --uwl-color-success:       #16a34a;
    --uwl-color-error:         #dc2626;
    --uwl-color-amazon:        #f0c14b;
    --uwl-color-amazon-hover:  #e6b13a;
    --uwl-color-amazon-text:   #111111;

    --uwl-radius:        6px;
    --uwl-radius-pill:   999px;
    --uwl-transition:    0.18s ease-in-out;
    --uwl-font-size:     14px;
    --uwl-font-weight:   600;
    --uwl-padding-y:     10px;
    --uwl-padding-x:     16px;
    --uwl-gap:           8px;
    --uwl-icon-size:     18px;

    --uwl-focus-ring:    0 0 0 3px rgba(230, 57, 70, 0.35);
}

/* ==========================================================================
   2. BASE BUTTON
   ========================================================================== */

.uwl-wishlist-button {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             var(--uwl-gap);

    padding:         var(--uwl-padding-y) var(--uwl-padding-x);

    font-family:     inherit;
    font-size:       var(--uwl-font-size);
    font-weight:     var(--uwl-font-weight);
    line-height:     1.2;

    color:           var(--uwl-color-text);
    background:      var(--uwl-color-bg);
    border:          1px solid var(--uwl-color-border);
    border-radius:   var(--uwl-radius);

    cursor:          pointer;
    text-decoration: none;
    white-space:     nowrap;

    transition:
        background-color var(--uwl-transition),
        border-color     var(--uwl-transition),
        color            var(--uwl-transition),
        box-shadow       var(--uwl-transition),
        transform        var(--uwl-transition);

    -webkit-appearance: none;
    appearance:         none;
    user-select:        none;
}

/* Remove default button styling if inside a form. */
.uwl-wishlist-button:focus {
    outline: none;
    box-shadow: var(--uwl-focus-ring);
}

.uwl-wishlist-button:hover {
    background:   var(--uwl-color-bg-hover);
    border-color: var(--uwl-color-primary);
    color:        var(--uwl-color-primary);
}

.uwl-wishlist-button:active {
    transform: translateY(1px);
}

.uwl-wishlist-button:disabled,
.uwl-wishlist-button[aria-busy="true"] {
    cursor:  wait;
    opacity: 0.7;
}

/* ==========================================================================
   3. IN-WISHLIST STATE (Remove button)
   ========================================================================== */

.uwl-wishlist-button.uwl-in-wishlist {
    color:      #ffffff;
    background: var(--uwl-color-primary);
    border-color: var(--uwl-color-primary);
}

.uwl-wishlist-button.uwl-in-wishlist:hover {
    background:   var(--uwl-color-primary-dark);
    border-color: var(--uwl-color-primary-dark);
    color:        #ffffff;
}

/* ==========================================================================
   4. NOT-IN-WISHLIST STATE
   ========================================================================== */

.uwl-wishlist-button.uwl-not-in-wishlist {
    color:        var(--uwl-color-text);
    background:   var(--uwl-color-bg);
    border-color: var(--uwl-color-border);
}

/* ==========================================================================
   5. HEART ICON
   ========================================================================== */

.uwl-wishlist-button .uwl-btn-icon {
    display:     inline-block;
    flex-shrink: 0;

    width:       var(--uwl-icon-size);
    height:      var(--uwl-icon-size);

    background-color: currentColor;
    transition:       transform var(--uwl-transition), opacity var(--uwl-transition);

    /* Default heart outline (SVG mask). */
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 21s-7.5-4.7-9.6-9.1C.6 8.2 2.6 4.5 6.3 4.5c2 0 3.5 1.1 4.5 2.7h2.4c1-1.6 2.5-2.7 4.5-2.7 3.7 0 5.7 3.7 3.9 7.4C19.5 16.3 12 21 12 21z' fill='none' stroke='black' stroke-width='2'/></svg>");
    mask-image:         url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 21s-7.5-4.7-9.6-9.1C.6 8.2 2.6 4.5 6.3 4.5c2 0 3.5 1.1 4.5 2.7h2.4c1-1.6 2.5-2.7 4.5-2.7 3.7 0 5.7 3.7 3.9 7.4C19.5 16.3 12 21 12 21z' fill='none' stroke='black' stroke-width='2'/></svg>");

    -webkit-mask-size: contain;
    mask-size:         contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat:         no-repeat;
    -webkit-mask-position: center;
    mask-position:         center;
}

/* Filled heart when in wishlist. */
.uwl-wishlist-button.uwl-in-wishlist .uwl-btn-icon,
.uwl-wishlist-button .uwl-btn-icon.uwl-icon-filled {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 21s-7.5-4.7-9.6-9.1C.6 8.2 2.6 4.5 6.3 4.5c2 0 3.5 1.1 4.5 2.7h2.4c1-1.6 2.5-2.7 4.5-2.7 3.7 0 5.7 3.7 3.9 7.4C19.5 16.3 12 21 12 21z' fill='black'/></svg>");
    mask-image:         url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 21s-7.5-4.7-9.6-9.1C.6 8.2 2.6 4.5 6.3 4.5c2 0 3.5 1.1 4.5 2.7h2.4c1-1.6 2.5-2.7 4.5-2.7 3.7 0 5.7 3.7 3.9 7.4C19.5 16.3 12 21 12 21z' fill='black'/></svg>");
}

/* Heart pulse animation on toggle. */
.uwl-wishlist-button.uwl-just-toggled .uwl-btn-icon {
    animation: uwl-heart-pulse 400ms ease-in-out;
}

@keyframes uwl-heart-pulse {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.35); }
    70%  { transform: scale(0.92); }
    100% { transform: scale(1); }
}

/* ==========================================================================
   6. LOADING STATE
   ========================================================================== */

.uwl-wishlist-button.uwl-loading {
    pointer-events: none;
    opacity:        0.75;
    position:       relative;
    color:          transparent !important;
}

.uwl-wishlist-button.uwl-loading::after {
    content: "";

    position: absolute;
    top:      50%;
    left:     50%;

    width:  16px;
    height: 16px;

    margin-top:  -8px;
    margin-left: -8px;

    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;

    color: var(--uwl-color-primary);

    animation: uwl-spin 0.7s linear infinite;
}

.uwl-wishlist-button.uwl-loading .uwl-btn-icon,
.uwl-wishlist-button.uwl-loading .uwl-btn-text {
    visibility: hidden;
}

@keyframes uwl-spin {
    to { transform: rotate(360deg); }
}

/* ==========================================================================
   7. ICON-ONLY VARIANT
   ========================================================================== */

.uwl-wishlist-button.uwl-icon-only {
    padding: 8px;
    border-radius: 50%;
    --uwl-icon-size: 20px;
}

.uwl-wishlist-button.uwl-icon-only .uwl-btn-text {
    /* Screen reader only. */
    position: absolute !important;
    width:    1px !important;
    height:   1px !important;
    padding:  0 !important;
    margin:   -1px !important;
    overflow: hidden !important;
    clip:     rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border:   0 !important;
}

/* ==========================================================================
   8. SIZE VARIANTS
   ========================================================================== */

.uwl-wishlist-button.uwl-size-sm {
    --uwl-font-size:    12px;
    --uwl-padding-y:    6px;
    --uwl-padding-x:    10px;
    --uwl-icon-size:    14px;
}

.uwl-wishlist-button.uwl-size-lg {
    --uwl-font-size:    16px;
    --uwl-padding-y:    13px;
    --uwl-padding-x:    22px;
    --uwl-icon-size:    22px;
}

/* ==========================================================================
   9. PILL VARIANT
   ========================================================================== */

.uwl-wishlist-button.uwl-style-pill {
    border-radius: var(--uwl-radius-pill);
}

/* ==========================================================================
   10. OUTLINE VARIANT
   ========================================================================== */

.uwl-wishlist-button.uwl-style-outline {
    background: transparent;
    color:      var(--uwl-color-primary);
    border:     1px solid var(--uwl-color-primary);
}

.uwl-wishlist-button.uwl-style-outline:hover,
.uwl-wishlist-button.uwl-style-outline.uwl-in-wishlist {
    background: var(--uwl-color-primary);
    color:      #ffffff;
}

/* ==========================================================================
   11. TEXT VARIANT
   ========================================================================== */

.uwl-wishlist-button.uwl-style-text {
    padding:      0;
    background:   transparent;
    border:       none;
    color:        var(--uwl-color-primary);
    text-decoration: underline;
}

.uwl-wishlist-button.uwl-style-text:hover {
    color: var(--uwl-color-primary-dark);
}

/* ==========================================================================
   12. REMOVE BUTTON
   ========================================================================== */

.uwl-remove-button,
.uwl-wishlist-item .sw-remove-from-wishlist {
    display:        inline-flex;
    align-items:    center;
    gap:            6px;

    padding:        6px 12px;

    font-size:      13px;
    font-weight:    500;
    color:          var(--uwl-color-error);
    background:     transparent;
    border:         1px solid transparent;
    border-radius:  var(--uwl-radius);

    cursor:         pointer;
    transition:     all var(--uwl-transition);
}

.uwl-remove-button:hover,
.uwl-wishlist-item .sw-remove-from-wishlist:hover {
    color:            var(--uwl-color-error);
    background:       rgba(220, 38, 38, 0.08);
    border-color:     rgba(220, 38, 38, 0.2);
}

.uwl-remove-button:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.25);
}

.uwl-remove-button:disabled {
    opacity: 0.5;
    cursor:  not-allowed;
}

/* ==========================================================================
   13. CLEAR BUTTON
   ========================================================================== */

.uwl-clear-button {
    display:        inline-flex;
    align-items:    center;
    gap:            6px;

    padding:        8px 14px;

    font-size:      13px;
    font-weight:    500;
    color:          var(--uwl-color-muted);
    background:     transparent;
    border:         1px solid var(--uwl-color-border);
    border-radius:  var(--uwl-radius);

    cursor:         pointer;
    transition:     all var(--uwl-transition);
}

.uwl-clear-button:hover {
    color:        var(--uwl-color-error);
    border-color: var(--uwl-color-error);
    background:   rgba(220, 38, 38, 0.05);
}

.uwl-clear-button:focus {
    outline:    none;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.25);
}

/* ==========================================================================
   14. AMAZON BUTTONS
   ========================================================================== */

.uwl-add-amazon,
.uwl-add-all-amazon,
.sw-add-amazon,
.sw-add-all-amazon {
    display:        inline-flex;
    align-items:    center;
    justify-content: center;
    gap:            8px;

    padding:        10px 18px;

    font-family:    inherit;
    font-size:      14px;
    font-weight:    600;
    line-height:    1.2;

    color:          var(--uwl-color-amazon-text);
    background:     var(--uwl-color-amazon);
    border:         1px solid #d4a53c;
    border-radius:  var(--uwl-radius);

    cursor:         pointer;
    text-decoration: none;
    white-space:    nowrap;

    transition:     all var(--uwl-transition);
}

.uwl-add-amazon:hover,
.uwl-add-all-amazon:hover,
.sw-add-amazon:hover,
.sw-add-all-amazon:hover {
    background:   var(--uwl-color-amazon-hover);
    border-color: #c99a2e;
    color:        var(--uwl-color-amazon-text);
}

.uwl-add-amazon:active,
.uwl-add-all-amazon:active {
    transform: translateY(1px);
}

.uwl-add-amazon:focus,
.uwl-add-all-amazon:focus {
    outline:    none;
    box-shadow: 0 0 0 3px rgba(240, 193, 75, 0.4);
}

.uwl-add-amazon.uwl-loading,
.uwl-add-all-amazon.uwl-loading {
    pointer-events: none;
    opacity:        0.75;
    position:       relative;
    color:          transparent;
}

.uwl-add-amazon.uwl-loading::after,
.uwl-add-all-amazon.uwl-loading::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 16px; height: 16px;
    margin-top: -8px; margin-left: -8px;
    border: 2px solid var(--uwl-color-amazon-text);
    border-top-color: transparent;
    border-radius: 50%;
    animation: uwl-spin 0.7s linear infinite;
}

/* Amazon bulk button wrapper. */
.uwl-wishlist-bulk {
    display:         flex;
    justify-content: flex-end;
    gap:             10px;
    margin-bottom:   20px;
    flex-wrap:       wrap;
}

/* ==========================================================================
   15. WISHLIST LINK
   ========================================================================== */

.uwl-wishlist-link {
    display:        inline-flex;
    align-items:    center;
    gap:            6px;

    color:          var(--uwl-color-text);
    text-decoration: none;
    font-weight:    500;

    transition:     color var(--uwl-transition);
}

.uwl-wishlist-link:hover {
    color: var(--uwl-color-primary);
}

.uwl-wishlist-link .uwl-count {
    display:         inline-block;
    min-width:       20px;
    padding:         1px 6px;
    font-size:       12px;
    font-weight:     600;
    color:           #ffffff;
    background:      var(--uwl-color-primary);
    border-radius:   999px;
    text-align:      center;
    line-height:     1.4;
}

.uwl-wishlist-link .uwl-count:empty,
.uwl-wishlist-link .uwl-count[data-empty="1"] {
    display: none;
}

/* ==========================================================================
   16. COUNT BADGE (standalone)
   ========================================================================== */

.uwl-count {
    display:         inline-block;
    min-width:       20px;
    padding:         1px 6px;
    font-size:       12px;
    font-weight:     600;
    color:           #ffffff;
    background:      var(--uwl-color-primary);
    border-radius:   999px;
    text-align:      center;
    line-height:     1.4;
}

/* ==========================================================================
   17. NOTICE MESSAGES
   ========================================================================== */

.uwl-notice {
    display:         inline-block;
    margin-left:     10px;
    padding:         4px 10px;

    font-size:       12px;
    font-weight:     500;

    border-radius:   4px;
    vertical-align:  middle;
}

.uwl-notice-success {
    color:      #065f46;
    background: #d1fae5;
}

.uwl-notice-error {
    color:      #991b1b;
    background: #fee2e2;
}

/* ==========================================================================
   18. RTL SUPPORT
   ========================================================================== */

body.rtl .uwl-wishlist-button,
body.rtl .uwl-remove-button,
body.rtl .uwl-clear-button,
body.rtl .uwl-add-amazon,
body.rtl .uwl-add-all-amazon,
body.rtl .uwl-wishlist-link {
    direction: rtl;
}

/* ==========================================================================
   19. RESPONSIVE
   ========================================================================== */

@media (max-width: 600px) {
    .uwl-wishlist-button {
        --uwl-font-size:    13px;
        --uwl-padding-y:    8px;
        --uwl-padding-x:    12px;
    }

    .uwl-wishlist-button.uwl-size-lg {
        --uwl-font-size:    14px;
        --uwl-padding-y:    10px;
        --uwl-padding-x:    16px;
    }

    .uwl-wishlist-bulk {
        justify-content: stretch;
    }

    .uwl-add-all-amazon {
        width: 100%;
    }
}

/* ==========================================================================
   20. DARK MODE
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    .uwl-wishlist-button,
    .uwl-remove-button,
    .uwl-clear-button,
    .uwl-wishlist-link {
        --uwl-color-text:       #e5e7eb;
        --uwl-color-muted:      #9ca3af;
        --uwl-color-border:     #374151;
        --uwl-color-bg:         #1f2937;
        --uwl-color-bg-hover:   #374151;
        --uwl-color-primary:    #f87171;
        --uwl-color-primary-dark: #ef4444;
    }
}

/* ==========================================================================
   21. ACCESSIBILITY — REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .uwl-wishlist-button,
    .uwl-remove-button,
    .uwl-clear-button,
    .uwl-add-amazon,
    .uwl-add-all-amazon,
    .uwl-wishlist-link,
    .uwl-wishlist-button .uwl-btn-icon {
        transition: none !important;
        animation:  none !important;
    }
}

/* ==========================================================================
   22. HIGH CONTRAST FOCUS
   ========================================================================== */

.uwl-wishlist-button:focus-visible,
.uwl-remove-button:focus-visible,
.uwl-clear-button:focus-visible,
.uwl-add-amazon:focus-visible,
.uwl-add-all-amazon:focus-visible {
    outline:        2px solid var(--uwl-color-primary);
    outline-offset: 2px;
}

/* ==========================================================================
   23. PRINT
   ========================================================================== */

@media print {
    .uwl-wishlist-button,
    .uwl-remove-button,
    .uwl-clear-button,
    .uwl-add-amazon,
    .uwl-add-all-amazon {
        display: none !important;
    }
}