/* RAJASTHANI PALETTE */
:root {
    --saffron: #FF9933; 
    --royal-blue: #003366;
    --red: #D70040;
    --gold: #FFD700;
    --bg: #FFF5E6;
    --font-heading: 'Rozha One', serif;
    --font-body: 'Poppins', sans-serif;
}

/* BODY */
body { 
    background-color: #f0f0f0; 
    margin: 0; 
    font-family: var(--font-body);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* --- LAYOUT LOGIC (Responsive) --- */
/* Mobile First Approach */
.royal-header, .royal-footer, .container {
    width: 100%;
    margin: 0 auto; 
    background-color: var(--bg);
    box-sizing: border-box;
    /* Laptop par failne ke liye max-width badha di */
    max-width: 1200px; 
}

/* HEADER */
.royal-header {
    background: var(--red);
    color: white;
    text-align: center;
    padding: 15px 10px;
    border-bottom: 5px solid var(--gold);
    position: relative;
}

/* --- YAHAN CHANGE KIYA HAI (Website Name Style) --- */
.brand-name { 
    font-family: var(--font-heading); 
    font-size: 2.7rem; /* Size bada kar diya (pehle 1.5rem tha) */
    margin: 5px 0; 
    text-shadow: 3px 3px 0px #000; /* Shadow thoda heavy kiya style ke liye */
    letter-spacing: 2px; /* Aksharon ke beech gap badhaya stylish look ke liye */
    font-weight: bold;
}
/* -------------------------------------------------- */

.pattern-top { opacity: 0.5; position: absolute; top: 0; width: 100%; height: 10px; background-image: linear-gradient(45deg, var(--gold) 25%, transparent 25%), linear-gradient(-45deg, var(--gold) 25%, transparent 25%); background-size: 20px 20px; }

/* SEARCH BAR */
.search-container { margin-top: 10px; display: flex; justify-content: center; gap: 5px; padding: 0 5px; }
#search-box { padding: 6px 12px; width: 70%; max-width: 400px; border: 2px solid var(--gold); border-radius: 50px; font-size: 0.9rem; outline: none; }
.search-container button { background: var(--gold); border: none; border-radius: 50%; width: 32px; height: 32px; cursor: pointer; font-size: 1rem; }

/* --- MAIN FEED (THE MAGIC) --- */
.container { padding: 10px; flex: 1; }

.feed-grid { 
    display: grid;
    /* MOBILE: 2 Columns */
    grid-template-columns: repeat(2, 1fr); 
    gap: 15px;
}

/* --- LAPTOP / PC VIEW --- */
/* Jab screen 768px se badi ho (Tablet/Laptop) */
@media (min-width: 768px) {
    .feed-grid { 
        /* LAPTOP: 4 Columns */
        grid-template-columns: repeat(4, 1fr); 
    }
    .royal-header, .royal-footer, .container {
        border-radius: 0 0 10px 10px; /* Thoda style laptop ke liye */
    }
}

/* --- NS SHOP LOGO STYLE (Index Page Ke Liye) --- */
.ns-logo-text {
    font-family: var(--font-heading); /* Wahi royal font */
    font-size: 3.1rem;                /* Size kaafi bada kar diya */
    font-weight: 900;                 /* Bohot zyada bold */
    color: #ffffff;                   /* Text ka color white */
    text-shadow: 4px 4px 0px #000;    /* Gehri shadow taaki style dikhe */
    letter-spacing: 3px;              /* Aksharon ke beech gap royal look ke liye */
    margin: 0;
    line-height: 1.1;                 /* Line height set ki taaki text kate nahi */
    text-transform: uppercase;        /* Sab capital mein */
}

/* Jo niche 'Best Deals' likha hai, usko thoda adjust kiya taaki bade logo ke sath sahi lage */
.shop-text {
    font-size: 0.9rem;
    color: var(--gold);
    letter-spacing: 1px;
    font-weight: bold;
    display: block; /* Nayi line mein dikhane ke liye */
    margin-bottom: 10px;
}

/* --- PRODUCT CARD --- */
.product-card {
    background: white;
    border: 1px solid var(--saffron);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    transition: transform 0.2s;
}
.product-card:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }

.img-frame { 
    padding: 0; 
    border-bottom: 1px dashed var(--saffron); 
    background: #fff;
    height: 180px; /* Laptop par photo thodi badi achhi lagti hai */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-img { width: 100%; height: 100%; object-fit: contain; padding: 10px; box-sizing: border-box; }

.card-body { padding: 10px; text-align: center; flex: 1; display: flex; flex-direction: column; justify-content: space-between; }

.product-title { 
    font-weight: 600; 
    color: var(--royal-blue); 
    margin-bottom: 8px; 
    font-size: 0.95rem; 
    line-height: 1.2em;
    height: 2.4em; 
    overflow: hidden;
}

/* BUTTONS */
.btn-amazon {
    background: linear-gradient(to bottom, #FFD700, #FFA500);
    color: black;
    padding: 8px 0;
    border: 1px solid #b8860b;
    border-radius: 5px;
    font-weight: bold;
    text-decoration: none;
    display: block;
    width: 100%;
    margin-bottom: 10px;
    font-size: 0.85rem;
}

.engagement-bar { display: flex; justify-content: space-between; padding: 5px 0; border-top: 1px dotted #ccc; }
.action-btn { background: none; border: none; cursor: pointer; color: #555; font-size: 0.75rem; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.heart-icon { color: var(--red); font-size: 1rem; }

/* COMMENTS */
.comments-section { padding: 5px; background: #fff8f0; border-top: 1px solid #eee; display: none; margin-top: 5px; }
.comments-section.active { display: block; position: absolute; bottom: 0; left: 0; right: 0; background: white; z-index: 10; border: 1px solid #ccc; max-height: 200px; overflow: auto; }
.comment-list { max-height: 100px; overflow-y: auto; text-align: left; margin-bottom: 5px; font-size: 0.75rem; }
.comment-item { padding: 4px 0; border-bottom: 1px solid #eee; }
.comment-form { display: flex; gap: 2px; }
.comment-input { flex: 1; padding: 5px; border: 1px solid #ccc; font-size: 0.8rem; }

/* FOOTER */
.royal-footer { text-align: center; padding: 15px; color: var(--royal-blue); font-size: 0.75rem; border-top: 2px solid var(--saffron); }

/* --- ADMIN & CONTACT PAGE STYLES (NO CHANGE) --- */
.admin-body { background: var(--royal-blue); display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.admin-container { background: white; padding: 20px; border-radius: 12px; width: 90%; max-width: 450px; border: 4px double var(--gold); margin: 0 auto;}
.royal-form input, .royal-form textarea { width: 100%; padding: 10px; margin-bottom: 10px; border: 2px solid #ddd; border-radius: 5px; box-sizing: border-box; }
.btn-royal { background: var(--red); color: white; border: none; padding: 10px; width: 100%; font-weight: bold; cursor: pointer; border-radius: 5px; }
.btn-small { padding: 5px 10px; background: #333; color: white; border: none; border-radius: 4px; cursor: pointer; }
.btn-delete { background: #FF5252; color: white; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; }
.admin-item { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; border: 1px solid #eee; padding: 5px; border-radius: 5px; }
.admin-thumb { width: 40px; height: 40px; object-fit: cover; margin-right: 10px; }
#toast-box { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 10px; z-index: 1000; }
.toast { padding: 10px 15px; border-radius: 5px; color: white; font-weight: bold; font-size: 0.9rem; }
.toast.success { background: #28a745; } .toast.error { background: #dc3545; }
.back-link { display: inline-block; margin-top: 10px; color: white; text-decoration: none; font-weight: bold; border: 1px solid white; padding: 5px 10px; border-radius: 20px; font-size: 0.8rem; }
.back-link:hover { background: white; color: var(--red); }
.contact-card { background: white; border: 4px double var(--gold); border-radius: 15px; padding: 20px; text-align: center; box-shadow: 0 5px 15px rgba(0,0,0,0.1); margin-top: 20px;}
.profile-frame { width: 100px; height: 100px; margin: 0 auto 10px; border-radius: 50%; padding: 5px; border: 2px dashed var(--saffron); }
.profile-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.royal-title { font-family: var(--font-heading); color: var(--royal-blue); margin: 5px 0; }
.social-links { display: flex; flex-direction: column; gap: 10px; margin-top: 15px; }
.social-btn { padding: 12px; text-decoration: none; color: white; font-weight: bold; border-radius: 8px; transition: transform 0.2s; display: block; }
.social-btn:hover { transform: translateY(-3px); }
.insta { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.fb { background: #1877F2; }
.mail { background: #EA4335; }