/**
 * Universal Wishlist — Template CSS
 *
 * Styles the wishlist page: grid, item cards, empty state, loading.
 *
 * @package Universal_Wishlist
 */

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

.uwl-wishlist {
    --uwl-tpl-color-text:        #1d1d1f;
    --uwl-tpl-color-muted:       #6b7280;
    --uwl-tpl-color-border:      #e5e7eb;
    --uwl-tpl-color-border-hover:#d1d5db;
    --uwl-tpl-color-bg:          #ffffff;
    --uwl-tpl-color-bg-alt:      #f9fafb;
    --uwl-tpl-color-primary:     #e63946;
    --uwl-tpl-color-price:       #111827;

    --uwl-tpl-radius:            10px;
    --uwl-tpl-radius-img:        8px;
    --uwl-tpl-shadow:            0 1px 3px rgba(0, 0, 0, 0.06);
    --uwl-tpl-shadow-hover:      0 8px 24px rgba(0, 0, 0, 0.10);
    --uwl-tpl-transition:        0.2s ease-in-out;

    --uwl-tpl-gap:               24px;
    --uwl-tpl-padding:           20px;
    --uwl-tpl-img-ratio:         1 / 1;

    --uwl-tpl-title-size:        16px;
    --uwl-tpl-price-size:        18px;
    --uwl-tpl-meta-size:         13px;

    display: block;
    color:   var(--uwl-tpl-color-text);
}

/* ==========================================================================
   2. WRAPPER & TITLE
   ========================================================================== */

.uwl-wishlist-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             16px;
    margin-bottom:   24px;
    flex-wrap:       wrap;
}

.uwl-wishlist-title {
    margin:      0;
    font-size:   24px;
    font-weight: 700;
    line-height: 1.3;
    color:       var(--uwl-tpl-color-text);
}

.uwl-wishlist-actions {
    display:     flex;
    gap:         10px;
    flex-wrap:   wrap;
    align-items: center;
}

.uwl-wishlist-count-line {
    margin:        0 0 16px;
    font-size:     var(--uwl-tpl-meta-size);
    color:         var(--uwl-tpl-color-muted);
}

/* ==========================================================================
   3. GRID
   ========================================================================== */

.uwl-wishlist-items {
    display:               grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap:                   var(--uwl-tpl-gap);
    margin:                0;
    padding:               0;
    list-style:            none;
}

/* Column variants */
.uwl-wishlist[data-columns="1"] .uwl-wishlist-items { grid-template-columns: 1fr; }
.uwl-wishlist[data-columns="2"] .uwl-wishlist-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.uwl-wishlist[data-columns="3"] .uwl-wishlist-items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.uwl-wishlist[data-columns="4"] .uwl-wishlist-items { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ==========================================================================
   4. ITEM CARD
   ========================================================================== */

.uwl-wishlist-item {
    position:         relative;
    display:          flex;
    flex-direction:   column;

    padding:          var(--uwl-tpl-padding);

    background:       var(--uwl-tpl-color-bg);
    border:           1px solid var(--uwl-tpl-color-border);
    border-radius:    var(--uwl-tpl-radius);
    box-shadow:       var(--uwl-tpl-shadow);

    overflow:         hidden;

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

.uwl-wishlist-item:hover {
    border-color: var(--uwl-tpl-color-border-hover);
    box-shadow:   var(--uwl-tpl-shadow-hover);
    transform:    translateY(-2px);
}

/* Item being removed (fade out). */
.uwl-wishlist-item.uwl-removing {
    opacity:    0;
    transform:  scale(0.96);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

/* ==========================================================================
   5. PRODUCT IMAGE
   ========================================================================== */

.uwl-item-media {
    position:       relative;
    width:          100%;
    aspect-ratio:   var(--uwl-tpl-img-ratio);
    margin-bottom:  14px;

    background:     var(--uwl-tpl-color-bg-alt);
    border-radius:  var(--uwl-tpl-radius-img);
    overflow:       hidden;
    display:        flex;
    align-items:    center;
    justify-content: center;
}

.uwl-item-media img {
    width:          100%;
    height:         100%;
    object-fit:     contain;
    display:        block;
    transition:     transform 0.35s ease;
}

.uwl-wishlist-item:hover .uwl-item-media img {
    transform: scale(1.05);
}

/* Placeholder when no image exists. */
.uwl-item-media.uwl-no-image::before {
    content:       "";
    display:       block;
    width:         48px;
    height:        48px;
    background:    var(--uwl-tpl-color-border);
    border-radius: 6px;
    opacity:       0.6;
}

/* ==========================================================================
   6. TITLE, PRICE, META
   ========================================================================== */

.uwl-item-title {
    margin:        0 0 8px;
    font-size:     var(--uwl-tpl-title-size);
    font-weight:   600;
    line-height:   1.35;
    color:         var(--uwl-tpl-color-text);
}

.uwl-item-title a {
    color:           inherit;
    text-decoration: none;
    transition:      color var(--uwl-tpl-transition);
}

.uwl-item-title a:hover {
    color: var(--uwl-tpl-color-primary);
}

.uwl-item-price {
    display:       block;
    margin:        0 0 12px;
    font-size:     var(--uwl-tpl-price-size);
    font-weight:   700;
    line-height:   1.3;
    color:         var(--uwl-tpl-color-price);
}

.uwl-item-price del {
    margin-left: 6px;
    font-size:   0.75em;
    color:       var(--uwl-tpl-color-muted);
    font-weight: 400;
}

.uwl-item-price ins {
    text-decoration: none;
    color:           var(--uwl-tpl-color-primary);
}

.uwl-item-excerpt {
    margin:      0 0 12px;
    font-size:   var(--uwl-tpl-meta-size);
    line-height: 1.5;
    color:       var(--uwl-tpl-color-muted);
}

.uwl-item-meta {
    margin:      0 0 12px;
    font-size:   var(--uwl-tpl-meta-size);
    color:       var(--uwl-tpl-color-muted);
}

.uwl-item-meta span + span::before {
    content: " · ";
    margin:  0 4px;
    color:   var(--uwl-tpl-color-border-hover);
}

/* ==========================================================================
   7. QUANTITY ROW
   ========================================================================== */

.uwl-item-qty {
    display:         inline-flex;
    align-items:     center;
    gap:             4px;
    margin:          0 0 12px;

    border:          1px solid var(--uwl-tpl-color-border);
    border-radius:   6px;
    overflow:        hidden;
    background:      var(--uwl-tpl-color-bg);
    align-self:      flex-start;
}

.uwl-item-qty button {
    width:       32px;
    height:      34px;

    display:     inline-flex;
    align-items: center;
    justify-content: center;

    font-size:   16px;
    font-weight: 600;
    line-height: 1;

    color:       var(--uwl-tpl-color-text);
    background:  var(--uwl-tpl-color-bg-alt);
    border:      none;
    cursor:      pointer;

    transition:  background var(--uwl-tpl-transition), color var(--uwl-tpl-transition);
}

.uwl-item-qty button:hover:not(:disabled) {
    background: var(--uwl-tpl-color-border);
}

.uwl-item-qty button:disabled {
    opacity: 0.4;
    cursor:  not-allowed;
}

.uwl-item-qty input {
    width:       48px;
    height:      34px;
    padding:     0;

    font-size:   14px;
    font-weight: 600;
    text-align:  center;

    color:       var(--uwl-tpl-color-text);
    background:  transparent;
    border:      none;
    border-left:  1px solid var(--uwl-tpl-color-border);
    border-right: 1px solid var(--uwl-tpl-color-border);

    -moz-appearance: textfield;
}

.uwl-item-qty input::-webkit-outer-spin-button,
.uwl-item-qty input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.uwl-item-qty input:focus {
    outline: none;
    background: var(--uwl-tpl-color-bg-alt);
}

/* ==========================================================================
   8. ACTION ROW
   ========================================================================== */

.uwl-item-actions {
    display:     flex;
    gap:         8px;
    flex-wrap:   wrap;
    align-items: center;
    margin-top:  auto; /* push to bottom of card */
    padding-top: 8px;
}

.uwl-item-actions .uwl-add-amazon {
    flex: 1 1 auto;
    min-width: 0;
}

.uwl-item-actions .uwl-remove-button {
    flex: 0 0 auto;
}

/* ==========================================================================
   9. LINE TOTAL
   ========================================================================== */

.uwl-item-line-total {
    display:         flex;
    justify-content: space-between;
    align-items:     baseline;
    margin:          6px 0 12px;
    padding-top:     8px;
    border-top:      1px dashed var(--uwl-tpl-color-border);
    font-size:       var(--uwl-tpl-meta-size);
    color:           var(--uwl-tpl-color-muted);
}

.uwl-item-line-total strong {
    font-size:   15px;
    font-weight: 700;
    color:       var(--uwl-tpl-color-price);
}

/* ==========================================================================
   10. BULK ACTIONS
   ========================================================================== */

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

.uwl-wishlist-footer {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    gap:             12px;
    margin-top:      28px;
    padding-top:     20px;
    border-top:      1px solid var(--uwl-tpl-color-border);
    flex-wrap:       wrap;
}

.uwl-wishlist-footer .uwl-grand-total {
    font-size:   15px;
    color:       var(--uwl-tpl-color-muted);
}

.uwl-wishlist-footer .uwl-grand-total strong {
    font-size:   18px;
    font-weight: 700;
    color:       var(--uwl-tpl-color-price);
}

/* ==========================================================================
   11. EMPTY STATE
   ========================================================================== */

.uwl-wishlist-empty {
    padding:       60px 20px;
    text-align:    center;

    background:    var(--uwl-tpl-color-bg-alt);
    border:        1px dashed var(--uwl-tpl-color-border);
    border-radius: var(--uwl-tpl-radius);

    color:         var(--uwl-tpl-color-muted);
}

.uwl-wishlist-empty h2,
.uwl-wishlist-empty h3 {
    margin:      0 0 8px;
    font-size:   18px;
    font-weight: 600;
    color:       var(--uwl-tpl-color-text);
}

.uwl-wishlist-empty p {
    margin:      0 0 16px;
    font-size:   var(--uwl-tpl-meta-size);
    line-height: 1.6;
}

.uwl-wishlist-empty .uwl-empty-icon {
    display:    inline-block;
    width:      56px;
    height:     56px;
    margin-bottom: 16px;
    background: var(--uwl-tpl-color-border);
    border-radius: 50%;
    opacity:    0.6;
}

/* ==========================================================================
   12. LOADING / SKELETON
   ========================================================================== */

.uwl-wishlist.uwl-loading .uwl-wishlist-items {
    opacity:        0.5;
    pointer-events: none;
    transition:     opacity var(--uwl-tpl-transition);
}

.uwl-wishlist-item.uwl-skeleton {
    pointer-events: none;
    overflow:       hidden;
}

.uwl-wishlist-item.uwl-skeleton::after {
    content:  "";
    position: absolute;
    top:      0;
    left:     -100%;
    width:    100%;
    height:   100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.6),
        transparent
    );
    animation: uwl-shimmer 1.4s infinite;
}

@keyframes uwl-shimmer {
    to { left: 100%; }
}

/* ==========================================================================
   13. LIST VIEW VARIANT
   ========================================================================== */

.uwl-wishlist.uwl-view-list .uwl-wishlist-items {
    display:        flex;
    flex-direction: column;
    gap:            14px;
}

.uwl-wishlist.uwl-view-list .uwl-wishlist-item {
    flex-direction:  row;
    align-items:     flex-start;
    padding:         14px;
    gap:             16px;
}

.uwl-wishlist.uwl-view-list .uwl-item-media {
    flex:          0 0 100px;
    width:         100px;
    height:        100px;
    margin-bottom: 0;
}

.uwl-wishlist.uwl-view-list .uwl-item-content {
    flex: 1 1 auto;
    min-width: 0;
}

.uwl-wishlist.uwl-view-list .uwl-item-actions {
    flex:          0 0 auto;
    flex-direction: column;
    align-items:   stretch;
    padding-top:   0;
    margin-top:    0;
}

/* ==========================================================================
   14. TABLE VIEW VARIANT
   ========================================================================== */

.uwl-wishlist.uwl-view-table .uwl-wishlist-items {
    display:        block;
    border:         1px solid var(--uwl-tpl-color-border);
    border-radius:  var(--uwl-tpl-radius);
    overflow:       hidden;
}

.uwl-wishlist.uwl-view-table .uwl-wishlist-item {
    flex-direction:  row;
    align-items:     center;
    padding:         12px 16px;
    gap:             16px;
    border:          none;
    border-bottom:   1px solid var(--uwl-tpl-color-border);
    border-radius:   0;
    box-shadow:      none;
    transform:       none;
}

.uwl-wishlist.uwl-view-table .uwl-wishlist-item:last-child {
    border-bottom: none;
}

.uwl-wishlist.uwl-view-table .uwl-wishlist-item:hover {
    background: var(--uwl-tpl-color-bg-alt);
    box-shadow: none;
    transform:  none;
}

.uwl-wishlist.uwl-view-table .uwl-item-media {
    flex:     0 0 60px;
    width:    60px;
    height:   60px;
    margin:   0;
}

/* ==========================================================================
   15. BADGES
   ========================================================================== */

.uwl-item-badge {
    display:       inline-block;
    padding:       2px 8px;
    font-size:     11px;
    font-weight:   600;
    line-height:   1.6;

    color:         #ffffff;
    background:    var(--uwl-tpl-color-primary);
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.uwl-item-badge-absolute {
    position: absolute;
    top:      10px;
    left:     10px;
    z-index:  2;
}

/* ==========================================================================
   16. RTL SUPPORT
   ========================================================================== */

body.rtl .uwl-wishlist-item,
body.rtl .uwl-item-actions,
body.rtl .uwl-wishlist-footer {
    direction: rtl;
}

body.rtl .uwl-item-qty input {
    border-left:  none;
    border-right: 1px solid var(--uwl-tpl-color-border);
}

/* ==========================================================================
   17. RESPONSIVE
   ========================================================================== */

@media (max-width: 1024px) {
    .uwl-wishlist[data-columns="4"] .uwl-wishlist-items {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    .uwl-wishlist[data-columns="3"] .uwl-wishlist-items,
    .uwl-wishlist[data-columns="4"] .uwl-wishlist-items {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    :root,
    .uwl-wishlist {
        --uwl-tpl-gap: 16px;
    }
}

@media (max-width: 560px) {
    .uwl-wishlist-items,
    .uwl-wishlist[data-columns="2"] .uwl-wishlist-items,
    .uwl-wishlist[data-columns="3"] .uwl-wishlist-items,
    .uwl-wishlist[data-columns="4"] .uwl-wishlist-items {
        grid-template-columns: 1fr;
    }

    .uwl-wishlist-title {
        font-size: 20px;
    }

    .uwl-wishlist-header {
        flex-direction: column;
        align-items:    flex-start;
    }

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

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

    .uwl-wishlist.uwl-view-list .uwl-wishlist-item {
        flex-direction: column;
    }

    .uwl-wishlist.uwl-view-list .uwl-item-media {
        flex:  0 0 auto;
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
    }
}

/* ==========================================================================
   18. DARK MODE
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    .uwl-wishlist {
        --uwl-tpl-color-text:         #e5e7eb;
        --uwl-tpl-color-muted:        #9ca3af;
        --uwl-tpl-color-border:       #374151;
        --uwl-tpl-color-border-hover: #4b5563;
        --uwl-tpl-color-bg:           #1f2937;
        --uwl-tpl-color-bg-alt:       #111827;
        --uwl-tpl-color-price:        #f9fafb;
        --uwl-tpl-shadow:             0 1px 3px rgba(0, 0, 0, 0.4);
        --uwl-tpl-shadow-hover:       0 8px 24px rgba(0, 0, 0, 0.5);
    }

    .uwl-wishlist-item.uwl-skeleton::after {
        background: linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.08),
            transparent
        );
    }
}

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

@media (prefers-reduced-motion: reduce) {
    .uwl-wishlist-item,
    .uwl-item-media img,
    .uwl-wishlist.uwl-loading .uwl-wishlist-items {
        transition: none !important;
        animation:  none !important;
        transform:  none !important;
    }

    .uwl-wishlist-item.uwl-skeleton::after {
        display: none;
    }
}

/* ==========================================================================
   20. PRINT
   ========================================================================== */

@media print {
    .uwl-wishlist-item {
        break-inside:  avoid;
        box-shadow:    none;
        border:        1px solid #ccc;
    }

    .uwl-item-actions,
    .uwl-wishlist-bulk {
        display: none !important;
    }

    .uwl-wishlist-items {
        grid-template-columns: repeat(2, 1fr);
    }
}