/* ================================
   J Store India – Premium Light UI
   Smooth + Glow + Click Effects
================================ */

/* Root Colors */
:root{
  --primary-orange:#ff6a00;
  --primary-orange-light:#ff8c1a;
  --white:#ffffff;
  --black:#000000;
  --text:#222222;
  --border:#eeeeee;
  --glow:rgba(255,106,0,0.35);
}

/* Smooth Scroll */
html{
  scroll-behavior:smooth;
}

/* Global Transition */
*{
  transition:all 0.3s ease;
}

/* ================= HEADER ================= */

.app-bar{
  position:sticky;
  top:0;
  z-index:999;
  background:#ffffff !important;
  color:#000000 !important;
  border-bottom:1px solid var(--border);
}

.app-bar *{
  color:#000000 !important;
}

/* Hover highlight */
.app-bar a:hover,
.app-bar button:hover{
  color:var(--primary-orange) !important;
}

/* ================= BUTTON EFFECT ================= */

button,
a,
.sh-solid-button,
.pr-outlined-button{
  cursor:pointer;
}

/* Primary Button */
.sh-solid-button{
  background:linear-gradient(145deg,var(--primary-orange),var(--primary-orange-light)) !important;
  color:#ffffff !important;
  border-radius:14px !important;
  font-weight:600 !important;
  border:none !important;
}

.sh-solid-button:hover{
  box-shadow:0 0 14px var(--glow);
  transform:translateY(-3px);
}

.sh-solid-button:active{
  transform:scale(0.95);
}

/* Outline Button */
.pr-outlined-button{
  background:transparent !important;
  border:2px solid var(--primary-orange) !important;
  color:var(--primary-orange) !important;
  border-radius:14px !important;
}

.pr-outlined-button:hover{
  background:var(--primary-orange) !important;
  color:#ffffff !important;
  box-shadow:0 0 12px var(--glow);
}

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

.sh-product-card{
  background:#ffffff !important;
  border:1px solid var(--border) !important;
  border-radius:18px !important;
  overflow:hidden;
}

.sh-product-card:hover{
  border-color:var(--primary-orange) !important;
  box-shadow:0 0 16px var(--glow);
  transform:translateY(-6px);
}

/* Smooth Image Zoom */
.sh-product-card img{
  transition:transform 0.4s ease;
}

.sh-product-card:hover img{
  transform:scale(1.08);
}

/* ================= SEARCH BAR ================= */

.search-field .search-input{
  background:#ffffff !important;
  border:1px solid var(--border) !important;
  border-radius:12px !important;
}

.search-field .search-input:focus{
  border-color:var(--primary-orange) !important;
  box-shadow:0 0 0 3px var(--glow) !important;
}

/* ================= BADGE ================= */

.badge{
  background:var(--primary-orange) !important;
  color:#ffffff !important;
  border-radius:8px !important;
  padding:6px 12px !important;
  font-weight:600 !important;
}

/* ================= SOCIAL ICON ================= */

.sh-social-icon{
  border-radius:50% !important;
}

.sh-social-icon:hover{
  background:var(--primary-orange) !important;
  color:#ffffff !important;
  box-shadow:0 0 12px var(--glow);
}

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

#footer{
  background:#fafafa !important;
  border-top:1px solid var(--border) !important;
}

.three-col-footer__heading{
  color:var(--primary-orange) !important;
  font-weight:700 !important;
}

/* ================= CLICK RIPPLE EFFECT ================= */

button:active,
a:active{
  transform:scale(0.96);
}

/* ================= SCROLLBAR PREMIUM ================= */

::-webkit-scrollbar{
  width:8px;
}

::-webkit-scrollbar-thumb{
  background:var(--primary-orange);
  border-radius:10px;
}

::-webkit-scrollbar-track{
  background:#f5f5f5;
}

/* ===== FOOTER TEXT FIX ===== */

#footer,
#footer * {
  color: #000000 !important;
}

/* Footer Headings */
#footer h1,
#footer h2,
#footer h3,
#footer h4,
#footer h5,
#footer h6,
.three-col-footer__heading {
  color: #000000 !important;
  font-weight: 700 !important;
}

/* Quick Links / Policy / Get in Touch / Social */
#footer a,
#footer li,
#footer p,
#footer span {
  color: #000000 !important;
}

/* Hover Effect (Premium Orange Highlight) */
#footer a:hover {
  color: var(--primary-orange) !important;
}