/* ==================================================
   OJA EDE - WISHLIST
================================================== */

:root{

--primary:#0a8f3c;
--primary-dark:#087533;
--secondary:#f5f7fa;
--white:#fff;
--text:#222;
--muted:#777;
--border:#e8e8e8;
--danger:#e74c3c;
--success:#2ecc71;
--shadow:0 10px 25px rgba(0,0,0,.08);
--radius:18px;

}

*{

margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial,sans-serif;

}

body{

background:var(--secondary);
color:var(--text);
padding-bottom:80px;

}



/* ===========================
HEADER
=========================== */

.wishlist-header{

position:sticky;

top:0;

background:#fff;

display:flex;

justify-content:space-between;

align-items:center;

padding:18px 20px;

box-shadow:0 3px 10px rgba(0,0,0,.08);

z-index:100;

}

.header-left{

display:flex;

align-items:center;

gap:15px;

}

.back-btn{

width:45px;

height:45px;

border:none;

border-radius:50%;

background:#eef8f1;

color:var(--primary);

font-size:20px;

cursor:pointer;

transition:.25s;

}

.back-btn:hover{

background:var(--primary);

color:#fff;

}

.header-left h1{

font-size:24px;

font-weight:800;

margin-bottom:4px;

}

.header-left p{

color:var(--muted);

font-size:14px;

}

.refresh-btn{

width:45px;

height:45px;

border:none;

border-radius:50%;

background:#eef8f1;

color:var(--primary);

font-size:20px;

cursor:pointer;

}



/* ===========================
SUMMARY
=========================== */

.summary-section{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(180px,1fr));

gap:18px;

padding:20px;

}

.summary-card{

background:#fff;

padding:22px;

border-radius:18px;

text-align:center;

box-shadow:var(--shadow);

transition:.25s;

}

.summary-card:hover{

transform:translateY(-4px);

}

.summary-card h5{

color:var(--muted);

margin-bottom:10px;

}

.summary-card h2{

font-size:30px;

color:var(--primary);

}



/* ===========================
SEARCH
=========================== */

.search-section{

padding:0 20px 20px;

}

.search-section input{

width:100%;

padding:15px;

border:1px solid var(--border);

border-radius:12px;

outline:none;

font-size:15px;

}

.search-section input:focus{

border-color:var(--primary);

}



/* ===========================
SORT
=========================== */

.sort-section{

padding:0 20px 20px;

}

.sort-section select{

width:100%;

padding:14px;

border-radius:12px;

border:1px solid var(--border);

background:#fff;

}



/* ===========================
GRID
=========================== */

.wishlist-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(300px,1fr));

gap:22px;

padding:0 20px;

}



/* ===========================
CARD
=========================== */

.wishlist-card{

background:#fff;

border-radius:20px;

overflow:hidden;

box-shadow:var(--shadow);

transition:.25s;

}

.wishlist-card:hover{

transform:translateY(-5px);

}

.wishlist-card img{

width:100%;

height:240px;

object-fit:cover;

background:#eee;

}

.wishlist-body{

padding:18px;

}

.wishlist-title{

font-size:20px;

font-weight:700;

margin-bottom:8px;

}

.wishlist-store{

color:var(--muted);

font-size:14px;

margin-bottom:10px;

}

.wishlist-price{

font-size:24px;

font-weight:800;

color:var(--primary);

margin-bottom:15px;

}

.stock{

display:inline-block;

padding:7px 14px;

border-radius:20px;

font-size:13px;

font-weight:700;

margin-bottom:15px;

}

.stock.in{

background:#d4edda;

color:#155724;

}

.stock.out{

background:#f8d7da;

color:#721c24;

}



/* ===========================
BUTTONS
=========================== */

.card-actions{

display:grid;

grid-template-columns:1fr 1fr;

gap:10px;

margin-top:15px;

}

.card-actions button{

border:none;

padding:12px;

border-radius:10px;

cursor:pointer;

font-weight:700;

transition:.25s;

}

.view-btn{

background:#3498db;

color:#fff;

}

.cart-btn{

background:var(--primary);

color:#fff;

}

.remove-btn{

grid-column:span 2;

background:var(--danger);

color:#fff;

}



/* ===========================
EMPTY
=========================== */

.empty-state{

display:flex;

justify-content:center;

padding:70px 20px;

}

.empty-card{

background:#fff;

padding:40px;

border-radius:20px;

text-align:center;

max-width:450px;

box-shadow:var(--shadow);

}

.empty-icon{

font-size:70px;

margin-bottom:20px;

}

.empty-card h2{

margin-bottom:15px;

}

.empty-card p{

color:var(--muted);

line-height:1.7;

margin-bottom:25px;

}

.primary-btn{

border:none;

padding:14px 30px;

border-radius:12px;

background:var(--primary);

color:#fff;

font-weight:700;

cursor:pointer;

}



/* ===========================
LOADING
=========================== */

.loading-state{

padding:70px;

text-align:center;

}

.loader{

width:55px;

height:55px;

margin:auto;

border:5px solid #ddd;

border-top:5px solid var(--primary);

border-radius:50%;

animation:spin 1s linear infinite;

margin-bottom:20px;

}

@keyframes spin{

to{

transform:rotate(360deg);

}

}



/* ===========================
PAGINATION
=========================== */

.pagination{

display:flex;

justify-content:center;

align-items:center;

gap:20px;

margin:40px 0;

}

.pagination button{

border:none;

padding:12px 20px;

border-radius:10px;

background:var(--primary);

color:#fff;

cursor:pointer;

}

.pagination button:disabled{

opacity:.4;

cursor:not-allowed;

}



/* ===========================
MODAL
=========================== */

.modal{

display:none;

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:rgba(0,0,0,.45);

justify-content:center;

align-items:center;

z-index:9999;

}

.modal-content{

background:#fff;

padding:30px;

width:90%;

max-width:420px;

border-radius:18px;

text-align:center;

box-shadow:var(--shadow);

}

.modal-content h2{

margin-bottom:15px;

}

.modal-content p{

color:var(--muted);

margin-bottom:25px;

line-height:1.7;

}

.modal-actions{

display:flex;

gap:12px;

}

.modal-actions button{

flex:1;

padding:12px;

border:none;

border-radius:10px;

cursor:pointer;

font-weight:700;

}

.cancel-btn{

background:#ddd;

}

.delete-btn{

background:var(--danger);

color:#fff;

}



/* ===========================
RESPONSIVE
=========================== */

@media(max-width:768px){

.wishlist-header{

flex-direction:column;

align-items:flex-start;

gap:15px;

}

.summary-section{

grid-template-columns:repeat(2,1fr);

}

.wishlist-grid{

grid-template-columns:1fr;

}

.card-actions{

grid-template-columns:1fr;

}

.remove-btn{

grid-column:span 1;

}

.refresh-btn{

display:none;

}

}

.wishlist-btn{

width:42px;

height:42px;

border:none;

border-radius:50%;

background:white;

cursor:pointer;

font-size:20px;

box-shadow:0 2px 8px rgba(0,0,0,.15);

transition:.25s;

}

.wishlist-btn:hover{

transform:scale(1.08);

}

.wishlist-btn.saved{

background:#ffebee;

color:#e53935;

}

.product-image{

position:relative;

}

.wishlist-btn{

position:absolute;

top:12px;

right:12px;

z-index:5;

}