/* ============================================================
   My Wishlist — Frontend Styles
   Namespace: .wl-*
   ============================================================ */

:root {
    --wl-primary:        #e74c3c;
    --wl-primary-hover:  #c0392b;
    --wl-added:          #e74c3c;
    --wl-text:           #2c2c2c;
    --wl-text-muted:     #666;
    --wl-border:         rgba(0,0,0,.1);
    --wl-surface:        #fff;
    --wl-radius:         .375rem;
    --wl-transition:     180ms cubic-bezier(.16,1,.3,1);
    --wl-shadow:         0 2px 8px rgba(0,0,0,.08);
}

/* ----- Button ----- */
.wl-btn {
    --wl-btn-display: inline-flex;
    --wl-btn-gap: .375rem;
    --wl-btn-padding-block: .4375rem;
    --wl-btn-padding-inline: .875rem;
    --wl-btn-margin-block: 0;
    --wl-btn-margin-inline: 0;
    --wl-btn-background: transparent;
    --wl-btn-border-width: max(1px, .0625rem);
    --wl-btn-border-color: var(--wl-primary);
    --wl-btn-border-color-hover: var(--wl-primary-hover);
    --wl-btn-font-size: .875rem;
    --wl-btn-line-height: 1;
    --wl-btn-color: var(--wl-text-muted);
    --wl-btn-color-hover: var(--wl-text-primary);
    --wl-icon-size: 1.125rem;

    display:       var(--wl-btn-display);
    align-items:   center;
    gap:           var(--wl-btn-gap);
    padding:       var(--wl-btn-padding-block) var(--wl-btn-padding-inline);
    background:    var(--wl-btn-background);
    border:        var(--wl-btn-border-width) solid var(--wl-btn-border-color);
    border-radius: var(--wl-radius);
    cursor:        pointer;
    font-size:     var(--wl-btn-font-size);
    color:         var(--wl-btn-color);
    transition:    color var(--wl-transition), border-color var(--wl-transition), background var(--wl-transition);
    line-height:   var(--wl-btn-line-height);
}
.wl-btn:hover {
    color: var(--wl-btn-color-hover);
}

.wl-btn--added,
.wl-btn--added:hover {
    color: var(--wl-btn-color-hover);
}
.wl-icon {
    width:  var(--wl-icon-size);
    height: auto;
    flex-shrink: 0;
    transition: fill var(--wl-transition), transform var(--wl-transition);
}
.wl-btn--added .wl-icon {
    transform: scale(1.05);
}
.wl-btn--loading {
    opacity: .6;
    pointer-events: none;
}

.wl-btn.wl-btn--on-image {
    --wl-btn-color: inherit;
    --wl-btn-color-hover: inherit;
    --wl-btn-padding-block: 0;
    --wl-btn-padding-inline: 0;
    --wl-btn-border-width: 0;
    --wl-btn-size: 2rem;
    --wl-icon-size: 1.625rem;
    
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    width: var(--wl-btn-size);
    height: var(--wl-btn-size);
    transform: scale(1);
    transition: background 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

/* ----- Counter ----- */
.wl-counter {
    --wl-counter-display: inline-flex;
    --wl-counter-align-items: flex-start;
    --wl-counter-gap: 0;
    --wl-counter-height: fit-content;
    --wl-counter-icon-size: 1.5rem;
    --wl-counter-count-background: var(--wl-primary);
    --wl-counter-count-color: #fff;
    --wl-counter-count-font-size: .7rem;
    --wl-counter-count-font-weight: 700;
    --wl-counter-count-line-height: 1;
    --wl-counter-count-size: 1.125rem;
    --wl-counter-count-radius: 6.25rem;
    --wl-counter-count-border-width: 1px;
    --wl-counter-count-border-color: #fff;
    --wl-counter-count-padding-block: 0;
    --wl-counter-count-padding-inline: .25rem;

    display:         var(--wl-counter-display);
    align-items:     var(--wl-counter-align-items);
    gap:             var(--wl-counter-gap);
    text-decoration: none;
    color:           inherit;
    position:        relative;
    height: var(--wl-counter-height);
}
.wl-counter__icon { width: var(--wl-counter-icon-size); height: var(--wl-counter-icon-size); }
.wl-counter__count {
    background:    var(--wl-counter-count-background);
    color:         var(--wl-counter-count-color);
    font-size:     var(--wl-counter-count-font-size);
    font-weight:   var(--wl-counter-count-font-weight);
    line-height: var(--wl-counter-count-line-height);
    min-width:     var(--wl-counter-count-size);
    height:        var(--wl-counter-count-size);
    border-radius: var(--wl-counter-count-radius);
    border: var(--wl-counter-count-border-width) solid var(--wl-counter-count-border-color);
    position: relative;
    margin-top: calc(-1 * var(--wl-counter-count-size) / 4);
    margin-left: calc(-1 * var(--wl-counter-count-size) / 2);
    display:     flex;
    align-items: center;
    justify-content: center;
    padding:     var(--wl-counter-count-padding-block) var(--wl-counter-count-padding-inline);
}

/* ----- Page layout ----- */
.wl-page { 
    --wl-page-padding-block: 2.5rem 5rem;
    --wl-page-padding-inline: 0;
    --wl-page-max-width: 100%;
    --wl-page-background: #fff;

    background: var(--wl-page-background);
    max-width: var(--wl-page-max-width); 
    margin: 0 auto; 
    padding-block: var(--wl-page-padding-block);
    padding-inline: var(--wl-page-padding-inline);
    overflow: hidden;
}
.wl-container {
    --wl-container-max-width: 112.5rem;
    --wl-container-padding-inline: 3.75rem;
    max-width: calc(var(--wl-container-max-width) + var(--wl-container-padding-inline) * 2);
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--wl-container-padding-inline);
}
.wl-products {
    --wl-products-grid-columns: repeat(5, 1fr);
    --wl-products-gap: 1.25rem;

    display: grid;
    grid-template-columns: var(--wl-products-grid-columns);
    gap: var(--wl-products-gap);
}

/* ----- List header ----- */
.wl-list-header {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    gap:             .75rem;
    font-size: 1.125rem;
    margin-bottom:   1.5rem;
}
.wl-list-name { 
    --wl-list-name-font-family: inherit;
    --wl-list-name-font-size: 3rem;
    --wl-list-name-font-weight: 700;
    --wl-list-name-line-height: 1;
    --wl-list-name-text-transform: none;

    margin: 0; 
    font-family: var(--wl-list-name-font-family);
    font-size: var(--wl-list-name-font-size); 
    font-weight: var(--wl-list-name-font-weight);
    line-height: var(--wl-list-name-line-height);
    text-transform: var(--wl-list-name-text-transform);
}
.wl-list-count { color: var(--wl-text-muted); font-size: .875em; }
.wl-list-actions { 
    display: flex; 
    align-items: center; 
    gap: .875em; 
    flex-wrap: wrap; 
    font-size: .9375em;
}
.wl-list-actions .button { 
    display: flex;
    align-items: center;
    gap: .3125em;
    font-size: 1em;
    line-height: 1;
}
.wl-list-actions svg {
    width: 1.25em;
    height: auto;
}

/* ----- Share ----- */
.wl-share { position: relative; }
.wl-share-dropdown {
    position:   absolute;
    right:      0;
    top:        calc(100% + .375rem);
    background: var(--wl-surface);
    border:     1px solid var(--wl-border);
    border-radius: var(--wl-radius);
    padding:    .875rem;
    min-width:  18.75rem;
    box-shadow: var(--wl-shadow);
    z-index:    100;
}
.wl-share-input {
    width:       100%;
    padding:     .5rem .75rem;
    border:      1px solid var(--wl-border);
    border-radius: var(--wl-radius);
    font-size:   .85rem;
    margin-bottom: .5rem;
}
.wl-share-channels { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; }
.wl-share-channel {
    display:     inline-flex;
    align-items: center;
    gap:         .3125rem;
    padding:     .375rem .75rem;
    border:      none;
    border-radius: var(--wl-radius);
    text-decoration: none;
    cursor:      pointer;
    font-size:   .8rem;
    font-weight: 600;
    color:       #fff;
    background:  #555;
    transition:  opacity var(--wl-transition);
}
.wl-share-channel:hover { opacity: .85; }
.wl-share-channel--email     { background: #555; }

.wl-share-email-row {
    display:       flex;
    gap:           .375rem;
    margin-top:    .625rem;
}
.wl-share-email-input {
    flex:          1 1 auto;
    padding:       .5rem .75rem;
    border:        1px solid var(--wl-border);
    border-radius: var(--wl-radius);
    font-size:     .85rem;
}

/* ----- Empty state ----- */
.wl-empty {
    --wl-empty-font-size: 1.125rem;
    --wl-empty-icon-size: 4rem;

    font-size: var(--wl-empty-font-size);
    text-align: center;
    color:      var(--wl-text-muted);
}
.wl-empty svg { width: var(--wl-empty-icon-size); height: auto; margin: 0 auto 1em; opacity: .7; }
.wl-empty h3 { font-size: 1.375em; margin-bottom: .25em; }
.wl-btn-shop {
    --wl-btn-shop-font-size: 1em;
    --wl-btn-shop-font-weight: 700;
    --wl-btn-shop-color: #fff;
    --wl-btn-shop-color-hover: #000;
    --wl-btn-shop-text-transform: none;
    --wl-btn-shop-padding-block: 1.1875rem;
    --wl-btn-shop-padding-inline: 3.125rem;
    --wl-btn-shop-background: #000;
    --wl-btn-shop-background-hover: #fff;
    --wl-btn-shop-width: fit-content;
    --wl-btn-margin-block: 1em 0;

    font-size: var(--wl-btn-shop-font-size);
    font-weight: var(--wl-btn-shop-font-weight);
    line-height: 1;
    color: var(--wl-btn-shop-color);
    text-transform: var(--wl-btn-shop-text-transform);
    padding-block: var(--wl-btn-shop-padding-block);
    padding-inline: var(--wl-btn-shop-padding-inline);
    background: var(--wl-btn-shop-background);
    width: var(--wl-btn-shop-width);
    margin-block: var(--wl-btn-margin-block);
}
.wl-btn-shop:hover {
    color: var(--wl-btn-shop-color-hover);
    background: var(--wl-btn-shop-background-hover);
}

/* ----- Modal (<dialog>) ----- */
.wl-modal {
    --wl-modal-max-width: 30rem;
    --wl-modal-offset-inline: .9375rem;
    --wl-modal-radius: 0px;
    --wl-modal-box-shadow: 0 8px 40px rgba(0, 0, 0, .18);
    --wl-modal-padding-block: 2rem;
    --wl-modal-padding-inline: 2rem;
    --wl-modal-backdrop-background: rgba(0, 0, 0, .4);

    position: relative;
    border:         none;
    border-radius:  var(--wl-modal-radius);
    padding-block:  var(--wl-modal-padding-block);
    padding-inline: var(--wl-modal-padding-inline);
    box-shadow:     var(--wl-modal-box-shadow);
    max-width:      var(--wl-modal-max-width);
    width:          calc( 100% - var(--wl-modal-offset-inline) * 2 );
    margin: auto;
}
.wl-modal::backdrop { background: var(--wl-modal-backdrop-background); }
.wl-modal__form {
    --wl-modal-form-font-size: 1.0625rem;
    --wl-modal-form-line-height: 1.2;
    --wl-modal-form-color: #000;
    --wl-modal-form-title-font-size: 1.5em;
    --wl-modal-form-title-font-weight: 700;
    --wl-modal-form-label-font-size: .9375em;
    --wl-modal-form-input-font-size: 1em;
    --wl-modal-form-input-padding-block: .625rem;
    --wl-modal-form-input-padding-inline: .75em;
    --wl-modal-form-input-border-width: max(1px, .0625rem);
    --wl-modal-form-input-border-color: var(--wl-border);
    --wl-modal-form-input-radius: 0px;

    font-size: var(--wl-modal-form-font-size);
    line-height: 1.2;
    color: var(--wl-modal-form-color);
}
.wl-modal__form h3 { 
    font-size: var(--wl-modal-form-title-font-size); 
    font-weight: var(--wl-modal-form-title-font-weight); 
    margin-bottom: .75em; 
}
.wl-modal__form label { 
    display: block; 
    font-size: var(--wl-modal-form-label-font-size); 
    font-weight: 600; 
    margin-bottom: .5em; 
    margin-top: .9375em; 
}
.wl-modal__form input[type="text"],
.wl-modal__form select {
    width:         100%;
    padding:       var(--wl-modal-form-input-padding-block) var(--wl-modal-form-input-padding-inline);
    border:        var(--wl-modal-form-input-border-width) solid var(--wl-modal-form-input-border-color);
    border-radius: var(--wl-modal-form-input-radius);
    font-size:     var(--wl-modal-form-input-font-size);
    box-sizing:    border-box;
    outline: none;
}
.wl-modal__actions {
    margin-top: 1.25em;
}
.wl-modal__close {
    --wl-modal-close-txt-display: none;
    --wl-modal-close-txt-icon: block;
    --wl-modal-close-txt-icon-size: 1em;

    width: 2em;
    height: 2em;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0; right: 0;
}
.wl-modal__close_txt {
    display: var(--wl-modal-close-txt-display);
}
.wl-modal__close_icon {
    display: var(--wl-modal-close-txt-icon);
    width: var(--wl-modal-close-txt-icon-size);
    height: auto;
}

/* ----- Responsive ----- */
@media (max-width: 992px) {
    .wl-products { --wl-products-grid-columns: repeat(3, 1fr); --wl-products-gap: 1.5rem; }
}
@media (max-width: 600px) {
    .wl-page { --wl-page-padding-block: 1.875rem; }
    .wl-container { --wl-container-padding-inline: .9375rem; }

    .wl-list-header { align-items: flex-start; flex-wrap: wrap; font-size: 1rem; margin-bottom: .875rem; }
    .wl-list-header:has(.wl-share) {
        flex-direction: column;
    }
    .wl-share-dropdown { right: auto; left: 0; min-width: 16.25rem; }

    .wl-list-name { --wl-list-name-font-size: 1.5rem; }
    .wl-list-actions { margin-top: .125em; }

    .wl-products { --wl-products-grid-columns: repeat(2, 1fr); --wl-products-gap: .9375rem; }
    .wl-modal { --wl-modal-padding-block: 1.375rem; --wl-modal-padding-inline: 1.375rem; }
    .wl-modal__form { --wl-modal-form-font-size: .9375rem; }
}