/* =========================
   ILKIM DESIGN SYSTEM
   Shopify-inspired clean UI
========================= */

/* RESET */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* GLOBAL BODY */
body{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial;
    color:white;
    

    min-height:100vh;

    background:
    linear-gradient(rgba(0,0,0,0.40), rgba(0,0,0,0.55)),
    url("../images/bg.jpg") center center/cover no-repeat fixed;
    position:relative;

    overflow-x:hidden;
}   
/* LIGHT OVERLAY (readability layer) */
/* BACKGROUND OVERLAY */
body::before {
    content: "";
    position: fixed;
    inset: 0;

    background: rgba(0, 0, 0, 0.35);

    z-index: -1;
}

/* =========================
   LAYOUT
========================= */
.container {
    width: 92%;
    max-width: 1200px;
    margin: auto;
    padding: 20px 0;
}

/* =========================
   NAVBAR
========================= */
/* =========================
   NAVBAR
========================= */

nav{
    position:sticky;
    top:0;
    z-index:1000;

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:18px 40px;

    background:rgba(20,20,20,0.35);
    backdrop-filter:blur(14px);

    border-bottom:1px solid rgba(255,255,255,0.08);
}

nav .logo{
    font-size:24px;
    font-weight:700;
    color:white;
    letter-spacing:2px;
    text-decoration:none;
}

nav ul{
    display:flex;
    align-items:center;
    gap:25px;
    list-style:none;
}

nav a{
    color:rgba(255,255,255,0.88);
    text-decoration:none;
    font-size:14px;
    font-weight:500;
    transition:0.25s;
}

nav a:hover{
    color:white;
}
/* =========================
   GRID / PRODUCTS
========================= */
.grid{
    display:grid;
     justify-content:center;
    align-content:start;
    gap:20px;
    justify-content:center;
    grid-template-columns:repeat(auto-fit, minmax(220px, 300px));
}

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

.card img{
    width:100%;
    aspect-ratio: 3 / 4;
    object-fit:cover;
}

.card:hover{
    transform:translateY(-10px) scale(1.02);

    box-shadow:
    0 20px 50px rgba(0,0,0,0.35);

    border:1px solid rgba(255,255,255,0.18);
}



/* REMOVE WHITE CONTENT BOX LOOK */
.card-content{
    padding:18px;
    background:transparent;
}

/* TEXT */
.card h3{
    color:white;
    font-size:18px;
    margin-bottom:8px;
}

.card p{
    color:rgba(255,255,255,0.7);
}
/* =========================
   BUTTONS
========================= */
.btn,
.admin-btn{

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

    padding:12px 18px;

    background:rgba(255,255,255,0.12);

    backdrop-filter:blur(10px);

    border:1px solid rgba(255,255,255,0.12);

    color:white;

    border-radius:14px;

    text-decoration:none;

    font-size:14px;

    transition:0.25s ease;

    cursor:pointer;
}

.btn:hover,
.admin-btn:hover{

    background:rgba(255,255,255,0.18);

    transform:translateY(-2px);
}
/* =========================
   PRODUCT PAGE
========================= */
.product-layout {
    display: flex;
    gap: 50px;
    margin-top: 40px;
    flex-wrap: wrap;
}

.product-layout img {
    width: 420px;
    max-width: 100%;
    border-radius: 14px;
}

.product-info h1 {
    font-size: 28px;
    margin-bottom: 10px;
}

.product-info p {
color:rgba(255,255,255,0.85);    margin-bottom: 20px;
}

/* =========================
   CART
========================= */
.cart-item {
    background: white;
    padding: 16px;
    border-radius: 12px;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.full-bleed-products {
    width: 100%;
    padding: 70px 40px;
}
.full-bleed-products .grid {
    width: 100%;
    max-width: none;
}
/* =========================
   ADMIN SYSTEM (UPGRADED)
========================= */

/* ADMIN WRAPPER */
.admin-container {
    width: 92%;
    max-width: 1100px;
    margin: auto;
    padding: 30px 0;
}
.admin-container label{
    color:white;
    display:block;
    margin-top:14px;
    margin-bottom:6px;
    font-weight:600;
}
/* TOP BAR */
.admin-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eaeaea;
}

.admin-topbar h1 {
    font-size: 22px;
    margin: 0;
}

/* STATS GRID */
.admin-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin: 25px 0;
}

/* STAT CARD */
.admin-card {
    background: white;
    padding: 22px;
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.06);
    text-align: center;
    transition: 0.2s ease;
}

.admin-card:hover {
    transform: translateY(-4px);
}

.admin-card h2 {
    font-size: 32px;
    margin: 0;
}

/* SECTION TITLE */
.section-title {
    font-size: 18px;
    margin: 30px 0 10px;
    font-weight: 600;
}

/* LIST WRAPPER */
.admin-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* LIST ITEM (MODERN CARD ROW) */
.admin-list-item {
    background: white;
    padding: 16px 18px;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.05);

    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: 0.2s ease;
}

.admin-list-item:hover {
    transform: translateY(-2px);
}

.admin-list-item h3 {
    margin: 0;
    font-size: 15px;
}

.admin-list-item p {
    margin: 4px 0;
color:rgba(255,255,255,0.85);    font-size: 13px;
}

.admin-list-item small {
    color: #999;
}

/* STATUS BADGE */
.status-badge {
    background: #111;
    color: white;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 12px;
}
/* =========================
   FORMS
========================= */
input, textarea {
    width:100%;
    padding:14px;
    margin:10px 0;
    border-radius:14px;
    border:1px solid rgba(255,255,255,0.1);
    background:rgba(255,255,255,0.06);
    color:white;
    outline:none;
    backdrop-filter:blur(10px);
}

input::placeholder,
textarea::placeholder {
    color:rgba(255,255,255,0.5);
}

input:focus,
textarea:focus {
    border-color:rgba(255,255,255,0.25);
}

input:focus, textarea:focus {
    border-color: #111;
}

/* =========================
   FOOTER
========================= */


.footer{
    margin-top:80px;

    width:100vw;

    position:relative;
    left:50%;
    right:50%;

    margin-left:-50vw;
    margin-right:-50vw;

    padding:35px 20px;

    background:transparent;

    backdrop-filter:none;

    border:none;

    text-align:center;

    color:rgba(255,255,255,0.75);
}

.footer-container{
    width:92%;
    max-width:1200px;
    margin:auto;
}

.footer-links{
    margin-top:12px;
}

.footer-links a{
    color:rgba(255,255,255,0.75);
    text-decoration:none;
    margin:0 12px;
    transition:0.25s;
}

.footer-links a:hover{
    color:white;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 768px) {
    .product-layout {
        flex-direction: column;
    }

    nav {
        flex-direction: column;
        gap: 10px;
    }
}
html, body {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

    

body {
    min-height: 100vh;
    display: flex;
    margin: 0;
    flex-direction: column;
}.card,
.admin-card,
.admin-list-item {
    background: rgba(255,255,255,0.06) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.08);
    color: white;
}