:root{
--header-h: 56px; /* default header height */
--footer-h: 64px; /* default footer height */
--safe-top: env(safe-area-inset-top, 0px);
--safe-bottom: env(safe-area-inset-bottom, 0px);

/* ===== Base surfaces ===== */
/* Base */
--bg-page: #f3f4f6; /* slightly darker gray */
--bg-surface: #ffffff;
--bg-muted: #f1f5f9;
--bg-soft: #f9fafb; /* subtle blocks */

/* ===== Section separators ===== */
--bg-category: #e0f2fe; /* light blue */
--bg-filter: #f0fdf4; /* light green */
--bg-highlight: #fef3c7; /* light yellow */

/* ===== Text ===== */
--text-main: #111827; /* darker = premium */
--text-muted: #6b7280;
--text-light: #9ca3af;

/* ===== Borders & shadows ===== */
--border-soft: #e5e7eb;
--shadow-soft: 0 4px 14px rgba(0,0,0,0.06);

/* ===== Accent (ONLY ONE) ===== */
--accent: #2563eb; /* keep blue */
--accent-soft: #e0e7ff;

/* ===== Status (optional) ===== */

--warning: #d97706;
--success: #16a34a;
--danger: #dc2626;


--address-h: 42px; /* start here */

}

html, body {
height: 100%;
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
font-family: "Segoe UI", Roboto, Inter, system-ui, Arial, sans-serif;
background: var(--bg-page);
color: var(--text-main);
}


/* Layout: header fixed, footer fixed, content scrolls */
.app-shell {
position:relative;
width:100%;
height:100%;
background: var(--bg-page);
/* --app-height is set by JS to avoid mobile 100vh bugs */
height: var(--app-height, 100vh);
overflow:hidden; /* content scroll only inside app-content */
}

/* --- START : app header and footer */
.app-header {
position:fixed;
top:0;
left:0;
right:0;
height: calc(var(--header-h) + var(--safe-top));
padding-top: var(--safe-top);
display:flex;
align-items:center;
justify-content:space-between;
padding-left:12px;
padding-right:12px;
box-shadow: 0 1px 8px rgba(0,0,0,0.06);
z-index:1100;
}

.app-header .brand {
font-weight:700;
font-size:1.05rem;
letter-spacing:0.2px;
}

.app-footer {
position:fixed;
left:0;
right:0;
bottom:0;
height: calc(var(--footer-h) + var(--safe-bottom));
padding-bottom: var(--safe-bottom);
display:flex;
align-items:center;
justify-content:space-around;

border-top:1px solid #eee;
z-index:1100;
box-shadow:0 -1px 6px rgba(0,0,0,0.04);
}

.app-header,
.app-footer {
background: var(--bg-surface);
border-color: var(--border-soft);
}


.app-content {
position: absolute;
left: 0;
right: 0;

/* SAFE DEFAULTS — NO GAP */
top: 0;
bottom: 0;

overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 0px 4px 0px 4px;
box-sizing: border-box;
background: var(--bg-page);
}


/* --- END : app header and footer */


/* Content cards */



/* Buttons and touch targets */
.btn-tap {
padding:10px 14px;
font-size:15px;
border-radius:10px;
}

/* small screens: slightly larger header/footer for better tap targets */
@media (max-width:420px){
:root {
--header-h: 60px;
--footer-h: 68px;
}
.product-card img {
width:72px;
height:72px;
}
}


/*
-----------------SECTION : ----------------- Fixed address bar: inline + horizontal scroll ---- */
.address-bar {
position: fixed;
top: calc(var(--header-h) + var(--safe-top));
left: 0;
right: 0;
background: #fff;
padding: 10px 12px;
z-index: 1090;
box-shadow: 0 1px 6px rgba(0,0,0,0.05);
display: flex;
align-items: center;
gap: 10px;
border-bottom: 1px solid #eee;
}

/* horizontal scroller ----------------------------start */
.address-scroll {
display: flex;
align-items: center;
gap: 8px;
overflow-x: auto; /* enable horizontal scroll */
-webkit-overflow-scrolling: touch; /* smooth on iOS */
white-space: nowrap; /* prevent wrapping */
flex: 1 1 auto;
padding-bottom: 2px;
margin-right: 8px; /* space before Change button */
position: relative;
}
/* hide scrollbar visually (still scrolls) */
.address-scroll::-webkit-scrollbar { height: 6px; display: none; }
.address-scroll { scrollbar-width: none; -ms-overflow-style: none; }

/* each chunk doesn't wrap (stays on one line) */

.address-item { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.address-title { font-weight: 600; font-size: .95rem; }
.address-line, .address-sub { font-size: .92rem; color: #444; }
.address-mob { font-weight: 600; margin-left: 8px; }

/* subtle fade on the right to indicate more content */
/* subtle right fade hint */
.address-scroll::after {
content: "";
position: absolute;
right: 44px; top: 0; bottom: 0;
width: 36px;
pointer-events: none;
background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,1));
}

/* horizontal scroller ----------------------------end */


/* make change button a bit tighter on mobile */
.address-change-btn { border-radius: 8px; padding: 6px 10px; font-size: .85rem; }


/* --*-*
-----------------SECTION : ----------------- Category scroller */
/* container */
.cat-wrap {
margin: 0px 4px 0px 4px;
background: var(--bg-category);
border-radius: 12px;
padding: 0px 4px 0px 4px;
}

/* scroller */
.category-row {
display: flex;
gap: 10px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding: 10px 8px;
scroll-snap-type: x mandatory;
background: #dbeafe;
border-radius: 12px;
box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
.category-row::-webkit-scrollbar { display: none; }

/* tile */
.cat-item {
flex: 0 0 auto;
width: 60px;
min-width: 40px; /* tile width */
text-align: center;
align-items: center; /* center image & label horizontally */
scroll-snap-align: start;
cursor: pointer;
flex-direction: column;
margin-right: 1px;
padding: 1px 1px;
scroll-snap-align: start;
margin-right: 1px;
display: flex;
box-sizing: border-box;
color: inherit;
}

/* image container: use flex to center perfectly */
.cat-img {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}

/* image: single authoritative rule */
.cat-img img, .cat-thumb {
width: 50px !important; /* force correct size while cleaning other rules */
height: 50px !important;
object-fit: cover;
border-radius: 10%;
display: block;
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
margin-bottom: 6px;
}


/* ==============
START search bar
==================*/
.search-bar-wrap {
position: fixed;
top: calc(
var(--header-h) +
var(--safe-top) +
var(--address-h)
);
left: 0;
right: 0;
padding: 2px 12px;
background: var(--bg-surface);
}


/* ------------ Search bar styling */
.search-bar {
background: var(--bg-muted);
border-radius: 10px;
padding: 8px 12px;
display: flex;
align-items: center;
gap: 8px;
}

.search-bar i {
font-size: 1.2rem;
color: #555;
}

.search-bar input {
border: none;
width: 100%;
outline: none;
font-size: .95rem;
}

.search-bar {
display: flex;
align-items: center;
gap: 8px;
background: var(--bg-muted);
padding: 8px;
border-radius: 8px;
}

/* END ---------- : search bar */



/* ==============
START cat-section
==================*/

.cat-section {
margin-top: 1px;
padding: 1px 0;
background: var(--bg-page); /* stays neutral */
}


.cat-title-box {
background: var(--accent-soft);
color: var(--text-main);
padding: 2px 10px;
border-radius: 10px;
margin-top:1px;
text-align: center;
font-weight: 700;
font-size: .80rem; /* slightly smaller */
margin-bottom: 0px; /* reduced */
}

.cat-seeall-box {
background: var(--accent-soft);
color: var(--text-main);
padding: 0px 8px 0px 8px;
border-radius: 10px;
text-align: center;
font-weight: 600;
font-size: .80rem;
margin-top: 1px;
cursor: pointer;
}

/* optional hover */
.cat-seeall-box:hover {
background: #fde68a;
}

.cat-seeall-box a {
text-decoration: none;
color: inherit;
display: block;
}


/* add to cart button settings */
.qty-block{
display:flex;
flex-direction:column;
align-items:center;
gap:6px;
margin-top:6px;
}

.qty-column{
display:flex;
flex-direction:column;
align-items:center;
gap:4px;
}

.qb{
width:32px;
height:28px;
border:1.5px solid #000;
background:#fff;
font-size:16px;
display:flex;
justify-content:center;
align-items:center;
cursor:pointer;
border-radius:4px;
user-select:none;
padding:0;
}

.qb.qty{
width:36px;
font-weight:600;
font-size:14px;
}

.add-cart-btn{
padding:6px 12px;
border:1.5px solid red;
color:red;
background:#fff;
border-radius:8px;
font-size:13px;
font-weight:600;
text-transform:uppercase;
margin-top:4px;
cursor:pointer;
}

/* model code */
.modelset1 {
display:none;
position:fixed;
inset:0;
z-index:9999;
background:rgba(0,0,0,.5);
align-items:center;
justify-content:center;
padding:16px;
}

.modelDivset1{
background:#fff;
max-width:520px;
width:100%;
margin-top:10px;
border-radius:8px;
padding:16px;
box-shadow:0 6px 30px rgba(0,0,0,.2);
position:relative;
}

.modelbtn1{
position:absolute;
right:12px;
top:12px;
border:none;
background:none;
font-size:20px;
cursor:pointer;
}

.modelDivset2{
display:flex;
gap:8px;
align-items:flex-start;
}

.modelimg1{
width:120px;
height:120px;
object-fit:cover;
border-radius:6px;
background:#eee
}
.modelh3set1 {
margin:10 0 6px 0;
font-size:16px;
font-weight:600
}
.modelDivset3 {font-size:12px;color:#444;margin-bottom:6px}
.modeldivset5{font-weight:600;margin-bottom:8px;font-size:14px}
.modeldivset6{display:flex;gap:8px;align-items:center;margin-bottom:10px}

.modeldivSet7{display:flex;gap:4px;align-items:center;margin-left:auto}
.modelspan1{font-size:12px;color:#666;margin-left:4px}

.modelinput1{
width:44px;
text-align:center;
border-radius:2px;
}

.modelDivSet8{display:flex;gap:12px;align-items:center}
.modelDivSet9{font-weight:700;font-size:12px}
.modelDivSet10{color:#777;font-size:12px;margin-left:auto}
.modelDivSet11{margin-top:12px;display:flex;gap:8px}

.modelbtn2{
flex:1;
padding:4px;
font-size:12px;
border-radius:4px;
border:none;
background:#007bff;
color:#fff;
font-weight:600;
cursor:pointer}

.modelbtn3{
padding:6px;
border-radius:4px;
font-size:12px;
border:1px solid #ccc;
background:#fff;
cursor:pointer
}

#closeModal {
position: absolute;
top: 12px;
right: 12px;
width: 32px;
height: 32px;
border: none;
border-radius: 4px;
background: red; /* solid red */
color: #fff; /* white cross */
font-size: 20px;
font-weight: bold;
cursor: pointer;
line-height: 32px;
text-align: center;
padding: 0;
}


.items-grid { display:flex; flex-wrap:wrap; gap:2px; margin-top:8px; }

.product-card {
display:flex;
gap:6px;
align-items:center;
width:100%;
padding:4px;
border-radius:8px;
box-shadow:0 2px 6px rgba(0,0,0,0.03);
background: var(--bg-surface);
border: 1px solid var(--border-soft);
margin-bottom:2px;
position:relative;
}

.product-card img {
width:64px;
height:64px;
object-fit:cover;
border-radius:8px;
}


.pagination { display:flex; gap:8px; align-items:center; justify-content:center; margin:18px 0; flex-wrap:wrap; }
.pagination .page { padding:8px 12px; border-radius:6px; text-decoration:none; border:1px solid #e3e3e3; color:inherit; }
.pagination .page.current { background:#222; color:#fff; border-color:#222; }
.pagination .page.disabled { color:#aaa; border-color:#f0f0f0; background:#fafafa; pointer-events:none; }
.pagination .dots { padding:8px 6px; color:#888; }

/* for ajax serch */
/* ajax loader + small style */

#products-container.ajax-loading { opacity: 0.8; position: relative; }

#products-container .ajax-spinner {
position: absolute;
top: 8px;
right: 12px;
display: flex;
gap: 6px;
align-items: center;
z-index: 30;
pointer-events: none;
}
#products-container .ajax-spinner .dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #444;
opacity: 0.9;
transform: translateY(0);
animation: bounce 900ms infinite ease-in-out;
}
#products-container .ajax-spinner .dot:nth-child(2) { animation-delay: 120ms; }
#products-container .ajax-spinner .dot:nth-child(3) { animation-delay: 240ms; }

@keyframes bounce {
0%, 100% { transform: translateY(0); opacity: 0.6; }
50% { transform: translateY(-6px); opacity: 1; }
}

/* keep accessible focus visuals */
#products-container [tabindex="-1"]:focus { outline: 3px solid rgba(34,34,34,0.12); }


#simpleModal {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.5);
display: none;
align-items: center;
justify-content: center;
z-index: 9999;
}

.modal-box {
background: white;
padding: 20px;
border-radius: 10px;
max-width: 450px;
width: 90%;
position: relative;
}

.modal-close {
position: absolute;
top: 8px;
right: 8px;
border: none;
background: red;
color: white;
font-size: 18px;
border-radius: 4px;
cursor: pointer;
}

.modal-body img {
width: 100%;
}


/* css for footer accout button*/
.account-toggle {
position: relative;
cursor: pointer;
}

.account-toggle input[type="checkbox"] {
display: none; /* hide the checkbox */
}

.account-btn {
padding: 8px 12px;
background: #eee;
border-radius: 6px;
display: inline-block;
}

.account-menu {
position: absolute;
bottom: 40px; /* footer ke upar aayega */
right: 0;
background: white;
border-radius: 8px;
padding: 10px;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
display: none; /* hidden by default */
z-index: 9999;
}

.account-menu a {
display: block;
padding: 6px 10px;
color: black;
text-decoration: none;
}

.account-menu a:hover {
background: #f2f2f2;
}

/* SHOW MENU WHEN CHECKED */
.account-toggle input[type="checkbox"]:checked ~ .account-menu {
display: block;
}

/* click outside closes menu */
#accountCheck:checked ~ .account-menu {
pointer-events: auto;
}

body:has(#accountCheck:checked) {
cursor: default;
}







/* Category list — drop into your main stylesheet */

/* Container (if you included the PHP fragment inside #categoryRow) */
#categoryRow {
display: flex;
flex-wrap: wrap; /* allow multiple rows on wide screens */
gap: 12px; /* space between tiles */
align-items: flex-start;
padding: 4px 10px;
margin: 0;
list-style: none;
box-sizing: border-box;
}

/* Individual anchor tile */
.category-link {
display: flex;
flex-direction: column;
align-items: center;
width: 88px; /* tile width — tweak to taste */
min-width: 72px;
text-align: center;
text-decoration: none;
color: inherit;
background: #3b949536;
border-radius: 6px;
padding: 6px;
transition: transform .15s ease, box-shadow .15s ease;
box-sizing: border-box;
cursor: pointer;
}

/* Hover / focus micro-interaction */
.category-link:hover,
.category-link:focus {
transform: translateY(-3px);
box-shadow: 0 6px 16px rgba(0,0,0,0.08);
outline: none;
}

/* Icon / image */
.cat-icon {
width: 52px;
height: 52px;
object-fit: cover; /* keep aspect ratio, crop if needed */
border-radius: 4px;
display: block;
margin-bottom: 2px;
background: #294f4c00; /* fallback background so icons keep their shape */
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

/* Smaller icon state if fallback applied */
.cat-icon.small,
.cat-icon[aria-hidden="true"] {
width: 44px;
height: 44px;
opacity: .7;
}

/* Category name label */
.cat-name {
display: block;
font-size: 13px;
line-height: 1.1;
color: #222;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
height: 1.0em; /* keep approximate two lines space */
width: 60px; /* visually align with tile */
margin: 0 auto;
}

/* Error / empty states */
.cat-error,
.cat-empty {
padding: 10px 12px;
color: #7a1f1f;
background: #fff6f6;
border-radius: 6px;
font-size: 13px;
}

/* Responsive — make tiles flow horizontally on small screens when used as a scroller */
@media (max-width: 640px) {
#categoryRow {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
flex-wrap: nowrap;
}
.category-link {
width: 80px;
padding: 8px 6px;
}
.cat-name { font-size: 12px; }
}

/* Accessibility: focus visible */
.category-link:focus-visible {
box-shadow: 0 0 0 3px rgba(40, 120, 255, 0.16);
}


/* style for the php file pencil */
/* Admin pencil edit icon */
.admin-edit-btn {
position: absolute;
top: 6px;
right: 6px;
background: rgba(0,0,0,0.65);
color: #fff;
width: 28px;
height: 28px;
border-radius: 50%;
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
z-index: 10;
}

.admin-edit-btn:hover {
background: #d32f2f;
color: #fff;
}


/* Admin pencil on category */
.cat-edit-btn {
top: 4px;
right: 4px;
width: 24px;
height: 24px;
font-size: 12px;
}


/* Admin pencil on category (does NOT affect layout) */
.category-link {
position: relative; /* safe: keeps existing layout */
}

.cat-edit-btn {
top: 4px;
right: 4px;
width: 22px;
height: 22px;
font-size: 12px;
}


/* Product action area */
.product-actions {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 6px;
}

/* Pencil edit button (app style) */
.edit-btn {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #f1f3f5;
color: #333;
border: 1px solid #ddd;
text-decoration: none;
font-size: 14px;
}

/* Touch feedback */
.edit-btn:active {
transform: scale(0.92);
background: #e9ecef;
}

/* Pencil icon size tweak */
.edit-btn i {
font-size: 14px;
}




/* ---------- Admin Form Layout ---------- */

.admin-page {
background: #f3f4f6;
min-height: 100%;
padding: 20px;
}

.admin-form-wrapper {
width: 100%;
background: #ffffff;
border-radius: 14px;
box-shadow: 0 10px 30px rgba(0,0,0,0.08);
overflow: hidden;
}

/* Header */
.admin-form-header {
background: linear-gradient(135deg, #0d6efd, #084298);
color: #fff;
padding: 18px 22px;
font-size: 1.2rem;
font-weight: 600;
}

/* Body */
.admin-form-body {
padding: 22px;
}

.admin-form-body label {
font-weight: 600;
margin-top: 14px;
display: block;
}

.admin-form-body input,
.admin-form-body select {
width: 100%;
padding: 10px 12px;
border-radius: 10px;
border: 1px solid #d1d5db;
margin-top: 6px;
background: #fafafa;
}

.admin-form-body input:focus,
.admin-form-body select:focus {
outline: none;
border-color: #0d6efd;
background: #fff;
}

/* Image Row */
.image-row {
display: flex;
align-items: center;
gap: 16px;
margin-top: 8px;
}

.image-preview {
width: 80px;
height: 80px;
border-radius: 12px;
border: 1px solid #e5e7eb;
object-fit: cover;
background: #f9fafb;
}

/* Footer notes */
.form-notes {
font-size: 0.85rem;
color: #6b7280;
margin-top: 14px;
}

/* Submit */
.admin-submit {
width: 100%;
margin-top: 22px;
padding: 12px;
border-radius: 12px;
background: #198754;
color: #fff;
border: none;
font-size: 1rem;
font-weight: 600;
}



/* ---------- Admin Product Page ---------- */

.admin-page {
background:#f3f4f6;
padding:16px;
}

.admin-card {
width:100%;
background:#fff;
border-radius:14px;
box-shadow:0 10px 30px rgba(0,0,0,.08);
overflow:hidden;
margin-bottom:18px;
}

.admin-card-header {
padding:14px 18px;
font-weight:600;
font-size:1.05rem;
color:#fff;
}

.bg-primary { background:#0d6efd; }
.bg-secondary { background:#6c757d; }

/* ---------- dashboard = shopkeepers ---------- */
.bg-primary-pro { background:#032e6d; }
.bg-info-pro {background-color: rgb(8 102 120) !important;}
.bg-warning-pro {background-color: rgb(103 78 4) !important;}




.admin-card-body {
padding:18px;
}

.admin-card-body label {
font-weight:600;
margin-top:12px;
display:block;
}

.admin-card-body input,
.admin-card-body textarea,
.admin-card-body select {
width:100%;
padding:10px 12px;
margin-top:6px;
border-radius:10px;
border:1px solid #d1d5db;
background:#fafafa;
}

.admin-card-body textarea { min-height:80px; }

.row-2 {
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}

.admin-btn-1 {
width:100%;
margin-top:18px;
padding:12px;
border-radius:12px;
border:none;
font-weight:600;
}

.btn-save { background:#198754;color:#fff; }
.btn-save-all { background:#0d6efd;color:#fff; }

.image-preview {
width:80px;
height:80px;
object-fit:cover;
border-radius:12px;
border:1px solid #e5e7eb;
}


/* ---- Cart bottom action buttons (mobile friendly) ---- */
.cart-actions_2 {
display: flex;
gap: 10px;
margin-top: 14px;
}

.cart-actions_2 button {
flex: 1;
height: 44px;
border-radius: 10px;
font-size: 15px;
font-weight: 600;
border: none;
}

/* Continue shopping (secondary) */
.btn-continue_2 {
background: #f1f1f1;
color: #333;
}

/* Checkout / Place order (primary) */
.btn-checkout_2 {
background: #0d6efd; /* Bootstrap primary blue */
color: #fff;
}

/* Tap feedback */
.cart-actions_2 button:active {
transform: scale(0.97);
}


.category-grid-1 {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
gap: 4px;
}


/* admin dashboard */

/* =====================================
MOBILE-FIRST ADMIN DASHBOARD CARDS
===================================== */

.admin-metric-card {
border-radius: 6px;
}

.admin-metric-card .card-body {
padding: 6px 4px;
line-height: 1.1;
}

.admin-metric-card i {
font-size: 15px;
margin-bottom: 2px;
}

.admin-metric-card h6 {
font-size: 10px;
margin: 2px 0 1px;
font-weight: 500;
letter-spacing: 0.2px;
}

.admin-metric-card h4 {
font-size: 14px;
margin: 0;
font-weight: 700;
}

/* Mobile-specific tightening */
@media (max-width: 576px) {
.admin-metric-card {
min-height: 64px;
}

.row.g-3 {
--bs-gutter-x: 0.5rem;
--bs-gutter-y: 0.5rem;
}
}


/* Reduce horizontal space between cards */
@media (max-width: 576px) {
.admin-metric-row {
--bs-gutter-x: 0.4rem;
--bs-gutter-y: 0.4rem;
}
}

/* color setting */

.btn-primary {
background: var(--accent);
color: #fff;
}

.btn-secondary {
background: var(--bg-muted);
color: var(--text-main);
}

/* ===== Header text ===== */
.brand {
font-weight: 600;
margin-left: 6px;
color: var(--text-main);
}

.tagline {
font-size: .85rem;
color: var(--text-muted);
}

/* ===== Header buttons ===== */
.admin-btn {
text-decoration: none;
}

.admin-danger {
background: var(--danger);
color: #fff;
}

/* ===== Address bar ===== */
.address-bar {
background: var(--bg-surface);
padding: 8px 12px;
border-bottom: 1px solid var(--border-soft);
}





/* ===== Images ===== */
.shop-logo {
cursor: zoom-in;
}

.user-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: cover;
cursor: zoom-in;
}

.image-zoom-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.85);
display: none;
align-items: center;
justify-content: center;
z-index: 10000;
}

.image-zoom-overlay img {
max-width: 90%;
max-height: 90%;
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
cursor: zoom-out;
}


/* ===== Footer ===== */
.app-footer {
background: var(--bg-surface);
border-top: 1px solid var(--border-soft);
}

/* Footer links */
.footer-link {
color: var(--text-main);
}

.footer-link small {
color: var(--text-muted);
}

/* ===== Account popup ===== */
.account-menu {
position: fixed;
bottom: 70px;
right: 10px;
background: var(--bg-surface);
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
width: 190px;
padding: 10px;
display: none;
z-index: 9999;
}

/* Account menu links */
.account-menu a {
display: block;
padding: 8px 6px;
text-decoration: none;
color: var(--text-main);
}

.account-menu a:hover {
background: var(--bg-muted);
border-radius: 6px;
}

.sharebuttoncolor{
color:white;
background:#400606;
}

.bgpink{
background:#d8c9f9;
}

/* ===============================
🔥 DEBUG COLORS (TEMPORARY)
REMOVE AFTER CONFIRMATION
================================ */

/*
/*.app-shell { background: #ff00ff !important; /* neon purple */ }*/
/*.app-content { background: #00ff00 !important; /* neon green */ }*/
/*.app-header { background: #0000ff !important; /* blue */ }*/
/*.address-bar { background: #ff9900 !important; /* orange */ }*/
/*.search-bar-wrap { background: #00ffff !important; /* cyan */ }*/
/*.app-footer { background: #ff0000 !important; /* red */ }*/
/*.app-content { background: #aa93dc !important; /* red */ }*/
/*.app-extra { background: #d8c9f9 !important; /* red */ }*/
*/