/* ==========================================================================
   PixelAIR WC Wishlists – Frontend & Account Styles
   ========================================================================== */

/* ── CSS Custom properties ─────────────────────────────────────────────── */
:root {
    --wl-primary:       #e63946;
    --wl-primary-hover: #c1121f;
    --wl-primary-faint: #fde8ea;
    --wl-text:          #1c1c1e;
    --wl-muted:         #6b7280;
    --wl-border:        #e5e7eb;
    --wl-bg:            #ffffff;
    --wl-shadow:        0 8px 32px rgba(0, 0, 0, .12);
    --wl-radius:        10px;
    --wl-transition:    0.2s ease;
}

/* ── Add-to-Wishlist button ─────────────────────────────────────────────── */
.pixelair-wl-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    background:      transparent;
    border:          1.5px solid var(--wl-border);
    border-radius:   6px;
    padding:         7px 14px;
    cursor:          pointer;
    font-size:       .85rem;
    color:           var(--wl-muted);
    transition:      color var(--wl-transition), border-color var(--wl-transition), background var(--wl-transition);
    line-height:     1;
}

.pixelair-wl-btn:hover,
.pixelair-wl-btn:focus-visible {
    color:        var(--wl-primary);
    border-color: var(--wl-primary);
    background:   var(--wl-primary-faint);
    outline:      none;
}

.pixelair-wl-btn.is-wishlisted {
    color:        var(--wl-primary);
    border-color: var(--wl-primary);
    background:   var(--wl-primary-faint);
}

.pixelair-wl-btn.is-wishlisted .pixelair-wl-icon {
    fill: var(--wl-primary);
}

.pixelair-wl-icon {
    fill:        none;
    stroke:      currentColor;
    stroke-width: 2;
    flex-shrink: 0;
    transition:  fill var(--wl-transition), stroke var(--wl-transition);
}

.pixelair-wl-btn.is-wishlisted .pixelair-wl-icon {
    fill:   var(--wl-primary);
    stroke: var(--wl-primary);
}

/* Single-product context: show the label; loop context: hide it */
.pixelair-wl-btn--loop .pixelair-wl-btn__label {
    display: none;
}

/* Loop button: smaller, positioned over product image */
.woocommerce ul.products li.product {
    position: relative;
}

.pixelair-wl-btn--loop {
    position:         absolute;
    top:              10px;
    right:            10px;
    z-index:          10;
    padding:          6px;
    border-radius:    50%;
    background:       rgba(255,255,255,.9);
    backdrop-filter:  blur(4px);
    border:           none;
    box-shadow:       0 2px 8px rgba(0,0,0,.12);
}

/* Single product: full-width stretch */
.pixelair-wl-btn--single {
    margin-top:   .75rem;
    width:        100%;
    justify-content: center;
}

/* ── Modal ──────────────────────────────────────────────────────────────── */
.pixelair-wl-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pixelair-wl-modal[hidden] { display: none; }

.pixelair-wl-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.45);
}

.pixelair-wl-modal__box {
    position:        relative;
    background:      var(--wl-bg);
    border-radius:   var(--wl-radius);
    box-shadow:      var(--wl-shadow);
    padding:         28px 32px;
    width:           min(92vw, 420px);
    z-index:         1;
    animation:       wl-slide-up .22s ease;
}

@keyframes wl-slide-up {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.pixelair-wl-modal__close {
    position:    absolute;
    top:         12px;
    right:       14px;
    background:  none;
    border:      none;
    font-size:   22px;
    cursor:      pointer;
    color:       var(--wl-muted);
    line-height: 1;
    padding:     4px;
}

.pixelair-wl-modal__title {
    margin:      0 0 16px;
    font-size:   1.1rem;
    font-weight: 700;
    color:       var(--wl-text);
}

/* Wishlist list inside modal */
.pixelair-wl-modal__list {
    list-style: none;
    margin:     0 0 12px;
    padding:    0;
    max-height: 240px;
    overflow-y: auto;
}

.pixelair-wl-modal__list li {
    display:       flex;
    align-items:   center;
    gap:           10px;
    padding:       10px 12px;
    border-radius: 6px;
    cursor:        pointer;
    transition:    background var(--wl-transition);
}

.pixelair-wl-modal__list li:hover { background: var(--wl-primary-faint); }
.pixelair-wl-modal__list li.is-checked { color: var(--wl-primary); font-weight: 600; }

.pixelair-wl-modal__check {
    width:  18px;
    height: 18px;
    border:        2px solid var(--wl-border);
    border-radius: 50%;
    flex-shrink:   0;
    display:       flex;
    align-items:   center;
    justify-content: center;
    transition:    border-color var(--wl-transition), background var(--wl-transition);
}

.is-checked .pixelair-wl-modal__check {
    border-color: var(--wl-primary);
    background:   var(--wl-primary);
    color:        #fff;
    font-size:    11px;
}

/* New wishlist area in modal */
.pixelair-wl-modal__new-area { margin-top: 8px; }

.pixelair-wl-modal__new-form {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.pixelair-wl-modal__new-form[hidden] { display: none; }

.pixelair-wl-modal__new-name {
    flex: 1;
    min-width: 0;
    padding:   8px 12px;
    border:    1.5px solid var(--wl-border);
    border-radius: 6px;
    font-size: .9rem;
}

.pixelair-wl-modal__notice {
    min-height: 1.2em;
    font-size:  .82rem;
    color:      var(--wl-primary);
    margin:     6px 0 0;
}

/* ── Account page ───────────────────────────────────────────────────────── */
.pixelair-wl-account__header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             12px;
    margin-bottom:   20px;
}

.pixelair-wl-account__header h2 { margin: 0; }

.pixelair-wl-account__create-form {
    display:       flex;
    gap:           10px;
    flex-wrap:     wrap;
    align-items:   center;
    margin-bottom: 20px;
    padding:       16px;
    background:    #f9fafb;
    border-radius: var(--wl-radius);
    border:        1.5px dashed var(--wl-border);
}

.pixelair-wl-account__create-form[hidden] { display: none; }

.pixelair-wl-input {
    padding:       8px 12px;
    border:        1.5px solid var(--wl-border);
    border-radius: 6px;
    font-size:     .9rem;
    flex:          1;
    min-width:     180px;
}

/* Individual wishlist card */
.pixelair-wl-list {
    border:         1.5px solid var(--wl-border);
    border-radius:  var(--wl-radius);
    margin-bottom:  24px;
    overflow:       hidden;
}

.pixelair-wl-list__header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             12px;
    padding:         16px 20px;
    background:      #f9fafb;
    border-bottom:   1.5px solid var(--wl-border);
}

.pixelair-wl-list__title-wrap {
    display:     flex;
    align-items: center;
    gap:         12px;
}

.pixelair-wl-list__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
}

.pixelair-wl-list__rename-btn {
    font-size:  .8rem;
    color:      var(--wl-muted);
    background: none;
    border:     none;
    cursor:     pointer;
    padding:    0;
}

.pixelair-wl-list__rename-btn:hover { color: var(--wl-primary); }

/* Notification toggles */
.pixelair-wl-list__notifications {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         16px;
    padding:     12px 20px;
    background:  #fff;
    border-bottom: 1.5px solid var(--wl-border);
    font-size:   .85rem;
    color:       var(--wl-text);
}

.pixelair-wl-list__notif-label {
    color:       var(--wl-muted);
    font-weight: 600;
    margin-right: 4px;
}

/* Toggle switch */
.pixelair-wl-toggle {
    display:     inline-flex;
    align-items: center;
    gap:         8px;
    cursor:      pointer;
}

.pixelair-wl-toggle input { display: none; }

.pixelair-wl-toggle__slider {
    width:         36px;
    height:        20px;
    background:    #d1d5db;
    border-radius: 20px;
    position:      relative;
    transition:    background var(--wl-transition);
    flex-shrink:   0;
}

.pixelair-wl-toggle__slider::after {
    content:       '';
    position:      absolute;
    top:           3px;
    left:          3px;
    width:         14px;
    height:        14px;
    border-radius: 50%;
    background:    #fff;
    transition:    transform var(--wl-transition);
    box-shadow:    0 1px 3px rgba(0,0,0,.2);
}

.pixelair-wl-toggle input:checked + .pixelair-wl-toggle__slider {
    background: var(--wl-primary);
}

.pixelair-wl-toggle input:checked + .pixelair-wl-toggle__slider::after {
    transform: translateX(16px);
}

.pixelair-wl-notif-status {
    font-size:   .78rem;
    color:       #16a34a;
    font-weight: 600;
}

/* Products table */
.pixelair-wl-products { width: 100%; border-collapse: collapse; }

.pixelair-wl-products th,
.pixelair-wl-products td {
    padding:    12px 16px;
    border-bottom: 1px solid var(--wl-border);
    text-align: left;
    vertical-align: middle;
}

.pixelair-wl-products thead th {
    font-size:   .78rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color:       var(--wl-muted);
    font-weight: 600;
    background:  #f9fafb;
}

.pixelair-wl-products img {
    width:        54px;
    height:       54px;
    object-fit:   cover;
    border-radius: 6px;
    display:      block;
}

.pixelair-wl-products .product-thumbnail { width: 70px; }
.pixelair-wl-products .product-remove    { width: 50px; text-align: center; }
.pixelair-wl-products .product-move      { width: 160px; }

.pixelair-wl-remove-product {
    background:  none;
    border:      1.5px solid var(--wl-border);
    border-radius: 50%;
    width:       28px;
    height:      28px;
    cursor:      pointer;
    font-size:   16px;
    line-height: 1;
    color:       var(--wl-muted);
    display:     inline-flex;
    align-items: center;
    justify-content: center;
    transition:  color var(--wl-transition), border-color var(--wl-transition);
}

.pixelair-wl-remove-product:hover {
    color:        var(--wl-primary);
    border-color: var(--wl-primary);
}

.pixelair-wl-move-select {
    width:  100%;
    padding: 6px 8px;
    border:  1.5px solid var(--wl-border);
    border-radius: 5px;
    font-size: .82rem;
}

.pixelair-wl-price-drop {
    display:    block;
    font-size:  .78rem;
    color:      #16a34a;
    font-weight: 600;
    margin-top: 2px;
}

/* ── Badges ─────────────────────────────────────────────────────────────── */
.pixelair-wl-badge {
    display:       inline-block;
    padding:       2px 8px;
    border-radius: 20px;
    font-size:     .72rem;
    font-weight:   700;
    text-transform: uppercase;
}

.pixelair-wl-badge--in      { background: #dcfce7; color: #166534; }
.pixelair-wl-badge--out     { background: #fee2e2; color: #991b1b; }
.pixelair-wl-badge--default { background: #dbeafe; color: #1e40af; }

/* ── Misc ───────────────────────────────────────────────────────────────── */
.pixelair-wl-account__empty,
.pixelair-wl-list__empty {
    padding:   28px 20px;
    text-align: center;
    color:     var(--wl-muted);
}

.pixelair-wl-muted { color: var(--wl-muted); font-size: .82rem; }

.pixelair-wl-notice {
    font-size:  .82rem;
    color:      var(--wl-primary);
    font-weight: 600;
}

/* Delete modal buttons */
.pixelair-wl-modal__buttons {
    display:  flex;
    gap:      10px;
    margin-top: 20px;
    justify-content: flex-end;
}

.pixelair-wl-delete-modal__move-area {
    margin:  16px 0 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .pixelair-wl-products .product-move  { display: none; }
    .pixelair-wl-modal__box { padding: 20px 16px; }
    .pixelair-wl-account__header { flex-direction: column; align-items: flex-start; }
}