/* ============================================================
   Time Shop Save — Global Stylesheet
   Bootstrap 5 + Custom theme (green primary)
   ============================================================ */

:root {
  --tss-green:    #198754;
  --tss-green-lt: #d1e7dd;
  --tss-dark:     #1a1a2e;
  --tss-card-r:   16px;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

body { background:#f8f9fa; color:#212529; font-size:.9375rem; }

.fw-black { font-weight:900!important; }
.text-truncate-2 { display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.py-6 { padding-top:4rem;padding-bottom:4rem; }
.min-w-0 { min-width:0; }
.object-fit-cover { object-fit:cover; }
.z-1 { z-index:1; }

/* HERO */
.hero-section { background:linear-gradient(135deg,#198754 0%,#0f5132 60%,#1a1a2e 100%); position:relative; }
.hero-bg { position:absolute;inset:0;background:radial-gradient(circle at 20% 50%,rgba(255,255,255,.08) 0,transparent 50%),radial-gradient(circle at 80% 20%,rgba(255,193,7,.07) 0,transparent 40%);pointer-events:none; }
.stat-card { background:rgba(255,255,255,.12);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.2);color:#fff; }

/* CARDS */
.card { border-radius:var(--tss-card-r)!important;transition:box-shadow .2s,transform .15s; }
.card.shadow-sm:hover { box-shadow:0 .5rem 1.5rem rgba(0,0,0,.12)!important; }
.shop-card:hover { transform:translateY(-3px); }
.cat-card:hover  { background:var(--tss-green-lt)!important;transform:translateY(-2px); }
.how-card:hover  { transform:translateY(-4px);box-shadow:0 1rem 2rem rgba(0,0,0,.1)!important; }

/* WALLET CARD */
.wallet-pattern { position:absolute;top:-30px;right:-30px;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.08);pointer-events:none; }
.wallet-pattern::after { content:'';position:absolute;top:30px;right:30px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.06); }

/* NAVBAR */
.navbar-dark .nav-link { font-weight:500;opacity:.85;transition:opacity .15s; }
.navbar-dark .nav-link:hover,.navbar-dark .nav-link.active { opacity:1; }

/* FORMS */
.form-control:focus,.form-select:focus { border-color:var(--tss-green);box-shadow:0 0 0 .2rem rgba(25,135,84,.2); }
.btn-success { letter-spacing:.01em; }

/* BADGE */
.badge { font-weight:600;letter-spacing:.02em; }

/* TABLE */
.table tr[onclick] { cursor:pointer; }

/* ANIM */
@keyframes fadeInUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
.fade-in-up { animation:fadeInUp .4s ease both; }

/* SCROLLBAR */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:#f1f1f1}
::-webkit-scrollbar-thumb{background:#ccc;border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:#aaa}

/* STEP NUMBER DISPLAY */
.step-num { line-height:1;color:var(--tss-green);opacity:.15;font-size:4rem; }

/* PRINT */
/* BOTTOM FIXED NAVBAR */
#bottomNav .nav-link {
  color: rgba(255,255,255,.8) !important;
  transition: color .15s, transform .15s;
}
#bottomNav .nav-link:hover,
#bottomNav .nav-link.active {
  color: #fff !important;
  transform: translateY(-2px);
}
#bottomNav .nav-link i {
  margin-bottom: 2px;
}
#bottomNav {
  z-index: 1030;
  border-top: 1px solid rgba(255,255,255,.15);
}

@media print { #bottomNav { display:none!important } }

@media print { .navbar,.btn,.pagination,footer{display:none!important} }

/* MOBILE */
@media(max-width:576px) { .hero-section h1{font-size:2rem} .display-5{font-size:1.6rem} }

/* Mobile-friendly card styles */
.shop-card img,
.product-card img {
  height: 140px;
  object-fit: cover;
  border-radius: 12px;
}

.shop-card,
.product-card {
  border-radius: 16px;
  padding: 12px;
}

.shop-title,
.product-title {
  font-size: 15px;
  font-weight: 600;
}

.btn-shop {
  width: 100%;
  border-radius: 10px;
  padding: 8px;
  font-size: 14px;
}

@media (max-width: 576px) {
  .shop-card img,
  .product-card img {
    height: 120px;
  }
  .shop-card .card-body,
  .product-card .card-body {
    padding: 10px;
  }
  .shop-card h6,
  .product-card h6 {
    font-size: 13px;
  }
  .shop-card .fw-bold.text-success,
  .product-card .fw-bold.text-success {
    font-size: 14px !important;
  }
}


/* MERCHANT DASHBOARD - Fix zoomed/broken layout */
.merchant-dashboard {
  overflow-x: hidden;
}
.merchant-dashboard .container-fluid {
  max-width: 1400px;
}
.merchant-dashboard .card {
  font-size: 0.9rem;
}
.merchant-dashboard .table {
  font-size: 0.85rem;
}
.merchant-dashboard .fs-5 {
  font-size: 1.1rem !important;
}
.merchant-dashboard h4 {
  font-size: 1.25rem;
}
.merchant-dashboard h6 {
  font-size: 0.95rem;
}
.merchant-dashboard .btn-sm {
  font-size: 0.8rem;
  padding: 0.25rem 0.6rem;
}
.merchant-dashboard .alert {
  font-size: 0.85rem;
}
@media (max-width: 768px) {
  .merchant-dashboard .container-fluid {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .merchant-dashboard .card.p-3 {
    padding: 12px !important;
  }
  .merchant-dashboard .d-flex.gap-3 {
    gap: 8px !important;
  }
  .merchant-dashboard .d-flex.gap-2 {
    gap: 6px !important;
  }
  .merchant-dashboard h4 {
    font-size: 1.1rem;
  }
  .merchant-dashboard .fw-bold.fs-5 {
    font-size: 1rem !important;
  }
}
@media (max-width: 576px) {
  .merchant-dashboard .container-fluid {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .merchant-dashboard .card {
    border-radius: 12px !important;
  }
  .merchant-dashboard .row.g-3,
  .merchant-dashboard .row.g-4 {
    --bs-gutter-x: 8px;
    --bs-gutter-y: 8px;
  }
}