*{box-sizing:border-box}body{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,Helvetica,sans-serif;margin:0;color:#222;background:#f7f7fb}h1,h2,h3{margin:0}a{color:inherit}
.container{max-width:1100px;margin:0 auto;padding:16px}
.site-header{background:#fff;border-bottom:1px solid #e6e6ef}
.site-header .container{display:flex;align-items:center;justify-content:space-between;padding:12px 16px}
.cart-btn{background:#0ea5a4;color:#fff;border:0;padding:8px 12px;border-radius:6px;cursor:pointer}
.products-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;padding:20px 0}
.card{background:#fff;border-radius:10px;padding:12px;border:1px solid #eaeaf5;display:flex;flex-direction:column}
.card img{width:100%;height:150px;object-fit:cover;border-radius:6px;cursor:pointer}
.card .meta{padding:8px 2px;flex:1}
.card h3{font-size:16px;margin-bottom:6px}
.card p{margin:0;color:#666;font-size:13px}
.card .price-add{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.price{font-weight:700}
.add-btn{background:#2563eb;color:#fff;border:0;padding:8px 10px;border-radius:6px;cursor:pointer}

/* Cart Drawer */
.cart-drawer{position:fixed;right:-420px;top:0;bottom:0;width:380px;background:#fff;box-shadow:-12px 0 30px rgba(16,24,40,0.08);transition:right .25s ease;padding:16px;z-index:60}
.cart-drawer.open{right:0}
.cart-header{display:flex;align-items:center;justify-content:space-between}
.close-btn{background:transparent;border:0;font-size:22px;cursor:pointer}
.cart-items{margin-top:12px;max-height:60vh;overflow:auto}
.cart-item{display:flex;gap:10px;padding:8px 0;border-bottom:1px dashed #eee}
.cart-item img{width:64px;height:48px;object-fit:cover;border-radius:6px}
.cart-item .ci-meta{flex:1}
.qty-controls{display:flex;align-items:center;gap:8px;margin-top:6px}
.qty-controls button{width:28px;height:28px;border-radius:6px;border:1px solid #ddd;background:#fff;cursor:pointer}
.cart-footer{border-top:1px solid #eee;padding-top:12px;margin-top:12px}
.cart-actions{display:flex;gap:8px;justify-content:flex-end}
.primary{background:#111827;color:#fff;border:0;padding:8px 12px;border-radius:6px;cursor:pointer}
.secondary{background:#fff;border:1px solid #d1d5db;padding:8px 12px;border-radius:6px;cursor:pointer}

/* Modal */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(10,11,13,0.45);z-index:80}
.modal[aria-hidden="false"]{display:flex}
.modal-content{background:#fff;padding:18px;border-radius:8px;max-width:420px;width:100%;position:relative}
.modal-content label{display:block;margin:8px 0}
.modal-content input,.modal-content textarea{width:100%;padding:8px;border:1px solid #e6e6ef;border-radius:6px;margin-top:6px}
.form-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}

.toast{position:fixed;left:50%;transform:translateX(-50%);top:24px;background:#0ea5a4;color:#fff;padding:10px 14px;border-radius:8px;display:none;z-index:100}
.toast.show{display:block}

/* Image modal overrides */
.image-modal .modal-content{background:transparent;padding:0;border-radius:0;max-width:90vw;max-height:90vh;display:flex;align-items:center;justify-content:center}
.image-modal .image-modal-content img{max-width:100%;max-height:90vh;border-radius:8px;box-shadow:0 8px 30px rgba(2,6,23,0.6)}
.image-modal .close-btn{position:absolute;right:12px;top:12px;background:rgba(0,0,0,0.5);color:#fff;border-radius:6px;padding:6px 10px}
.image-caption{margin-top:8px;color:#fff;text-align:center;font-weight:600}

/* Alert Box */
.alert{background:#fffae6;border:1px solid #ffe58f;color:#664d03;padding:10px 14px;border-radius:6px;margin-top: 12px; margin-bottom: 12px;font-size:14px}

@media (max-width:640px){.cart-drawer{width:100%;} .products-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* 2. Overlay Styles */
#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Dark, semi-transparent background */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Ensure it covers everything */
    /* Initial state: hidden */
}
.hidden {
    display: none !important;
}

/* 3. Spinner Styles */
@keyframes spin {
    to { transform: rotate(360deg); }
}
.spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(255, 255, 255, 0.3); /* Light border color */
    border-top-color: #4A90E2; /* Primary loading color (Blue) */
    border-radius: 50%;
    animation: spin 1s linear infinite;
}