/**
 * Dittam Cart Move to Wishlist — Frontend Styles
 *
 * @package Dittam_Cart_Wishlist
 */

/* ─── CSS Custom Properties ─────────────────────────────────────────────────── */
:root {
    --dittam-cw-overlay-bg:    rgba(0, 0, 0, 0.55);
    --dittam-cw-modal-bg:      #ffffff;
    --dittam-cw-radius:        16px;
    --dittam-cw-shadow:        0 20px 60px rgba(0, 0, 0, 0.18);
    --dittam-cw-title-color:   #1a1a2e;
    --dittam-cw-subtitle-color:#6b7280;
    --dittam-cw-name-color:    #111827;
    --dittam-cw-price-color:   #374151;
    --dittam-cw-close-color:   #9ca3af;
    --dittam-cw-close-hover:   #A55439;

    /* Brand accent — applied on all button hovers */
    --dittam-cw-accent:        #A55439;
    --dittam-cw-accent-dark:   #8e4730;

    /* Wishlist button (default state) */
    --dittam-cw-btn-wishlist-bg:    #f3f4f6;
    --dittam-cw-btn-wishlist-color: #111827;

    /* Remove button (default state) */
    --dittam-cw-btn-remove-bg:    #f3f4f6;
    --dittam-cw-btn-remove-color: #111827;

    /* Cancel button (default state) */
    --dittam-cw-btn-cancel-color: #6b7280;

    /* Toast */
    --dittam-cw-toast-success-bg: #10b981;
    --dittam-cw-toast-error-bg:   #ef4444;
    --dittam-cw-toast-color:      #ffffff;

    /* Timing */
    --dittam-cw-transition: 0.25s ease;
    --dittam-cw-anim-in:    0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ─── Overlay ───────────────────────────────────────────────────────────────── */
#dittam-cw-overlay.dittam-cw-overlay {
    /* Hidden by default — shown via .is-open class (NOT inline style, because
       display:flex !important would beat jQuery's style="display:none"). */
    display:         none;

    position:        fixed !important;
    inset:           0 !important;
    z-index:         999999 !important;
    background:      var(--dittam-cw-overlay-bg) !important;
    align-items:     center !important;
    justify-content: center !important;
    padding:         1rem !important;
    margin:          0 !important;
    opacity:         0;
    animation:       none;
}

/* Overlay is visible only when .is-open is present */
#dittam-cw-overlay.dittam-cw-overlay.is-open {
    display:   flex !important;
    animation: dittamCWFadeIn var(--dittam-cw-transition) forwards;
}

#dittam-cw-overlay.dittam-cw-overlay.is-closing {
    display:   flex !important;
    animation: dittamCWFadeOut var(--dittam-cw-transition) forwards;
}

/* ─── Modal ─────────────────────────────────────────────────────────────────── */
#dittam-cw-overlay .dittam-cw-modal {
    position:      relative !important;
    background:    var(--dittam-cw-modal-bg) !important;
    border-radius: var(--dittam-cw-radius) !important;
    box-shadow:    var(--dittam-cw-shadow) !important;
    padding:       1.75rem 1.75rem 1.5rem !important;
    width:         100% !important;
    max-width:     440px !important;
    box-sizing:    border-box !important;
    margin:        0 !important;
    transform:     translateY(24px) scale(0.96);
    opacity:       0;
    animation:     dittamCWSlideIn var(--dittam-cw-anim-in) 0.05s forwards;
}

#dittam-cw-overlay.is-closing .dittam-cw-modal {
    animation: dittamCWSlideOut var(--dittam-cw-transition) forwards;
}

/* ─── Modal header row (flex — no absolute positioning) ─────────────────────── */
#dittam-cw-overlay .dittam-cw-modal-header {
    display:         flex !important;
    align-items:     flex-start !important;
    justify-content: space-between !important;
    gap:             0.75rem !important;
    margin:          0 0 0.375rem 0 !important;
    padding:         0 !important;
    background:      none !important;
    border:          none !important;
    box-shadow:      none !important;
}

/* ─── Title ─────────────────────────────────────────────────────────────────── */
#dittam-cw-overlay .dittam-cw-title {
    margin:      0 !important;
    padding:     0 !important;
    font-size:   1.25rem !important;
    font-weight: 700 !important;
    color:       var(--dittam-cw-title-color) !important;
    line-height: 1.3 !important;
    flex:        1 !important;
    background:  none !important;
    border:      none !important;
    box-shadow:  none !important;
}

/* ─── Close button ──────────────────────────────────────────────────────────── */
#dittam-cw-close.dittam-cw-close {
    /* Reset any theme overrides */
    position:        static !important;
    top:             auto !important;
    right:           auto !important;
    left:            auto !important;
    bottom:          auto !important;
    float:           none !important;

    /* Layout */
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    flex-shrink:     0 !important;
    width:           32px !important;
    height:          32px !important;
    padding:         0 !important;
    margin:          0 !important;

    /* Appearance */
    background:      none !important;
    border:          none !important;
    border-radius:   50% !important;
    cursor:          pointer !important;
    color:           var(--dittam-cw-close-color) !important;
    line-height:     1 !important;
    opacity:         1 !important;
    text-indent:     0 !important;
    font-size:       inherit !important;

    transition:      color var(--dittam-cw-transition), background var(--dittam-cw-transition), transform var(--dittam-cw-transition);
}

#dittam-cw-close.dittam-cw-close:hover,
#dittam-cw-close.dittam-cw-close:focus-visible {
    color:      #ffffff !important;
    background: var(--dittam-cw-accent) !important;
    transform:  rotate(90deg) !important;
    outline:    none !important;
}

#dittam-cw-close.dittam-cw-close svg {
    display:      block !important;
    width:        18px !important;
    height:       18px !important;
    stroke:       currentColor !important;
    fill:         none !important;
    stroke-width: 2 !important;
    flex-shrink:  0 !important;
}

/* ─── Subtitle ──────────────────────────────────────────────────────────────── */
#dittam-cw-overlay .dittam-cw-subtitle {
    margin:      0 0 1.25rem !important;
    padding:     0 !important;
    font-size:   0.875rem !important;
    color:       var(--dittam-cw-subtitle-color) !important;
    line-height: 1.5 !important;
    background:  none !important;
}

/* ─── Product summary ───────────────────────────────────────────────────────── */
#dittam-cw-overlay .dittam-cw-product {
    display:       flex !important;
    align-items:   center !important;
    gap:           0.875rem !important;
    padding:       0.875rem !important;
    background:    #f9fafb !important;
    border-radius: calc(var(--dittam-cw-radius) - 4px) !important;
    margin-bottom: 1.375rem !important;
    border:        none !important;
    box-shadow:    none !important;
}

#dittam-cw-overlay .dittam-cw-product-image-wrap {
    flex-shrink:   0 !important;
    width:         68px !important;
    height:        68px !important;
    border-radius: 8px !important;
    overflow:      hidden !important;
    background:    #e5e7eb !important;
}

#dittam-cw-overlay .dittam-cw-product-image {
    width:      100% !important;
    height:     100% !important;
    object-fit: cover !important;
    display:    block !important;
}

#dittam-cw-overlay .dittam-cw-product-info {
    flex:      1 !important;
    min-width: 0 !important;
}

#dittam-cw-overlay .dittam-cw-product-name {
    margin:        0 0 0.25rem !important;
    padding:       0 !important;
    font-size:     0.9375rem !important;
    font-weight:   600 !important;
    color:         var(--dittam-cw-name-color) !important;
    white-space:   nowrap !important;
    overflow:      hidden !important;
    text-overflow: ellipsis !important;
    background:    none !important;
}

#dittam-cw-overlay .dittam-cw-product-price {
    margin:      0 !important;
    padding:     0 !important;
    font-size:   0.875rem !important;
    color:       var(--dittam-cw-price-color) !important;
    font-weight: 500 !important;
    background:  none !important;
}

#dittam-cw-overlay .dittam-cw-product-price .woocommerce-Price-amount {
    color: inherit !important;
}

/* ─── Actions ───────────────────────────────────────────────────────────────── */
#dittam-cw-overlay .dittam-cw-actions {
    display:        flex !important;
    flex-direction: column !important;
    gap:            0.625rem !important;
    padding:        0 !important;
    margin:         0 !important;
    background:     none !important;
}

/* ─── Buttons (base) ────────────────────────────────────────────────────────── */
#dittam-cw-overlay .dittam-cw-btn {
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    gap:             0.5rem !important;
    width:           100% !important;
    padding:         0.8rem 1.25rem !important;
    border:          1px solid transparent !important;
    border-radius:   10px !important;
    font-size:       0.9375rem !important;
    font-weight:     600 !important;
    cursor:          pointer !important;
    line-height:     1.2 !important;
    text-align:      center !important;
    text-decoration: none !important;
    box-sizing:      border-box !important;
    transition:      background-color var(--dittam-cw-transition),
                     color            var(--dittam-cw-transition),
                     border-color     var(--dittam-cw-transition),
                     transform        0.15s ease,
                     box-shadow       var(--dittam-cw-transition) !important;
    -webkit-appearance: none !important;
    appearance:      none !important;
}

#dittam-cw-overlay .dittam-cw-btn:disabled {
    opacity: 0.55 !important;
    cursor:  not-allowed !important;
    transform: none !important;
}

#dittam-cw-overlay .dittam-cw-btn:not(:disabled):active {
    transform: scale(0.97) !important;
}

/* ── Wishlist button ───────────────────────────────────── */
#dittam-cw-btn-wishlist.dittam-cw-btn--wishlist {
    background-color: var(--dittam-cw-btn-wishlist-bg) !important;
    color:            var(--dittam-cw-btn-wishlist-color) !important;
    border-color:     #e5e7eb !important;
}

#dittam-cw-btn-wishlist.dittam-cw-btn--wishlist:not(:disabled):hover,
#dittam-cw-btn-wishlist.dittam-cw-btn--wishlist:not(:disabled):focus-visible {
    background-color: var(--dittam-cw-accent) !important;
    border-color:     var(--dittam-cw-accent) !important;
    color:            #ffffff !important;
    box-shadow:       0 4px 14px rgba(165, 84, 57, 0.35) !important;
    outline:          none !important;
}

/* ── Remove button ─────────────────────────────────────── */
#dittam-cw-btn-remove.dittam-cw-btn--remove {
    background-color: var(--dittam-cw-btn-remove-bg) !important;
    color:            var(--dittam-cw-btn-remove-color) !important;
    border-color:     #e5e7eb !important;
}

#dittam-cw-btn-remove.dittam-cw-btn--remove:not(:disabled):hover,
#dittam-cw-btn-remove.dittam-cw-btn--remove:not(:disabled):focus-visible {
    background-color: var(--dittam-cw-accent) !important;
    border-color:     var(--dittam-cw-accent) !important;
    color:            #ffffff !important;
    box-shadow:       0 4px 14px rgba(165, 84, 57, 0.35) !important;
    outline:          none !important;
}

/* ── Cancel button ─────────────────────────────────────── */
#dittam-cw-btn-cancel.dittam-cw-btn--cancel {
    background-color: transparent !important;
    color:            var(--dittam-cw-btn-cancel-color) !important;
    border-color:     transparent !important;
    font-weight:      500 !important;
}

#dittam-cw-btn-cancel.dittam-cw-btn--cancel:not(:disabled):hover,
#dittam-cw-btn-cancel.dittam-cw-btn--cancel:not(:disabled):focus-visible {
    background-color: var(--dittam-cw-accent) !important;
    border-color:     var(--dittam-cw-accent) !important;
    color:            #ffffff !important;
    outline:          none !important;
}

/* ── Icon inside buttons ───────────────────────────────── */
#dittam-cw-overlay .dittam-cw-icon {
    flex-shrink:  0 !important;
    stroke:       currentColor !important;
    fill:         none !important;
    stroke-width: 2 !important;
    display:      block !important;
}

/* ─── Toast notifications ───────────────────────────────────────────────────── */
#dittam-cw-toast-wrap.dittam-cw-toast-wrap {
    position:       fixed !important;
    bottom:         1.75rem !important;
    left:           50% !important;
    transform:      translateX(-50%) !important;
    z-index:        1000000 !important;
    display:        flex !important;
    flex-direction: column !important;
    align-items:    center !important;
    gap:            0.5rem !important;
    pointer-events: none !important;
    padding:        0 !important;
    margin:         0 !important;
    background:     none !important;
}

.dittam-cw-toast {
    padding:        0.8rem 1.4rem !important;
    border-radius:  8px !important;
    font-size:      0.9375rem !important;
    font-weight:    500 !important;
    color:          #ffffff !important;
    white-space:    nowrap !important;
    max-width:      90vw !important;
    text-align:     center !important;
    pointer-events: auto !important;
    opacity:        0;
    transform:      translateY(10px);
    animation:      dittamCWToastIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
}

.dittam-cw-toast--success { background: var(--dittam-cw-toast-success-bg) !important; }
.dittam-cw-toast--error   { background: var(--dittam-cw-toast-error-bg) !important; }

.dittam-cw-toast.is-hiding {
    animation: dittamCWToastOut 0.25s ease forwards !important;
}

/* ─── Keyframes ─────────────────────────────────────────────────────────────── */
@keyframes dittamCWFadeIn {
    to { opacity: 1; }
}
@keyframes dittamCWFadeOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}
@keyframes dittamCWSlideIn {
    to { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes dittamCWSlideOut {
    from { transform: translateY(0) scale(1); opacity: 1; }
    to   { transform: translateY(16px) scale(0.96); opacity: 0; }
}
@keyframes dittamCWToastIn {
    to { opacity: 1; transform: translateY(0); }
}
@keyframes dittamCWToastOut {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(10px); }
}

/* ─── Mobile ────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    #dittam-cw-overlay .dittam-cw-modal {
        padding:       1.25rem 1.25rem 1.25rem !important;
        border-radius: 12px !important;
    }
    #dittam-cw-overlay .dittam-cw-title {
        font-size: 1.1rem !important;
    }
    #dittam-cw-overlay .dittam-cw-btn {
        font-size: 0.9rem !important;
        padding:   0.7rem 1rem !important;
    }
    #dittam-cw-overlay .dittam-cw-product-image-wrap {
        width:  52px !important;
        height: 52px !important;
    }
}

/* ─── Reduced motion ────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    #dittam-cw-overlay.dittam-cw-overlay,
    #dittam-cw-overlay .dittam-cw-modal,
    .dittam-cw-toast,
    #dittam-cw-overlay .dittam-cw-btn,
    #dittam-cw-close.dittam-cw-close {
        animation:  none !important;
        transition: none !important;
    }
    #dittam-cw-overlay.dittam-cw-overlay.is-open { opacity: 1 !important; }
    #dittam-cw-overlay .dittam-cw-modal           { transform: none !important; opacity: 1 !important; }
    .dittam-cw-toast                               { opacity: 1 !important; transform: none !important; }
}