:root { --accent: #ff3b30; --bg: #ffffff; --card: #f8f8f8; --gray: #8e8e93; }

* { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; outline: none; box-sizing: border-box; }
body { margin:0; background:var(--bg); color:#000; font-family:-apple-system, BlinkMacSystemFont, sans-serif; overflow-x:hidden; font-size: 16px; }

html, body { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { width:0; height:0; display:none; }
.overlay, .scroller { scrollbar-width: none; -ms-overflow-style: none; }
.overlay::-webkit-scrollbar, .scroller::-webkit-scrollbar { width:0; height:0; display:none; }

/* Notification Banner */
#order-notification {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: #fff;
    padding: 12px 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
    display: none;
    align-items: center;
    gap: 12px;
    border-bottom: 2px solid #ff3b30;
    animation: slideDown 0.3s ease;
    cursor: pointer;
}
@keyframes slideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } }
#order-notification img { width:48px; height:48px; border-radius:8px; object-fit:cover; }
#order-notification .notif-text { flex:1; font-size:14px; }
#order-notification .notif-text strong { display:block; font-weight:600; }
#order-notification .notif-close { background:none; border:none; font-size:20px; cursor:pointer; padding:0 8px; color:#999; }

/* Order Confirmation Modal */
#orderConfirmModal .overlay-content { max-width:420px; text-align:center; padding:20px; }
#orderConfirmModal .checkmark { font-size:72px; color:#34c759; margin:0 0 10px; }
#orderConfirmModal .order-details { background:#f8f8f8; padding:16px; border-radius:12px; margin:16px 0; text-align:left; }
#orderConfirmModal .order-details div { padding:4px 0; }
#orderConfirmModal .btn-call { background:#34c759; color:#fff; border:none; padding:14px; border-radius:30px; font-size:16px; font-weight:700; width:100%; cursor:pointer; margin-top:8px; }

/* Dashboard Orders */
.order-card { background:#fff; border-radius:16px; padding:16px; display:flex; gap:14px; align-items:flex-start; margin-bottom:12px; border:1px solid #eee; transition:background 0.3s; }
.order-card.new-order { background:#e8f5e9; border-color:#81c784; }
.order-card img { width:70px; height:70px; border-radius:10px; object-fit:cover; flex-shrink:0; }
.order-card .order-info { flex:1; }
.order-card .order-info .product-name { font-weight:600; font-size:15px; }
.order-card .order-info .product-price { font-weight:700; color:#ff3b30; }
.order-card .order-info .order-meta { font-size:13px; color:#666; margin-top:4px; }
.order-card .order-info .order-meta span { margin-right:12px; }
.order-card .order-status { font-size:12px; padding:3px 10px; border-radius:20px; background:#f0f0f0; color:#333; display:inline-block; }
.order-card .order-status.pending { background:#fff3cd; color:#856404; }
.order-card .order-status.completed { background:#d4edda; color:#155724; }

/* Big Call Button in Orders */
.call-btn-big {
    display:inline-block;
    background:#34c759;
    color:#fff;
    padding:10px 20px;
    border-radius:30px;
    font-size:16px;
    font-weight:700;
    text-decoration:none;
    margin-top:6px;
    transition:transform 0.1s;
    border:none;
    cursor:pointer;
}
.call-btn-big:active { transform:scale(0.95); }
.call-btn-big i { margin-right:8px; }

.dash-tabs .tab-badge { background:#ff3b30; color:#fff; font-size:10px; border-radius:10px; padding:1px 8px; margin-left:4px; vertical-align:top; }
.order-new-badge { background:#ff3b30; color:#fff; font-size:10px; font-weight:700; padding:2px 8px; border-radius:10px; margin-left:8px; vertical-align:middle; }


/* Existing grid styles (unchanged) */
#dash { justify-content: start; }
.dash-tabs { display:flex; gap:28px; justify-content:center; margin-bottom:0px; }
.dash-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
.dash-item { position:relative; aspect-ratio:4/5; overflow:hidden; border-radius:4px; cursor:pointer; background:#f0f0f0; }
.dash-item.skeleton { background: linear-gradient(90deg,#eee 25%,#e2e2e2 37%,#eee 63%); background-size:400% 100%; animation:shimmer 1.4s ease infinite; }
.dash-item img, .dash-item video { width:100%; height:100%; object-fit:cover; display:block; opacity:0; transition:opacity 0.12s ease; }
.dash-item img.loaded, .dash-item video.loaded { opacity:1; }
.dash-item .del-btn { position:absolute; top:5px; right:5px; background:rgba(0,0,0,0.55); border-radius:50%; width:24px; height:24px; display:flex; align-items:center; justify-content:center; z-index:2; }
.dash-item .del-btn svg { width:14px; height:14px; stroke:#fff; }
.dash-item .price-tag { position:absolute; bottom:5px; left:5px; background:rgba(0,0,0,0.55); color:#fff; font-size:10px; font-weight:bold; padding:3px 7px; border-radius:8px; }
.dash-empty { text-align:center; padding:50px 10px; color:#999; font-size:14px; }

.grid { column-count:2; column-gap:12px; padding:12px; padding-bottom:100px; max-width:1400px; margin:0 auto; transition:opacity 0.3s ease; min-height:100vh; }
@media (min-width:768px) { .grid { column-count:3; column-gap:20px; } }
@media (min-width:1024px) { .grid { column-count:4; } }

.grid-item { display:inline-block; width:100%; margin-bottom:15px; break-inside:avoid; cursor:pointer; position:relative; content-visibility:auto; contain-intrinsic-size:0 260px; }
.media-wrap { position:relative; width:100%; border-radius:16px; overflow:hidden; background:#f0f0f0; aspect-ratio:4/5; }
.media-wrap.skeleton { background: linear-gradient(90deg,#eee 25%,#e2e2e2 37%,#eee 63%); background-size:400% 100%; animation:shimmer 1.4s ease infinite; }
@keyframes shimmer { 0% { background-position:100% 50%; } 100% { background-position:0% 50%; } }
.grid-item img, .grid-item video { position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:cover; background:#f0f0f0; opacity:0; transition:opacity 0.12s ease; }
.grid-item img.loaded, .grid-item video.loaded { opacity:1; }
.media-broken { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#c2c2c2; background:#f0f0f0; }
.media-broken svg { width:26px; height:26px; }
.vid-icon { position:absolute; top:8px; right:8px; background:rgba(0,0,0,0.4); color:#fff; padding:5px 7px; border-radius:50%; font-size:10px; backdrop-filter:blur(5px); z-index:2; }
.grid-info { padding:8px 4px; }
.grid-price { font-size:16px; font-weight:800; color:#000; margin-top:2px; }

.scroller { position:fixed; inset:0; background:#fff; z-index:1000; display:none; overflow-y:scroll; scroll-snap-type:y mandatory; -webkit-overflow-scrolling:touch; transition:transform 0.4s cubic-bezier(0.175,0.885,0.32,1.1), opacity 0.3s; transform-origin:center center; }
.scroller.zoom-out { transform:scale(0.80) !important; border-radius:40px; overflow:hidden; box-shadow:0 30px 100px rgba(0,0,0,0.5); }
.slide { width: 100%;
  height: 100dvh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  position: relative;
  display: flex;
  align-items: start;
  justify-content: start;
  background: #fff;
  padding: 1rem;
  box-sizing: border-box;
  flex-direction: column;}
.slide video, .slide img { width:100%; height:auto; aspect-ratio:4/5; max-height:80dvh; object-fit:cover; border-radius:16px; pointer-events:none; }

.side-bar { position:absolute; left:1rem; right:1rem; bottom:2rem; display:flex; flex-direction:row; gap:25px; z-index:10; }
.side-bar div { cursor:pointer; display:flex; align-items:center; gap:10px; background:rgba(255,255,255,0.9); padding:12px 18px; border-radius:30px; border:1px solid #eee; color:#000; }
.slide .vendor-badge{
    position: absolute;
    right: 1rem;
    top: 1rem;
    z-index: 9;
  gap: 10px !important;
  padding: 10px 10px 10px !important; 
}
.slide .vendor-badge span {
    display: none !important;
}

.slide  .tiny-tag {
    top: 2rem !important;
    left: 2rem !important;
}
.media-wrapper {
    position: absolute;
}
.post-info {
  position: absolute;
  bottom: 5rem;
  left: 0;
  text-align: left;
  pointer-events: none;
  color: #000;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 1rem;
  align-items: center;
}
.post-info h3, .post-info h2 { font-size:16px !important; margin:5px 0; color:#000; font-weight:bold; }
.post-info .price-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:4px; }
.post-info .buyButton {
    text-align: center;
    white-space: nowrap;
    display: inline-block;
}
.post-info .buy-btn {
    padding: 8px 24px;
    font-size: 15px;
}
.buy-btn { display:inline-block; background:#ff3b30; color:#fff; padding:5px 16px; border-radius:20px; font-size:14px; font-weight:700; border:none; cursor:pointer; pointer-events:auto; vertical-align:middle; transition:transform 0.1s; }
.buy-btn:active { transform:scale(0.95); }

.overlay { position:fixed; inset:0; background:rgba(255,255,255,0.98); z-index:2000; display:none; flex-direction:column; padding:20px; overflow-y:auto; -webkit-overflow-scrolling:touch; align-items:center; justify-content:end; }
.overlay-content { width:100%; max-width:500px; background:#fff; padding:10px; border-radius:24px; position:relative; margin-top:20px; margin-bottom:50px; }
input, select { width:100%; padding:18px; margin-bottom:12px; border-radius:15px; border:1px solid #eee; background:#fafafa; font-size:16px; box-sizing:border-box; color:#000; }

.btn { background:#000; color:#fff; padding:18px; border:none; width:100%; border-radius:15px; font-weight:bold; cursor:pointer; font-size:16px; }
.btn-gray { background:#eee; color:#333; padding:18px; border:none; width:100%; border-radius:15px; font-weight:bold; cursor:pointer; margin-top:10px; font-size:16px; }

.ux-step { display:none; width:100%; -webkit-user-select:text; user-select:text; pointer-events:auto; }
.ux-step.active { display:block; }
.cat-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:15px; margin-bottom:20px; }
.cat-btn { background:#f2f2f2; padding:25px 10px; border-radius:20px; text-align:center; cursor:pointer; font-size:14px; font-weight:bold; border:2px solid transparent; color:#000; }
.cat-btn i { display:block; font-size:28px; margin-bottom:10px; }

.tolet-list-item { background:#f9f9f9; padding:22px; border-radius:18px; margin-bottom:12px; text-align:center; font-weight:bold; cursor:pointer; border:1px solid #eee; font-size:16px; color:#000; }

.big-like-anim { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(0); width:180px; height:180px; pointer-events:none; z-index:100; animation:likePop 0.8s forwards; }
@keyframes likePop { 0% { transform:translate(-50%,-50%) scale(0); opacity:0; } 30% { transform:translate(-50%,-50%) scale(1.2); opacity:1; } 100% { transform:translate(-50%,-50%) scale(2.5); opacity:0; } }

.dock { position:fixed; bottom:0px; left:0; width:100%; background:rgba(255,255,255,0.95); backdrop-filter:blur(15px); padding:15px 0; display:flex; justify-content:space-around; z-index:500; border-top:1px solid #eee; }
.close-btn { position:fixed; top:2rem; right:2rem; z-index:1100; color:#000; cursor:pointer; display:none !important; background:rgba(255,255,255,0.8); padding:12px; border-radius:50%; border:1px solid #eee; }

.like span,.edit { display:none !important; }
.tiny-tag {
position: absolute;
top: 10px;
left: 10px;
background: rgba(0,0,0,0.6);
color: white;
font-size: 10px;
padding: 2px 8px;
border-radius: 10px;
}
.game-media-wrap { aspect-ratio:1/1; background:#f9f9f9; border:1px solid #eee; }
.game-media-wrap img { object-fit:contain !important; }
.games { display:none; }
.game-tag { position:absolute; top:10px; left:10px; background:#5856d6; color:#fff; font-size:10px; font-weight:800; padding:3px 8px; border-radius:6px; text-transform:uppercase; z-index:5; }

.btn, .btn-gray, .cat-btn, .tolet-list-item, .market-tab, .dock i, .dock img { position:relative; overflow:hidden; transition:transform 0.1s cubic-bezier(0.4,0,0.2,1); }
.btn:active, .btn-gray:active, .cat-btn:active, .tolet-list-item:active { transform:scale(0.96); }
.ripple { position:absolute; border-radius:50%; transform:scale(0); animation:ripple-animation 0.5s linear; background-color:rgba(0,0,0,0.1); pointer-events:none; }
@keyframes ripple-animation { to { transform:scale(4); opacity:0; } }

/* Buy Modal */
#buyModal .overlay-content { max-width:400px; }
#buyModal .location-display { background:#f5f5f5; padding:12px; border-radius:12px; font-size:14px; color:#333; margin-bottom:12px; display:flex; align-items:center; gap:8px; }
#buyModal .location-display i { color:#007aff; }
.buy-status { text-align:center; font-size:14px; margin:10px 0; }


/* Pager – full‑screen horizontal carousel */
#pager {
    position: relative;
    width: 100%;
    height: 100vh; /* adjust for header/dock */
    overflow: hidden;
}
#pages {
    display: flex;
    flex-direction: row;
    height: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
#pages::-webkit-scrollbar { display: none; }
.page {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    scroll-snap-align: start;
    padding: 10px 12px 20px;
    box-sizing: border-box;
}
.page-title {
    font-size: 40px;
    font-weight: 800;
    margin: 0 0 12px 4px;
    color: #000;
}
.page .grid {
    column-count: 2;
    column-gap: 12px;
    padding: 0;
    padding-bottom: 80px;
}
@media (min-width: 768px) { .page .grid { column-count: 3; } }
@media (min-width: 1024px) { .page .grid { column-count: 4; } }




#page-All h2 {
    display: none;
}



/* Dashboard Pager Layout */
.dash-tabs {
    display: flex;
    background: #fff;
    border-bottom: 1px solid #eee;
}

.dash-pager {
    display: flex;
    flex: 1;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.dash-pager::-webkit-scrollbar { display: none; }

.dash-page {
    min-width: 100%;
    width: 100%;
    scroll-snap-align: start;
    overflow-y: auto;
    padding: 12px;
    box-sizing: border-box;
}

.dash-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* Tab highlight same as homepage */
.dash-tabs .market-tab {
    flex: 1;
    text-align: center;
    padding: 12px 0;
    border-bottom: 2px solid transparent;
    transition: all 0.3s;
}
.dash-tabs .market-tab.active {
    border-bottom: 2px solid #ff3b30;
    color: #ff3b30;
    font-weight: bold;
}
.order-card .location-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #007aff;
    text-decoration: none;
    background: rgba(0,122,255,0.1);
    padding: 2px 8px 2px 4px;
    border-radius: 12px;
    margin-top: 2px;
}
.order-card .location-link:hover {
    background: rgba(0,122,255,0.2);
}
#vendorSection { display: block !important; }
#vendorSection button { display: block !important; }