@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* =========================
   ROOT VARIABLES
========================= */

:root {
  --primary: #d63384;
  --primary-dark: #c2185b;
  --bg: #f8f9fa;
  --text: #333;
  --border: #e5e5e5;
  --white: #ffffff;

  --shadow: 0 2px 10px rgba(0, 0, 0, 0.08);

  --font:
    "Poppins",
    "Segoe UI",
    sans-serif;
}

/* =========================
   RESET
========================= */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* =========================
   HTML / BODY
========================= */

html {
  scroll-behavior: smooth;
}

html,
body {
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
}

/* =========================
   ROOT
========================= */

#root {
  width: 100%;
  min-height: 100vh;
}

/* =========================
   TYPOGRAPHY
========================= */

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #222;
  font-weight: 600;
}

p {
  line-height: 1.6;
  color: #555;
}

/* =========================
   LINKS
========================= */

a {
  text-decoration: none;
  color: inherit;
}

/* =========================
   BUTTONS
========================= */

button {
  border: none;
  outline: none;
  cursor: pointer;
  font-family: inherit;
  background: none;
}

/* =========================
   FORM ELEMENTS
========================= */

input,
textarea,
select {
  font-family: inherit;
  outline: none;
}

/* =========================
   IMAGES
========================= */

img {
  max-width: 100%;
  display: block;
}

/* =========================
   COMMON CONTAINER
========================= */

.container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 15px;
}

/* =========================
   MUI ICON FIX
========================= */

.MuiSvgIcon-root {
  vertical-align: middle;
}

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

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

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

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

::-webkit-scrollbar-thumb:hover {
  background: var(--primary-dark);
}

/* =========================
   MOBILE
========================= */

@media (max-width: 768px) {
  .container {
    padding: 0 10px;
  }

  h1 {
    font-size: 28px;
  }

  h2 {
    font-size: 22px;
  }
}

:root {
  --white: #ffffff;
  --pink: #ff3f6c;
  --dark: #282c3f;
  --border: #eaeaec;
}

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

.main-header {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: var(--pink);

  display: flex;
  align-items: center;

  padding: 0 14px;

  box-sizing: border-box;

  z-index: 1000;

  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

/* ===========================
   LEFT
=========================== */

.header-left{
  display:flex;
  align-items:center;
  gap:12px;

  min-width:0;
  flex:1;
}

/* ===========================
   LOGO
=========================== */

.logo-link{
  text-decoration:none;
  color:var(--white);

  display:flex;
  align-items:center;

  min-width:0;
}

.logo{

  margin:0;

  color:#fff;

  font-size:22px;

  font-weight:800;

  letter-spacing:.5px;

  white-space:nowrap;

  overflow:hidden;

  text-overflow:ellipsis;
}

/* ===========================
   MENU
=========================== */

.menu-btn{

  width:34px;
  height:34px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:none;
  outline:none;

  background:transparent;

  color:#fff;

  cursor:pointer;

  flex-shrink:0;

  padding:0;
}

.menu-btn svg{

  font-size:32px !important;

}

.menu-btn:hover{

  opacity:.85;

}

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

.laptop-search-wrapper{
  width:620px;
  border-radius:8px;
  display:flex;
  align-items:center;
  padding:0 14px;
  gap:10px;
  box-sizing:border-box;
}

.laptop-search-wrapper .search-icon{

  color:var(--dark);

  font-size:22px !important;

  flex-shrink:0;

}

.laptop-search{

  flex:1;

  border:none;

  outline:none;

  background:transparent;

  color:var(--dark);

  font-size:14px;

  font-weight:500;

  margin-bottom: 13px;

}

/* ===========================
   RIGHT SIDE ICONS
=========================== */

.header-right{

  display:flex;

  align-items:center;

  justify-content:flex-end;

  gap:18px;

  margin-left:auto;

  flex-shrink:0;

}

/* ===========================
   ICON BUTTON
=========================== */

.icon-btn{

  width:32px;
  height:32px;

  display:flex;
  align-items:center;
  justify-content:center;

  position:relative;

  color:#fff;

  text-decoration:none;

  background:transparent;

  border:none;

  cursor:pointer;

  flex-shrink:0;

  transition:.25s;

}

.icon-btn:hover{

  transform:scale(1.08);

}

.icon-btn svg{

  font-size:28px !important;

  transition:.25s;

}

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

.badge-parent{

  position:relative;

}

.badge-count{

  position:absolute;

  top:-5px;

  right:-6px;

  min-width:18px;

  height:18px;

  padding:0 4px;

  display:flex;

  align-items:center;

  justify-content:center;

  border-radius:20px;

  background:#111;

  color:#fff;

  font-size:10px;

  font-weight:700;

  line-height:1;

  border:2px solid #fff;

  box-sizing:border-box;

}

/* ===========================
   TABLET
=========================== */

@media (max-width:992px){

  .laptop-search-wrapper{

    display:none;

  }

}

/* ===========================
   MOBILE
=========================== */

@media (max-width:768px){

  .main-header{

    height:58px;

    padding:0 10px;

  }

  .header-left{

    gap:8px;

    flex:1;

    min-width:0;

  }

  .logo{

    font-size:16px;

    letter-spacing:0;

  }

  .header-right{

    gap:10px;

    margin-left:8px;

  }

  .icon-btn{

    width:30px;

    height:30px;

  }

  .icon-btn svg{

    font-size:26px !important;

  }

  .badge-count{

    top:-4px;

    right:-5px;

    min-width:16px;

    height:16px;

    font-size:9px;

  }

}

/* ===========================
   SMALL MOBILE
=========================== */

@media (max-width:420px){

  .logo{

    font-size:15px;

  }

  .header-right{

    gap:8px;

  }

  .icon-btn{

    width:28px;

    height:28px;

  }

  .icon-btn svg{

    font-size:24px !important;

  }

}.drawer-container{
width:min(320px,85vw);
max-width:320px;
height:100%;
background:#fff;
display:flex;
flex-direction:column;
overflow-y:auto;
padding-bottom: env(safe-area-inset-bottom);
-webkit-overflow-scrolling:touch;
overscroll-behavior:contain;
}

.drawer-header{
padding:30px 20px;
background:#ff3681;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
color:#fff;
padding-top: calc(30px + env(safe-area-inset-top));
}

.drawer-avatar{
width:90px !important;
height:90px !important;
border:4px solid #fff;
margin-bottom:14px;
box-shadow:0 8px 20px rgba(0,0,0,.25);
}

.drawer-name{
font-size:20px !important;
font-weight:700 !important;
margin-top:4px !important;
text-align:center;
color:#fff;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
width:100%;
padding:0 12px;
}

.drawer-email{
font-size:13px !important;
opacity:.9;
margin-top:6px !important;
text-align:center;
color:#fff;
width:100%;
padding:0 14px;
overflow-wrap:anywhere;
}

.drawer-section-title{
padding:18px 22px 8px;
font-size:12px !important;
font-weight:700 !important;
letter-spacing:1px;
color:#888;
text-transform:uppercase;
}

.drawer-item{
margin:6px 12px !important;
padding:4px 8px !important;
border-radius:14px !important;
transition:all .25s ease;
cursor:pointer;
}

.drawer-item:hover{
background:#ececec;
transform:translateX(4px);
}

.drawer-item.active{
background:#ff3681 !important;
color:#fff !important;
}

.drawer-item.active .MuiListItemIcon-root{
color:#fff !important;
}

.drawer-item.active .MuiTypography-root{
color:#fff !important;
font-weight:700 !important;
}

.drawer-item .MuiListItemIcon-root{
min-width:42px;
color:#555;
transition:.25s;
}

.drawer-item .MuiTypography-root{
font-size:15px !important;
font-weight:600 !important;
color:#222;
}

.drawer-arrow{
font-size:20px !important;
color:#999;
margin-left:auto;
transition:.25s;
}

.drawer-item:hover .drawer-arrow{
color:#111;
transform:translateX(4px);
}

.drawer-item.active .drawer-arrow{
color:#fff;
}

.drawer-divider{
margin:16px 0 !important;
background:#ddd !important;
}

.drawer-logout{
margin-top:auto;
padding:18px;
}

.drawer-logout button{
width:100%;
height:48px;
border:none;
outline:none;
border-radius:12px;
background:#ff3681;
color:#fff;
font-size:15px;
font-weight:600;
cursor:pointer;
transition:.25s;
}

.drawer-logout button:hover{
background:#c62828;
}

.drawer-logout button:active{
transform:scale(.98);
}

.drawer-menu{
padding-top:6px !important;
padding-bottom:12px !important;
}

.drawer-container::-webkit-scrollbar{
width:6px;
}

.drawer-container::-webkit-scrollbar-track{
background:transparent;
}

.drawer-container::-webkit-scrollbar-thumb{
background:#c7c7c7;
border-radius:10px;
}

.drawer-container::-webkit-scrollbar-thumb:hover{
background:#999;
}

.drawer-item:first-child{
margin-top:10px !important;
}

.drawer-item:last-child{
margin-bottom:10px !important;
}

.drawer-header .MuiAvatar-root img{
object-fit:cover;
}

.drawer-item .MuiTouchRipple-root{
border-radius:14px;
}

.drawer-container .MuiDivider-root{
margin-left:18px;
margin-right:18px;
}

.drawer-section-title:first-of-type{
margin-top:8px;
}

@media (max-width:480px){

.drawer-container{
width:290px;
}

.drawer-header{
padding:26px 18px;
}

.drawer-avatar{
width:78px !important;
height:78px !important;
}

.drawer-name{
font-size:18px !important;
}

.drawer-email{
font-size:12px !important;
}

.drawer-item{
margin:5px 10px !important;
}

.drawer-item .MuiTypography-root{
font-size:14px !important;
}

.drawer-item .MuiListItemIcon-root{
min-width:38px;
}

.drawer-arrow{
font-size:18px !important;
}

.drawer-logout{
padding:14px;
}

.drawer-logout button{
height:46px;
font-size:14px;
}

}

@media (min-width:768px){

.drawer-container{
width:340px;
}

.drawer-header{
padding:34px 22px;
}

.drawer-avatar{
width:95px !important;
height:95px !important;
}

.drawer-name{
font-size:22px !important;
}

.drawer-email{
font-size:14px !important;
}

.drawer-item .MuiTypography-root{
font-size:16px !important;
}

}

.drawer-item{
user-select:none;
}

.drawer-header,
.drawer-item,
.drawer-logout button{
transition:all .25s ease;
}

@media (max-width:360px){

.drawer-container{
width:82vw;
}

.drawer-header{
padding:22px 14px;
}

.drawer-avatar{
width:70px !important;
height:70px !important;
}

.drawer-name{
font-size:16px !important;
}

.drawer-email{
font-size:11px !important;
}

.drawer-item{
margin:4px 8px !important;
}

.drawer-item .MuiTypography-root{
font-size:13px !important;
}

.drawer-item .MuiListItemIcon-root{
min-width:34px;
}

.drawer-logout button{
height:44px;
font-size:13px;
}

}/* =========================================
   ALIZA FASHION SPLASH SCREEN
   PART 2 - BASE + BACKGROUND
========================================= */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html,
body{
  margin:0;
  padding:0;
}

.splash-container{
  position:fixed;
  inset:0;
/*  overflow:hidden;*/

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;

  background:
  radial-gradient(circle at top,
  #fffdfd 0%,
  #fff1f7 30%,
  #ffe3ef 65%,
  #ffd5e7 100%);
}

/* ==========================
   MAIN GLOW
========================== */

.bg-glow{

  position:absolute;

  width:520px;
  height:520px;

  border-radius:50%;

  background:
  radial-gradient(circle,
  rgba(255,255,255,.95),
  rgba(255,140,190,.35),
  transparent 72%);

  animation:bgPulse 5s ease-in-out infinite;

}

/* ==========================
   MOVING BLUR
========================== */

.blur{

  position:absolute;

  border-radius:50%;

  filter:blur(55px);

  opacity:.45;

}

.blur1{

  width:220px;
  height:220px;

  background:#ff95c5;

  left:-60px;
  top:80px;

  animation:blurMove1 8s ease-in-out infinite;

}

.blur2{

  width:250px;
  height:250px;

  background:#ffd2e6;

  right:-80px;
  bottom:70px;

  animation:blurMove2 8s ease-in-out infinite;

}

/* ==========================
   FLOATING PARTICLES
========================== */

.particle{

  position:absolute;

  width:8px;
  height:8px;

  border-radius:50%;

  background:#fff;

  box-shadow:

  0 0 10px #fff,
  0 0 20px #ff5ca3;

  animation:particleFloat 7s linear infinite;

}

.p1{top:10%;left:10%;animation-delay:0s;}
.p2{top:18%;right:12%;animation-delay:1s;}
.p3{top:40%;left:15%;animation-delay:2s;}
.p4{top:65%;right:10%;animation-delay:3s;}
.p5{bottom:18%;left:22%;animation-delay:4s;}
.p6{bottom:12%;right:25%;animation-delay:5s;}
.p7{top:30%;left:50%;animation-delay:2.5s;}
.p8{bottom:35%;right:45%;animation-delay:4.5s;}

/* ==========================
   ANIMATIONS
========================== */

@keyframes bgPulse{

  0%,100%{

    transform:scale(1);

  }

  50%{

    transform:scale(1.08);

  }

}

@keyframes blurMove1{

  0%,100%{

    transform:translate(0,0);

  }

  50%{

    transform:translate(45px,-30px);

  }

}

@keyframes blurMove2{

  0%,100%{

    transform:translate(0,0);

  }

  50%{

    transform:translate(-40px,35px);

  }

}

@keyframes particleFloat{

  0%{

    transform:translateY(0) scale(.6);

    opacity:.3;

  }

  50%{

    opacity:1;

  }

  100%{

    transform:translateY(-140px) scale(1.4);

    opacity:0;

  }

}

/* =========================================
   PART 3 - LOGO + RINGS + HEARTS
========================================= */

/* Logo Wrapper */

.logo-wrapper{

  position:relative;

  width:320px;
  height:320px;

  display:flex;
  justify-content:center;
  align-items:center;

}

/* Logo Box */

.logo-box{

  position:relative;

  width:210px;
  height:210px;

  display:flex;
  justify-content:center;
  align-items:center;

  z-index:20;

}

/* Logo */

.logo-img{

  width:190px;
  height:190px;

  object-fit:contain;

  user-select:none;
  pointer-events:none;

  filter:
  drop-shadow(0 12px 25px rgba(255,20,120,.28));

  animation:

  logoZoom 1s ease,
  logoFloat 3s ease-in-out infinite,
  logoPulse 2.5s ease-in-out infinite;

}

/* Shine */

.logo-shine{

  position:absolute;

  top:-20px;
  left:-90px;

  width:70px;
  height:260px;

  transform:rotate(25deg);

  background:

  linear-gradient(
  90deg,
  transparent,
  rgba(255,255,255,.95),
  transparent);

  animation:shineMove 2.8s linear infinite;

}

/* ==========================
   RINGS
========================== */

.ring{

  position:absolute;

  border-radius:50%;

  border:2px solid rgba(255,90,160,.25);

}

.ring1{

  width:220px;
  height:220px;

  animation:

  ringRotate 12s linear infinite,
  ringPulse 4s ease-in-out infinite;

}

.ring2{

  width:260px;
  height:260px;

  animation:

  ringRotateReverse 16s linear infinite,
  ringPulse 5s ease-in-out infinite;

}

.ring3{

  width:300px;
  height:300px;

  animation:

  ringRotate 22s linear infinite,
  ringPulse 6s ease-in-out infinite;

}

/* ==========================
   HEARTS
========================== */

.heart{

  position:absolute;

  color:#ff004f;

  font-size:24px;

  text-shadow:

  0 0 10px #ff0055,
  0 0 20px #ff4b91,
  0 0 35px #ff91c4;

  animation:

  heartFloat 4s ease-in-out infinite,
  heartBlink .8s infinite;

}

.h1{

  left:5px;
  top:25px;

}

.h2{

  right:5px;
  top:35px;

  animation-delay:.8s;

}

.h3{

  left:20px;
  bottom:25px;

  animation-delay:1.5s;

}

.h4{

  right:20px;
  bottom:20px;

  animation-delay:2.2s;

}

/* ==========================
   SPARKLES
========================== */

.sparkle{

  position:absolute;

  color:#ffd700;

  font-size:22px;

  animation:

  sparkleBlink 2s infinite;

}

.s1{

  top:-5px;
  left:40px;

}

.s2{

  right:15px;
  top:45px;

  animation-delay:.5s;

}

.s3{

  left:0;
  bottom:40px;

  animation-delay:1s;

}

.s4{

  right:35px;
  bottom:5px;

  animation-delay:1.5s;

}

/* ==========================
   ANIMATIONS
========================== */

@keyframes logoZoom{

from{

opacity:0;
transform:scale(.4);

}

to{

opacity:1;
transform:scale(1);

}

}

@keyframes logoFloat{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-10px);

}

}

@keyframes logoPulse{

0%,100%{

filter:
drop-shadow(0 12px 25px rgba(255,20,120,.28));

}

50%{

filter:
drop-shadow(0 0 15px #ff4d94)
drop-shadow(0 0 40px #ff91c4);

}

}

@keyframes shineMove{

from{

left:-120px;

}

to{

left:260px;

}

}

@keyframes ringRotate{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}

@keyframes ringRotateReverse{

from{

transform:rotate(360deg);

}

to{

transform:rotate(0deg);

}

}

@keyframes ringPulse{

0%,100%{

opacity:.25;
transform:scale(.96);

}

50%{

opacity:.8;
transform:scale(1.05);

}

}

@keyframes heartFloat{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-14px);

}

}

@keyframes heartBlink{

0%,100%{

opacity:.35;
transform:scale(.9);

}

50%{

opacity:1;
transform:scale(1.25);

}

}

@keyframes sparkleBlink{

0%,100%{

opacity:.3;
transform:scale(.8) rotate(0deg);

}

50%{

opacity:1;
transform:scale(1.3) rotate(20deg);

}

}

/* ==========================================
   PART 5 - PREMIUM LOGO ANIMATION
========================================== */

/* Logo Box */

.logo-box{
position:relative;
width:200px;
height:200px;
display:flex;
justify-content:center;
align-items:center;
z-index:10;
animation:logoFloat 3s ease-in-out infinite;
}

/* Logo */

.logo-img{
position:relative;
width:180px;
height:180px;
object-fit:contain;
z-index:3;
filter:
drop-shadow(0 0 18px rgba(255,70,150,.45));
animation:
logoPulse 2.8s ease-in-out infinite;
}

/* Pink Glow */

.logo-glow{
position:absolute;
width:180px;
height:180px;
border-radius:50%;
background:radial-gradient(circle,
rgba(255,120,180,.45),
transparent 70%);
filter:blur(25px);
animation:glowPulse 2.5s ease-in-out infinite;
z-index:1;
}

/* Shine */

.logo-shine{
position:absolute;
left:-70px;
top:-20px;
width:60px;
height:240px;
background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.9),
transparent);
transform:rotate(25deg);
animation:shineMove 2.5s linear infinite;
z-index:5;
}

/* Sparkles */

.sparkle{
position:absolute;
font-size:20px;
color:#fff8b0;
text-shadow:
0 0 10px #fff,
0 0 18px #ffd700;
animation:sparkleBlink 1.8s infinite;
z-index:20;
}

.s1{top:5px;left:30px;}
.s2{top:25px;right:15px;animation-delay:.5s;}
.s3{bottom:18px;left:15px;animation-delay:1s;}
.s4{bottom:0;right:35px;animation-delay:1.5s;}

/* Brand */

.brand-name{
margin-top:25px;
font-size:34px;
font-weight:800;
letter-spacing:3px;
color:#d81b60;
text-shadow:
0 0 12px rgba(255,80,150,.35);
animation:brandGlow 2s infinite;
}

.tagline{
margin-top:8px;
font-size:15px;
letter-spacing:2px;
color:#8c4060;
}

/* Animations */

@keyframes glowPulse{

0%,100%{
transform:scale(.9);
opacity:.45;
}

50%{
transform:scale(1.15);
opacity:.9;
}

}

@keyframes logoPulse{

0%,100%{
transform:scale(1);
}

50%{
transform:scale(1.05);
}

}

@keyframes sparkleBlink{

0%,100%{
opacity:.2;
transform:scale(.7);
}

50%{
opacity:1;
transform:scale(1.4);
}

}

@keyframes brandGlow{

0%,100%{
opacity:.8;
}

50%{
opacity:1;
text-shadow:
0 0 10px #ff4d94,
0 0 25px #ff85b8;
}

}

/* Mobile */

@media(max-width:480px){

.logo-box{
width:170px;
height:170px;
}

.logo-img{
width:155px;
height:155px;
}

.logo-glow{
width:160px;
height:160px;
}

.brand-name{
font-size:28px;
}

.tagline{
font-size:13px;
}

}

/* ==========================================
   PART 6 - ULTRA LUXURY FINAL EFFECT
========================================== */

/* Hearts Premium */

.heart{
position:absolute;
font-size:24px;
color:#ff004f;
z-index:30;

text-shadow:
0 0 8px #ff2d75,
0 0 18px #ff5ca0,
0 0 40px #ff8fc0;

animation:
heartFloat 4s ease-in-out infinite,
heartBlink .9s ease-in-out infinite;
}

.h1{left:-25px;top:25px;}
.h2{right:-25px;top:40px;animation-delay:.3s;}
.h3{left:-5px;bottom:18px;animation-delay:.6s;}
.h4{right:8px;bottom:5px;animation-delay:.9s;}


/* Luxury Rings */

.ring{
position:absolute;
border-radius:50%;
border:2px solid rgba(255,105,180,.25);

animation:
ringRotate 14s linear infinite,
ringPulse 3s ease-in-out infinite;
}

.ring1{
width:220px;
height:220px;
}

.ring2{
width:260px;
height:260px;
animation-delay:1s;
}

.ring3{
width:300px;
height:300px;
animation-delay:2s;
}


/* Logo Hover */

.logo-wrapper:hover .logo-img{

transform:scale(1.08);

filter:
drop-shadow(0 0 20px #ff2d75)
drop-shadow(0 0 45px #ff80bf);

transition:.4s;

}


/* Loader */

.loader-fill{

background:linear-gradient(
90deg,
#ff2d75,
#ff73ad,
#ff2d75);

background-size:300% 100%;

animation:
loadingBar 3.5s linear forwards,
loaderGradient 2s linear infinite;

}


/* Background Shine */

.splash-container::before{

content:"";

position:absolute;

inset:0;

background:

linear-gradient(
120deg,
transparent,
rgba(255,255,255,.12),
transparent);

animation:
screenShine 5s linear infinite;

pointer-events:none;

}


/* Keyframes */

@keyframes heartBlink{

0%,100%{

opacity:.35;
transform:scale(.85);

}

50%{

opacity:1;
transform:scale(1.35);

text-shadow:
0 0 12px #ff0055,
0 0 25px #ff2d75,
0 0 55px #ff8fc0;

}

}

@keyframes loaderGradient{

0%{

background-position:0%;

}

100%{

background-position:300%;

}

}

@keyframes screenShine{

0%{

transform:translateX(-120%);

}

100%{

transform:translateX(120%);

}

}/* CategorySlider.css */

.category-container {
  width: 100%;
  display: flex;
  gap: 22px;

  overflow-x: auto;
  scroll-behavior: smooth;

  padding: 15px 10px;

  scrollbar-width: none;
}


.category-container::-webkit-scrollbar {
  display: none;
}



/* Category Item */

.category-item {

  min-width: 90px;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  cursor: pointer;

  transition: .3s ease;
}


.category-item:hover {
  transform: translateY(-5px);
}



/* Circle Image */

.category-icon {

  width: 78px;
  height: 78px;

  border-radius: 50%;

  overflow: hidden;

  background: #f7f7f7;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid #eee;
}



.category-icon img {

  width: 100%;
  height: 100%;

  object-fit: cover;

}



/* Category Name */

.category-name {

  margin-top: 10px;

  font-size: 14px;

  font-weight: 600;

  color: #333;

  text-align: center;

  max-width: 90px;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}



/* ==========================
       MOBILE
========================== */

@media(max-width:576px){

  .category-container {

    gap:16px;

    padding:12px 8px;

  }


  .category-item {

    min-width:75px;

  }


  .category-icon {

    width:65px;
    height:65px;

  }


  .category-name {

    font-size:12px;

    margin-top:8px;

  }

}



/* ==========================
       TABLET
========================== */

@media(min-width:577px) and (max-width:991px){

  .category-container {

    gap:20px;

  }


  .category-icon {

    width:75px;
    height:75px;

  }


  .category-name {

    font-size:13px;

  }

}



/* ==========================
       LAPTOP
========================== */

@media(min-width:992px) and (max-width:1399px){

  .category-container {

    justify-content:flex-start;

    gap:25px;

  }


  .category-icon {

    width:85px;
    height:85px;

  }

}



/* ==========================
       DESKTOP
========================== */

@media(min-width:1400px){

  .category-container {

    gap:35px;

    padding:20px;

  }


  .category-item {

    min-width:110px;

  }


  .category-icon {

    width:100px;
    height:100px;

  }


  .category-name {

    font-size:15px;

  }

}/**
 * Swiper 12.2.0
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2026 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: May 27, 2026
 */

:root {
  --swiper-theme-color: #007aff;
  /*
  --swiper-preloader-color: var(--swiper-theme-color);
  --swiper-wrapper-transition-timing-function: initial;
  */
}
:host {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
}
.swiper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  /* Fix of Webkit flickering */
  z-index: 1;
  display: block;
}
.swiper-vertical > .swiper-wrapper {
  flex-direction: column;
}
.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
  box-sizing: content-box;
}
.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
  transform: translate3d(0px, 0, 0);
}
.swiper-horizontal {
  touch-action: pan-y;
}
.swiper-vertical {
  touch-action: pan-x;
}
.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
  display: block;
}
.swiper-slide-invisible-blank {
  visibility: hidden;
}
/* Auto Height */
.swiper-autoheight,
.swiper-autoheight .swiper-slide {
  height: auto;
}
.swiper-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height;
}
.swiper-backface-hidden .swiper-slide {
  transform: translateZ(0);
  backface-visibility: hidden;
}
/* 3D Effects */
.swiper-3d.swiper-css-mode .swiper-wrapper {
  perspective: 1200px;
}
.swiper-3d .swiper-wrapper {
  transform-style: preserve-3d;
}
.swiper-3d {
  perspective: 1200px;
  .swiper-slide,
  .swiper-cube-shadow {
    transform-style: preserve-3d;
  }
}

/* CSS Mode */
.swiper-css-mode {
  > .swiper-wrapper {
    overflow: auto;
    scrollbar-width: none; /* For Firefox */
    -ms-overflow-style: none; /* For Internet Explorer and Edge */
    &::-webkit-scrollbar {
      display: none;
    }
  }
  > .swiper-wrapper > .swiper-slide {
    scroll-snap-align: start start;
  }
  &.swiper-horizontal {
    > .swiper-wrapper {
      scroll-snap-type: x mandatory;
    }
    > .swiper-wrapper > .swiper-slide:first-child {
      margin-inline-start: var(--swiper-slides-offset-before);
      scroll-margin-inline-start: var(--swiper-slides-offset-before);
    }
    > .swiper-wrapper > .swiper-slide:last-child {
      margin-inline-end: var(--swiper-slides-offset-after);
    }
  }
  &.swiper-vertical {
    > .swiper-wrapper {
      scroll-snap-type: y mandatory;
    }
    > .swiper-wrapper > .swiper-slide:first-child {
      margin-block-start: var(--swiper-slides-offset-before);
      scroll-margin-block-start: var(--swiper-slides-offset-before);
    }
    > .swiper-wrapper > .swiper-slide:last-child {
      margin-block-end: var(--swiper-slides-offset-after);
    }
  }
  &.swiper-free-mode {
    > .swiper-wrapper {
      scroll-snap-type: none;
    }
    > .swiper-wrapper > .swiper-slide {
      scroll-snap-align: none;
    }
  }
  &.swiper-centered {
    > .swiper-wrapper::before {
      content: '';
      flex-shrink: 0;
      order: 9999;
    }
    > .swiper-wrapper > .swiper-slide {
      scroll-snap-align: center center;
      scroll-snap-stop: always;
    }
  }
  &.swiper-centered.swiper-horizontal {
    > .swiper-wrapper > .swiper-slide:first-child {
      margin-inline-start: var(--swiper-centered-offset-before);
    }
    > .swiper-wrapper::before {
      height: 100%;
      min-height: 1px;
      width: var(--swiper-centered-offset-after);
    }
  }
  &.swiper-centered.swiper-vertical {
    > .swiper-wrapper > .swiper-slide:first-child {
      margin-block-start: var(--swiper-centered-offset-before);
    }
    > .swiper-wrapper::before {
      width: 100%;
      min-width: 1px;
      height: var(--swiper-centered-offset-after);
    }
  }
}

/* Slide styles start */
/* 3D Shadows */
.swiper-3d {
  .swiper-slide-shadow,
  .swiper-slide-shadow-left,
  .swiper-slide-shadow-right,
  .swiper-slide-shadow-top,
  .swiper-slide-shadow-bottom,
  .swiper-slide-shadow,
  .swiper-slide-shadow-left,
  .swiper-slide-shadow-right,
  .swiper-slide-shadow-top,
  .swiper-slide-shadow-bottom {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
  }
  .swiper-slide-shadow {
    background: rgba(0, 0, 0, 0.15);
  }
  .swiper-slide-shadow-left {
    background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }
  .swiper-slide-shadow-right {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }
  .swiper-slide-shadow-top {
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }
  .swiper-slide-shadow-bottom {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }
}
.swiper-lazy-preloader {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 10;
  transform-origin: 50%;
  box-sizing: border-box;
  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
  border-radius: 50%;
  border-top-color: transparent;
}
.swiper:not(.swiper-watch-progress),
.swiper-watch-progress .swiper-slide-visible {
  .swiper-lazy-preloader {
    animation: swiper-preloader-spin 1s infinite linear;
  }
}
.swiper-lazy-preloader-white {
  --swiper-preloader-color: #fff;
}
.swiper-lazy-preloader-black {
  --swiper-preloader-color: #000;
}
@keyframes swiper-preloader-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* Slide styles end */
:root {
  /*
  --swiper-pagination-color: var(--swiper-theme-color);
  --swiper-pagination-left: auto;
  --swiper-pagination-right: 8px;
  --swiper-pagination-bottom: 8px;
  --swiper-pagination-top: auto;
  --swiper-pagination-fraction-color: inherit;
  --swiper-pagination-progressbar-bg-color: rgba(0,0,0,0.25);
  --swiper-pagination-progressbar-size: 4px;
  --swiper-pagination-bullet-size: 8px;
  --swiper-pagination-bullet-width: 8px;
  --swiper-pagination-bullet-height: 8px;
  --swiper-pagination-bullet-border-radius: 50%;
  --swiper-pagination-bullet-inactive-color: #000;
  --swiper-pagination-bullet-inactive-opacity: 0.2;
  --swiper-pagination-bullet-opacity: 1;
  --swiper-pagination-bullet-horizontal-gap: 4px;
  --swiper-pagination-bullet-vertical-gap: 6px;
  */
}
.swiper-pagination {
  position: absolute;
  text-align: center;
  transition: 300ms opacity;
  transform: translate3d(0, 0, 0);
  z-index: 10;
  &.swiper-pagination-hidden {
    opacity: 0;
  }
  .swiper-pagination-disabled > &,
  &.swiper-pagination-disabled {
    display: none !important;
  }
}
/* Common Styles */
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: var(--swiper-pagination-bottom, 8px);
  top: var(--swiper-pagination-top, auto);
  left: 0;
  width: 100%;
}
/* Bullets */
.swiper-pagination-bullets-dynamic {
  overflow: hidden;
  font-size: 0;
  .swiper-pagination-bullet {
    transform: scale(0.33);
    position: relative;
  }
  .swiper-pagination-bullet-active {
    transform: scale(1);
  }
  .swiper-pagination-bullet-active-main {
    transform: scale(1);
  }
  .swiper-pagination-bullet-active-prev {
    transform: scale(0.66);
  }
  .swiper-pagination-bullet-active-prev-prev {
    transform: scale(0.33);
  }
  .swiper-pagination-bullet-active-next {
    transform: scale(0.66);
  }
  .swiper-pagination-bullet-active-next-next {
    transform: scale(0.33);
  }
}
.swiper-pagination-bullet {
  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
  display: inline-block;
  border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
  background: var(--swiper-pagination-bullet-inactive-color, #000);
  opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);
  button& {
    border: none;
    margin: 0;
    padding: 0;
    box-shadow: none;
    appearance: none;
  }
  .swiper-pagination-clickable & {
    cursor: pointer;
  }

  &:only-child {
    display: none !important;
  }
}
.swiper-pagination-bullet-active {
  opacity: var(--swiper-pagination-bullet-opacity, 1);
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
}

.swiper-vertical > .swiper-pagination-bullets,
.swiper-pagination-vertical.swiper-pagination-bullets {
  right: var(--swiper-pagination-right, 8px);
  left: var(--swiper-pagination-left, auto);
  top: 50%;
  transform: translate3d(0px, -50%, 0);
  .swiper-pagination-bullet {
    margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
    display: block;
  }
  &.swiper-pagination-bullets-dynamic {
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    .swiper-pagination-bullet {
      display: inline-block;
      transition:
        200ms transform,
        200ms top;
    }
  }
}
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-horizontal.swiper-pagination-bullets {
  .swiper-pagination-bullet {
    margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
  }
  &.swiper-pagination-bullets-dynamic {
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    .swiper-pagination-bullet {
      transition:
        200ms transform,
        200ms left;
    }
  }
}
.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition:
    200ms transform,
    200ms right;
}
/* Fraction */
.swiper-pagination-fraction {
  color: var(--swiper-pagination-fraction-color, inherit);
}
/* Progress */
.swiper-pagination-progressbar {
  background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.25));
  position: absolute;
  .swiper-pagination-progressbar-fill {
    background: var(--swiper-pagination-color, var(--swiper-theme-color));
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transform-origin: left top;
  }
  .swiper-rtl & .swiper-pagination-progressbar-fill {
    transform-origin: right top;
  }
  .swiper-horizontal > &,
  &.swiper-pagination-horizontal,
  .swiper-vertical > &.swiper-pagination-progressbar-opposite,
  &.swiper-pagination-vertical.swiper-pagination-progressbar-opposite {
    width: 100%;
    height: var(--swiper-pagination-progressbar-size, 4px);
    left: 0;
    top: 0;
  }
  .swiper-vertical > &,
  &.swiper-pagination-vertical,
  .swiper-horizontal > &.swiper-pagination-progressbar-opposite,
  &.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite {
    width: var(--swiper-pagination-progressbar-size, 4px);
    height: 100%;
    left: 0;
    top: 0;
  }
}
.swiper-pagination-lock {
  display: none;
}
/* BannerSlider.css */

.banner-slider {
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 18px;
}


/* Slide Container */
.banner-item {
  width: 100%;
  height: 400px;
  position: relative;
  overflow: hidden;
  border-radius: 18px;
}


/* Banner Image */
.banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* Overlay */
.banner-overlay {
  position: absolute;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  text-align: center;

  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.05),
    rgba(0,0,0,0.45)
  );

  padding: 20px;
}


.banner-overlay h2 {
  color: #fff;
  font-size: 42px;
  font-weight: 700;
  margin: 0;

  text-shadow:
    0 3px 8px rgba(0,0,0,0.5);
}


/* Pagination Dots */

.swiper-pagination {
  bottom: 15px !important;
}


.swiper-pagination-bullet {
  width: 10px;
  height: 10px;

  background: #fff;
  opacity: .7;

  transition: .3s;
}


.swiper-pagination-bullet-active {
  width: 28px;
  border-radius: 10px;
  opacity: 1;
}



/* =================================
      MOBILE
================================= */

@media (max-width: 576px) {

  .banner-slider {
    border-radius: 12px;
  }


  .banner-item {
    height: 200px;
    border-radius: 12px;
  }


  .banner-overlay h2 {
    font-size: 22px;
  }


  .banner-overlay {
    padding: 10px;
  }


  .swiper-pagination {
    bottom: 8px !important;
  }

}



/* =================================
      TABLET
================================= */

@media (min-width:577px) and (max-width:991px){

  .banner-item {
    height: 260px;
  }


  .banner-overlay h2 {
    font-size: 30px;
  }

}



/* =================================
      LAPTOP
================================= */

@media (min-width:992px) and (max-width:1399px){

  .banner-item {
    height: 320px;
  }


  .banner-overlay h2 {
    font-size: 36px;
  }

}



/* =================================
      LARGE DESKTOP
================================= */

@media (min-width:1400px){

  .banner-item {
    height: 420px;
  }


  .banner-overlay h2 {
    font-size: 48px;
  }

}



/* Extra small mobile */

@media(max-width:380px){

  .banner-item {
    height:180px;
  }


  .banner-overlay h2 {
    font-size:20px;
  }

}/* ==========================================
   HOT DEAL SECTION
========================================== */

.hot-deals-container{
    width:100%;
    padding:16px;
    box-sizing:border-box;
    background:linear-gradient(90deg,#6d00ff,#8b2cff,#6200ea);
}

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

.deals-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:16px;
}

.deals-header h3{
    margin:0;
    color:#fff;
    font-size:28px;
    font-weight:700;
}

.hot-view-all-btn{
    background:#fff;
    color:#6200ea;
    border:none;
    border-radius:8px;
    padding:8px 16px;
    font-size:12px;
    font-weight:700;
    cursor:pointer;
    transition:.25s;
}

.hot-view-all-btn:hover{
    transform:scale(1.05);
}

/* ==========================================
   PRODUCT SCROLL
========================================== */

.hot-product-scroll{
    display:flex;
    gap:12px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-behavior:smooth;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
}

.hot-product-scroll::-webkit-scrollbar{
    display:none;
}

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

.hot-product-card{

    flex:0 0 calc((100% - 18px)/2.5);
    min-width:calc((100% - 18px)/2.5);
    max-width:calc((100% - 18px)/2.5);

    background:#fff;
    border-radius:14px;
    overflow:hidden;
    cursor:pointer;
    flex-shrink:0;

    transition:.25s;
    box-shadow:0 4px 12px rgba(0,0,0,.12);
}

.hot-product-card:hover{
    transform:translateY(-4px);
}

/* ==========================================
   IMAGE
========================================== */

.hot-product-img{
    width:100%;
    height:170px;
    overflow:hidden;
    background:#f5f5f5;
}

.hot-product-img img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center top;
    display:block;
}

/* ==========================================
   CONTENT
========================================== */

.hot-product-name{
    margin:10px 10px 5px;
    font-size:14px;
    font-weight:600;
    color:#222;
    line-height:18px;

    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;

    min-height:36px;
}

.hot-product-cat{
    margin:0 10px;
    font-size:12px;
    color:#03a685;
    font-weight:600;
}

.hot-product-price{
    margin:6px 10px 12px;
    font-size:18px;
    font-weight:700;
    color:#111;
}

/* ==========================================
   DESKTOP (7 Cards)
========================================== */

@media (min-width:1400px){

.hot-product-card{

flex:0 0 calc((100% - 72px)/7);
min-width:calc((100% - 72px)/7);
max-width:calc((100% - 72px)/7);

}

.hot-product-img{
height:185px;
}

}

/* ==========================================
   LAPTOP (5.5 Cards)
========================================== */

@media (min-width:992px) and (max-width:1399px){

.hot-product-card{

flex:0 0 calc((100% - 48px)/5.5);
min-width:calc((100% - 48px)/5.5);
max-width:calc((100% - 48px)/5.5);

}

.hot-product-img{
height:170px;
}

}

/* ==========================================
   TABLET (3.5 Cards)
========================================== */

@media (min-width:768px) and (max-width:991px){

.hot-product-card{

flex:0 0 calc((100% - 24px)/3.5);
min-width:calc((100% - 24px)/3.5);
max-width:calc((100% - 24px)/3.5);

}

.hot-product-img{
height:155px;
}

}

/* ==========================================
   MOBILE (2.5 Cards)
========================================== */

@media (max-width:767px){

.hot-deals-container{
padding:14px 10px;
}

.deals-header h3{
font-size:24px;
}

.hot-view-all-btn{
font-size:11px;
padding:7px 12px;
}

.hot-product-card{

flex:0 0 calc((100% - 12px)/2.5);
min-width:calc((100% - 12px)/2.5);
max-width:calc((100% - 12px)/2.5);

}

.hot-product-img{
height:135px;
}

.hot-product-name{
font-size:12px;
min-height:32px;
}

.hot-product-cat{
font-size:11px;
}

.hot-product-price{
font-size:15px;
}

}

/* ==========================================
   SMALL MOBILE
========================================== */

@media (max-width:480px){

.hot-product-img{
    height:170px;
}

.hot-product-img img{
    object-position:center top;
}

.hot-product-name{
    font-size:11px;
}

.hot-product-price{
    font-size:14px;
}

}/* =========================================================
   GRID PRODUCT SECTION
========================================================= */

.grid-container {
  width: 100%;
  margin: 0;
  padding: 15px;
  background: #d4ffcd;
  border-radius: 15px;
  box-sizing: border-box;
}


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

.deals-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

.deals-header h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  color: #111;
}


/* =========================================================
   VIEW ALL BUTTON
========================================================= */

.grid-view-all-btn {
  background: #3b00ff;
  color: #fff;
  border: none;
  padding: 9px 18px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.25s ease;
}

.grid-view-all-btn:hover {
  background: #2500b8;
  transform: translateY(-1px);
}


/* =========================================================
   PRODUCT GRID
========================================================= */

.grid-products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}


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

.grid-card {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e5e5e5;
  overflow: hidden;
  cursor: pointer;

  display: flex;
  flex-direction: column;

  box-sizing: border-box;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.grid-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}


/* =========================================================
   PRODUCT IMAGE
========================================================= */

.grid-image {
  width: 100%;
  height: 250px;
  display: block;
  object-fit: cover;
  object-position: center top;
  background: #f5f5f5;
}


/* =========================================================
   PRODUCT CONTENT
========================================================= */

.grid-content {
  padding: 12px;
  box-sizing: border-box;
}


/* =========================================================
   PRODUCT NAME
========================================================= */

.grid-card h3 {
  margin: 0;

  font-size: 15px;
  font-weight: 600;

  line-height: 1.4;

  color: #111;

  height: 42px;

  overflow: hidden;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}


/* =========================================================
   SHORT DESCRIPTION
========================================================= */

.short-description {
  margin: 6px 0 10px;

  font-size: 13px;
  line-height: 1.45;

  color: #555;

  height: 38px;

  overflow: hidden;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;

  text-overflow: ellipsis;
}


/* =========================================================
   PRICE ROW
========================================================= */

.price-row {
  display: flex;
  align-items: center;

  gap: 8px;

  margin-top: 5px;
}


/* =========================================================
   SELLING PRICE
========================================================= */

.price {
  font-size: 19px;
  font-weight: 700;

  color: #111;

  white-space: nowrap;
}


/* =========================================================
   MRP
========================================================= */

.mrp {
  font-size: 14px;

  color: #888;

  text-decoration: line-through;

  white-space: nowrap;
}


/* =========================================================
   DISCOUNT
========================================================= */

.discount {
  display: inline-block;

  margin-top: 7px;

  color: #e60023;

  font-size: 13px;

  font-weight: 700;
}


/* =========================================================
   RATING
========================================================= */

.rating {
  display: flex;

  align-items: center;

  gap: 7px;

  margin-top: 9px;

  padding-top: 8px;

  border-top: 1px solid #f0f0f0;
}


/* =========================================================
   AMAZON / FLIPKART STYLE RATING BOX
========================================================= */

.rating-box {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 3px;

  min-width: 36px;

  padding: 4px 7px;

  background: #198754;

  color: #fff;

  border-radius: 4px;

  font-size: 12px;

  font-weight: 700;

  line-height: 1;

  box-sizing: border-box;
}


/* =========================================================
   RATING STAR
========================================================= */

.rating-star {
  font-size: 11px;

  color: #fff;

  line-height: 1;
}


/* =========================================================
   REVIEW COUNT
========================================================= */

.review-count {
  font-size: 12px;

  color: #777;

  white-space: nowrap;
}


/* =========================================================
   TABLET
========================================================= */

@media (min-width: 768px) {

  .grid-products {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }

  .grid-image {
    height: 220px;
  }

}


/* =========================================================
   LAPTOP
========================================================= */

@media (min-width: 1024px) {

  .grid-products {
    grid-template-columns:
      repeat(4, minmax(0, 1fr));
  }

  .grid-image {
    height: 260px;
  }

}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 1400px) {

  .grid-products {
    grid-template-columns:
      repeat(5, minmax(0, 1fr));
  }

}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1600px) {

  .grid-image {
    height: 300px;
  }

  .grid-card h3 {
    font-size: 16px;
  }

  .price {
    font-size: 21px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

  .grid-container {
    padding: 10px;

    border-radius: 12px;
  }


  /* Header */

  .deals-header {
    margin-bottom: 14px;
  }

  .deals-header h2 {
    font-size: 18px;
  }


  /* View All */

  .grid-view-all-btn {
    padding: 7px 12px;

    font-size: 13px;

    border-radius: 7px;
  }


  /* Grid */

  .grid-products {
    gap: 10px;
  }


  /* Image */

  .grid-image {
  height: 210px;
  object-position: center top;
  }


  /* Content */

  .grid-content {
    padding: 10px;
  }


  /* Product name */

  .grid-card h3 {
    font-size: 13px;

    line-height: 1.4;

    height: 36px;
  }


  /* Description */

  .short-description {
    font-size: 12px;

    line-height: 1.4;

    height: 34px;

    margin: 5px 0 8px;
  }


  /* Price */

  .price-row {
    gap: 6px;

    margin-top: 4px;
  }

  .price {
    font-size: 16px;
  }

  .mrp {
    font-size: 12px;
  }


  /* Discount */

  .discount {
    margin-top: 6px;

    font-size: 12px;
  }


  /* Rating */

  .rating {
    gap: 6px;

    margin-top: 8px;

    padding-top: 7px;
  }


  .rating-box {
    min-width: 34px;

    padding: 4px 6px;

    font-size: 11px;
  }


  .rating-star {
    font-size: 10px;
  }


  .review-count {
    font-size: 11px;
  }

  .grid-products {
    grid-template-columns: repeat(2, 1fr);
  }

}
/* ===========================
   Container
=========================== */

.tp-container {
  width: 100%;
  padding: 15px;
  background: #f9f9f9;
  box-sizing: border-box;
}

/* ===========================
   Header
=========================== */

.tp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

.tp-title {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
}

.tp-viewall {
  background: #2500ff;
  color: #fff;
  border: none;
  padding: 9px 18px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: .3s;
  width: auto;
}

.tp-viewall:hover {
  background: #1800b8;
}

/* ===========================
   Product Grid
=========================== */

.tp-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}

/* Tablet */

@media (min-width:768px) {
  .tp-grid {
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
}

/* Laptop */

@media (min-width:1024px) {
  .tp-grid {
    grid-template-columns: repeat(4, minmax(0,1fr));
  }
}

/* Desktop */

@media (min-width:1400px) {
  .tp-grid {
    grid-template-columns: repeat(5, minmax(0,1fr));
  }
}

/* ===========================
   Product Card
=========================== */

.tp-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #ececec;
  cursor: pointer;
  transition: .3s;
  display: flex;
  flex-direction: column;
}

.tp-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
}

/* ===========================
   Product Image
=========================== */

.tp-image {
  width: 100%;
  height: 260px;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* ===========================
   Content
=========================== */

.tp-content {
  padding: 12px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.tp-tag {
  display: inline-block;
  background: #ff1744;
  color: #fff;
  padding: 3px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 8px;
  width: fit-content;
}

.tp-content h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  height: 42px;
  overflow: hidden;
}

.tp-desc {
  margin-top: 6px;
  font-size: 13px;
  color: #666;
  line-height: 1.4;
  height: 36px;
  overflow: hidden;
}

.tp-price-box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.tp-price {
  font-size: 20px;
  font-weight: bold;
  color: #111;
}

.tp-mrp {
  font-size: 14px;
  color: #888;
  text-decoration: line-through;
}

.tp-discount {
  color: #008c2e;
  font-size: 13px;
  font-weight: 700;
}

.tp-rating {
  margin-top: auto;
  padding-top: 10px;
  font-size: 13px;
  color: #f39c12;
  font-weight: 500;
}

.tp-loading,
.tp-no-data {
  text-align: center;
  padding: 30px;
  font-size: 16px;
}

/* ===========================
   Mobile
=========================== */

@media (max-width:767px){

.tp-container{
padding:10px;
}

.tp-grid{
gap:10px;
}

.tp-image{
  height:210px;
  object-position:center top;
}

.tp-content{
padding:10px;
}

.tp-content h3{
font-size:13px;
height:36px;
}

.tp-desc{
font-size:12px;
height:32px;
}

.tp-price{
font-size:17px;
}

.tp-mrp{
font-size:12px;
}

.tp-discount{
font-size:12px;
}

.tp-rating{
font-size:12px;
}

.tp-title{
font-size:18px;
}

.tp-viewall{
padding:7px 12px;
font-size:13px;
}

}

/* ===========================
   Tablet
=========================== */

@media (min-width:768px) and (max-width:1023px){

.tp-image{
  height:240px;
  object-position:center top;
}

}

/* ===========================
   Laptop
=========================== */

@media (min-width:1024px){

  .tp-image{
    height:260px;
    object-position:center top;
  }

}

/* ===========================
   Large Desktop
=========================== */

@media (min-width:1600px){

.tp-image{
height:300px;
}

.tp-content h3{
font-size:16px;
}

.tp-price{
font-size:22px;
}

}.recent-products-container {
  margin: 18px 0;
  padding: 12px;
  background: #fff;
  border-radius: 14px;
}

.recent-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.recent-title {
  font-size: 20px;
  font-weight: 700;
  color: #222;
  margin: 0;
}

.recent-view-all {
  font-size: 14px;
  font-weight: 600;
  color: #ff5a1f;
  cursor: pointer;
  transition: .2s;
}

.recent-view-all:hover {
  color: #e14a12;
}

.recent-products-list {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding-bottom: 8px;
}

.recent-products-list::-webkit-scrollbar {
  display: none;
}

.recent-product-card {
  min-width: 105px;
  max-width: 105px;
  flex-shrink: 0;
  cursor: pointer;
}

.recent-product-image {
  width: 105px;
  height: 130px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid #ececec;
  transition: .25s;
}

.recent-product-card:hover .recent-product-image {
  transform: scale(1.03);
}

.recent-product-name {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #222;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;

  line-height: 17px;
  height: 34px;
}

.recent-product-price {
  margin-top: 4px;
  font-size: 15px;
  font-weight: 700;
  color: #000;
}

@media (max-width:768px) {

  .recent-products-container{
    padding:10px;
  }

  .recent-title{
    font-size:18px;
  }

  .recent-view-all{
    font-size:13px;
  }

  .recent-product-card{
    min-width:95px;
    max-width:95px;
  }

  .recent-product-image{
    width:95px;
    height:120px;
  }

  .recent-product-name{
    font-size:12px;
    line-height:16px;
    height:32px;
  }

  .recent-product-price{
    font-size:14px;
  }

}/* ===============================
   FOOTER MAIN
================================ */

.footer{
    background:#111;
    color:#fff;
    padding:50px 20px 0;
    margin-top:40px;
    font-family:Arial, sans-serif;
}
/* ===============================
   FOOTER CONTAINER
================================ */
.footer-container{
    max-width:1200px;
    margin:auto;
    display:grid;
    grid-template-columns:
    1.5fr 1fr 1fr 1.2fr;
    gap:35px;
}
/* ===============================
   SECTION
================================ */
.footer-section h2{
    font-size:28px;
    margin-bottom:15px;
    color:#ff3f6c;
}

.footer-section h3{
    font-size:20px;
    margin-bottom:18px;
    color:#fff;
}

.footer-section p{
    color:#ccc;
    line-height:1.6;
    font-size:15px;
}
/* ===============================
   LINKS
================================ */
.footer-section ul{
    list-style:none;
    padding:0;
    margin:0;
}

.footer-section ul li{
    margin-bottom:12px;
}

.footer-section ul li a{
    text-decoration:none;
    color:#ccc;
    transition:.3s;
}

.footer-section ul li a:hover{
    color:#ff3f6c;
    padding-left:5px;
}
/* ===============================
   SOCIAL ICONS
================================ */
.social-icons{
    display:flex;
    gap:12px;
    margin-top:20px;
}

.social-icons a{
    width:38px;
    height:38px;
    border-radius:50%;
    background:#222;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    transition:.3s;
}

.social-icons svg{
    font-size:22px;
}

.social-icons a:hover{
    background:#ff3f6c;
    transform:translateY(-4px);
}
/* ===============================
   CONTACT
================================ */
.contact p{
    display:flex;
    align-items:center;
    gap:10px;
    margin:14px 0;
}

.contact svg{
    color:#ff3f6c;
    font-size:22px;
}
/* ===============================
   SUBSCRIBE BOX
================================ */
.subscribe-box{
    max-width:800px;
    margin:40px auto;
    text-align:center;
    padding:25px;
    background:
    linear-gradient(
        135deg,
        #ff3f6c,
        #ff8a00
    );
    border-radius:20px;
}

.subscribe-box h3{
    font-size:20px;
    margin-bottom:10px;
}

.subscribe-box p{
    color:#fff;
    margin-bottom:20px;
}

.subscribe-input{
    display:flex;
    max-width:500px;
    margin:auto;
    background:#fff;
    border-radius:50px;
    overflow:hidden;
}

.subscribe-input input{
    flex:1;
    border:none;
    outline:none;
    padding:15px 20px;
    font-size:15px;
}

.subscribe-input button{
    border:none;
    background:#111;
    color:#fff;
    padding:0 30px;
    cursor:pointer;
    font-weight:600;
    transition:.3s;
}

.subscribe-input button:hover{
    background:#333;
}



/* ===============================
   BOTTOM
================================ */


.footer-bottom{
    border-top:1px solid #333;
    margin-top:30px;
    padding:20px 0;
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:10px;
    text-align:center;
}


.footer-bottom p{
    margin:0;
    color:#aaa;
    font-size:14px;
}



/* ===============================
   TABLET
================================ */
@media (max-width:900px){

.footer-container{

    grid-template-columns:1fr;

    gap:25px;

}

.footer-section{

    text-align:left;

}

.social-icons{

    justify-content:flex-start;

}

.contact p{

    justify-content:flex-start;

    flex-wrap:wrap;

    word-break:break-word;

}

}
/* ===============================
   MOBILE
================================ */


@media(max-width:600px){

.subscribe-input{
    display:flex;
    flex-direction:row;
    width:100%;
    height:45px;
    background:#fff;
    border-radius:50px;
    overflow:hidden;
}



.subscribe-input input{
    flex:1;
    width:100%;
    min-width:0;
    border:none;
    outline:none;
    padding:0 15px;
    font-size:14px;
}

.footer-section h3,
.footer-section h2{

    word-break:break-word;

}

.contact p{

    font-size:14px;

    overflow-wrap:anywhere;

}


.subscribe-input button{
    flex-shrink:0;
    width:95px;
    height:45px;
    padding:0;
    border:none;
    background:#111;
    color:#fff;
    font-size:13px;
    font-weight:600;
}
}
/* =========================
   Home Page
========================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
}

.homepage-container {
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
  background: #fff;
}

.main-content {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.product-section {
  width: 100%;
  padding: 12px 0;
}

/* =========================
   Hot Deals
========================= */

.hot-deals-container {
  width: 100%;
  padding: 16px;
  margin: 0;
  background: linear-gradient(135deg, #8a2be2, #4b00ff);
}

.deals-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.deals-header h3 {
  margin: 0;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
}

.view-all-btn {
  border: none;
  outline: none;
  cursor: pointer;
  background: #2500ff;
  color: #fff;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.product-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.product-scroll::-webkit-scrollbar {
  display: none;
}

.product-card {
  flex: 0 0 160px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
}

.product-img-box {
  width: 100%;
  aspect-ratio: 1/1;
  overflow: hidden;
}

.product-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-name {
  font-size: 15px;
  font-weight: 500;
  margin: 8px;
}

.p-price {
  font-size: 16px;
  font-weight: 700;
  margin: 0 8px 10px;
}

/* =========================
   Tablet
========================= */

@media (max-width:768px){

.hot-deals-container{
padding:14px;
}

.deals-header h3{
font-size:20px;
}

.product-card{
flex:0 0 150px;
}

}

/* =========================
   Mobile
========================= */

@media (max-width:480px){

.product-section{
padding:10px 0;
}

.hot-deals-container{
padding:12px;
}

.deals-header h3{
font-size:18px;
}

.view-all-btn{
padding:7px 12px;
font-size:12px;
}

.product-card{
flex:0 0 135px;
}

.p-name{
font-size:14px;
}

.p-price{
font-size:15px;
}

}

/* =========================
   Small Mobile
========================= */

@media (max-width:360px){

.hot-deals-container{
padding:10px;
}

.deals-header h3{
font-size:16px;
}

.product-card{
flex:0 0 125px;
}

}/* ============================================================
   AUTH PAGE
============================================================ */

:root {
  --auth-pink: #ff3f6c;
  --auth-pink-dark: #d63384;
  --auth-dark: #282c3f;
  --auth-gray: #777;
  --auth-border: #e5e5e5;
  --auth-bg: #ffffff;
}


/* ============================================================
   MAIN CONTAINER
============================================================ */

.auth-container {
  min-height: 100vh;
  width: 100%;

  background:
    linear-gradient(
      135deg,
      #fff5f8 0%,
      #ffffff 45%,
      #fff8fb 100%
    );

  display: flex;
  flex-direction: column;
  align-items: center;

  padding: 35px 20px 25px;

  box-sizing: border-box;

  position: relative;

  overflow-x: hidden;
}


/* ============================================================
   CLOSE BUTTON
============================================================ */

.close-icon {
  position: absolute;

  top: 18px;
  right: 18px;

  width: 28px;
  height: 28px;

  color: #555;

  cursor: pointer;

  transition:
    transform 0.2s ease,
    color 0.2s ease;
}

.close-icon:hover {
  color: var(--auth-pink);
  transform: rotate(90deg);
}


/* ============================================================
   LOGO SECTION
============================================================ */

.logo-section {
  width: 100%;
  max-width: 420px;

  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;

  margin-top: 10px;
  margin-bottom: 28px;
}


.logo-circle {
  width: 72px;
  height: 72px;

  border-radius: 50%;

  background:
    linear-gradient(
      135deg,
      #ff3f6c,
      #d63384
    );

  display: flex;
  align-items: center;
  justify-content: center;

  box-shadow:
    0 10px 25px
    rgba(255, 63, 108, 0.25);

  margin-bottom: 14px;
}


.logo-circle span {
  color: #ffffff;

  font-size: 25px;

  font-weight: 800;

  letter-spacing: 1px;
}


.logo-section h2 {
  margin: 0;

  color: var(--auth-dark);

  font-size: 23px;

  font-weight: 800;

  letter-spacing: 1.5px;
}


.logo-section p {
  margin: 7px 0 0;

  color: var(--auth-gray);

  font-size: 14px;

  font-weight: 500;
}


/* ============================================================
   FORM
============================================================ */

.auth-form {
  width: 100%;
  max-width: 420px;

  display: flex;
  flex-direction: column;

  gap: 14px;
}


/* ============================================================
   INPUT
============================================================ */

.auth-form > input,
.password-box input {
  width: 100%;

  height: 52px;

  box-sizing: border-box;

  border: 1px solid var(--auth-border);

  border-radius: 9px;

  background: #ffffff;

  color: var(--auth-dark);

  font-size: 15px;

  padding: 0 16px;

  outline: none;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}


.auth-form > input::placeholder,
.password-box input::placeholder {
  color: #aaa;
}


.auth-form > input:focus,
.password-box:focus-within {
  border-color: var(--auth-pink);

  box-shadow:
    0 0 0 3px
    rgba(255, 63, 108, 0.10);
}


/* ============================================================
   PASSWORD
============================================================ */

.password-box {
  width: 100%;

  height: 52px;

  position: relative;

  border: 1px solid var(--auth-border);

  border-radius: 9px;

  background: #ffffff;

  box-sizing: border-box;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}


.password-box input {
  height: 100%;

  border: none;

  padding-right: 48px;

  box-shadow: none;
}


.password-box input:focus {
  box-shadow: none;
}


.eye-icon {
  position: absolute;

  right: 15px;
  top: 50%;

  transform: translateY(-50%);

  width: 21px;
  height: 21px;

  color: #777;

  cursor: pointer;

  transition:
    color 0.2s ease;
}


.eye-icon:hover {
  color: var(--auth-pink);
}


/* ============================================================
   FORGOT PASSWORD
============================================================ */

.forgot-link {
  align-self: flex-end;

  margin: -4px 2px 0;

  color: var(--auth-pink-dark);

  font-size: 13px;

  font-weight: 600;

  cursor: pointer;

  user-select: none;
}


.forgot-link:hover {
  text-decoration: underline;
}


/* ============================================================
   AUTH BUTTON
============================================================ */

.auth-btn {
  width: 100%;

  height: 52px;

  margin-top: 3px;

  border: none;

  border-radius: 9px;

  background:
    linear-gradient(
      135deg,
      #ff3f6c,
      #d63384
    );

  color: #ffffff;

  font-size: 15px;

  font-weight: 800;

  letter-spacing: 0.7px;

  cursor: pointer;

  box-shadow:
    0 8px 18px
    rgba(255, 63, 108, 0.22);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    opacity 0.2s ease;
}


.auth-btn:hover:not(:disabled) {
  transform: translateY(-1px);

  box-shadow:
    0 11px 22px
    rgba(255, 63, 108, 0.30);
}


.auth-btn:active:not(:disabled) {
  transform: translateY(0);
}


.auth-btn:disabled {
  cursor: not-allowed;

  opacity: 0.65;
}


/* ============================================================
   DIVIDER
============================================================ */

.divider {
  width: 100%;
  max-width: 420px;

  display: flex;
  align-items: center;

  gap: 12px;

  margin: 24px 0 18px;

  color: #aaa;

  font-size: 12px;

  font-weight: 600;
}


.divider::before,
.divider::after {
  content: "";

  flex: 1;

  height: 1px;

  background: #e8e8e8;
}


.divider span {
  padding: 0 3px;
}


/* ============================================================
   GOOGLE BUTTON
============================================================ */

.google-btn {
  width: 100%;
  max-width: 420px;

  height: 52px;

  border: 1px solid #dedede;

  border-radius: 9px;

  background: #ffffff;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 12px;

  color: #333;

  font-size: 15px;

  font-weight: 600;

  cursor: pointer;

  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}


.google-btn img {
  width: 20px;
  height: 20px;

  object-fit: contain;
}


.google-btn:hover:not(:disabled) {
  background: #fafafa;

  border-color: #ccc;

  box-shadow:
    0 5px 15px
    rgba(0, 0, 0, 0.08);

  transform: translateY(-1px);
}


.google-btn:disabled {
  cursor: not-allowed;

  opacity: 0.6;
}


/* ============================================================
   BOTTOM LINK
============================================================ */

.bottom-link {
  margin: 22px 0 0;

  color: #777;

  font-size: 14px;

  text-align: center;

  cursor: pointer;

  user-select: none;
}


.bottom-link span {
  color: var(--auth-pink-dark);

  font-weight: 700;
}


.bottom-link:hover span {
  text-decoration: underline;
}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 480px) {

  .auth-container {
    padding:
      30px 18px 22px;
  }


  .close-icon {
    top: 14px;
    right: 14px;

    width: 25px;
    height: 25px;
  }


  .logo-section {
    margin-top: 8px;

    margin-bottom: 24px;
  }


  .logo-circle {
    width: 64px;
    height: 64px;
  }


  .logo-circle span {
    font-size: 22px;
  }


  .logo-section h2 {
    font-size: 20px;
  }


  .logo-section p {
    font-size: 13px;
  }


  .auth-form {
    gap: 12px;
  }


  .auth-form > input,
  .password-box,
  .auth-btn,
  .google-btn {
    height: 50px;
  }


  .auth-form > input,
  .password-box input {
    font-size: 14px;
  }


  .google-btn {
    font-size: 14px;
  }


  .bottom-link {
    font-size: 13px;
  }

}


/* ============================================================
   VERY SMALL DEVICES
============================================================ */

@media (max-width: 350px) {

  .auth-container {
    padding-left: 14px;
    padding-right: 14px;
  }


  .logo-section h2 {
    font-size: 18px;
  }


  .auth-form > input,
  .password-box input {
    font-size: 13px;
  }


  .auth-btn,
  .google-btn {
    font-size: 13px;
  }

}/* =========================================
   FORGOT PASSWORD
   PART 1
   RESET + PAGE + CARD
========================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

.forgot-page{
    position:relative;
    width:100%;
    min-height:100vh;
    overflow:hidden;

    display:flex;
    justify-content:center;
    align-items:center;

    padding:22px;

    background:linear-gradient(
        135deg,
        #ff2f7d 0%,
        #ff4b97 40%,
        #ff6fb0 100%
    );
}

.forgot-page{
    position:relative;
    width:100%;
    min-height:100vh;
    overflow:hidden;

    display:flex;
    justify-content:center;
    align-items:center;

    padding:22px;

    background:
    linear-gradient(135deg,#ff2f7d 0%,#ff4b97 40%,#ff6fb0 100%);
}

/* Floating Background */

.forgot-page::before{
    content:"";
    position:absolute;
    width:260px;
    height:260px;
    border-radius:50%;
    background:rgba(255,255,255,.10);
    left:-90px;
    top:-80px;
    animation:float1 8s ease-in-out infinite;
}

.forgot-page::after{
    content:"";
    position:absolute;
    width:220px;
    height:220px;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    right:-70px;
    bottom:-60px;
    animation:float2 9s ease-in-out infinite;
}

@keyframes float1{

0%,100%{
transform:translateY(0);
}

50%{
transform:translateY(35px);
}

}

@keyframes float2{

0%,100%{
transform:translateY(0);
}

50%{
transform:translateY(-30px);
}

}

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

.forgot-card{

position:relative;
z-index:2;

width:100%;
max-width:390px;

padding:32px 26px;

border-radius:30px;

background:rgba(255,255,255,.96);

backdrop-filter:blur(12px);

box-shadow:
0 18px 45px rgba(0,0,0,.18);

animation:cardOpen .45s ease;

}

@keyframes cardOpen{

from{
opacity:0;
transform:translateY(30px) scale(.94);
}

to{
opacity:1;
transform:translateY(0) scale(1);
}

}

/* =========================
      TITLE
========================= */

.forgot-card h2{

font-size:36px;
font-weight:700;
line-height:48px;

text-align:center;

color:#d63384;

margin-bottom:12px;

}

.subtitle{

text-align:center;

font-size:16px;
line-height:28px;

color:#777;

margin-bottom:28px;

}

/* =========================
      INPUT
========================= */

.forgot-card input{

width:100%;
height:58px;

padding:0 18px;

border:none;

border-radius:16px;

background:#fff;

font-size:16px;

outline:none;

box-shadow:
0 0 0 2px #ececec;

transition:.3s;

}

.forgot-card input:focus{

box-shadow:
0 0 0 2px #d63384,
0 8px 18px rgba(214,51,132,.15);

}

.forgot-card input::placeholder{

color:#999;

}

/* =========================
      MAIL AREA
========================= */

.mail-track{

position:relative;

width:100%;
height:90px;

margin:30px 0;

overflow:hidden;

}

.mail-track::before{

content:"";

position:absolute;

left:20px;
right:20px;

top:50%;

height:5px;

transform:translateY(-50%);

border-radius:50px;

background:#ffd5e7;

}

/* =========================================
   PART 2
   MAIL ANIMATION + BUTTON
========================================= */

/* Mail Circle */

.mail-box{

position:absolute;

left:0;

top:50%;

transform:translateY(-50%);

width:62px;
height:62px;

border-radius:50%;

background:linear-gradient(135deg,#d63384,#ff4f9d);

display:flex;
justify-content:center;
align-items:center;

color:#fff;
font-size:32px;

box-shadow:
0 10px 20px rgba(214,51,132,.35);

transition:
left 1.4s ease,
background .3s,
transform .3s;

z-index:5;

}

/* Loading */

.mail-box.fly{

left:calc(100% - 62px);

}

/* Success */

.mail-box.success{

left:calc(100% - 62px);

background:linear-gradient(135deg,#18b857,#28d76f);

box-shadow:
0 0 20px rgba(24,184,87,.45);

}

/* Error */

.mail-box.error{

left:calc(100% - 62px);

background:linear-gradient(135deg,#ff3b3b,#dc2626);

box-shadow:
0 0 20px rgba(220,38,38,.45);

animation:shake .45s;

}

/* Shake */

@keyframes shake{

0%{transform:translateY(-50%) translateX(0);}
20%{transform:translateY(-50%) translateX(-6px);}
40%{transform:translateY(-50%) translateX(6px);}
60%{transform:translateY(-50%) translateX(-6px);}
80%{transform:translateY(-50%) translateX(6px);}
100%{transform:translateY(-50%) translateX(0);}

}

/* Tick */

.tick{

position:absolute;

right:0;

top:50%;

transform:translateY(-50%);

font-size:36px;

color:#18b857;

animation:zoom .3s;

}

/* Cross */

.cross{

position:absolute;

right:0;

top:50%;

transform:translateY(-50%);

font-size:36px;

color:#dc2626;

animation:zoom .3s;

}

@keyframes zoom{

from{

opacity:0;

transform:translateY(-50%) scale(.3);

}

to{

opacity:1;

transform:translateY(-50%) scale(1);

}

}

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

.send-btn{

width:100%;

height:56px;

border:none;

border-radius:16px;

cursor:pointer;

display:flex;
justify-content:center;
align-items:center;
gap:10px;

font-size:17px;
font-weight:700;

color:#fff;

background:
linear-gradient(135deg,#d63384,#ff4f9d);

box-shadow:
0 12px 25px rgba(214,51,132,.28);

transition:.3s;

position:relative;

overflow:hidden;

}

.send-btn:hover{

transform:translateY(-2px);

box-shadow:
0 16px 30px rgba(214,51,132,.35);

}

.send-btn:active{

transform:scale(.98);

}

.send-btn:disabled{

opacity:.7;

cursor:not-allowed;

}

/* Ripple */

.send-btn::after{

content:"";

position:absolute;

width:0;
height:0;

border-radius:50%;

background:rgba(255,255,255,.28);

left:50%;
top:50%;

transform:translate(-50%,-50%);

transition:.45s;

}

.send-btn:active::after{

width:340px;
height:340px;

}

/* Spinner */

.spinner{

animation:spin .8s linear infinite;

font-size:18px;

}

@keyframes spin{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}

/* Success / Error Message */

.success-msg{

margin-top:18px;

text-align:center;

font-size:15px;

font-weight:600;

color:#18b857;

}

.error-msg{

margin-top:18px;

text-align:center;

font-size:15px;

font-weight:600;

color:#dc2626;

}

/* Back */

.back-link{

margin-top:22px;

text-align:center;

font-size:17px;

font-weight:600;

color:#d63384;

cursor:pointer;

transition:.25s;

}

.back-link:hover{

color:#b91d6d;

text-decoration:underline;

}

/* =========================================
   PART 3
   POPUP + RESPONSIVE + FINAL EFFECTS
========================================= */

/* ==========================
      POPUP
========================== */

.popup-overlay{
    position:fixed;
    inset:0;
    display:flex;
    justify-content:center;
    align-items:center;
    background:rgba(0,0,0,.45);
    backdrop-filter:blur(5px);
    z-index:9999;
    animation:fadeIn .25s ease;
}

.popup-box{
    width:90%;
    max-width:340px;
    background:#fff;
    border-radius:22px;
    padding:28px 24px;
    text-align:center;
    box-shadow:
    0 25px 60px rgba(0,0,0,.22);
    animation:popupShow .3s ease;
}

.popup-icon{
    font-size:60px;
    margin-bottom:14px;
}

.popup-icon.success{
    color:#16a34a;
}

.popup-icon.error{
    color:#dc2626;
}

.popup-title{
    font-size:24px;
    font-weight:700;
    color:#222;
    margin-bottom:10px;
}

.popup-message{
    color:#666;
    line-height:24px;
    font-size:15px;
    margin-bottom:22px;
}

.popup-btn{
    width:100%;
    height:50px;
    border:none;
    border-radius:14px;
    cursor:pointer;

    color:#fff;
    font-size:16px;
    font-weight:700;

    background:linear-gradient(135deg,#d63384,#ff4f9d);

    transition:.3s;
}

.popup-btn:hover{
    transform:translateY(-2px);
}

@keyframes popupShow{
    from{
        opacity:0;
        transform:scale(.85);
    }
    to{
        opacity:1;
        transform:scale(1);
    }
}

@keyframes fadeIn{
    from{
        opacity:0;
    }
    to{
        opacity:1;
    }
}

/* ==========================
      EXTRA GLOW
========================== */

.forgot-card::before{
    content:"";
    position:absolute;
    inset:-2px;
    border-radius:32px;
    padding:2px;
    background:linear-gradient(
    135deg,
    rgba(255,255,255,.55),
    rgba(255,255,255,0),
    rgba(255,255,255,.45));
    -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
            mask-composite:exclude;
    pointer-events:none;
}

/* ==========================
      MOBILE
========================== */

@media (max-width:480px){

.forgot-page{
    padding:16px;
}

.forgot-card{
    max-width:100%;
    border-radius:24px;
    padding:24px 20px;
}

.forgot-card h2{
    font-size:32px;
    line-height:42px;
}

.subtitle{
    font-size:15px;
    line-height:24px;
}

.forgot-card input{
    height:54px;
    font-size:15px;
}

.mail-track{
    height:82px;
}

.mail-box{
    width:58px;
    height:58px;
    font-size:30px;
}

.mail-box.fly,
.mail-box.success,
.mail-box.error{
    left:calc(100% - 58px);
}

.send-btn{
    height:54px;
    font-size:16px;
}

.popup-box{
    padding:24px 20px;
}

}

/* ==========================
      SMALL DEVICES
========================== */

@media (max-width:360px){

.forgot-card{
    padding:20px 16px;
}

.forgot-card h2{
    font-size:28px;
}

.subtitle{
    font-size:14px;
}

.send-btn{
    font-size:15px;
}

.back-link{
    font-size:15px;
}

}

/* ==========================
      SAFE AREA FIX
========================== */
/* ======================================================
   PRODUCT DETAILS CSS
   PART 1
   Main Container + Layout + Image + Wishlist + Thumbnail
====================================================== */


/* ===============================
   MAIN CONTAINER
================================ */

.product-detail-container{

    width:100%;
    min-height:100vh;

    background:#f5f5f5;

    padding:20px;

    padding-bottom:120px;

    box-sizing:border-box;

}



/* ===============================
   TOP PRODUCT LAYOUT
================================ */

.top-product-section{

    width:100%;

    display:grid;

    grid-template-columns:45% 55%;

    gap:20px;

    align-items:start;

}



/* ===============================
   LEFT IMAGE SECTION
================================ */

.left-image-section{

    width:100%;

}



/* ===============================
   MAIN PRODUCT IMAGE BOX
================================ */

.product-image-box{

    position:relative;

    width:100%;

    height:550px;

    background:#fff;

    border-radius:18px;

    overflow:hidden;

    display:flex;

    justify-content:center;

    align-items:center;

    box-shadow:
    0 5px 20px rgba(0,0,0,.06);

}



/* Product Image */

.product-image-box img{

    width:100%;

    height:100%;

    object-fit:contain;

    transition:
    transform .4s ease,
    opacity .3s ease;

}



.product-image-box:hover img{

    transform:scale(1.05);

}





/* ===============================
   WISHLIST BUTTON
================================ */

.wishlist-btn{

    position:absolute;

    top:18px;

    right:18px;


    width:52px;

    height:52px;


    border:none;

    border-radius:50%;


    background:#fff;


    display:flex;

    justify-content:center;

    align-items:center;


    cursor:pointer;


    box-shadow:
    0 5px 15px rgba(0,0,0,.15);


    transition:.3s ease;


    z-index:5;

}




.wishlist-btn:hover{

    transform:scale(1.12);

    box-shadow:
    0 8px 25px rgba(0,0,0,.25);

}





.wishlist-btn svg{

    font-size:30px !important;

    color:#999;

    transition:.3s ease;

}





.wishlist-btn.active svg{

    color:#ff365d;

    animation:
    heartPop .35s ease;

}





@keyframes heartPop{


    0%{

        transform:scale(1);

    }


    50%{

        transform:scale(1.45);

    }


    100%{

        transform:scale(1);

    }

}





/* ===============================
   THUMBNAIL SECTION
================================ */

.thumbnail-container{


    margin-top:15px;


    width:100%;


    display:flex;


    gap:12px;


    padding:12px;


    background:#fff;


    border-radius:15px;


    overflow-x:auto;


    box-sizing:border-box;


    scrollbar-width:none;

}



.thumbnail-container::-webkit-scrollbar{

    display:none;

}





/* Thumbnail Image */

.thumbnail{


    flex-shrink:0;


    width:70px;

    height:70px;


    object-fit:cover;


    border-radius:12px;


    border:2px solid #ddd;


    cursor:pointer;


    transition:.3s ease;


    background:#fff;

}





.thumbnail:hover{


    transform:scale(1.08);


}





.thumbnail.active{


    border-color:#ff5a1f;


    transform:scale(1.08);


    box-shadow:

    0 0 0 3px rgba(255,90,31,.15);


}





/* ===============================
   TABLET VIEW
================================ */


@media (max-width:1100px){


    .top-product-section{


        grid-template-columns:1fr 1fr;


        gap:15px;


    }



    .product-image-box{


        height:450px;


    }


}





/* ===============================
   MOBILE VIEW
================================ */


@media(max-width:768px){


    .product-detail-container{


        padding:10px;


        padding-bottom:100px;


    }




    .top-product-section{


        display:block;


    }




    .product-image-box{


        height:350px;


        border-radius:15px;


    }





    .wishlist-btn{


        width:45px;

        height:45px;


        top:12px;

        right:12px;


    }





    .wishlist-btn svg{


        font-size:26px !important;


    }





    .thumbnail-container{


        padding:10px;


        gap:10px;


    }





    .thumbnail{


        width:60px;

        height:60px;


    }


}





/* ===============================
   SMALL MOBILE
================================ */


@media(max-width:400px){


    .product-image-box{


        height:300px;


    }



    .thumbnail{


        width:55px;

        height:55px;


    }


}
/* ======================================================
   PRODUCT DETAILS CSS
   PART 2
   Product Info + Price + Quantity + Stock + Coupon
====================================================== */


/* ===============================
   PRODUCT INFO SECTION
================================ */

.info-section{

    width:100%;

    background:#fff;

    border-radius:18px;

    padding:25px;

    box-sizing:border-box;

    box-shadow:
    0 5px 20px rgba(0,0,0,.06);


}



/* ===============================
   PRODUCT TITLE
================================ */

.product-title{

    margin:0 0 18px;


    font-size:28px;

    font-weight:750;


    color:#222;


    line-height:1.4;


}



/* ===============================
   QUANTITY + STOCK + REVIEW + COD
================================ */


.qty-cod-row{


    width:100%;


    display:flex;


    align-items:center;


    justify-content:flex-start;


    flex-wrap:wrap;


    gap:15px;


}




/* ===============================
   QUANTITY BOX
================================ */


.qty-section{


    display:flex;

    align-items:center;


    gap:15px;


    margin:0 !important;


}



.qty-section button{


    width:42px;

    height:42px;


    border:none;


    border-radius:50%;


    background:#ff5a1f;


    color:#fff;


    display:flex;


    justify-content:center;


    align-items:center;


    cursor:pointer;


    transition:.25s ease;


}



.qty-section button:hover{


    transform:scale(1.1);


}




.qty-section button:active{


    transform:scale(.9);


}




.qty-section button svg{


    color:#fff;

}





.qty-section span{


    min-width:35px;


    text-align:center;


    font-size:20px !important;


    font-weight:700;


    color:#222;


}






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


.stock-badge{


    display:inline-flex;


    align-items:center;


    gap:7px;


    padding:7px 14px;


    border-radius:25px;


    font-size:13px;


    font-weight:700;


}





.stock-icon{


    font-size:17px;


}



/* Available */

.stock-badge.in{


    background:#e8f8ee;


    color:#16803c;


}



/* Low Stock */

.stock-badge.low{


    background:#fff5df;


    color:#ff9800;


}



/* Out Stock */

.stock-badge.out{


    background:#ffe7e7;


    color:#d60000;


}




.warning-icon{


    animation:
    warningBlink .8s infinite alternate;


}



@keyframes warningBlink{


    from{

        transform:scale(1);

    }


    to{

        transform:scale(1.25);

    }


}





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


.review-box{


    background:#16a34a;


    color:#fff;


    padding:7px 14px;


    border-radius:20px;


    font-size:14px;


    font-weight:700;


}





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


.cod-badge{


    background:#ff5a1f;


    color:#fff;


    padding:9px 16px;


    border-radius:10px;


    font-size:13px;


    font-weight:700;


    cursor:pointer;


    transition:.3s ease;


}




.cod-badge:hover{


    background:#e64a19;


}





/* ===============================
   PRICE SECTION
================================ */


.price-row{


    display:flex;


    align-items:center;


    flex-wrap:wrap;


    gap:12px;


    margin-top:20px;


}





.price{


    font-size:34px;


    font-weight:800;


    color:#111;


}




.mrp{


    font-size:18px;


    color:#888;


    text-decoration:line-through;


}





.discount-text{


    color:#16a34a;


    font-size:16px;


    font-weight:700;


}






/* ===============================
   COUPON BOX
================================ */


.coupon-text{


    width:100%;


    display:flex;


    align-items:center;


    gap:10px;


    margin-top:20px;


    padding:15px;


    background:#f4efff;


    border-radius:14px;


    color:#6c2cf5;


    font-size:22px;


    font-weight:500;


    cursor:pointer;


    transition:.3s ease;


}





.coupon-text:hover{


    background:#ebe0ff;


    transform:translateY(-2px);


}




.coupon-icon{


    color:#ff5a1f !important;


    font-size:25px !important;


}





/* ===============================
   TABLET RESPONSIVE
================================ */


@media(max-width:1100px){


    .info-section{


        padding:20px;


    }




    .product-title{


        font-size:24px;


    }




    .price{


        font-size:30px;


    }


}





/* ===============================
   MOBILE RESPONSIVE
================================ */


@media(max-width:768px){


    .info-section{


        margin-top:15px;


        padding:18px;


        border-radius:15px;


    }





    .product-title{


        font-size:21px;


        margin-bottom:15px;


    }





    .qty-cod-row{


        gap:10px;


    }





    .qty-section button{


        width:38px;


        height:38px;


    }





    .stock-badge{


        font-size:12px;


        padding:6px 10px;


    }





    .review-box{


        font-size:12px;


        padding:6px 10px;


    }





    .cod-badge{


        padding:7px 12px;


        font-size:12px;


    }





    .price{


        font-size:28px;


    }





    .mrp{


        font-size:16px;


    }





    .discount-text{


        font-size:14px;


    }





    .coupon-text{


        padding:12px;


        font-size:22px;


    }


}





/* ===============================
   SMALL MOBILE
================================ */


@media(max-width:400px){


    .qty-cod-row{


        gap:8px;


    }





    .price{


        font-size:25px;


    }



}
/* ======================================================
   PRODUCT DETAILS CSS
   PART 3
   Description + Rating + Reviews
====================================================== */


/* ===============================
   PRODUCT DESCRIPTION
================================ */


.description-section{


    margin-top:20px;


    padding:22px;


    background:#fff;


    border-radius:18px;


    box-sizing:border-box;


    box-shadow:

    0 5px 18px rgba(0,0,0,.06);


    transition:.3s ease;


}




.description-section:hover{


    transform:translateY(-2px);


    box-shadow:

    0 10px 25px rgba(0,0,0,.08);


}





.description-section h3{


    margin:0 0 15px;


    font-size:24px;


    font-weight:750;


    color:#222;


}





.description-content p{


    margin:0;


    color:#555;


    font-size:15px;


    line-height:1.8;


}





.description-content span{


    color:#ff5a1f;


    font-weight:700;


    cursor:pointer;


}





/* ===============================
   RATING SUMMARY
================================ */


.rating-summary{


    margin-top:20px;


    padding:22px;


    background:#fff;


    border-radius:18px;


    box-shadow:

    0 5px 18px rgba(0,0,0,.06);


    transition:.3s ease;


}





.rating-summary:hover{


    transform:translateY(-2px);


}





/* Rating Header */


.rating-header{


    margin-bottom:20px;


}





.rating-header h2{


    margin:0;


    font-size:34px;


    font-weight:800;


    color:#222;


}





.rating-header p{


    margin-top:5px;


    color:#777;


    font-size:15px;


}





/* ===============================
   RATING ROW
================================ */


.rating-row{


    display:flex;


    align-items:center;


    gap:12px;


    margin-bottom:14px;


}





.rating-row span:first-child{


    width:35px;


    font-size:14px;


    font-weight:700;


    color:#333;


}




.rating-row span:last-child{


    width:35px;


    text-align:right;


    color:#666;


    font-weight:600;


}





/* Rating Progress Bar */


.rating-bar-bg{


    flex:1;


    height:9px;


    background:#e8e8e8;


    border-radius:20px;


    overflow:hidden;


}





.five-bar,
.four-bar,
.three-bar,
.two-bar,
.one-bar{


    height:100%;


    border-radius:20px;


    transition:.5s ease;


}





.five-bar{


    background:#22c55e;


}



.four-bar{


    background:#84cc16;


}



.three-bar{


    background:#facc15;


}



.two-bar{


    background:#fb923c;


}



.one-bar{


    background:#ef4444;


}





/* ===============================
   RATE PRODUCT BOX
================================ */


.rate-product-box{


    margin-top:20px;


    padding:22px;


    background:#fff;


    border-radius:18px;


    box-shadow:

    0 5px 18px rgba(0,0,0,.06);


}





.rate-product-box h3{


    margin:0 0 18px;


    text-align:center;


    font-size:22px;


    font-weight:750;


    color:#222;


}





/* USER STAR BUTTONS */


.pd-user-rating-stars{


    display:flex;


    justify-content:center;


    align-items:center;


    gap:14px;


}





.pd-user-rating-stars button{


    width:42px;


    height:42px;


    border:none;


    background:none;


    cursor:pointer;


    font-size:35px;


    line-height:1;


    transition:.25s ease;


}





.pd-user-rating-stars button:hover{


    transform:scale(1.2);


}





.pd-user-rating-stars button:active{


    transform:scale(.9);


}





/* ===============================
   CUSTOMER REVIEW SECTION
================================ */


.review-section{


    margin-top:20px;


    padding:22px;


    background:#fff;


    border-radius:18px;


    box-shadow:

    0 5px 18px rgba(0,0,0,.06);


}





.review-section h3{


    margin:0 0 18px;


    font-size:24px;


    font-weight:750;


    color:#222;


}





.reviews-list{


    display:flex;


    flex-direction:column;


    gap:18px;


}





.reviews-list p{


    text-align:center;


    padding:25px;


    color:#777;


    font-size:15px;


}





/* ===============================
   TABLET
================================ */


@media(max-width:1100px){


    .description-section,
    .rating-summary,
    .rate-product-box,
    .review-section{


        padding:18px;


    }




    .rating-header h2{


        font-size:30px;


    }


}





/* ===============================
   MOBILE
================================ */


@media(max-width:768px){


    .description-section,
    .rating-summary,
    .rate-product-box,
    .review-section{


        margin-top:15px;


        padding:15px;


        border-radius:14px;


    }





    .description-section h3,
    .review-section h3{


        font-size:20px;


    }





    .description-content p{


        font-size:14px;


        line-height:1.7;


    }





    .rating-header h2{


        font-size:28px;


    }





    .rating-row{


        gap:8px;


    }





    .rating-bar-bg{


        height:7px;


    }





    .pd-user-rating-stars{


        gap:8px;


    }





    .pd-user-rating-stars button{


        width:36px;


        height:36px;


        font-size:30px;


    }


}





/* ===============================
   SMALL MOBILE
================================ */


@media(max-width:400px){


    .rating-row span:first-child{


        width:28px;


    }





    .rating-row span:last-child{


        width:25px;


    }



}
/* ======================================================
   PRODUCT DETAILS CSS
   PART 4
   Related Products + Cards + Fixed Footer Buttons
====================================================== */


/* ===============================
   RELATED PRODUCTS SECTION
================================ */


.related-products-section{


    margin-top:20px;


    padding:22px;


    background:#fff;


    border-radius:18px;


    box-shadow:

    0 5px 18px rgba(0,0,0,.06);


}





.related-products-section h3{


    margin:0 0 18px;


    font-size:24px;


    font-weight:750;


    color:#222;


}





/* ===============================
   RELATED PRODUCT GRID
================================ */


.related-products-grid{


    width:100%;


    display:grid;


    grid-template-columns:repeat(6,1fr);


    gap:15px;


}





/* ===============================
   RELATED CARD
================================ */


.related-card{


    background:#fff;


    border:1px solid #eee;


    border-radius:15px;


    padding:10px;


    cursor:pointer;


    overflow:hidden;


    transition:.3s ease;


}





.related-card:hover{


    transform:translateY(-6px);


    box-shadow:

    0 10px 25px rgba(0,0,0,.12);


}





.related-card img{


    width:100%;


    height:180px;


    object-fit:cover;


    border-radius:12px;


    transition:.3s ease;


}





.related-card:hover img{


    transform:scale(1.05);


}





/* Product Name */


.related-card p:first-of-type{


    margin:12px 0 0;


    font-size:14px;


    font-weight:650;


    color:#222;


    display:-webkit-box;


    -webkit-line-clamp:2;


    -webkit-box-orient:vertical;


    overflow:hidden;


    line-height:1.5;


}





/* Product Price */


.related-card p:last-of-type{


    margin-top:8px;


    color:#ff5a1f;


    font-size:18px;


    font-weight:800;


}





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


.fixed-footer{


    position:fixed;


    left:0;


    bottom:0;


    width:100%;


    height:72px;


    background:#fff;


    display:flex;


    align-items:center;


    gap:8px;


    padding:8px;


    box-sizing:border-box;


    box-shadow:


    0 -5px 20px rgba(0,0,0,.12);


    z-index:1000;


}





.add-btn,
.buy-btn,
.notify-btn{


    flex:1;


    height:55px;


    border:none;


    border-radius:12px;


    color:#fff;


    font-size:16px;


    font-weight:750;


    cursor:pointer;


    transition:.3s ease;


}





.add-btn{


    background:#ff5a1f;


}





.buy-btn{


    background:#16a34a;


}





.notify-btn{


    background:#ff3f6c;


}





.add-btn:hover,
.buy-btn:hover,
.notify-btn:hover{


    filter:brightness(1.08);


    transform:translateY(-2px);


}





.add-btn:active,
.buy-btn:active,
.notify-btn:active{


    transform:scale(.96);


}





.add-btn svg{


    vertical-align:middle;


}





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


@media(min-width:769px){


    .fixed-footer{


        left:50%;


        transform:translateX(-50%);


        width:520px;


        bottom:25px;


        border-radius:18px;


    }


}





/* ===============================
   TABLET VIEW
================================ */


@media(max-width:1100px){


    .related-products-grid{


        grid-template-columns:repeat(4,1fr);


    }





    .related-card img{


        height:160px;


    }


}





/* ===============================
   MOBILE VIEW
================================ */


@media(max-width:768px){


    .related-products-section{


        padding:15px;


    }





    .related-products-section h3{


        font-size:20px;


    }





    .related-products-grid{


        display:flex;


        overflow-x:auto;


        gap:12px;


        scrollbar-width:none;


    }





    .related-products-grid::-webkit-scrollbar{


        display:none;


    }





    .related-card{


        min-width:150px;


        flex-shrink:0;


    }





    .related-card img{


        height:150px;


    }





    .fixed-footer{


        height:65px;


        padding:6px;


    }





    .add-btn,
    .buy-btn,
    .notify-btn{


        height:52px;


        font-size:14px;


    }


}





/* ===============================
   SMALL MOBILE
================================ */


@media(max-width:400px){


    .related-card{


        min-width:140px;


    }





    .related-card img{


        height:135px;


    }





    .add-btn,
    .buy-btn,
    .notify-btn{


        font-size:13px;


    }


}
/* ======================================================
   PRODUCT DETAILS CSS
   PART 5
   Login Popup + Animation + Premium UI Effects
====================================================== */


/* ===============================
   LOGIN POPUP OVERLAY
================================ */


.login-popup-overlay{


    position:fixed;


    inset:0;


    width:100%;


    height:100%;


    background:rgba(0,0,0,.55);


    display:flex;


    justify-content:center;


    align-items:center;


    z-index:9999;


    backdrop-filter:blur(4px);


    animation:

    popupFade .25s ease;


}





/* Overlay Animation */


@keyframes popupFade{


    from{


        opacity:0;


    }


    to{


        opacity:1;


    }


}





/* ===============================
   LOGIN POPUP BOX
================================ */


.login-popup{


    width:90%;


    max-width:360px;


    background:#fff;


    padding:28px;


    border-radius:20px;


    text-align:center;


    box-sizing:border-box;


    box-shadow:


    0 20px 50px rgba(0,0,0,.25);


    animation:

    popupScale .3s ease;


}





@keyframes popupScale{


    from{


        transform:scale(.8);


        opacity:0;


    }


    to{


        transform:scale(1);


        opacity:1;


    }


}





.login-popup h2{


    margin:0 0 10px;


    font-size:24px;


    font-weight:800;


    color:#222;


}





.login-popup p{


    margin-bottom:20px;


    color:#666;


    font-size:15px;


}





/* ===============================
   LOGIN BUTTON
================================ */


.login-btn{


    width:100%;


    height:48px;


    border:none;


    border-radius:12px;


    background:#ff3f6c;


    color:#fff;


    font-size:16px;


    font-weight:700;


    cursor:pointer;


    transition:.3s ease;


}





.login-btn:hover{


    background:#e8335b;


    transform:translateY(-2px);


}





/* ===============================
   CANCEL BUTTON
================================ */


.close-btn{


    margin-top:12px;


    width:100%;


    height:45px;


    border:none;


    border-radius:12px;


    background:#eee;


    color:#444;


    font-size:15px;


    font-weight:600;


    cursor:pointer;


    transition:.3s ease;


}





.close-btn:hover{


    background:#ddd;


}





/* ===============================
   PREMIUM CARD EFFECTS
================================ */


.info-section,
.description-section,
.rating-summary,
.rate-product-box,
.review-section,
.related-products-section{


    transition:


    transform .3s ease,

    box-shadow .3s ease;


}





.info-section:hover,
.description-section:hover,
.rating-summary:hover,
.rate-product-box:hover,
.review-section:hover,
.related-products-section:hover{


    transform:translateY(-3px);


    box-shadow:


    0 12px 30px rgba(0,0,0,.10);


}





/* ===============================
   IMAGE FADE EFFECT
================================ */


.product-image-box img,
.related-card img{


    animation:

    imageFade .35s ease;


}





@keyframes imageFade{


    from{


        opacity:0;


        transform:scale(.96);


    }


    to{


        opacity:1;


        transform:scale(1);


    }


}





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


.add-btn,
.buy-btn,
.notify-btn,
.qty-section button{


    position:relative;


    overflow:hidden;


}





.add-btn::after,
.buy-btn::after,
.notify-btn::after,
.qty-section button::after{


    content:"";


    position:absolute;


    width:0;


    height:0;


    background:rgba(255,255,255,.25);


    border-radius:50%;


    transform:translate(-50%,-50%);


    transition:.5s;


}





.add-btn:active::after,
.buy-btn:active::after,
.notify-btn:active::after,
.qty-section button:active::after{


    width:200px;


    height:200px;


}





/* ===============================
   SMOOTH SCROLL
================================ */


html{


    scroll-behavior:smooth;


}





/* ===============================
   CUSTOM SCROLLBAR
================================ */


.related-products-grid::-webkit-scrollbar,
.thumbnail-container::-webkit-scrollbar{


    height:6px;


}





.related-products-grid::-webkit-scrollbar-thumb,
.thumbnail-container::-webkit-scrollbar-thumb{


    background:#ff5a1f;


    border-radius:20px;


}





/* ===============================
   SWEET ALERT FIX
================================ */


.swal2-container{


    z-index:99999 !important;


}





/* ===============================
   TEXT SELECTION
================================ */


::selection{


    background:#ff5a1f;


    color:#fff;


}





/* ===============================
   MOBILE POPUP FIX
================================ */


@media(max-width:768px){


    .login-popup{


        max-width:320px;


        padding:22px;


        border-radius:16px;


    }





    .login-popup h2{


        font-size:21px;


    }





    .login-popup p{


        font-size:14px;


    }


}
/* ======================================================
   PRODUCT DETAILS CSS
   PART 6
   Final Responsive Fix
   Mobile + Tablet + Laptop + Desktop
====================================================== */


/* ======================================================
   LARGE DESKTOP (1400px+)
====================================================== */

@media(min-width:1400px){


    .product-detail-container{


        max-width:1500px;


        margin:auto;


        padding:30px;


    }



    .top-product-section{


        grid-template-columns:48% 52%;


        gap:30px;


    }




    .product-image-box{


        height:620px;


    }




    .product-title{


        font-size:32px;


    }




    .price{


        font-size:38px;


    }




    .related-products-grid{


        grid-template-columns:repeat(6,1fr);


    }


}







/* ======================================================
   LAPTOP VIEW
   1025px - 1399px
====================================================== */


@media(min-width:1025px) and (max-width:1399px){



    .product-detail-container{


        padding:20px;


    }



    .top-product-section{


        grid-template-columns:45% 55%;


    }




    .product-image-box{


        height:520px;


    }




    .product-title{


        font-size:28px;


    }




    .related-products-grid{


        grid-template-columns:repeat(5,1fr);


    }



}







/* ======================================================
   TABLET LANDSCAPE
   769px - 1024px
====================================================== */


@media(min-width:769px) and (max-width:1024px){



    .product-detail-container{


        padding:15px;


    }



    .top-product-section{


        grid-template-columns:1fr 1fr;


        gap:15px;


    }





    .product-image-box{


        height:450px;


    }





    .info-section{


        padding:18px;


    }




    .product-title{


        font-size:24px;


    }





    .price{


        font-size:30px;


    }





    .qty-cod-row{


        gap:10px;


    }





    .related-products-grid{


        grid-template-columns:repeat(4,1fr);


    }





    .related-card img{


        height:150px;


    }



}








/* ======================================================
   MOBILE DEVICE
   MAX 768px
====================================================== */


@media(max-width:768px){



    body{


        overflow-x:hidden;


    }




    .product-detail-container{


        width:100%;


        padding:10px;


        padding-bottom:90px;


    }




    /* Product Layout */


    .top-product-section{


        display:block;


    }





    /* Image */


    .product-image-box{


        height:330px;


        border-radius:15px;


    }





    .product-image-box img{


        object-fit:contain;


    }






    /* Info */


    .info-section{


        margin-top:12px;


        padding:15px;


    }





    .product-title{


        font-size:21px;


        line-height:1.4;


    }





    /* Quantity Row */


    .qty-cod-row{


        justify-content:flex-start;


        gap:8px;


    }





    .qty-section button{


        width:38px;


        height:38px;


    }





    .qty-section span{


        font-size:18px !important;


    }





    /* Price */


    .price-row{


        gap:8px;


    }





    .price{


        font-size:28px;


    }





    .mrp{


        font-size:15px;


    }





    .discount-text{


        font-size:13px;


    }





    /* Description */


    .description-section{


        padding:15px;


    }





    /* Rating */


    .rating-summary{


        padding:15px;


    }





    .rating-header h2{


        font-size:28px;


    }





    /* Stars */


    .pd-user-rating-stars button{


        font-size:30px;


    }





    /* Related */


    .related-products-grid{


        display:flex;


        overflow-x:auto;


        gap:12px;


    }





    .related-card{


        min-width:150px;


    }





    /* Footer */


    .fixed-footer{


        width:100%;


        height:65px;


        bottom:0;


        border-radius:0;


    }





    .add-btn,
    .buy-btn,
    .notify-btn{


        height:52px;


        font-size:14px;


    }



}








/* ======================================================
   SMALL MOBILE
   MAX 400px
====================================================== */


@media(max-width:400px){



    .product-image-box{


        height:290px;


    }




    .product-title{


        font-size:19px;


    }





    .price{


        font-size:25px;


    }





    .coupon-text{


        font-size:13px;


    }





    .related-card{


        min-width:135px;


    }





    .related-card img{


        height:130px;


    }





    .add-btn,
    .buy-btn,
    .notify-btn{


        font-size:12px;


    }


}








/* ======================================================
   FINAL GLOBAL FIXES
====================================================== */


/* Remove unwanted horizontal scroll */

.product-detail-container,
.top-product-section,
.info-section{


    overflow:hidden;


}




/* Better box sizing */


.product-detail-container *,
.product-detail-container *::before,
.product-detail-container *::after{


    box-sizing:border-box;


}




/* Prevent image drag */


.product-image-box img,
.thumbnail,
.related-card img{


    user-select:none;


}
:root{--swal2-outline: 0 0 0 3px rgba(100, 150, 200, 0.5);--swal2-container-padding: 0.625em;--swal2-backdrop: rgba(0, 0, 0, 0.4);--swal2-backdrop-transition: background-color 0.15s;--swal2-width: 32em;--swal2-padding: 0 0 1.25em;--swal2-border: none;--swal2-border-radius: 0.3125rem;--swal2-background: white;--swal2-color: #545454;--swal2-show-animation: swal2-show 0.3s;--swal2-hide-animation: swal2-hide 0.15s forwards;--swal2-icon-zoom: 1;--swal2-title-padding: 0.8em 1em 0;--swal2-html-container-padding: 1em 1.6em 0.3em;--swal2-input-border: 1px solid #d9d9d9;--swal2-input-border-radius: 0.1875em;--swal2-input-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.06), 0 0 0 3px transparent;--swal2-input-background: transparent;--swal2-input-transition: border-color 0.2s, box-shadow 0.2s;--swal2-input-hover-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.06), 0 0 0 3px transparent;--swal2-input-focus-border: 1px solid #b4dbed;--swal2-input-focus-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.06), 0 0 0 3px rgba(100, 150, 200, 0.5);--swal2-progress-step-background: #add8e6;--swal2-validation-message-background: #f0f0f0;--swal2-validation-message-color: #666;--swal2-footer-border-color: #eee;--swal2-footer-background: transparent;--swal2-footer-color: inherit;--swal2-timer-progress-bar-background: rgba(0, 0, 0, 0.3);--swal2-close-button-position: initial;--swal2-close-button-inset: auto;--swal2-close-button-font-size: 2.5em;--swal2-close-button-color: #ccc;--swal2-close-button-transition: color 0.2s, box-shadow 0.2s;--swal2-close-button-outline: initial;--swal2-close-button-box-shadow: inset 0 0 0 3px transparent;--swal2-close-button-focus-box-shadow: inset var(--swal2-outline);--swal2-close-button-hover-transform: none;--swal2-actions-justify-content: center;--swal2-actions-width: auto;--swal2-actions-margin: 1.25em auto 0;--swal2-actions-padding: 0;--swal2-actions-border-radius: 0;--swal2-actions-background: transparent;--swal2-action-button-transition: background-color 0.2s, box-shadow 0.2s;--swal2-action-button-hover: black 10%;--swal2-action-button-active: black 10%;--swal2-confirm-button-box-shadow: none;--swal2-confirm-button-border-radius: 0.25em;--swal2-confirm-button-background-color: #7066e0;--swal2-confirm-button-color: #fff;--swal2-deny-button-box-shadow: none;--swal2-deny-button-border-radius: 0.25em;--swal2-deny-button-background-color: #dc3741;--swal2-deny-button-color: #fff;--swal2-cancel-button-box-shadow: none;--swal2-cancel-button-border-radius: 0.25em;--swal2-cancel-button-background-color: #6e7881;--swal2-cancel-button-color: #fff;--swal2-toast-show-animation: swal2-toast-show 0.5s;--swal2-toast-hide-animation: swal2-toast-hide 0.1s forwards;--swal2-toast-border: none;--swal2-toast-box-shadow: 0 0 1px hsl(0deg 0% 0% / 0.075), 0 1px 2px hsl(0deg 0% 0% / 0.075), 1px 2px 4px hsl(0deg 0% 0% / 0.075), 1px 3px 8px hsl(0deg 0% 0% / 0.075), 2px 4px 16px hsl(0deg 0% 0% / 0.075)}[data-swal2-theme=dark]{--swal2-dark-theme-black: #19191a;--swal2-dark-theme-white: #e1e1e1;--swal2-background: var(--swal2-dark-theme-black);--swal2-color: var(--swal2-dark-theme-white);--swal2-footer-border-color: #555;--swal2-input-background: color-mix(in srgb, var(--swal2-dark-theme-black), var(--swal2-dark-theme-white) 10%);--swal2-validation-message-background: color-mix( in srgb, var(--swal2-dark-theme-black), var(--swal2-dark-theme-white) 10% );--swal2-validation-message-color: var(--swal2-dark-theme-white);--swal2-timer-progress-bar-background: rgba(255, 255, 255, 0.7)}@media(prefers-color-scheme: dark){[data-swal2-theme=auto]{--swal2-dark-theme-black: #19191a;--swal2-dark-theme-white: #e1e1e1;--swal2-background: var(--swal2-dark-theme-black);--swal2-color: var(--swal2-dark-theme-white);--swal2-footer-border-color: #555;--swal2-input-background: color-mix(in srgb, var(--swal2-dark-theme-black), var(--swal2-dark-theme-white) 10%);--swal2-validation-message-background: color-mix( in srgb, var(--swal2-dark-theme-black), var(--swal2-dark-theme-white) 10% );--swal2-validation-message-color: var(--swal2-dark-theme-white);--swal2-timer-progress-bar-background: rgba(255, 255, 255, 0.7)}}body.swal2-shown:not(.swal2-no-backdrop,.swal2-toast-shown){overflow:hidden}body.swal2-height-auto{height:auto !important}body.swal2-no-backdrop .swal2-container{background-color:rgba(0,0,0,0) !important;pointer-events:none}body.swal2-no-backdrop .swal2-container .swal2-popup{pointer-events:auto}body.swal2-no-backdrop .swal2-container .swal2-modal{box-shadow:0 0 10px var(--swal2-backdrop)}body.swal2-toast-shown .swal2-container{box-sizing:border-box;width:360px;max-width:100%;background-color:rgba(0,0,0,0);pointer-events:none}body.swal2-toast-shown .swal2-container.swal2-top{inset:0 auto auto 50%;transform:translateX(-50%)}body.swal2-toast-shown .swal2-container.swal2-top-end,body.swal2-toast-shown .swal2-container.swal2-top-right{inset:0 0 auto auto}body.swal2-toast-shown .swal2-container.swal2-top-start,body.swal2-toast-shown .swal2-container.swal2-top-left{inset:0 auto auto 0}body.swal2-toast-shown .swal2-container.swal2-center-start,body.swal2-toast-shown .swal2-container.swal2-center-left{inset:50% auto auto 0;transform:translateY(-50%)}body.swal2-toast-shown .swal2-container.swal2-center{inset:50% auto auto 50%;transform:translate(-50%, -50%)}body.swal2-toast-shown .swal2-container.swal2-center-end,body.swal2-toast-shown .swal2-container.swal2-center-right{inset:50% 0 auto auto;transform:translateY(-50%)}body.swal2-toast-shown .swal2-container.swal2-bottom-start,body.swal2-toast-shown .swal2-container.swal2-bottom-left{inset:auto auto 0 0}body.swal2-toast-shown .swal2-container.swal2-bottom{inset:auto auto 0 50%;transform:translateX(-50%)}body.swal2-toast-shown .swal2-container.swal2-bottom-end,body.swal2-toast-shown .swal2-container.swal2-bottom-right{inset:auto 0 0 auto}@media print{body.swal2-shown:not(.swal2-no-backdrop,.swal2-toast-shown){overflow-y:scroll !important}body.swal2-shown:not(.swal2-no-backdrop,.swal2-toast-shown)>[aria-hidden=true]{display:none}body.swal2-shown:not(.swal2-no-backdrop,.swal2-toast-shown) .swal2-container{position:static !important}}div:where(.swal2-container){display:grid;position:fixed;z-index:1060;inset:0;box-sizing:border-box;grid-template-areas:"top-start     top            top-end" "center-start  center         center-end" "bottom-start  bottom-center  bottom-end";grid-template-rows:minmax(min-content, auto) minmax(min-content, auto) minmax(min-content, auto);height:100%;padding:var(--swal2-container-padding);overflow-x:hidden;transition:var(--swal2-backdrop-transition);-webkit-overflow-scrolling:touch}div:where(.swal2-container).swal2-backdrop-show,div:where(.swal2-container).swal2-noanimation{background:var(--swal2-backdrop)}div:where(.swal2-container).swal2-backdrop-hide{background:rgba(0,0,0,0) !important}div:where(.swal2-container).swal2-top-start,div:where(.swal2-container).swal2-center-start,div:where(.swal2-container).swal2-bottom-start{grid-template-columns:minmax(0, 1fr) auto auto}div:where(.swal2-container).swal2-top,div:where(.swal2-container).swal2-center,div:where(.swal2-container).swal2-bottom{grid-template-columns:auto minmax(0, 1fr) auto}div:where(.swal2-container).swal2-top-end,div:where(.swal2-container).swal2-center-end,div:where(.swal2-container).swal2-bottom-end{grid-template-columns:auto auto minmax(0, 1fr)}div:where(.swal2-container).swal2-top-start>.swal2-popup{align-self:start}div:where(.swal2-container).swal2-top>.swal2-popup{grid-column:2;place-self:start center}div:where(.swal2-container).swal2-top-end>.swal2-popup,div:where(.swal2-container).swal2-top-right>.swal2-popup{grid-column:3;place-self:start end}div:where(.swal2-container).swal2-center-start>.swal2-popup,div:where(.swal2-container).swal2-center-left>.swal2-popup{grid-row:2;align-self:center}div:where(.swal2-container).swal2-center>.swal2-popup{grid-column:2;grid-row:2;place-self:center center}div:where(.swal2-container).swal2-center-end>.swal2-popup,div:where(.swal2-container).swal2-center-right>.swal2-popup{grid-column:3;grid-row:2;place-self:center end}div:where(.swal2-container).swal2-bottom-start>.swal2-popup,div:where(.swal2-container).swal2-bottom-left>.swal2-popup{grid-column:1;grid-row:3;align-self:end}div:where(.swal2-container).swal2-bottom>.swal2-popup{grid-column:2;grid-row:3;place-self:end center}div:where(.swal2-container).swal2-bottom-end>.swal2-popup,div:where(.swal2-container).swal2-bottom-right>.swal2-popup{grid-column:3;grid-row:3;place-self:end end}div:where(.swal2-container).swal2-grow-row>.swal2-popup,div:where(.swal2-container).swal2-grow-fullscreen>.swal2-popup{grid-column:1/4;width:100%}div:where(.swal2-container).swal2-grow-column>.swal2-popup,div:where(.swal2-container).swal2-grow-fullscreen>.swal2-popup{grid-row:1/4;align-self:stretch}div:where(.swal2-container).swal2-no-transition{transition:none !important}div:where(.swal2-container)[popover]{width:auto;border:0}div:where(.swal2-container) div:where(.swal2-popup){display:none;position:relative;box-sizing:border-box;grid-template-columns:minmax(0, 100%);width:var(--swal2-width);max-width:100%;padding:var(--swal2-padding);border:var(--swal2-border);border-radius:var(--swal2-border-radius);background:var(--swal2-background);color:var(--swal2-color);font-family:inherit;font-size:1rem}div:where(.swal2-container) div:where(.swal2-popup):focus{outline:none}div:where(.swal2-container) div:where(.swal2-popup).swal2-loading{overflow-y:hidden}div:where(.swal2-container) div:where(.swal2-popup).swal2-draggable{cursor:grab}div:where(.swal2-container) div:where(.swal2-popup).swal2-draggable div:where(.swal2-icon){cursor:grab}div:where(.swal2-container) div:where(.swal2-popup).swal2-dragging{cursor:grabbing}div:where(.swal2-container) div:where(.swal2-popup).swal2-dragging div:where(.swal2-icon){cursor:grabbing}div:where(.swal2-container) h2:where(.swal2-title){position:relative;max-width:100%;margin:0;padding:var(--swal2-title-padding);color:inherit;font-size:1.875em;font-weight:600;text-align:center;text-transform:none;overflow-wrap:break-word;cursor:initial}div:where(.swal2-container) div:where(.swal2-actions){display:flex;z-index:1;box-sizing:border-box;flex-wrap:wrap;align-items:center;justify-content:var(--swal2-actions-justify-content);width:var(--swal2-actions-width);margin:var(--swal2-actions-margin);padding:var(--swal2-actions-padding);border-radius:var(--swal2-actions-border-radius);background:var(--swal2-actions-background)}div:where(.swal2-container) div:where(.swal2-loader){display:none;align-items:center;justify-content:center;width:2.2em;height:2.2em;margin:0 1.875em;animation:swal2-rotate-loading 1.5s linear 0s infinite normal;border-width:.25em;border-style:solid;border-radius:100%;border-color:#2778c4 rgba(0,0,0,0) #2778c4 rgba(0,0,0,0)}div:where(.swal2-container) button:where(.swal2-styled){margin:.3125em;padding:.625em 1.1em;transition:var(--swal2-action-button-transition);border:none;box-shadow:0 0 0 3px rgba(0,0,0,0);font-weight:500}div:where(.swal2-container) button:where(.swal2-styled):not([disabled]){cursor:pointer}div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-confirm){border-radius:var(--swal2-confirm-button-border-radius);background:initial;background-color:var(--swal2-confirm-button-background-color);box-shadow:var(--swal2-confirm-button-box-shadow);color:var(--swal2-confirm-button-color);font-size:1em}div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-confirm):hover{background-color:color-mix(in srgb, var(--swal2-confirm-button-background-color), var(--swal2-action-button-hover))}div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-confirm):active{background-color:color-mix(in srgb, var(--swal2-confirm-button-background-color), var(--swal2-action-button-active))}div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-deny){border-radius:var(--swal2-deny-button-border-radius);background:initial;background-color:var(--swal2-deny-button-background-color);box-shadow:var(--swal2-deny-button-box-shadow);color:var(--swal2-deny-button-color);font-size:1em}div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-deny):hover{background-color:color-mix(in srgb, var(--swal2-deny-button-background-color), var(--swal2-action-button-hover))}div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-deny):active{background-color:color-mix(in srgb, var(--swal2-deny-button-background-color), var(--swal2-action-button-active))}div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-cancel){border-radius:var(--swal2-cancel-button-border-radius);background:initial;background-color:var(--swal2-cancel-button-background-color);box-shadow:var(--swal2-cancel-button-box-shadow);color:var(--swal2-cancel-button-color);font-size:1em}div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-cancel):hover{background-color:color-mix(in srgb, var(--swal2-cancel-button-background-color), var(--swal2-action-button-hover))}div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-cancel):active{background-color:color-mix(in srgb, var(--swal2-cancel-button-background-color), var(--swal2-action-button-active))}div:where(.swal2-container) button:where(.swal2-styled):focus-visible{outline:none;box-shadow:var(--swal2-action-button-focus-box-shadow)}div:where(.swal2-container) button:where(.swal2-styled)[disabled]:not(.swal2-loading){opacity:.4}div:where(.swal2-container) button:where(.swal2-styled)::-moz-focus-inner{border:0}div:where(.swal2-container) div:where(.swal2-footer){margin:1em 0 0;padding:1em 1em 0;border-top:1px solid var(--swal2-footer-border-color);background:var(--swal2-footer-background);color:var(--swal2-footer-color);font-size:1em;text-align:center;cursor:initial}div:where(.swal2-container) .swal2-timer-progress-bar-container{position:absolute;right:0;bottom:0;left:0;grid-column:auto !important;overflow:hidden;border-bottom-right-radius:var(--swal2-border-radius);border-bottom-left-radius:var(--swal2-border-radius)}div:where(.swal2-container) div:where(.swal2-timer-progress-bar){width:100%;height:.25em;background:var(--swal2-timer-progress-bar-background)}div:where(.swal2-container) img:where(.swal2-image){max-width:100%;margin:2em auto 1em;cursor:initial}div:where(.swal2-container) button:where(.swal2-close){position:var(--swal2-close-button-position);inset:var(--swal2-close-button-inset);z-index:2;align-items:center;justify-content:center;width:1.2em;height:1.2em;margin-top:0;margin-right:0;margin-bottom:-1.2em;padding:0;overflow:hidden;transition:var(--swal2-close-button-transition);border:none;border-radius:var(--swal2-border-radius);outline:var(--swal2-close-button-outline);background:rgba(0,0,0,0);color:var(--swal2-close-button-color);font-family:monospace;font-size:var(--swal2-close-button-font-size);cursor:pointer;justify-self:end}div:where(.swal2-container) button:where(.swal2-close):hover{transform:var(--swal2-close-button-hover-transform);background:rgba(0,0,0,0);color:#f27474}div:where(.swal2-container) button:where(.swal2-close):focus-visible{outline:none;box-shadow:var(--swal2-close-button-focus-box-shadow)}div:where(.swal2-container) button:where(.swal2-close)::-moz-focus-inner{border:0}div:where(.swal2-container) div:where(.swal2-html-container){z-index:1;justify-content:center;margin:0;padding:var(--swal2-html-container-padding);overflow:auto;color:inherit;font-size:1.125em;font-weight:normal;line-height:normal;text-align:center;overflow-wrap:break-word;word-break:break-word;cursor:initial}div:where(.swal2-container) input:where(.swal2-input),div:where(.swal2-container) input:where(.swal2-file),div:where(.swal2-container) textarea:where(.swal2-textarea),div:where(.swal2-container) select:where(.swal2-select),div:where(.swal2-container) div:where(.swal2-radio),div:where(.swal2-container) label:where(.swal2-checkbox){margin:1em 2em 3px}div:where(.swal2-container) input:where(.swal2-input),div:where(.swal2-container) input:where(.swal2-file),div:where(.swal2-container) textarea:where(.swal2-textarea){box-sizing:border-box;width:auto;transition:var(--swal2-input-transition);border:var(--swal2-input-border);border-radius:var(--swal2-input-border-radius);background:var(--swal2-input-background);box-shadow:var(--swal2-input-box-shadow);color:inherit;font-size:1.125em}div:where(.swal2-container) input:where(.swal2-input).swal2-inputerror,div:where(.swal2-container) input:where(.swal2-file).swal2-inputerror,div:where(.swal2-container) textarea:where(.swal2-textarea).swal2-inputerror{border-color:#f27474 !important;box-shadow:0 0 2px #f27474 !important}div:where(.swal2-container) input:where(.swal2-input):hover,div:where(.swal2-container) input:where(.swal2-file):hover,div:where(.swal2-container) textarea:where(.swal2-textarea):hover{box-shadow:var(--swal2-input-hover-box-shadow)}div:where(.swal2-container) input:where(.swal2-input):focus,div:where(.swal2-container) input:where(.swal2-file):focus,div:where(.swal2-container) textarea:where(.swal2-textarea):focus{border:var(--swal2-input-focus-border);outline:none;box-shadow:var(--swal2-input-focus-box-shadow)}div:where(.swal2-container) input:where(.swal2-input)::placeholder,div:where(.swal2-container) input:where(.swal2-file)::placeholder,div:where(.swal2-container) textarea:where(.swal2-textarea)::placeholder{color:#ccc}div:where(.swal2-container) .swal2-range{margin:1em 2em 3px;background:var(--swal2-background)}div:where(.swal2-container) .swal2-range input{width:80%}div:where(.swal2-container) .swal2-range output{width:20%;color:inherit;font-weight:600;text-align:center}div:where(.swal2-container) .swal2-range input,div:where(.swal2-container) .swal2-range output{height:2.625em;padding:0;font-size:1.125em;line-height:2.625em}div:where(.swal2-container) .swal2-input{height:2.625em;padding:0 .75em}div:where(.swal2-container) .swal2-file{width:75%;margin-right:auto;margin-left:auto;background:var(--swal2-input-background);font-size:1.125em}div:where(.swal2-container) .swal2-textarea{height:6.75em;padding:.75em}div:where(.swal2-container) .swal2-select{min-width:50%;max-width:100%;padding:.375em .625em;background:var(--swal2-input-background);color:inherit;font-size:1.125em}div:where(.swal2-container) .swal2-radio,div:where(.swal2-container) .swal2-checkbox{align-items:center;justify-content:center;background:var(--swal2-background);color:inherit}div:where(.swal2-container) .swal2-radio label,div:where(.swal2-container) .swal2-checkbox label{margin:0 .6em;font-size:1.125em}div:where(.swal2-container) .swal2-radio input,div:where(.swal2-container) .swal2-checkbox input{flex-shrink:0;margin:0 .4em}div:where(.swal2-container) label:where(.swal2-input-label){display:flex;justify-content:center;margin:1em auto 0}div:where(.swal2-container) div:where(.swal2-validation-message){align-items:center;justify-content:center;margin:1em 0 0;padding:.625em;overflow:hidden;background:var(--swal2-validation-message-background);color:var(--swal2-validation-message-color);font-size:1em;font-weight:300}div:where(.swal2-container) div:where(.swal2-validation-message)::before{content:"!";display:inline-block;width:1.5em;min-width:1.5em;height:1.5em;margin:0 .625em;border-radius:50%;background-color:#f27474;color:#fff;font-weight:600;line-height:1.5em;text-align:center}div:where(.swal2-container) .swal2-progress-steps{flex-wrap:wrap;align-items:center;max-width:100%;margin:1.25em auto;padding:0;background:rgba(0,0,0,0);font-weight:600}div:where(.swal2-container) .swal2-progress-steps li{display:inline-block;position:relative}div:where(.swal2-container) .swal2-progress-steps .swal2-progress-step{z-index:20;flex-shrink:0;width:2em;height:2em;border-radius:2em;background:#2778c4;color:#fff;line-height:2em;text-align:center}div:where(.swal2-container) .swal2-progress-steps .swal2-progress-step.swal2-active-progress-step{background:#2778c4}div:where(.swal2-container) .swal2-progress-steps .swal2-progress-step.swal2-active-progress-step~.swal2-progress-step{background:var(--swal2-progress-step-background);color:#fff}div:where(.swal2-container) .swal2-progress-steps .swal2-progress-step.swal2-active-progress-step~.swal2-progress-step-line{background:var(--swal2-progress-step-background)}div:where(.swal2-container) .swal2-progress-steps .swal2-progress-step-line{z-index:10;flex-shrink:0;width:2.5em;height:.4em;margin:0 -1px;background:#2778c4}div:where(.swal2-icon){position:relative;box-sizing:content-box;justify-content:center;width:5em;height:5em;margin:2.5em auto .6em;zoom:var(--swal2-icon-zoom);border:.25em solid rgba(0,0,0,0);border-radius:50%;border-color:#000;font-family:inherit;line-height:5em;cursor:default;user-select:none}div:where(.swal2-icon) .swal2-icon-content{display:flex;align-items:center;font-size:3.75em}div:where(.swal2-icon).swal2-error{border-color:#f27474;color:#f27474}div:where(.swal2-icon).swal2-error .swal2-x-mark{position:relative;flex-grow:1}div:where(.swal2-icon).swal2-error [class^=swal2-x-mark-line]{display:block;position:absolute;top:2.3125em;width:2.9375em;height:.3125em;border-radius:.125em;background-color:#f27474}div:where(.swal2-icon).swal2-error [class^=swal2-x-mark-line][class$=left]{left:1.0625em;transform:rotate(45deg)}div:where(.swal2-icon).swal2-error [class^=swal2-x-mark-line][class$=right]{right:1em;transform:rotate(-45deg)}div:where(.swal2-icon).swal2-error.swal2-icon-show{animation:swal2-animate-error-icon .5s}div:where(.swal2-icon).swal2-error.swal2-icon-show .swal2-x-mark{animation:swal2-animate-error-x-mark .5s}div:where(.swal2-icon).swal2-warning{border-color:#f8bb86;color:#f8bb86}div:where(.swal2-icon).swal2-warning.swal2-icon-show{animation:swal2-animate-error-icon .5s}div:where(.swal2-icon).swal2-warning.swal2-icon-show .swal2-icon-content{animation:swal2-animate-i-mark .5s}div:where(.swal2-icon).swal2-info{border-color:#3fc3ee;color:#3fc3ee}div:where(.swal2-icon).swal2-info.swal2-icon-show{animation:swal2-animate-error-icon .5s}div:where(.swal2-icon).swal2-info.swal2-icon-show .swal2-icon-content{animation:swal2-animate-i-mark .8s}div:where(.swal2-icon).swal2-question{border-color:#87adbd;color:#87adbd}div:where(.swal2-icon).swal2-question.swal2-icon-show{animation:swal2-animate-error-icon .5s}div:where(.swal2-icon).swal2-question.swal2-icon-show .swal2-icon-content{animation:swal2-animate-question-mark .8s}div:where(.swal2-icon).swal2-success{border-color:#a5dc86;color:#a5dc86}div:where(.swal2-icon).swal2-success [class^=swal2-success-circular-line]{position:absolute;width:3.75em;height:7.5em;border-radius:50%}div:where(.swal2-icon).swal2-success [class^=swal2-success-circular-line][class$=left]{top:-0.4375em;left:-2.0635em;transform:rotate(-45deg);transform-origin:3.75em 3.75em;border-radius:7.5em 0 0 7.5em}div:where(.swal2-icon).swal2-success [class^=swal2-success-circular-line][class$=right]{top:-0.6875em;left:1.875em;transform:rotate(-45deg);transform-origin:0 3.75em;border-radius:0 7.5em 7.5em 0}div:where(.swal2-icon).swal2-success .swal2-success-ring{position:absolute;z-index:2;top:-0.25em;left:-0.25em;box-sizing:content-box;width:100%;height:100%;border:.25em solid rgba(165,220,134,.3);border-radius:50%}div:where(.swal2-icon).swal2-success .swal2-success-fix{position:absolute;z-index:1;top:.5em;left:1.625em;width:.4375em;height:5.625em;transform:rotate(-45deg)}div:where(.swal2-icon).swal2-success [class^=swal2-success-line]{display:block;position:absolute;z-index:2;height:.3125em;border-radius:.125em;background-color:#a5dc86}div:where(.swal2-icon).swal2-success [class^=swal2-success-line][class$=tip]{top:2.875em;left:.8125em;width:1.5625em;transform:rotate(45deg)}div:where(.swal2-icon).swal2-success [class^=swal2-success-line][class$=long]{top:2.375em;right:.5em;width:2.9375em;transform:rotate(-45deg)}div:where(.swal2-icon).swal2-success.swal2-icon-show .swal2-success-line-tip{animation:swal2-animate-success-line-tip .75s}div:where(.swal2-icon).swal2-success.swal2-icon-show .swal2-success-line-long{animation:swal2-animate-success-line-long .75s}div:where(.swal2-icon).swal2-success.swal2-icon-show .swal2-success-circular-line-right{animation:swal2-rotate-success-circular-line 4.25s ease-in}[class^=swal2]{-webkit-tap-highlight-color:rgba(0,0,0,0)}.swal2-show{animation:var(--swal2-show-animation)}.swal2-hide{animation:var(--swal2-hide-animation)}.swal2-noanimation{transition:none}.swal2-scrollbar-measure{position:absolute;top:-9999px;width:50px;height:50px;overflow:scroll}.swal2-rtl .swal2-close{margin-right:initial;margin-left:0}.swal2-rtl .swal2-timer-progress-bar{right:0;left:auto}.swal2-toast{box-sizing:border-box;grid-column:1/4 !important;grid-row:1/4 !important;grid-template-columns:min-content auto min-content;padding:1em;overflow-y:hidden;border:var(--swal2-toast-border);background:var(--swal2-background);box-shadow:var(--swal2-toast-box-shadow);pointer-events:auto}.swal2-toast>*{grid-column:2}.swal2-toast h2:where(.swal2-title){margin:.5em 1em;padding:0;font-size:1em;text-align:initial}.swal2-toast .swal2-loading{justify-content:center}.swal2-toast input:where(.swal2-input){height:2em;margin:.5em;font-size:1em}.swal2-toast .swal2-validation-message{font-size:1em}.swal2-toast div:where(.swal2-footer){margin:.5em 0 0;padding:.5em 0 0;font-size:.8em}.swal2-toast button:where(.swal2-close){grid-column:3/3;grid-row:1/99;align-self:center;width:.8em;height:.8em;margin:0;font-size:2em}.swal2-toast div:where(.swal2-html-container){margin:.5em 1em;padding:0;overflow:initial;font-size:1em;text-align:initial}.swal2-toast div:where(.swal2-html-container):empty{padding:0}.swal2-toast .swal2-loader{grid-column:1;grid-row:1/99;align-self:center;width:2em;height:2em;margin:.25em}.swal2-toast .swal2-icon{grid-column:1;grid-row:1/99;align-self:center;width:2em;min-width:2em;height:2em;margin:0 .5em 0 0}.swal2-toast .swal2-icon .swal2-icon-content{display:flex;align-items:center;font-size:1.8em;font-weight:bold}.swal2-toast .swal2-icon.swal2-success .swal2-success-ring{width:2em;height:2em}.swal2-toast .swal2-icon.swal2-error [class^=swal2-x-mark-line]{top:.875em;width:1.375em}.swal2-toast .swal2-icon.swal2-error [class^=swal2-x-mark-line][class$=left]{left:.3125em}.swal2-toast .swal2-icon.swal2-error [class^=swal2-x-mark-line][class$=right]{right:.3125em}.swal2-toast div:where(.swal2-actions){justify-content:flex-start;height:auto;margin:0;margin-top:.5em;padding:0 .5em}.swal2-toast button:where(.swal2-styled){margin:.25em .5em;padding:.4em .6em;font-size:1em}.swal2-toast .swal2-success{border-color:#a5dc86}.swal2-toast .swal2-success [class^=swal2-success-circular-line]{position:absolute;width:1.6em;height:3em;border-radius:50%}.swal2-toast .swal2-success [class^=swal2-success-circular-line][class$=left]{top:-0.8em;left:-0.5em;transform:rotate(-45deg);transform-origin:2em 2em;border-radius:4em 0 0 4em}.swal2-toast .swal2-success [class^=swal2-success-circular-line][class$=right]{top:-0.25em;left:.9375em;transform-origin:0 1.5em;border-radius:0 4em 4em 0}.swal2-toast .swal2-success .swal2-success-ring{width:2em;height:2em}.swal2-toast .swal2-success .swal2-success-fix{top:0;left:.4375em;width:.4375em;height:2.6875em}.swal2-toast .swal2-success [class^=swal2-success-line]{height:.3125em}.swal2-toast .swal2-success [class^=swal2-success-line][class$=tip]{top:1.125em;left:.1875em;width:.75em}.swal2-toast .swal2-success [class^=swal2-success-line][class$=long]{top:.9375em;right:.1875em;width:1.375em}.swal2-toast .swal2-success.swal2-icon-show .swal2-success-line-tip{animation:swal2-toast-animate-success-line-tip .75s}.swal2-toast .swal2-success.swal2-icon-show .swal2-success-line-long{animation:swal2-toast-animate-success-line-long .75s}.swal2-toast.swal2-show{animation:var(--swal2-toast-show-animation)}.swal2-toast.swal2-hide{animation:var(--swal2-toast-hide-animation)}@keyframes swal2-show{0%{transform:translate3d(0, -50px, 0) scale(0.9);opacity:0}100%{transform:translate3d(0, 0, 0) scale(1);opacity:1}}@keyframes swal2-hide{0%{transform:translate3d(0, 0, 0) scale(1);opacity:1}100%{transform:translate3d(0, -50px, 0) scale(0.9);opacity:0}}@keyframes swal2-animate-success-line-tip{0%{top:1.1875em;left:.0625em;width:0}54%{top:1.0625em;left:.125em;width:0}70%{top:2.1875em;left:-0.375em;width:3.125em}84%{top:3em;left:1.3125em;width:1.0625em}100%{top:2.8125em;left:.8125em;width:1.5625em}}@keyframes swal2-animate-success-line-long{0%{top:3.375em;right:2.875em;width:0}65%{top:3.375em;right:2.875em;width:0}84%{top:2.1875em;right:0;width:3.4375em}100%{top:2.375em;right:.5em;width:2.9375em}}@keyframes swal2-rotate-success-circular-line{0%{transform:rotate(-45deg)}5%{transform:rotate(-45deg)}12%{transform:rotate(-405deg)}100%{transform:rotate(-405deg)}}@keyframes swal2-animate-error-x-mark{0%{margin-top:1.625em;transform:scale(0.4);opacity:0}50%{margin-top:1.625em;transform:scale(0.4);opacity:0}80%{margin-top:-0.375em;transform:scale(1.15)}100%{margin-top:0;transform:scale(1);opacity:1}}@keyframes swal2-animate-error-icon{0%{transform:rotateX(100deg);opacity:0}100%{transform:rotateX(0deg);opacity:1}}@keyframes swal2-rotate-loading{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes swal2-animate-question-mark{0%{transform:rotateY(-360deg)}100%{transform:rotateY(0)}}@keyframes swal2-animate-i-mark{0%{transform:rotateZ(45deg);opacity:0}25%{transform:rotateZ(-25deg);opacity:.4}50%{transform:rotateZ(15deg);opacity:.8}75%{transform:rotateZ(-5deg);opacity:1}100%{transform:rotateX(0);opacity:1}}@keyframes swal2-toast-show{0%{transform:translateY(-0.625em) rotateZ(2deg)}33%{transform:translateY(0) rotateZ(-2deg)}66%{transform:translateY(0.3125em) rotateZ(2deg)}100%{transform:translateY(0) rotateZ(0deg)}}@keyframes swal2-toast-hide{100%{transform:rotateZ(1deg);opacity:0}}@keyframes swal2-toast-animate-success-line-tip{0%{top:.5625em;left:.0625em;width:0}54%{top:.125em;left:.125em;width:0}70%{top:.625em;left:-0.25em;width:1.625em}84%{top:1.0625em;left:.75em;width:.5em}100%{top:1.125em;left:.1875em;width:.75em}}@keyframes swal2-toast-animate-success-line-long{0%{top:1.625em;right:1.375em;width:0}65%{top:1.25em;right:.9375em;width:0}84%{top:.9375em;right:0;width:1.125em}100%{top:.9375em;right:.1875em;width:1.375em}}
/* ===========================
   Review Comments
=========================== */

.comment-box{
  margin-top:15px;
  padding:15px;
  background:#fafafa;
  border-radius:14px;
  border:1px solid #eee;
}

.comment-input-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:15px;
}

.comment-input-row input{
  flex:1;
  height:46px;
  border:1px solid #ddd;
  border-radius:25px;
  padding:0 18px;
  font-size:14px;
  outline:none;
  background:#fff;
}

.comment-input-row input:focus{
  border-color:#ff3f6c;
}

.comment-input-row button{
  width:46px;
  height:46px;
  border:none;
  border-radius:50%;
  background:#ff3f6c;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  flex-shrink:0;
}

.comments-list{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.no-comment{
  text-align:center;
  color:#888;
  font-size:13px;
  padding:10px 0;
}

.single-comment{
  display:flex;
  align-items:flex-start;
  gap:12px;
}

.comment-user-photo{
  width:42px !important;
  height:42px !important;
  min-width:42px;
  min-height:42px;
  max-width:42px;
  max-height:42px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid #eee;
  background:#f5f5f5;
  display:block;
}

.comment-content{
  flex:1;
  background:#fff;
  border-radius:12px;
  padding:10px 14px;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
  word-break:break-word;
}

.comment-content strong{
  display:block;
  font-size:14px;
  font-weight:600;
  color:#222;
  margin-bottom:4px;
}

.comment-content p{
  margin:0;
  font-size:13px;
  color:#555;
  line-height:1.5;
}.review-card{
  background:#fff;
  border-radius:16px;
  padding:16px;
  margin:15px 12px;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
}

/* Header */

.review-header{
  display:flex;
  align-items:flex-start;
  gap:12px;
}

.review-user-photo{
  width:55px;
  height:55px;
  border-radius:50%;
  object-fit:cover;
  flex-shrink:0;
  border:1px solid #eee;
}

.review-user-info{
  flex:1;
}

.review-user-info h3{
  margin:0;
  font-size:22px;
  font-weight:700;
  color:#222;
}

.review-date{
  font-size:15px;
  color:#777;
  white-space:nowrap;
  margin-left:8px;
}

/* Rating */

.review-rating{
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin-top:8px;
  background:#1ca64c;
  color:#fff;
  border-radius:18px;
  padding:4px 12px;
  font-size:15px;
  font-weight:700;
}

/* Body */

.review-body{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-top:15px;
  gap:15px;
}

.review-content{
  flex:1;
  min-width:0;
}

/* Review Text */

.review-text{
  font-size:19px;
  color:#333;
  line-height:1.6;
  margin:0;
  word-break:break-word;
}

.more-link{
  color:#ff5a1f;
  font-weight:700;
  cursor:pointer;
}

/* Bottom Actions */

.actions{
  display:flex;
  align-items:center;
  gap:28px;
  margin-top:18px;
}

.action-item{
  display:flex;
  align-items:center;
  gap:5px;
  color:#666;
  cursor:pointer;
  font-size:18px;
}

.action-item svg{
  font-size:27px !important;
}

/* Right Image */

.media-box{
  width:92px;
  height:92px;
  border-radius:12px;
  overflow:hidden;
  position:relative;
  flex-shrink:0;
}

.preview-image{
  width:100%;
  height:100%;
  object-fit:cover;
}

.more-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.45);
  color:#fff;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:30px;
  font-weight:700;
}

/* Comment */

.active-comment-section{
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid #ececec;
}

/* Mobile */

@media (max-width:600px){

.review-card{
  margin:12px;
  padding:14px;
}

.review-user-photo{
  width:50px;
  height:50px;
}

.review-user-info h3{
  font-size:18px;
}

.review-date{
  font-size:13px;
}

.review-rating{
  font-size:13px;
  padding:3px 10px;
}

.review-text{
  font-size:16px;
}

.actions{
  gap:20px;
}

.action-item{
  font-size:15px;
}

.action-item svg{
  font-size:22px !important;
}

.media-box{
  width:78px;
  height:78px;
}

.more-overlay{
  font-size:24px;
}

}

.review-card,
.review-card *{
  text-align:left !important;
  box-sizing:border-box;
}

.review-header{
  display:flex !important;
  align-items:flex-start !important;
}

.review-user-info{
  flex:1;
}

.review-user-info h3{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.review-body{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
}

.review-content{
  flex:1;
}

.review-text{
  text-align:left !important;
}

.actions{
  justify-content:flex-start !important;
}

.media-box{
  margin-left:15px;
  flex-shrink:0;
}.wishlist-container { padding: 0; background: #f8f8f8; min-height: 100vh; font-family: sans-serif; }
.navbar { background: #4a00ff; color: white; padding: 15px; font-weight: bold; display: flex; align-items: center; }

.wishlist-item { 
  display: flex; 
  background: white; 
  padding: 12px; 
  margin-bottom: 2px; 
  border-bottom: 1px solid #eee; 
  align-items: flex-start; /* Image aur details ko top par align karne ke liye */
}

.item-details {
  flex: 1; /* Yeh details ko bachi hui jagah lene ke liye force karega */
  margin-left: 12px; /* Image aur text ke beech space */
  min-width: 0; /* Yeh bohot zaruri hai taaki flex container overflow na ho */
}

.item-details h3 {
  margin: 0 0 5px 0;
  font-size: 1rem;
  white-space: nowrap; /* Title ko ek line mein rakhega */
  overflow: hidden;    /* Agar zyada lamba hua toh hide karega */
  text-overflow: ellipsis; /* ... dikha dega agar text overflow hua */
}

.rating-row { 
  display: flex; 
  align-items: center; 
  gap: 8px; 
  margin-bottom: 5px;
  white-space: nowrap; /* Rating ko bhi ek line mein rakhega */
}


.wishlist-item img { width: 100px; height: 100px; object-fit: cover; margin-right: 15px; }

.coupon-tag { color: #8a2be2; font-size: 0.8rem; display: flex; align-items: center; gap: 4px; margin: 5px 0; }

.rating-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
  white-space: nowrap; 
}

.rating-badge {
  background: #00c853;
  color: white;
  padding: 2px 6px;
  border-radius: 5px;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  gap: 2px;
}

.rating-text {
  color: #777;
  font-size: 0.75rem;
  /* margin-left hata dein agar gap use kar rahe hain */
}


.price-row { font-weight: 800; font-size: 1.1rem; margin-top: 5px; }
.mrp { text-decoration: line-through; color: #999; font-size: 0.9rem; margin-left: 8px; font-weight: normal; }
.cod { font-size: 0.8rem; color: #000000; margin: 5px 0; }

.delete-btn { color: #000; cursor: pointer; align-self: center; }

.move-cart-btn { 
  background: #ff5a1f; 
  color: white; 
  border: none; 
  padding: 6px 10px; 
  border-radius: 4px; 
  cursor: pointer; 
  display: flex; 
  align-items: center; 
  gap: 5px; 
  font-size: 0.8rem; 
  margin: 8px 0;
}


/* SweetAlert2 Popup ka style customize karne ke liye */
.swal2-popup {
  border-radius: 20px !important; /* Rounded corners */
  padding: 20px !important;
  font-family: sans-serif !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2) !important;
}

.swal2-title {
  color: #333 !important;
  font-size: 1.5rem !important;
}

.swal2-confirm {
  background-color: #6c2cf5 !important; /* Purple theme */
  border-radius: 10px !important;
  padding: 10px 25px !important;
  font-weight: bold !important;
}

/* Success icon ka color change */
.swal2-icon.swal2-success {
  border-color: #6c2cf5 !important;
  color: #6c2cf5 !important;
}

.swal2-icon.swal2-success [class^='swal2-success-line'] {
  background-color: #6c2cf5 !important;
}


.delete-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  color: red;
  font-size: 28px !important;
  cursor: pointer;
  z-index: 10;
}

.wishlist-item {
  position: relative;
}

.stock-status{
  font-size: 13px;
  font-weight: 600;
  margin: 6px 0;
}

.notify-btn {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 8px;
  background: #666;
  color: white;
  font-weight: 600;
  cursor: pointer;
}
.price-drop{
  color: #28a745;
  font-size: 13px;
  font-weight: 700;
  margin-top: 4px;
}

.low-stock{
  color: #ff5722;
  font-size: 13px;
  font-weight: 600;
  margin: 4px 0 8px;
}

/* ==========================================
   CART PAGE
========================================== */

.cart-page{
    background:#f5f5f6;
    min-height:100vh;
    padding-bottom:90px;
    font-family:Arial,sans-serif;
}

/* ==========================================
   TOP BAR
========================================== */

.cart-topbar{
    position:sticky;
    top:0;
    z-index:100;
    background:#fff;
    height:65px;
    padding:0 16px;
    display:flex;
    align-items:center;
    gap:14px;
    border-bottom:1px solid #ececec;
}

.cart-topbar svg{
    font-size:26px;
    color:#222;
    cursor:pointer;
}

.steps{
    flex:1;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    font-size:14px;
    font-weight:700;
    color:#999;
}

.steps .active{
    color:#00b894;
}

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

.cart-box{
    position:relative;
    display:flex;
    gap:12px;
    background:#fff;
    margin:12px;
    padding:12px;
    border-radius:16px;
    box-shadow:0 3px 12px rgba(0,0,0,.08);
}

.cart-box img{
    width:90px;
    height:112px;
    object-fit:cover;
    border-radius:12px;
    flex-shrink:0;
}

/* ==========================================
   PRODUCT INFO
========================================== */

.cart-info{
    flex:1;
    display:flex;
    flex-direction:column;
}

.cart-info h3{
    margin:0;
    font-size:16px;
    font-weight:700;
    color:#222;
    line-height:1.3;
}

.cart-info p{
    margin:4px 0;
    font-size:13px;
    color:#666;
}

/* ==========================================
   PRICE
========================================== */

.price-line{
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:6px;
    flex-wrap:wrap;
}

.price{
    font-size:22px;
    font-weight:700;
    color:#111;
}

.mrp{
    font-size:14px;
    color:#999;
    text-decoration:line-through;
}

.off{
    font-size:13px;
    font-weight:700;
    color:#00a650;
}

/* ==========================================
   QUANTITY BUTTONS
========================================== */

.qty-buttons{
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:10px;
}

.qty-buttons button{
    width:32px;
    height:32px;
    border:none;
    border-radius:50%;
    background:#ff3f6c;
    display:flex;
    justify-content:center;
    align-items:center;
    cursor:pointer;
    transition:.25s;
}

.qty-buttons button:hover{
    transform:scale(1.05);
}

.qty-buttons button svg{
    color:#fff;
    font-size:18px;
}

.qty-buttons span{
    min-width:26px;
    text-align:center;
    font-size:16px;
    font-weight:700;
    color:#222;
}

/* ==========================================
   DELETE BUTTON
========================================== */

.delete-btn{
    position:absolute;
    top:12px;
    right:12px;
    color:#ff3f6c;
    cursor:pointer;
    transition:.25s;
}

.delete-btn:hover{
    transform:scale(1.1);
}

/* ==========================================
   APPLY COUPON
========================================== */

.coupon-box{
    background:#fff;
/*     margin:12px 0;  👈 change */
    width:100% !important; /* 👈 add */
    padding:14px 16px;
    border:2px dashed #ff3f6c;
    border-radius:16px;
    display:flex;
    align-items:center;
    gap:12px;
    cursor:pointer;
    transition:.25s;
    box-shadow:0 3px 10px rgba(0,0,0,.05);
    box-sizing:border-box; /* 👈 important */
}

.coupon-box:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 16px rgba(0,0,0,.08);
}

.coupon-box svg{
    font-size:24px;
    color:#ff3f6c;
}

.coupon-box span{
    flex:1;
    font-size:15px;
    font-weight:600;
    color:#222;
}

.coupon-box button{
    border:none;
    background:#ff3f6c;
    color:#fff;
    padding:8px 16px;
    border-radius:8px;
    font-size:14px;
    font-weight:700;
    cursor:pointer;
    transition:.25s;
}

.coupon-box button:hover{
    background:#e73360;
}

/* ==========================================
   PRICE DETAILS
========================================== */

.price-details{
    background:#fff;
    margin:12px;
    padding:16px;
    border-radius:16px;
    box-shadow:0 3px 12px rgba(0,0,0,.06);
}

.price-details h3{
    margin:0 0 14px;
    font-size:15px;
    font-weight:700;
    color:#666;
    text-transform:uppercase;
}

.row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin:12px 0;
    font-size:15px;
    color:#333;
}

.row span:last-child{
    font-weight:600;
}

.price-details hr{
    border:none;
    border-top:1px solid #ececec;
    margin:14px 0;
}

.total{
    font-size:19px;
    font-weight:700;
    color:#111;
}

.save-text{
    margin-top:10px;
    font-size:14px;
    font-weight:700;
    color:#00a650;
}

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

.checkout-footer{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    background:#fff;
    padding:14px;
    box-shadow:0 -5px 16px rgba(0,0,0,.08);
    z-index:100;
}

.checkout-footer button{
    width:100%;
    height:50px;
    border:none;
    border-radius:14px;
    background:#ff3f6c;
    color:#fff;
    font-size:17px;
    font-weight:700;
    cursor:pointer;
    transition:.25s;
}

.checkout-footer button:hover{
    background:#e73360;
}

.checkout-footer button:active{
    transform:scale(.98);
}

/* ==========================================
   COUPON POPUP
========================================== */

.coupon-popup{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.55);
    display:flex;
    justify-content:center;
    align-items:center;
    padding:12px;
    z-index:999;
}

.coupon-modal{
    width:100%;
    max-width:420px;
    max-height:85vh;
    overflow-y:auto;
    background:#f8f8fb;
    border-radius:22px;
    padding:14px;
    box-shadow:0 15px 35px rgba(0,0,0,.25);
}

.coupon-modal h3{
    margin:0 0 14px;
    text-align:center;
    font-size:22px;
    font-weight:700;
    color:#222;
}

/* ==========================================
   COUPON CARD
========================================== */

.popup-coupon-card{
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    margin-bottom:12px;
    box-shadow:0 4px 12px rgba(0,0,0,.08);
    transition:.25s;
}

.popup-coupon-card:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(0,0,0,.12);
}

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

.popup-coupon-header{
    background:linear-gradient(90deg,#7b00ff,#ff0066);
    padding:8px 12px;
    text-align:center;
}

.popup-company-name{
    display:block;
    color:#fff;
    font-size:9px;
    letter-spacing:4px;
    margin-bottom:2px;
}

.popup-coupon-header h2{
    margin:0;
    color:#fff;
    font-size:15px;
    font-weight:800;
}

/* ==========================================
   BODY
========================================== */

.popup-coupon-body{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:8px 12px;
}

.popup-coupon-left{
    width:22%;
    display:flex;
    justify-content:center;
    align-items:center;
}

.popup-gift-box{
    font-size:42px;
}

.popup-coupon-center{
    flex:1;
    text-align:center;
}

.popup-discount-box{
    background:linear-gradient(90deg,#8b00ff,#ff0066);
    color:#fff;
    padding:6px 10px;
    border-radius:10px;
    font-size:18px;
    font-weight:800;
    margin-bottom:6px;
}

.popup-coupon-code{
    margin:0;
    font-size:16px;
    font-weight:800;
    color:#222;
}

.popup-coupon-right{
    width:26%;
    text-align:center;
    border-left:1px dashed #ddd;
    padding-left:8px;
}

.popup-coupon-right h4{
    margin:0;
    font-size:11px;
    color:#222;
    font-weight:700;
}

.popup-calendar{
    font-size:28px;
    margin:3px 0;
}

.popup-coupon-right span{
    display:block;
    font-size:10px;
    color:#666;
}

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

.popup-coupon-footer{
    border-top:1px dashed #e5e5e5;
    padding:8px 12px 10px;
    display:flex;
    flex-direction:column;
    gap:8px;
}

.popup-min-order{
    text-align:center;
    font-size:13px;
    color:#555;
}

.popup-min-order strong{
    color:#ff0066;
}

/* ==========================================
   APPLY BUTTON
========================================== */

.popup-apply-btn{
    width:100%;
    height:40px;
    border:none;
    border-radius:10px;
    background:linear-gradient(90deg,#8b00ff,#ff0066);
    color:#fff;
    font-size:16px;
    font-weight:700;
    cursor:pointer;
    transition:.2s;
}

.popup-apply-btn:hover{
    opacity:.95;
}

.popup-apply-btn:active{
    transform:scale(.98);
}

/* ==========================================
   CLOSE BUTTON
========================================== */

.coupon-modal>button{
    width:100%;
    height:42px;
    margin-top:12px;
    border:none;
    border-radius:10px;
    background:#ff3f6c;
    color:#fff;
    font-size:15px;
    font-weight:700;
    cursor:pointer;
}

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

.coupon-modal::-webkit-scrollbar{
    width:5px;
}

.coupon-modal::-webkit-scrollbar-thumb{
    background:#ff3f6c;
    border-radius:10px;
}

/* ==========================================
   EMPTY CART
========================================== */

.empty-cart{
    min-height:calc(100vh - 65px);
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:24px;
}

.empty-cart img{
    width:180px;
    max-width:80%;
    margin-bottom:20px;
}

.empty-cart h3{
    margin:0;
    font-size:24px;
    font-weight:700;
    color:#222;
}

.empty-cart p{
    margin:10px 0 24px;
    font-size:15px;
    color:#777;
    line-height:1.6;
}

.empty-cart button{
    border:none;
    outline:none;
    background:#ff3f6c;
    color:#fff;
    padding:14px 28px;
    border-radius:30px;
    font-size:15px;
    font-weight:700;
    cursor:pointer;
    transition:.25s;
    box-shadow:0 8px 18px rgba(255,63,108,.25);
}

.empty-cart button:hover{
    background:#e73360;
    transform:translateY(-2px);
}

/* ==========================================
   LOADING
========================================== */

.loading-screen{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#f5f5f6;
    font-size:18px;
    font-weight:700;
    color:#666;
}

/* ==========================================
   MOBILE RESPONSIVE
========================================== */

@media (max-width:480px){

.cart-topbar{
    height:60px;
    padding:0 12px;
}

.steps{
    font-size:11px;
    gap:4px;
}

.cart-box{
    margin:10px;
    padding:10px;
    gap:10px;
}

.cart-box img{
    width:78px;
    height:100px;
}

.cart-info h3{
    font-size:15px;
}

.cart-info p{
    font-size:12px;
}

.price{
    font-size:18px;
}

.mrp{
    font-size:12px;
}

.off{
    font-size:11px;
}

.qty-buttons button{
    width:28px;
    height:28px;
}

.qty-buttons span{
    font-size:14px;
}

.coupon-box{
    margin:10px;
    padding:12px;
}

.coupon-box span{
    font-size:13px;
}

.coupon-box button{
    padding:6px 12px;
    font-size:13px;
}

.price-details{
    margin:10px;
    padding:14px;
}

.row{
    font-size:13px;
}

.total{
    font-size:17px;
}

.coupon-modal{
    max-width:360px;
    padding:12px;
}

.popup-company-name{
    font-size:8px;
}

.popup-coupon-header h2{
    font-size:13px;
}

.popup-gift-box{
    font-size:34px;
}

.popup-discount-box{
    font-size:15px;
}

.popup-coupon-code{
    font-size:13px;
}

.popup-calendar{
    font-size:20px;
}

.popup-coupon-right h4{
    font-size:9px;
}

.popup-coupon-right span{
    font-size:8px;
}

.popup-min-order{
    font-size:10px;
}

.popup-apply-btn{
    height:36px;
    font-size:14px;
}

.checkout-footer{
    padding:12px;
}

.checkout-footer button{
    height:46px;
    font-size:16px;
}

.empty-cart h3{
    font-size:20px;
}

.empty-cart p{
    font-size:13px;
}

.empty-cart button{
    font-size:14px;
    padding:12px 24px;
}

}

/* ==========================================
   FINAL PREMIUM UI POLISH
========================================== */

/* Smooth animation */
*{
    -webkit-tap-highlight-color:transparent;
}

.cart-box,
.coupon-box,
.popup-coupon-card,
.checkout-footer button,
.popup-apply-btn,
.empty-cart button{
    transition:all .25s ease;
}

/* Card Hover */
.cart-box:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(0,0,0,.10);
}

.coupon-box:hover{
    border-color:#ff0066;
}

.popup-coupon-card:hover{
    transform:translateY(-3px);
}

/* Better Image */
.cart-box img{
    background:#f3f3f3;
}

/* Price Colors */
.price{
    color:#111;
}

.mrp{
    opacity:.75;
}

.off{
    color:#00a650;
}

/* Better Scrollbar */
::-webkit-scrollbar{
    width:6px;
}

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

::-webkit-scrollbar-thumb{
    background:#ff3f6c;
    border-radius:10px;
}

::-webkit-scrollbar-thumb:hover{
    background:#e73360;
}

/* Button Effects */
.checkout-footer button:hover,
.popup-apply-btn:hover,
.empty-cart button:hover{
    box-shadow:0 8px 20px rgba(255,63,108,.30);
}

.checkout-footer button:active,
.popup-apply-btn:active,
.empty-cart button:active{
    transform:scale(.97);
}

/* Coupon Card Premium */
.popup-coupon-card{
    border:1px solid #f0f0f0;
}

.popup-discount-box{
    box-shadow:0 4px 12px rgba(139,0,255,.25);
}

.popup-apply-btn{
    box-shadow:0 6px 14px rgba(255,0,102,.25);
}

/* Checkout Footer */
.checkout-footer{
    border-top-left-radius:18px;
    border-top-right-radius:18px;
}

/* Empty Cart */
.empty-cart img{
    animation:floatImage 3s ease-in-out infinite;
}

@keyframes floatImage{
    0%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-8px);
    }
    100%{
        transform:translateY(0);
    }
}

/* Fade Animation */
.cart-box,
.coupon-box,
.price-details,
.popup-coupon-card{
    animation:fadeUp .35s ease;
}

@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(12px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}.checkout-page {
  background: #f5f5f6;
  min-height: 100vh;
  padding-bottom: 110px;
  font-family: Arial, sans-serif;
}

/* Navbar */
.navbar {
  background: white;
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 18px;
  font-weight: 800;
  color: #1f2430;
  border-bottom: 1px solid #e5e5e5;
  position: sticky;
  top: 0;
  z-index: 100;
}

.navbar svg {
  cursor: pointer;
}

/* Section */
.section {
  background: white;
  margin-top: 10px;
  padding: 18px;
}

/* Labels */
.label {
  font-size: 14px;
  font-weight: 700;
  color: #7a7a7a;
  margin-bottom: 15px;
  text-transform: uppercase;
}

/* Address Section */
.address-section h4 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #222;
}

.address-section p {
  margin: 8px 0;
  font-size: 15px;
  color: #555;
  line-height: 1.6;
}

/* Payment */
.pay-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
}

.pay-option:last-child {
  border-bottom: none;
}

.pay-option span {
  font-size: 16px;
  font-weight: 700;
  color: #222;
}

.pay-option p {
  margin: 4px 0 0;
  font-size: 14px;
  color: #888;
}

/* new code Order Summary*/
.checkout-rating {
  display: inline-block;
  background: #038d3c;
  color: #fff;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  margin: 5px 0;
}

.price-row-checkout {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sale-price {
  font-size: 18px;
  font-weight: 700;
  color: #000;
}

.cut-price {
  text-decoration: line-through;
  color: #888;
  font-size: 14px;
}

.off-percent {
  color: green;
  font-size: 14px;
  font-weight: 600;
}
/*------------------------*/
/* Order Summary */
.item-row {
  display: flex;
  gap: 14px;
  padding: 15px 0;
  border-bottom: 1px solid #f2f2f2;
}

.item-row:last-child {
  border-bottom: none;
}

.item-row img {
  width: 95px;
  height: 120px;
  border-radius: 8px;
  object-fit: cover;
}

.item-info {
  flex: 1;
}

.item-info h4 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: #222;
}

.item-info p {
  margin: 6px 0;
  font-size: 15px;
  color: #666;
}

/* Price Box */
.price-box {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.price {
  font-size: 20px;
  font-weight: 800;
  color: #1f2430;
}

.mrp {
  text-decoration: line-through;
  color: #999;
  font-size: 16px;
}

.discount-text {
  color: #ff3f6c;
  font-size: 15px;
  font-weight: 700;
}

/* Price Breakdown */
.price-breakdown {
  margin-bottom: 90px;
}

.price-detail {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 14px 0;
  font-size: 17px;
  color: #333;
}

.price-detail .green {
  color: #00a884;
  font-weight: 700;
}

.gray-line {
  height: 1px;
  background: #eee;
  margin: 18px 0;
}

.total {
  font-size: 21px;
  font-weight: 800;
  color: #222;
}

/* Footer */
.footer-pay {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: white;
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
  z-index: 999;
}

.total-amt {
  font-size: 22px;
  font-weight: 800;
  color: #1f2430;
}

.pay-btn {
  background: #ff3f6c;
  color: white;
  border: none;
  padding: 15px 35px;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
}

.pay-btn:hover {
  opacity: 0.95;
}

/* Responsive */
@media (max-width: 768px) {
  .navbar {
    font-size: 17px;
    padding: 16px;
  }

  .section {
    padding: 16px;
  }

  .item-row img {
    width: 85px;
    height: 110px;
  }

  .item-info h4 {
    font-size: 16px;
  }

  .price {
    font-size: 18px;
  }

  .mrp {
    font-size: 14px;
  }

  .discount-text {
    font-size: 14px;
  }

  .price-detail {
    font-size: 15px;
  }

  .total {
    font-size: 18px;
  }

  .total-amt {
    font-size: 20px;
  }

  .pay-btn {
    padding: 14px 28px;
    font-size: 16px;
  }
}




.coupon-box {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.coupon-box input {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 15px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 10px;
  outline: none;
  box-sizing: border-box;
}

.coupon-box button {
  width: 120px;
  min-width: 120px;
  height: 48px;
  border: none;
  border-radius: 10px;
  background: #ff5a1f;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  margin-bottom: 16px;
}

.coupon-box button:disabled {
  background: #0b8f21;
}

@media (max-width: 480px) {
  .coupon-box {
    gap: 8px;
  }

  .coupon-box button {
    width: 105px;
    min-width: 105px;
    font-size: 15px;
  }

  .coupon-box input {
    font-size: 15px;
  }
}
.coupon-applied-btn{
  margin-bottom: 16px;
  background: green !important;
}
.section {
  overflow: hidden;
}

* {
  box-sizing: border-box;
}

.coupon-popup {
  border-radius: 18px !important;
  padding: 25px !important;
}

.coupon-title {
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #222 !important;
}

.coupon-btn {
  background: linear-gradient(90deg, #ff5a1f, #ff3f6c) !important;
  border-radius: 10px !important;
  padding: 10px 28px !important;
  font-weight: 600 !important;
  font-size: 16px !important;
}

.pay-loader{

width:22px;

height:22px;

border:3px solid rgba(255,255,255,.4);

border-top:3px solid #fff;

border-radius:50%;

margin:auto;

animation:paySpin .7s linear infinite;

}

@keyframes paySpin{

0%{
transform:rotate(0deg);
}

100%{
transform:rotate(360deg);
}

}

.pay-btn:disabled{

opacity:.9;

cursor:not-allowed;

}.address-container {
  width: 100%;
  max-width: 700px;
  margin: auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}

/* Heading */
.address-container h3 {
  font-size: 22px;
  margin-bottom: 20px;
  font-weight: 600;
  color: #ff4081;
}

/* Address Card */
.address-card {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.address-card h4 {
  font-size: 18px;
  margin: 0;
  color: #111;
}

.address-card p {
  margin: 8px 0;
  color: #444;
  line-height: 1.5;
}

/* Delete icon */
.delete-icon {
  color: red;
  cursor: pointer;
  transition: 0.3s;
}

.delete-icon:hover {
  transform: scale(1.1);
}

/* Deliver button */
.deliver-btn {
  width: 100%;
  margin-top: 12px;
  padding: 12px;
  border: none;
  border-radius: 8px;
  background:   #ff4081;
  color: white;
  font-size: 15px;
  cursor: pointer;
}

.deliver-btn:hover {
  opacity: 0.9;
}

/* Add New Button */
.add-new-btn {
  width: 100%;
  padding: 14px;
  border: 2px dashed  #ff4081;
  background: transparent;
  color: #ff4081;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 10px;
}

.add-new-btn:hover {
  background: #f8f8f8;
}

/* Modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.modal-content {
  width: 95%;
  max-width: 500px;
  background: white;
  padding: 22px;
  border-radius: 14px;
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-content h3 {
  color: #ff4081;
}

/* Close button */
.close-modal {
  position: absolute;
  top: 12px;
  right: 18px;
  font-size: 26px;
  cursor: pointer;
  color: #ff4081;
}

/* Grid */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Inputs */
input,
textarea {
  width: 100%;
  padding: 12px;
  margin-top: 12px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  background: #fff !important;
  color: #111 !important;
  box-sizing: border-box;
}

/* Placeholder */
input::placeholder,
textarea::placeholder {
  color: #777 !important;
  opacity: 1;
}

/* Focus */
input:focus,
textarea:focus {
  border-color:  #ff4081;
  background: #fff !important;
  color: #111 !important;
}

/* Autofill fix */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill {
  -webkit-text-fill-color: #111 !important;
  -webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
  transition: background-color 5000s ease-in-out 0s;
}

textarea {
  min-height: 90px;
  resize: none;
}

/* Save label */
.save-label {
  margin-top: 16px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

/* Type buttons */
.type-group {
  display: flex;
  gap: 10px;
  margin: 12px 0;
}

.type-group button {
  flex: 1;
  padding: 10px;
  border: 1px solid  #ff4081;
  background: white;
  color: #ff4081;
  cursor: pointer;
  border-radius: 8px;
}

.type-group button.active {
  background: #ff4081;
  color: white;
}

/* Save button */
.save-btn {
  width: 100%;
  padding: 14px;
  background:  #ff4081;
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  cursor: pointer;
}

.save-btn:hover {
  opacity: 0.9;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .address-container {
    padding: 15px;
  }

  .grid-2 {
    grid-template-columns: 1fr;
  }

  .modal-content {
    width: 92%;
    padding: 18px;
  }

  .address-card h4 {
    font-size: 16px;
  }

  .deliver-btn,
  .save-btn,
  .add-new-btn {
    font-size: 14px;
    margin-top: 15px;
  }
}

/* part 1 */
/*===================================
        ORDERS PAGE
===================================*/

.orders-page{
  max-width:500px;
  margin:auto;
  padding:16px;
  min-height:100vh;
  background:#f7f7f7;
  font-family:Arial,sans-serif;
} 

.orders-page h2{
  text-align:center;
  font-size:34px;
  font-weight:700;
  color:#222;
  margin:10px 0 28px;
}

/* ===================================
        ORDER CARD
=================================== */

.order-card{
  background:#fff;
  border-radius:22px;
  padding:18px;
  margin-bottom:22px;
  box-shadow:0 8px 25px rgba(0,0,0,.08);
  transition:.25s;
  position:relative;
  overflow:hidden;
}

.order-card:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 32px rgba(0,0,0,.12);
}

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

.order-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:14px;
}

.status-badge{
  font-size:15px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.5px;
}

.status-badge.confirmed{
  color:#111;
}

.status-badge.delivered{
  color:#28a745;
}

.status-badge.cancelled{
  color:#e53935;
}

.order-id-top{
  color:#ff4d88;
  font-weight:700;
  font-size:15px;
}

.divider{
  border:none;
  border-top:1px solid #efefef;
  margin:12px 0 18px;
}

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

.product-layout{
  display:flex;
  gap:18px;
  align-items:flex-start;
}

.image-wrapper{
  width:96px;
  flex-shrink:0;
}

.image-wrapper img{
  width:96px;
  height:120px;
  object-fit:cover;
  border-radius:12px;
  border:1px solid #eee;
}

.product-info{
  flex:1;
}

.brand-name{
  font-size:15px;
  font-weight:700;
  color:#222;
  margin-bottom:4px;
  text-transform:uppercase;
}

.product-name{
  font-size:16px;
  color:#444;
  margin-bottom:8px;
}

.product-size{
  color:#8b8b8b;
  font-size:14px;
  margin-bottom:12px;
}

/* ===================================
        PRICE
=================================== */

.price-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin-top:6px;
}

.sale-price{
  font-size:18px;
  font-weight:700;
  color:#222;
}

.old-price{
  color:#9b9b9b;
  text-decoration:line-through;
  font-size:16px;
}

.discount{
  color:#089981;
  font-size:15px;
  font-weight:700;
}

/* part 2 */
/* ===================================
        BOTTOM INFO
=================================== */

.bottom-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid #efefef;
}

.ordered-date{
  font-size:14px;
  color:#777;
}

.paid-price{
  font-size:18px;
  font-weight:700;
  color:#222;
}

/* ===================================
        VIEW DETAILS
=================================== */

.view-details{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin-top:4px;
  color:#ff5a1f;
  font-size:15px;
  font-weight:700;
  transition:.25s;
}

.order-card:hover .view-details{
  letter-spacing:.5px;
}

/* ===================================
        MORE ITEMS
=================================== */

.more-items{
  margin-top:10px;
  text-align:center;
  font-size:13px;
  color:#666;
  font-weight:600;
}

/* ===================================
        PAYMENT
=================================== */

.payment-type{
  margin-top:12px;
  color:#666;
  font-size:14px;
}

.item-count{
  margin-top:6px;
  color:#666;
  font-size:14px;
}

.order-date{
  margin-top:10px;
  color:#777;
  font-size:14px;
}

/* ===================================
        STATUS
=================================== */

.order-meta{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:12px;
}

.status-icon{
  font-size:18px;
}

.status-text{
  font-size:15px;
  font-weight:700;
}

.status-text.green{
  color:#28a745;
}

.status-text.orange{
  color:#ff9800;
}

.status-text.red{
  color:#e53935;
}

/* ===================================
        ARROW
=================================== */

.arrow{
  position:absolute;
  right:18px;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
}

.arrow svg{
  font-size:34px;
  color:#d5d5d5;
  transition:.25s;
}

.order-card:hover .arrow svg{
  color:#ff5a1f;
  transform:translateX(4px);
}
/* part 3 */
/* ===================================
        EMPTY ORDERS
=================================== */

.loader,
.empty-msg{
  text-align:center;
  margin-top:60px;
  color:#666;
  font-size:16px;
}

.empty-orders{
  text-align:center;
  padding:80px 20px;
}

.empty-orders h3{
  font-size:28px;
  color:#222;
  margin-bottom:10px;
}

.empty-orders p{
  color:#777;
  font-size:15px;
  margin-bottom:22px;
}

.shop-btn{
  background:#ff5a1f;
  color:#fff;
  border:none;
  padding:14px 28px;
  border-radius:10px;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  transition:.25s;
}

.shop-btn:hover{
  background:#e84b12;
}

/* ===================================
        IMAGE EFFECT
=================================== */

.image-wrapper img{
  transition:.25s;
}

.order-card:hover .image-wrapper img{
  transform:scale(1.04);
}

/* ===================================
        CARD EFFECT
=================================== */

.order-card::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:5px;
  height:100%;
  background:#ff5a1f;
  opacity:0;
  transition:.25s;
}

.order-card:hover::before{
  opacity:1;
}

/* ===================================
        RESPONSIVE
=================================== */

@media(max-width:480px){

.orders-page{
  padding:12px;
}

.orders-page h2{
  font-size:30px;
}

.order-card{
  padding:16px;
  border-radius:18px;
}

.product-layout{
  gap:14px;
}

.image-wrapper{
  width:92px;
}

.image-wrapper img{
  width:92px;
  height:115px;
}

.brand-name{
  font-size:14px;
}

.product-name{
  font-size:15px;
}

.product-size{
  font-size:13px;
}

.sale-price{
  font-size:17px;
}

.old-price{
  font-size:14px;
}

.discount{
  font-size:14px;
}

.order-id-top{
  font-size:13px;
}

.status-badge{
  font-size:13px;
}
.bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #ececec;
}

.ordered-date {
  font-size: 12px;
  color: #8c8c8c
  font-weight: 600;
}

.paid-price {
  font-size: 18px;
  font-weight: 700;
  color: #2b2d42; /* Adjusted to match the dark text in 1000416579.jpg */
}

.arrow svg{
  font-size:30px;
}

.view-details{
  font-size:14px;
}

}

/* ===================================
        SMOOTH
=================================== */

*{
  box-sizing:border-box;
}

img{
  display:block;
  max-width:100%;
}

button{
  outline:none;
}


.orders-header{
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  justify-content: center; /* 👈 center title */
  padding: 14px 16px;
  background: #ff3f6c;
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid #eee;
  position: relative; /* 👈 important */
}

/* Title */
.orders-header h2{
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin: 0;
}

.back-btn{
  position: absolute;
  left: 10px;
  border: none;
  background: none;
  display: flex;
  align-items: center;
  gap: 6px; /* 👈 space between icon & text */
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 20px;
}

.back-btn svg{
  font-size: 22px;
  color: #fff;
}

.back-btn span{
  font-size: 14px;
  color: #fff;
  font-weight: 500;
}

/* Click effect */
.back-btn:active{
  transform: scale(0.95);
}.order-details-page {
  width: 100%;
  min-height: 100vh;
  padding: 24px;
  box-sizing: border-box;
  background: #f5f7fb;
  color: #172033;
  font-family: inherit;
}

.order-details-page .details-header,
.order-details-page .status-card,
.order-details-page .products-card,
.order-details-page .address-card,
.order-details-page .shipment-card,
.order-details-page .tracking-card,
.order-details-page .cancel-order-card,
.order-details-page .payment-card {
  width: 100%;
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.order-details-page .details-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.order-details-page .details-header h2 {
  margin: 0;
  color: #111827;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0;
}

.order-details-page .back-btn {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border: 1px solid #dbe2ec;
  border-radius: 8px;
  background: #ffffff;
  color: #172033;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.order-details-page .back-btn:hover {
  background: #eef6ff;
  border-color: #b9d8f4;
  transform: translateY(-1px);
}

.order-details-page .status-card,
.order-details-page .products-card,
.order-details-page .address-card,
.order-details-page .shipment-card,
.order-details-page .tracking-card,
.order-details-page .cancel-order-card,
.order-details-page .payment-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 18px;
  box-shadow: 0 8px 26px rgba(15, 23, 42, 0.06);
}

.order-details-page .status-card h3,
.order-details-page .products-card h3,
.order-details-page .address-card h3,
.order-details-page .shipment-header h3,
.order-details-page .tracking-title,
.order-details-page .payment-card h3 {
  margin: 0 0 14px;
  color: #111827;
  font-size: 21px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0;
}

.order-details-page .status-card h3,
.order-details-page .products-card h3,
.order-details-page .shipment-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.order-details-page .status-card p,
.order-details-page .address-card p {
  margin: 8px 0 0;
  color: #526070;
  font-size: 15px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.order-details-page .status-card strong,
.order-details-page .address-card strong {
  color: #172033;
  font-weight: 800;
}

.order-details-page .product-card {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid #edf0f5;
}

.order-details-page .product-card:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.order-details-page .product-card:last-child {
  padding-bottom: 0;
}

.order-details-page .product-image {
  width: 116px;
  height: 136px;
  display: block;
  object-fit: cover;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f1f5f9;
}

.order-details-page .product-info {
  min-width: 0;
}

.order-details-page .product-info h4 {
  margin: 0 0 10px;
  color: #111827;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.order-details-page .product-info p {
  margin: 6px 0;
  color: #526070;
  font-size: 14px;
  line-height: 1.45;
}

.order-details-page .product-info strong {
  color: #172033;
  font-weight: 800;
}

.order-details-page .write-review-btn,
.order-details-page .shipping-soon-btn,
.order-details-page .cancel-order-btn {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 8px;
  padding: 10px 14px;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
  cursor: pointer;
  transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.order-details-page .write-review-btn {
  margin-top: 10px;
  background: #172033;
  color: #ffffff;
}

.order-details-page .write-review-btn:hover,
.order-details-page .shipping-soon-btn:hover {
  background: #0f6cbd;
  box-shadow: 0 10px 22px rgba(15, 108, 189, 0.22);
  transform: translateY(-1px);
}

.order-details-page .shipment-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.order-details-page .shipment-box {
  min-width: 0;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 14px;
  background: #fbfcfe;
  box-sizing: border-box;
}

.order-details-page .shipment-box.full {
  grid-column: 1 / -1;
}

.order-details-page .shipment-box span {
  display: block;
  margin-bottom: 6px;
  color: #6b7280;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.order-details-page .shipment-box strong,
.order-details-page .shipment-box b {
  display: block;
  color: #172033;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.order-details-page .green-status {
  color: #168a4a !important;
}

.order-details-page .blue-status {
  color: #0f6cbd !important;
}

.order-details-page .tracking-link {
  color: #0f6cbd;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.4;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.order-details-page .tracking-link:hover {
  text-decoration: underline;
}

.order-details-page .tracking-header {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.order-details-page .tracking-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.order-details-page .tracking-icon-box {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #eef6ff;
}

.order-details-page .big-status-icon {
  font-size: 34px !important;
}

.order-details-page .big-status-icon.delivered {
  color: #168a4a;
}

.order-details-page .big-status-icon.cancelled {
  color: #dc2626;
}

.order-details-page .big-status-icon.shipping {
  color: #0f6cbd;
}

.order-details-page .truck-blink {
  animation: odSoftBlink 1.3s ease-in-out infinite;
}

.order-details-page .tracking-heading {
  margin: 0 0 5px;
  color: #111827;
  font-size: 23px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.order-details-page .tracking-text {
  margin: 0;
  color: #526070;
  font-size: 15px;
  line-height: 1.5;
}

.order-details-page .shipping-soon-btn {
  width: fit-content;
  background: #172033;
  color: #ffffff;
}

.order-details-page .blink-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  animation: odPulse 1.1s ease-in-out infinite;
}

.order-details-page .arrow {
  font-size: 20px;
  line-height: 1;
}

.order-details-page .mini-tracking-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: 100%;
  padding-top: 38px;
}

.order-details-page .moving-truck-mini {
  position: absolute;
  top: 0;
  width: 36px;
  height: 30px;
  display: grid;
  place-items: center;
  color: #0f6cbd;
  transform: translateX(-50%);
  transition: left 260ms ease;
}

.order-details-page .mini-step {
  position: relative;
  min-width: 0;
  text-align: center;
}

.order-details-page .mini-circle {
  position: relative;
  z-index: 1;
  width: 32px;
  height: 32px;
  margin: 0 auto;
  display: grid;
  place-items: center;
  border: 2px solid #cbd5e1;
  border-radius: 50%;
  background: #ffffff;
  color: #6b7280;
  font-size: 13px;
  font-weight: 800;
  box-sizing: border-box;
}

.order-details-page .mini-circle.active {
  border-color: #18a058;
  background: #18a058;
  color: #ffffff;
}

.order-details-page .mini-step span {
  display: block;
  padding: 8px 5px 0;
  color: #526070;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.order-details-page .mini-line {
  position: absolute;
  top: 15px;
  left: 50%;
  width: 100%;
  height: 3px;
  background: #d7dde6;
  z-index: 0;
}

.order-details-page .mini-line.active {
  background: #18a058;
}

.order-details-page .cancel-order-card {
  display: flex;
  justify-content: flex-end;
}

.order-details-page .cancel-order-btn {
  background: #dc2626;
  color: #ffffff;
}

.order-details-page .cancel-order-btn:hover {
  background: #b91c1c;
  box-shadow: 0 10px 22px rgba(220, 38, 38, 0.2);
  transform: translateY(-1px);
}

.order-details-page .cancel-order-btn:disabled {
  cursor: not-allowed;
  opacity: 0.68;
  transform: none;
  box-shadow: none;
}

.order-details-page .summary-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid #edf0f5;
  color: #526070;
  font-size: 15px;
  line-height: 1.45;
}

.order-details-page .summary-row span:last-child {
  color: #172033;
  font-weight: 800;
  text-align: right;
  overflow-wrap: anywhere;
}

.order-details-page .summary-row.total {
  border-bottom: 0;
  color: #111827;
  font-size: 17px;
  font-weight: 800;
}

.order-details-page .summary-row.total span:last-child {
  color: #168a4a;
  font-size: 19px;
}

.order-details-page .write-review-btn:focus-visible,
.order-details-page .shipping-soon-btn:focus-visible,
.order-details-page .cancel-order-btn:focus-visible,
.order-details-page .back-btn:focus-visible {
  outline: 3px solid rgba(15, 108, 189, 0.28);
  outline-offset: 2px;
}

@keyframes odSoftBlink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}

@keyframes odPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.35);
    opacity: 0.65;
  }
}

@media (max-width: 900px) {
  .order-details-page {
    padding: 18px;
  }

  .order-details-page .details-header h2 {
    font-size: 24px;
  }

  .order-details-page .shipment-grid {
    grid-template-columns: 1fr;
  }

  .order-details-page .tracking-card {
    overflow-x: auto;
  }

  .order-details-page .mini-tracking-timeline {
    min-width: 720px;
  }
}

@media (max-width: 640px) {
  .order-details-page {
    padding: 12px;
  }

  .order-details-page .details-header {
    gap: 10px;
    margin-bottom: 14px;
  }

  .order-details-page .details-header h2 {
    font-size: 21px;
  }

  .order-details-page .back-btn {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }

  .order-details-page .status-card,
  .order-details-page .products-card,
  .order-details-page .address-card,
  .order-details-page .shipment-card,
  .order-details-page .tracking-card,
  .order-details-page .cancel-order-card,
  .order-details-page .payment-card {
    padding: 16px;
    margin-bottom: 14px;
  }

  .order-details-page .status-card h3,
  .order-details-page .products-card h3,
  .order-details-page .address-card h3,
  .order-details-page .shipment-header h3,
  .order-details-page .tracking-title,
  .order-details-page .payment-card h3 {
    font-size: 19px;
  }

  .order-details-page .product-card {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 12px;
  }

  .order-details-page .product-image {
    width: 88px;
    height: 108px;
  }

  .order-details-page .product-info h4 {
    font-size: 16px;
    margin-bottom: 8px;
  }

  .order-details-page .product-info p {
    font-size: 13px;
  }

  .order-details-page .write-review-btn {
    width: 100%;
    margin-top: 8px;
  }

  .order-details-page .tracking-left {
    align-items: flex-start;
  }

  .order-details-page .tracking-icon-box {
    width: 50px;
    height: 50px;
    flex-basis: 50px;
  }

  .order-details-page .big-status-icon {
    font-size: 30px !important;
  }

  .order-details-page .tracking-heading {
    font-size: 20px;
  }

  .order-details-page .shipping-soon-btn,
  .order-details-page .cancel-order-btn {
    width: 100%;
  }

  .order-details-page .cancel-order-card {
    justify-content: stretch;
  }

  .order-details-page .summary-row {
    font-size: 14px;
  }
}

@media (max-width: 420px) {
  .order-details-page {
    padding: 10px;
  }

  .order-details-page .product-card {
    grid-template-columns: 1fr;
  }

  .order-details-page .product-image {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .order-details-page .status-card p,
  .order-details-page .address-card p,
  .order-details-page .shipment-box strong,
  .order-details-page .shipment-box b,
  .order-details-page .tracking-link {
    font-size: 14px;
  }
}
/* ==========================
   SCRATCH CARD
========================== */

.scratch-wrapper{
    position:relative;
    width:100%;
    height:180px;
    border-radius:20px;
    overflow:hidden;
    background:linear-gradient(135deg,#ff4d8d,#ff8a00);
    box-shadow:0 12px 30px rgba(0,0,0,.15);
}

/* ==========================
   REWARD CONTENT
========================== */

.reward-content{
    position:absolute;
    inset:0;
    z-index:1;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    color:#fff;
    text-align:center;

    background:
    linear-gradient(
        135deg,
        #ff4d8d,
        #ff7a00
    );
}

.reward-content h2{
    margin:0;
    font-size:24px;
    font-weight:700;
}

.reward-content h1{
    margin:8px 0;
    font-size:46px;
    font-weight:900;
    color:#fff700;

    text-shadow:
    0 2px 8px rgba(0,0,0,.25);
}

.reward-content p{
    margin:0;
    font-size:16px;
    font-weight:600;
    opacity:.95;
}

/* ==========================
   CANVAS
========================== */

.scratch-canvas{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    cursor:pointer;
    transition:opacity .5s ease;
    touch-action:none;
    -webkit-user-select:none;

    z-index:2;
}

/* ==========================
   PREMIUM SHINE
========================== */

.scratch-wrapper::before{
    content:"";
    position:absolute;
    top:-60%;
    left:-40%;
    width:45%;
    height:220%;
    background:rgba(255,255,255,.28);
    transform:rotate(25deg);
    animation:scratchShine 2.5s infinite;

    pointer-events:none;
}


@keyframes scratchShine{

0%{
left:-45%;
}

100%{
left:120%;
}

}

/* ==========================
   GLOW
========================== */

.scratch-wrapper::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:20px;

    box-shadow:
    inset 0 0 30px rgba(255,255,255,.15);

    pointer-events:none;

}

/* ==========================
   MOBILE
========================== */

@media(max-width:480px){

.scratch-wrapper{

    height:170px;

}

.reward-content h2{

    font-size:20px;

}

.reward-content h1{

    font-size:40px;

}

.reward-content p{

    font-size:14px;

}

}

.amount-pop{

    animation:
    amountZoom .8s ease infinite;

}


@keyframes amountZoom{

0%{

transform:scale(1);

}


50%{

transform:scale(1.25);

}


100%{

transform:scale(1);

}

}

/* =========================
   SCRATCH SHAKE
========================= */


.shake{

animation:
shake .15s linear;

}


@keyframes shake{

0%{
transform:translateX(0);
}


25%{
transform:translateX(-5px);
}


50%{
transform:translateX(5px);
}


75%{
transform:translateX(-5px);
}


100%{
transform:translateX(0);
}

}/* =================================
   REWARD POPUP OVERLAY
================================= */


.reward-overlay{
    position:fixed;
    inset:0;
    background:
    rgba(0,0,0,.55);
    backdrop-filter:
    blur(6px);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:9999;
    animation:
    fadeIn .3s ease;
    overflow:hidden;
}



/* =================================
   POPUP BOX
================================= */


.reward-popup{
    width:90%;
    max-width:380px;
    background:#fff;
    border-radius:25px;
    padding:20px;
    position:relative;
    text-align:center;
    box-shadow:
    0 15px 40px rgba(0,0,0,.25);
    animation:
    popupZoom .4s ease;
    z-index:10000;
}



/* =================================
   TITLE
================================= */


.reward-popup h2{
    margin-right: 40px ;
    margin-bottom: 20px;
    font-size:24px;
    color:#ff3f6c;
    font-weight:800;
}



/* =================================
   CLOSE BUTTON
================================= */


.close-btn{
    position:absolute;
    right:15px;
    top:15px;
    width:35px;
    height:35px;
    border-radius:50%;
    border:none;
    background:#ff3f6c;
    color:#fff;
    font-size:18px;
    cursor:pointer;
}



/* =================================
   ANIMATIONS
================================= */


@keyframes popupZoom{

    0%{
        transform:
        scale(.5);
        opacity:0;
    }

    100%{
        transform:
        scale(1);
        opacity:1;
    }
}

@keyframes fadeIn{

    from{

        opacity:0;

    }
    to
    {
        opacity:1;
    }
}

/* =================================
   MOBILE
================================= */

@media(max-width:480px){

.reward-popup{
    width:92%;
    padding:15px;
}

.reward-popup h2{
  font-size:20px;
}

}.success-page {
  min-height: 100vh;
  background: #f5f5f5;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.success-card {
  width: 100%;
  max-width: 450px;
  background: #fff;
  border-radius: 20px;
  padding: 35px 25px;
  text-align: center;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
  animation: popUp 0.4s ease;
}

.success-icons {
  margin-bottom: 15px;
}

.success-card h2 {
  font-size: 28px;
  color: #222;
  margin-bottom: 10px;
}

.success-card p {
  color: #666;
  line-height: 1.6;
  margin: 8px 0;
}

.order-info {
  margin-top: 20px;
  padding: 18px;
  background: #fafafa;
  border-radius: 14px;
  border: 1px solid #eee;
}

.order-info p {
  margin: 10px 0;
}

.success-buttons {
  margin-top: 25px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.track-btn,
.home-btn {
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.track-btn {
  background: #ff3f6c;
  color: #fff;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.track-btn:hover {
  background: #e6335e;
  transform: translateY(-2px);
}

.home-btn {
  background: #f1f1f1;
  color: #333;
}

.home-btn:hover {
  background: #e4e4e4;
  transform: translateY(-2px);
}

@keyframes popUp {
  from {
    opacity: 0;
    transform: scale(0.85);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Mobile Responsive */

@media (max-width: 480px) {
  .success-card {
    padding: 25px 18px;
  }

  .success-card h2 {
    font-size: 22px;
  }

  .track-btn,
  .home-btn {
    font-size: 14px;
    padding: 12px;
  }
}

/* =====================================
   MY REWARDS PAGE
===================================== */

.rewards-page{
    min-height:100vh;
    padding:20px;
    background:#f5f5f6;
    font-family:Arial,sans-serif;
}

.rewards-page h1{
    margin:0 0 25px;
    text-align:center;
    font-size:32px;
    font-weight:800;
    color:#ff3f6c;
}

/* =====================================
   GRID
===================================== */

.reward-grid{
    display:grid;
    grid-template-columns:
    repeat(auto-fit,minmax(260px,1fr));
    gap:20px;
    align-items:start;
}

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

.scratch-card{
    position:relative;
    background:#fff;
    border-radius:22px;
    padding:16px;
    overflow:hidden;
    text-align:center;
    box-shadow:
    0 8px 25px rgba(0,0,0,.12);
    transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.scratch-card:hover{
    transform:translateY(-5px);
    box-shadow:
    0 14px 35px rgba(255,63,108,.18);
}

/* =====================================
   TEXT
===================================== */

.scratch-card h2{
    margin:8px 0;
    font-size:22px;
    font-weight:700;
    color:#333;
}

.scratch-card h1{
    margin:12px 0;
    font-size:48px;
    font-weight:900;
    color:#ff3f6c;
    animation:rewardZoom .45s ease;
}

.scratch-card p{
    margin:0;
    font-size:15px;
    font-weight:600;
    color:#666;
}

/* =====================================
   REWARD ANIMATION
===================================== */

@keyframes rewardZoom{

    from{
        transform:scale(.6);
        opacity:0;
    }

    to{
        transform:scale(1);
        opacity:1;
    }

}

/* =====================================
   REWARD COUPON
===================================== */

.reward-coupon{
    position:relative;
    overflow:hidden;
    background:linear-gradient(135deg,#ff3f6c,#ff8a00);
    color:#fff;
    border-radius:20px;
    padding:22px 18px;
    text-align:center;
    cursor:pointer;
    user-select:none;
    -webkit-user-select:none;
    -webkit-tap-highlight-color:transparent;
    box-shadow:0 10px 25px rgba(0,0,0,.15);
    transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.reward-coupon:hover{
    transform:translateY(-4px);
    box-shadow:0 15px 35px rgba(255,63,108,.30);
}

.reward-coupon:active{
    transform:scale(.97);
}

.reward-coupon::before{
    content:"";
    position:absolute;
    top:-50%;
    left:-40%;
    width:45%;
    height:220%;
    background:rgba(255,255,255,.35);
    transform:rotate(25deg);
    animation:couponGlow 2.5s linear infinite;
}

@keyframes couponGlow{

    0%{
        left:-40%;
    }

    100%{
        left:130%;
    }

}

/* =====================================
   COUPON TEXT
===================================== */

.coupon-top{
    font-size:22px;
    font-weight:800;
    margin-bottom:14px;
    position:relative;
    z-index:2;
}

.coupon-amount{
    font-size:30px;
    font-weight:900;
    margin:16px 0;
    position:relative;
    z-index:2;
}

.coupon-bottom{
    font-size:15px;
    opacity:.95;
    position:relative;
    z-index:2;
}

/* =====================================
   BADGES
===================================== */

.reward-badge{
    position:absolute;
    top:12px;
    right:12px;
    padding:6px 12px;
    border-radius:30px;
    font-size:12px;
    font-weight:700;
    color:#fff;
    z-index:5;
}

.new-badge{
    background:#16c60c;
    box-shadow:0 0 14px rgba(22,198,12,.45);
    animation:pulse 1.3s infinite;
}

.claimed-badge{
    background:#666;
}

@keyframes pulse{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.12);
    }

    100%{
        transform:scale(1);
    }

}

/* =====================================
   NO REWARD
===================================== */

.no-reward{
    background:#fff;
    padding:40px 20px;
    border-radius:20px;
    text-align:center;
    font-size:18px;
    font-weight:600;
    color:#777;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
}

/* =====================================
   LOADING
===================================== */

.reward-loading{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#f5f5f6;
    color:#ff3f6c;
    font-size:22px;
    font-weight:700;
}

/* =====================================
   POPUP BODY LOCK
===================================== */

body.popup-open{
    overflow:hidden;
    touch-action:none;
}

/* =====================================
   RESPONSIVE
===================================== */

@media (max-width:768px){

    .rewards-page{
        padding:16px;
    }

    .rewards-page h1{
        font-size:28px;
        margin-bottom:20px;
    }

    .reward-grid{
        grid-template-columns:1fr;
        gap:16px;
    }

    .scratch-card{
        padding:14px;
        border-radius:18px;
    }

    .scratch-card h1{
        font-size:42px;
    }

    .scratch-card h2{
        font-size:20px;
    }

    .coupon-top{
        font-size:20px;
    }

    .coupon-amount{
        font-size:26px;
    }

    .coupon-bottom{
        font-size:14px;
    }

}

@media (max-width:480px){

    .rewards-page{
        padding:12px;
    }

    .rewards-page h1{
        font-size:24px;
    }

    .scratch-card{
        padding:12px;
    }

    .scratch-card h1{
        font-size:36px;
    }

    .scratch-card h2{
        font-size:18px;
    }

    .reward-coupon{
        padding:18px 14px;
        border-radius:16px;
    }

    .coupon-top{
        font-size:18px;
    }

    .coupon-amount{
        font-size:22px;
    }

    .coupon-bottom{
        font-size:13px;
    }

    .reward-badge{
        font-size:11px;
        padding:5px 10px;
    }

}/* =========================
   REWARDS PAGE
========================= */

.rewards-page{
    background:#f5f6fa;
    min-height:100vh;
    padding:5px;
}

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

.reward-header{
    position:relative;
    background:#ff3681;
    height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:8px;
}

.reward-back-btn{
    position:absolute;
    left:10px;
    background:none;
    border:none;
    color:#fff;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
}

.reward-back-btn .MuiSvgIcon-root{
    font-size:24px;
}

.reward-title{
    margin:0;
    color:#fff;
    font-size:22px;
    font-weight:700;
    background:transparent;
}

/* =========================
   COUPON CARD
========================= */

.coupon-card{
    position:relative;
    background:#fff;
    border-radius:12px;
    overflow:hidden;
    margin-bottom:8px;
    box-shadow:0 3px 10px rgba(0,0,0,.10);
    transition:.25s;
}

.coupon-card:hover{
    transform:translateY(-1px);
    box-shadow:0 6px 14px rgba(0,0,0,.14);
}

/* Premium Shine */

.coupon-card::before{
    content:"";
    position:absolute;
    top:-45px;
    left:-35px;
    width:90px;
    height:90px;
    border-radius:50%;
    background:rgba(255,255,255,.10);
}

.coupon-card::after{
    content:"";
    position:absolute;
    bottom:-30px;
    right:-30px;
    width:80px;
    height:80px;
    border-radius:50%;
    background:rgba(255,255,255,.08);
}

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

.coupon-header{
    position:relative;
    overflow:hidden;
    background:linear-gradient(90deg,#8a00ff,#ff006e);
    text-align:center;
    padding:5px 8px;
}

.coupon-header::before{
    content:"";
    position:absolute;
    left:-18px;
    top:-10px;
    width:40px;
    height:170%;
    background:rgba(255,255,255,.14);
    transform:rotate(20deg);
}

.company-name{
    display:block;
    color:#fff;
    font-size:7px;
    letter-spacing:2px;
    opacity:.95;
    margin-bottom:1px;
}

.coupon-header h2{
    margin:0;
    color:#fff;
    font-size:12px;
    font-weight:900;
    letter-spacing:.8px;
    text-transform:uppercase;
}

/* =========================
   COUPON BODY
========================= */

.coupon-body{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:4px;
    padding:5px 8px;
}

/* =========================
   LEFT
========================= */

.coupon-left{
    width:18%;
    display:flex;
    justify-content:center;
    align-items:center;
}

.gift-box{
    font-size:24px;
    line-height:1;
}

/* =========================
   CENTER
========================= */

.coupon-center{
    width:52%;
    text-align:center;
    flex-direction:column;
    align-items:center;
}

.discount-box{
    position:relative;
    overflow:hidden;
    background:linear-gradient(90deg,#ff0066,#8b00ff);
    color:#fff;
    font-size:14px;
    font-weight:900;
    padding:4px 6px;
    border-radius:7px;
    margin-bottom:3px;
    box-shadow:0 2px 6px rgba(139,0,255,.18);
}

.discount-box::before{
    content:"";
    position:absolute;
    left:-14px;
    top:-8px;
    width:20px;
    height:160%;
    background:rgba(255,255,255,.18);
    transform:rotate(20deg);
}

.coupon-code{
    margin:0;
    font-size:13px;
    font-weight:800;
    color:#222;
    letter-spacing:.2px;
}

.coupon-text{
    width:100%;
    margin:1px 0 0;
    font-size:8px;
    font-weight:700;
    letter-spacing:.6px;
    color:#666;
    text-align:center !important;
    text-transform:uppercase;

    display:flex;
    justify-content:center;
    align-items:center;
    box-sizing:border-box;
}


/* =========================
   RIGHT
========================= */

.coupon-right{
    width:24%;
    text-align:center;
}

.coupon-right h4{
    margin:0;
    font-size:8px;
    font-weight:800;
    color:#222;
    line-height:1.2;
}

.calendar-box{
    font-size:16px;
    margin:1px 0;
    line-height:1;
}

.coupon-right span{
    display:block;
    font-size:7px;
    color:#666;
    font-weight:600;
}

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

.coupon-footer{
    position:relative;
    border-top:1px dashed #e2e2e2;
    padding:5px 8px;
    display:flex;
    flex-direction:column;
    gap:4px;
}

.coupon-footer::before,
.coupon-footer::after{
    content:"";
    position:absolute;
    top:-7px;
    width:14px;
    height:14px;
    background:#f5f6fa;
    border-radius:50%;
}

.coupon-footer::before{
    left:-7px;
}

.coupon-footer::after{
    right:-7px;
}

/* Coupon Info */

.coupon-info{
    text-align:center;
    font-size:9px;
    color:#555;
    line-height:1.3;
    font-weight:500;
}

.coupon-info strong{
    color:#ff0066;
    font-weight:700;
}

/* Used / Expired */

.coupon-status{
    align-self:center;
    background:#ff3b30;
    color:#fff;
    font-size:7px;
    font-weight:700;
    padding:3px 8px;
    border-radius:20px;
    text-transform:uppercase;
}

/* Copy Button */

.copy-btn{
    width:100%;
    height:28px;
    border:none;
    border-radius:7px;
    background:linear-gradient(90deg,#8b00ff,#ff0066);
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:4px;
    cursor:pointer;
    font-size:10px;
    font-weight:700;
    transition:.25s;
}

.copy-btn svg{
    font-size:13px !important;
}

.copy-btn:hover{
    transform:translateY(-1px);
}

.copy-btn:active{
    transform:scale(.97);
}

.disabled-btn{
    background:#bdbdbd !important;
    color:#555 !important;
    cursor:not-allowed;
}

.expired-coupon{
    filter:grayscale(.9);
    opacity:.75;
}

.expired-coupon .coupon-header{
    background:linear-gradient(90deg,#888,#bcbcbc);
}

.expired-coupon .discount-box{
    background:linear-gradient(90deg,#8b8b8b,#a8a8a8);
}

/* =========================
   MOBILE
========================= */

@media (max-width:480px){

.rewards-page{
    padding:5px;
}

.reward-header{
    height:48px;
    margin-bottom:8px;
}

.reward-title{
    font-size:18px;
}

.reward-back-btn .MuiSvgIcon-root{
    font-size:22px;
}

.coupon-card{
    border-radius:12px;
    margin-bottom:8px;
}

.coupon-body{
    padding:5px 6px;
    gap:3px;
}

.gift-box{
    font-size:22px;
}

.discount-box{
    font-size:14px;
    padding:4px;
}

.coupon-code{
    font-size:12px;
}

.coupon-text{
    font-size:8px;
}

.calendar-box{
    font-size:15px;
}

.coupon-right h4{
    font-size:8px;
}

.coupon-right span{
    font-size:7px;
}

.coupon-footer{
    padding:5px 6px;
    gap:4px;
}

.coupon-info{
    font-size:9px;
}

.coupon-status{
    font-size:7px;
    padding:2px 8px;
}

.copy-btn{
    height:28px;
    font-size:10px;
}

.copy-btn svg{
    font-size:12px !important;
}

}

/* =========================
   COPY TOAST
========================= */

.copy-toast{
    margin-top:75px !important;
    width:280px !important;
    min-height:54px !important;
    border-radius:12px !important;
    background:#fff !important;
    box-shadow:0 6px 20px rgba(0,0,0,.16) !important;
    padding:10px 14px !important;
}

.copy-toast-title{
    font-size:15px !important;
    font-weight:700 !important;
    color:#222 !important;
}

.copy-toast-icon{
    font-size:17px !important;
}

.swal2-timer-progress-bar{
    background:#ff3f6c !important;
}

/* =========================
   EMPTY REWARDS
========================= */

.empty-rewards{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    background:#fff;
    margin:20px 12px;
    padding:35px 18px;
    border-radius:18px;
    box-shadow:0 5px 15px rgba(0,0,0,.08);
    border:1px dashed #e5e5e5;
}

.empty-icon{
    width:75px;
    height:75px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:40px;
    background:#fff5f7;
    border-radius:50%;
    margin-bottom:14px;
}

.empty-rewards h3{
    margin:0;
    font-size:19px;
    font-weight:700;
    color:#222;
}

.empty-rewards p{
    margin-top:8px;
    font-size:13px;
    color:#777;
    line-height:1.5;
    max-width:240px;
}/* ==========================
   MY ACCOUNT PAGE
========================== */

.account-page {
  min-height: 100vh;
  background: #f5f6fa;
  padding-bottom: 100px;
  font-family: "Poppins", sans-serif;
}

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

.account-header {
  background: #ff3681;
  padding: 40px 20px 80px;
  text-align: center;
  color: white;
  position: relative;
  border-radius: 0 0 30px 30px;
}

.profile-image {
  width: 110px !important;
  height: 110px !important;
  margin: auto;
  border: 4px solid white;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}

.edit-btn {
  position: absolute;
  right: 20px;
  top: 20px;

  width: 50px;
  height: 50px;

  border: none;
  border-radius: 50%;
  background: white;
  color: #6a11cb;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

.account-header h2 {
  margin-top: 15px;
  font-size: 28px;
  font-weight: 700;
  color: #fff;
}

/* 👇 NAME / EMAIL / MOBILE WHITE FIX */
.account-header p,
.account-header span {
  margin-top: 5px;
  font-size: 14px;
  color: #fff;
  opacity: 0.95;
}

/* ==========================
   SECTION CARD
========================== */

.section-card {
  background: white;
  margin: 15px;
  border-radius: 20px;
  padding: 18px;

  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

/* ==========================
   SETTINGS ROW
========================== */

.setting-row {
  display: flex;
  align-items: center;
  gap: 12px;

  padding: 14px 0;
  border-bottom: 1px solid #eee;
  cursor: pointer;
}

.setting-row:last-child {
  border-bottom: none;
}

.setting-row svg {
  color: #6a11cb;
}

.setting-row span {
  flex: 1;
  font-size: 15px;
  font-weight: 500;
  color: #333;
}

/* Switch alignment */
.setting-row .MuiSwitch-root {
  margin-left: auto;
}

/* ==========================
   BUTTONS
========================== */

.logout-btn {
  width: calc(100% - 30px);
  margin: 20px 15px;

  border: none;
  border-radius: 15px;

  padding: 15px;

  font-size: 16px;
  font-weight: 600;

  cursor: pointer;
  transition: 0.3s;

  background: linear-gradient(135deg, #ff416c, #ff4b2b);
  color: white;
}

.logout-btn:hover {
  transform: scale(1.03);
}

/* ==========================
   DARK MODE SUPPORT
========================== */

.dark-mode {
  background: #121212;
  color: white;
}

.dark-mode .section-card {
  background: #1e1e1e;
}

.dark-mode .setting-row {
  border-color: #333;
}

.dark-mode .setting-row span {
  color: #fff;
}

/* ==========================
   MOBILE
========================== */

@media (max-width: 768px) {
  .account-header h2 {
    font-size: 24px;
  }

  .profile-image {
    width: 95px !important;
    height: 95px !important;
  }
}

.toggle-btn{
  width:70px;
  height:34px;
  border:none;
  border-radius:30px;
  background:#999;
  color:#fff;
  font-weight:700;
  cursor:pointer;
  transition:.3s;
}

.toggle-btn.active{
  background:#28a745;
}

.toggle-btn:not(.active){
  background:#f44336;
}.edit-profile-page{
background:#f5f6fa;
min-height:100vh;
padding-bottom:40px;
}

.edit-header{
height:60px;
background:#ff3681;
display:flex;
align-items:center;
justify-content:center;
position:sticky;
top:0;
z-index:100;
box-shadow:0 2px 10px rgba(0,0,0,.08);
}

.edit-header h2{
margin:0;
font-size:20px;
font-weight:700;
color:#fff;
}

.back-btn{
position:absolute;
left:15px;
width:42px;
height:42px;
border:none;
outline:none;
border-radius:50%;
background:#fff;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
transition:.3s;
}

.back-btn:hover{
background:#222;
}

.back-btn svg{
font-size:22px;
color:#fff;
}

.profile-box{
width:92%;
max-width:420px;
margin:28px auto;
background:#fff;
border-radius:18px;
padding:26px 20px;
box-shadow:0 10px 30px rgba(0,0,0,.08);
display:flex;
flex-direction:column;
align-items:center;
}

.profile-image-box{
position:relative;
width:120px;
height:120px;
margin-bottom:28px;
}

.profile-preview{
width:120px;
height:120px;
border-radius:50%;
object-fit:cover;
border:4px solid #fff;
box-shadow:0 8px 20px rgba(0,0,0,.15);
background:#f1f1f1;
}

.camera-btn{
position:absolute;
right:0;
bottom:0;
width:38px;
height:38px;
border-radius:50%;
background:#111;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
box-shadow:0 4px 12px rgba(0,0,0,.2);
transition:.3s;
}

.camera-btn:hover{
transform:scale(1.08);
}

.input-group{
width:100%;
margin-bottom:18px;
}

.input-group label{
display:block;
margin-bottom:8px;
font-size:14px;
font-weight:600;
color:#444;
}

.input-group input{
width:100%;
height:50px;
padding:0 16px;
border:1px solid #ddd;
border-radius:12px;
outline:none;
font-size:15px;
background:#fff;
box-sizing:border-box;
transition:.3s;
}

.input-group input:focus{
border-color:#111;
box-shadow:0 0 0 3px rgba(0,0,0,.08);
}

.input-group input:disabled{
background:#f3f3f3;
color:#777;
cursor:not-allowed;
}

.save-profile-btn{
width:100%;
height:52px;
margin-top:12px;
border:none;
border-radius:14px;
background:#ff3681;
color:#fff;
font-size:16px;
font-weight:600;
cursor:pointer;
transition:.3s;
}

.save-profile-btn:hover{
background:#000;
transform:translateY(-2px);
box-shadow:0 8px 18px rgba(0,0,0,.18);
}

.save-profile-btn:active{
transform:scale(.98);
}

.save-profile-btn:disabled{
background:#9e9e9e;
cursor:not-allowed;
box-shadow:none;
transform:none;
}

@media (max-width:480px){

.profile-box{
width:94%;
margin:20px auto;
padding:22px 16px;
border-radius:16px;
}

.profile-image-box,
.profile-preview{
width:105px;
height:105px;
}

.camera-btn{
width:34px;
height:34px;
}

.input-group input{
height:48px;
font-size:14px;
}

.save-profile-btn{
height:50px;
font-size:15px;
}

}.tp-tracking-page {
  width: 100%;
  min-height: 100vh;
  background: #f6f7fb;
  color: #172033;
  font-family: inherit;
  padding: 24px;
  box-sizing: border-box;
}

.tp-tracking-header,
.tp-timeline-section,
.tp-details-section,
.tp-history-section,
.tp-action-buttons {
  width: 100%;
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.tp-tracking-header {
  margin-bottom: 18px;
}

.tp-tracking-title {
  margin: 0 0 16px;
  color: #111827;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0;
}

.tp-status-section {
  width: 100%;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 8px 26px rgba(15, 23, 42, 0.06);
  box-sizing: border-box;
}

.tp-status-left {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.tp-status-icon-box {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #eef6ff;
  color: #0f6cbd;
}

.tp-status-truck-icon {
  font-size: 32px !important;
}

.tp-status-info {
  min-width: 0;
}

.tp-status-info h2 {
  margin: 0 0 6px;
  color: #111827;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.tp-status-text {
  margin: 0;
  color: #526070;
  font-size: 15px;
  line-height: 1.5;
}

.tp-timeline-section {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 24px 18px;
  margin-bottom: 18px;
  box-shadow: 0 8px 26px rgba(15, 23, 42, 0.06);
}

.tp-timeline-wrapper {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: start;
  width: 100%;
}

.tp-timeline-item {
  position: relative;
  min-width: 0;
  text-align: center;
}

.tp-timeline-top {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 42px;
}

.tp-timeline-line {
  position: absolute;
  left: -50%;
  right: 50%;
  top: 50%;
  height: 3px;
  transform: translateY(-50%);
  background: #d7dde6;
  z-index: 0;
}

.tp-timeline-line.active {
  background: #18a058;
}

.tp-timeline-circle {
  position: relative;
  z-index: 1;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #ffffff;
  border: 3px solid #d7dde6;
  color: #9aa4b2;
  box-sizing: border-box;
}

.tp-timeline-circle.completed {
  background: #18a058;
  border-color: #18a058;
  color: #ffffff;
}

.tp-timeline-circle.in-progress {
  background: #0f6cbd;
  border-color: #0f6cbd;
  color: #ffffff;
}

.tp-timeline-check {
  font-size: 22px !important;
}

.tp-timeline-truck {
  font-size: 20px !important;
}

.tp-timeline-text {
  padding: 8px 6px 0;
  min-width: 0;
}

.tp-timeline-text h4 {
  margin: 0 0 4px;
  color: #172033;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.tp-timeline-text span {
  display: block;
  color: #6b7280;
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.tp-details-section,
.tp-history-section {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 18px;
  box-shadow: 0 8px 26px rgba(15, 23, 42, 0.06);
}

.tp-details-title,
.tp-history-title {
  margin: 0 0 16px;
  color: #111827;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0;
}

.tp-tracking-card {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  background: #fbfcfe;
  box-sizing: border-box;
}

.tp-tracking-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.tp-tracking-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #eaf7ef;
  color: #18a058;
}

.tp-tracking-label {
  margin: 0 0 4px;
  color: #6b7280;
  font-size: 13px;
  line-height: 1.4;
}

.tp-tracking-left h3 {
  margin: 0;
  color: #111827;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.tp-address-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 18px;
  background: #fbfcfe;
  box-sizing: border-box;
}

.tp-address-box {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

.tp-address-icon {
  flex: 0 0 auto;
  color: #0f6cbd;
  font-size: 26px !important;
}

.tp-address-title {
  display: block;
  margin-bottom: 4px;
  color: #6b7280;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.tp-address-box h4 {
  margin: 0 0 4px;
  color: #172033;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.tp-address-box p {
  margin: 0;
  color: #526070;
  font-size: 14px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.tp-address-middle {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 130px;
}

.tp-middle-line {
  width: 46px;
  height: 2px;
  background: #cbd5e1;
}

.tp-middle-truck {
  color: #0f6cbd;
  font-size: 24px !important;
}

.tp-history-list {
  width: 100%;
}

.tp-history-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 12px;
  min-height: 68px;
  box-sizing: border-box;
}

.tp-history-left {
  position: relative;
  display: flex;
  justify-content: center;
}

.tp-history-dot {
  width: 12px;
  height: 12px;
  margin-top: 7px;
  border-radius: 50%;
  background: #cbd5e1;
  border: 3px solid #ffffff;
  box-shadow: 0 0 0 2px #cbd5e1;
  box-sizing: border-box;
  z-index: 1;
}

.tp-history-dot.active {
  background: #18a058;
  box-shadow: 0 0 0 2px #18a058;
}

.tp-history-line {
  position: absolute;
  top: 22px;
  bottom: 0;
  width: 2px;
  background: #d7dde6;
}

.tp-history-center {
  min-width: 0;
  padding-bottom: 18px;
}

.tp-history-center h4 {
  margin: 0 0 4px;
  color: #172033;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.tp-history-center p {
  margin: 0;
  color: #526070;
  font-size: 14px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.tp-history-right {
  min-width: 112px;
  text-align: right;
  padding-bottom: 18px;
}

.tp-history-right span,
.tp-history-right strong {
  display: block;
  overflow-wrap: anywhere;
}

.tp-history-right span {
  color: #6b7280;
  font-size: 13px;
  line-height: 1.4;
}

.tp-history-right strong {
  margin-top: 2px;
  color: #111827;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
}

.tp-action-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-bottom: 12px;
}

.tp-action-btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 8px;
  padding: 10px 16px;
  background: #172033;
  color: #ffffff;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
  cursor: pointer;
  transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
  box-sizing: border-box;
}

.tp-action-btn:hover {
  background: #0f6cbd;
  box-shadow: 0 10px 22px rgba(15, 108, 189, 0.22);
  transform: translateY(-1px);
}

.tp-action-btn:active {
  transform: translateY(0);
}

.tp-action-btn:focus-visible {
  outline: 3px solid rgba(15, 108, 189, 0.28);
  outline-offset: 2px;
}

.tp-btn-icon {
  font-size: 20px !important;
}

@media (max-width: 900px) {
  .tp-tracking-page {
    padding: 18px;
  }

  .tp-tracking-title {
    font-size: 24px;
  }

  .tp-timeline-section {
    overflow-x: auto;
    padding: 22px 16px;
  }

  .tp-timeline-wrapper {
    min-width: 720px;
  }

  .tp-address-card {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 14px;
  }

  .tp-address-middle {
    min-width: 0;
    width: 100%;
    justify-content: center;
  }

  .tp-middle-line {
    flex: 1;
    max-width: 180px;
  }
}

@media (max-width: 640px) {
  .tp-tracking-page {
    padding: 12px;
  }

  .tp-tracking-title {
    font-size: 21px;
    margin-bottom: 12px;
  }

  .tp-status-section,
  .tp-details-section,
  .tp-history-section {
    padding: 16px;
  }

  .tp-status-left {
    align-items: flex-start;
    gap: 12px;
  }

  .tp-status-icon-box {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
  }

  .tp-status-truck-icon {
    font-size: 28px !important;
  }

  .tp-status-info h2 {
    font-size: 20px;
  }

  .tp-status-text {
    font-size: 14px;
  }

  .tp-timeline-section {
    margin-bottom: 14px;
  }

  .tp-details-title,
  .tp-history-title {
    font-size: 19px;
  }

  .tp-tracking-card,
  .tp-address-card {
    padding: 14px;
  }

  .tp-address-middle {
    transform: rotate(90deg);
    height: 42px;
    width: 42px;
    margin-left: 6px;
  }

  .tp-middle-line {
    width: 26px;
    max-width: 26px;
    flex: 0 0 26px;
  }

  .tp-middle-truck {
    font-size: 22px !important;
  }

  .tp-history-row {
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 10px;
    min-height: 76px;
  }

  .tp-history-right {
    grid-column: 2;
    min-width: 0;
    text-align: left;
    padding: 0 0 18px;
  }

  .tp-history-center {
    padding-bottom: 4px;
  }

  .tp-action-buttons {
    flex-direction: column;
    gap: 10px;
    padding-bottom: 4px;
  }

  .tp-action-btn {
    width: 100%;
  }
}

@media (max-width: 380px) {
  .tp-tracking-page {
    padding: 10px;
  }

  .tp-status-left,
  .tp-tracking-left,
  .tp-address-box {
    gap: 10px;
  }

  .tp-status-info h2 {
    font-size: 18px;
  }

  .tp-tracking-left h3,
  .tp-address-box h4 {
    font-size: 15px;
  }
}
.hotdeal-page {
  width: 100%;
  min-height: 100vh;
  background: #f5f5f5;
  padding: 15px;
  box-sizing: border-box;
}

.hotdeal-header {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 999;
  height: 60px;
  background:linear-gradient(90deg,#ff0080,#e26ecf);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hotdeal-back-btn {
  position: absolute;
  left: 12px;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hotdeal-title {
  color: #fff;
  font-size: 22px;
  font-weight: 600;
  margin: 0;
}

.hotdeal-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.hotdeal-item {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: .3s;
  border: 1px solid #eaeaec;
}

.hotdeal-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
}

.left-img img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
}

.right-info {
  padding: 12px;
}

.right-info h3 {
  font-size: 15px;
  font-weight: 600;
  color: #282c3f;
  margin-bottom: 8px;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.coupon-row,
.rating-row,
.price-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

.coupon-row {
  color: #ff3f6c;
  font-size: 13px;
  font-weight: 600;
}

.rating-box {
  background: #03a685;
  color: #fff;
  padding: 3px 8px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
}

.review-text {
  font-size: 12px;
  color: #666;
}

.new-price {
  font-size: 18px;
  font-weight: 700;
  color: #282c3f;
}

.old-price {
  font-size: 14px;
  color: #888;
  text-decoration: line-through;
}

.cod-text {
  margin-top: 8px;
  font-size: 12px;
  color: #03a685;
  font-weight: 600;
}

/* ---------- Tablet ---------- */

@media (max-width: 992px) {

  .hotdeal-list {
    grid-template-columns: repeat(3, 1fr);
  }

  .left-img img {
    height: 220px;
  }

}

/* ---------- Mobile ---------- */

@media (max-width: 768px) {

  .hotdeal-page {
    padding: 10px;
  }

  .hotdeal-title {
    font-size: 20px;
  }

  .hotdeal-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .left-img img {
    height: 170px;
  }

  .right-info {
    padding: 8px;
  }

  .right-info h3 {
    font-size: 13px;
  }

  .new-price {
    font-size: 15px;
  }

  .old-price {
    font-size: 12px;
  }

  .coupon-row,
  .review-text,
  .cod-text {
    font-size: 11px;
  }

}

/* ---------- Small Mobile ---------- */

@media (max-width: 480px) {

  .hotdeal-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .left-img img {
    height: 150px;
  }

  .right-info h3 {
    font-size: 12px;
  }

  .new-price {
    font-size: 14px;
  }

  .rating-box {
    font-size: 11px;
  }

}/* ===========================
   PAGE
=========================== */

.collections-page {
  width: 100%;
  min-height: 100vh;
  background: #f5f5f5;
}

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

.collections-header {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 999;
  height: 60px;
  background:linear-gradient(90deg,#ff0080,#e26ecf);
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-btn {
  position: absolute;
  left: 12px;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-btn:hover{
  transform: scale(1.05);
}

.collections-header h2 {
  color: #fff;
  font-size: 22px;
  font-weight: 600;
  margin: 0;
}

/* ===========================
   GRID
=========================== */

.collections-grid{
  padding:15px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}

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

.collection-card{
  background:#fff;
  border-radius:12px;
  overflow:hidden;
  cursor:pointer;
  border:1px solid #eaeaec;
  transition:.25s;
}

.collection-card:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 20px rgba(0,0,0,.12);
}

/* ===========================
   IMAGE
=========================== */

.product-image{
  width:100%;
  height:260px;
  object-fit:cover;
  display:block;
  background:#fafafa;
}

/* ===========================
   TEXT
=========================== */

.collection-card h3{
  font-size:16px;
  font-weight:600;
  color:#282c3f;
  margin:10px;
  line-height:22px;

  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.sub-text{
  font-size:13px;
  color:#666;
  margin:0 10px;
}

/* ===========================
   RATING
=========================== */

.rating-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin:10px;
}

.rating-box{
  background:#03a685;
  color:#fff;
  border-radius:4px;
  padding:4px 8px;
  display:flex;
  align-items:center;
  font-size:13px;
  font-weight:600;
}

.review-text{
  font-size:12px;
  color:#777;
}

/* ===========================
   COUPON
=========================== */

.coupon-row{
  display:flex;
  align-items:center;
  gap:6px;
  margin:10px;
  color:#ff3f6c;
  font-size:13px;
  font-weight:600;
}

/* ===========================
   PRICE
=========================== */

.price-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin:10px;
}

.price{
  font-size:24px;
  font-weight:700;
  color:#222;
}

.old-price{
  font-size:14px;
  color:#888;
  text-decoration:line-through;
}

.discount{
  margin:0 10px 12px;
  color:#ff3f6c;
  font-size:17px;
  font-weight:700;
}

/* ===========================
   LARGE DESKTOP
=========================== */

@media(min-width:1500px){

.collections-grid{
grid-template-columns:repeat(5,1fr);
}

}

/* ===========================
   LAPTOP
=========================== */

@media(max-width:1200px){

.collections-grid{
grid-template-columns:repeat(4,1fr);
}

.product-image{
height:230px;
}

}

/* ===========================
   TABLET
=========================== */

@media(max-width:992px){

.collections-grid{
grid-template-columns:repeat(3,1fr);
gap:14px;
}

.product-image{
height:210px;
}

}

/* ===========================
   MOBILE
=========================== */

@media(max-width:768px){

.collections-header{
height:55px;
}

.collections-header h2{
font-size:20px;
}

.collections-grid{
grid-template-columns:repeat(2,1fr);
gap:10px;
padding:10px;
}

.product-image{
height:180px;
}

.collection-card h3{
font-size:13px;
margin:8px;
}

.sub-text{
font-size:11px;
margin:0 8px;
}

.rating-row,
.coupon-row,
.price-row{
margin:8px;
}

.rating-box{
font-size:11px;
padding:3px 6px;
}

.review-text{
font-size:11px;
}

.price{
font-size:18px;
}

.old-price{
font-size:11px;
}

.discount{
font-size:14px;
margin:0 8px 10px;
}

}

/* ===========================
   SMALL MOBILE
=========================== */

@media(max-width:480px){

.collections-grid{
grid-template-columns:repeat(2,1fr);
gap:8px;
}

.product-image{
height:155px;
}

.collection-card h3{
font-size:12px;
line-height:18px;
}

.price{
font-size:16px;
}

.old-price{
font-size:10px;
}

.discount{
font-size:13px;
}

.coupon-row{
font-size:11px;
}

.review-text{
font-size:10px;
}

}/* ===========================
   PAGE
=========================== */

.list-page{
    width:100%;
    min-height:100vh;
    background:#f5f5f5;
}

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

.at-page-header{
    position:sticky;
    top:0;
    z-index:999;
    height:60px;
    background:linear-gradient(90deg,#ff0080,#e26ecf);
    display:flex;
    align-items:center;
    justify-content:center;
}

.at-back-btn{
    position:absolute;
    left:12px;
    width:40px;
    height:40px;
    border:none;
    background:transparent;
    color:#fff;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
}

.at-header-title{
    color:#fff;
    font-size:22px;
    font-weight:600;
}

/* ===========================
   GRID
=========================== */

.product-list{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
    padding:15px;
}

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

.list-item{
    background:#fff;
    border-radius:12px;
    overflow:hidden;
    border:1px solid #eaeaec;
    cursor:pointer;
    transition:.3s;
}

.list-item:hover{
    transform:translateY(-5px);
    box-shadow:0 8px 22px rgba(0,0,0,.12);
}

/* ===========================
   IMAGE
=========================== */

.item-img{
    width:100%;
    height:260px;
    object-fit:cover;
    display:block;
    background:#fafafa;
}

/* ===========================
   CONTENT
=========================== */

.item-info{
    padding:10px;
}

.item-info h3{
    font-size:15px;
    font-weight:600;
    color:#282c3f;
    margin-bottom:8px;

    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

/* ===========================
   RATING
=========================== */

.rating{
    display:inline-flex;
    align-items:center;
    gap:5px;
    background:#03a685;
    color:#fff;
    padding:4px 8px;
    border-radius:5px;
    font-size:13px;
    font-weight:600;
    margin-bottom:8px;
}

.review-count{
    font-size:12px;
    color:#fff;
}

/* ===========================
   COUPON
=========================== */

.coupon{
    display:flex;
    align-items:center;
    gap:6px;
    color:#ff3f6c;
    font-size:13px;
    font-weight:600;
    margin-bottom:8px;
}

/* ===========================
   PRICE
=========================== */

.price-row{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:6px;
}

.current-price{
    font-size:20px;
    font-weight:700;
    color:#222;
    display:flex;
    align-items:center;
}

.old-price{
    font-size:14px;
    color:#888;
    text-decoration:line-through;
    display:flex;
    align-items:center;
}

.discount-tag{
    color:#ff3f6c;
    font-size:15px;
    font-weight:700;
    margin-bottom:8px;
}

/* ===========================
   COD
=========================== */

.cod{
    font-size:12px;
    color:#03a685;
    font-weight:600;
}

/* ===========================
   LARGE DESKTOP
=========================== */

@media(min-width:1500px){

.product-list{
grid-template-columns:repeat(5,1fr);
}

}

/* ===========================
   LAPTOP
=========================== */

@media(max-width:1200px){

.product-list{
grid-template-columns:repeat(4,1fr);
}

.item-img{
height:230px;
}

}

/* ===========================
   TABLET
=========================== */

@media(max-width:992px){

.product-list{
grid-template-columns:repeat(3,1fr);
gap:14px;
}

.item-img{
height:210px;
}

}

/* ===========================
   MOBILE
=========================== */

@media(max-width:768px){

.at-page-header{
height:55px;
}

.at-header-title{
font-size:20px;
}

.product-list{
grid-template-columns:repeat(2,1fr);
gap:10px;
padding:10px;
}

.item-img{
height:180px;
}

.item-info{
padding:8px;
}

.item-info h3{
font-size:13px;
}

.current-price{
font-size:16px;
}

.old-price{
font-size:11px;
}

.discount-tag{
font-size:13px;
}

.rating{
font-size:11px;
padding:3px 6px;
}

.review-count{
font-size:10px;
}

.coupon{
font-size:11px;
}

.cod{
font-size:10px;
}

}

/* ===========================
   SMALL MOBILE
=========================== */

@media(max-width:480px){

.product-list{
grid-template-columns:repeat(2,1fr);
gap:8px;
}

.item-img{
height:155px;
}

.item-info h3{
font-size:12px;
}

.current-price{
font-size:15px;
}

.old-price{
font-size:10px;
}

.discount-tag{
font-size:12px;
}

}/* =====================================================
   CATEGORY PAGE CSS
   PART 1
   Main Container + Header + Layout
===================================================== */

/* ===== MAIN PAGE ===== */

.category-page{
  width:100%;
  min-height:100vh;
  background:#f5f5f5;
  display:flex;
  flex-direction:column;
}

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

.category-header{
  width:100%;
  height:60px;
  background:#ff3f6c;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 16px;
  box-sizing:border-box;
  border-bottom:1px solid #ececec;
  position:sticky;
  top:0;
  z-index:100;
}

.category-header h2{
  margin-right: 28%;
  font-size:18px;
  font-weight:700;
  color:#ffffff;
  letter-spacing:.5px;
}

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

.header-icon{
  font-size:24px;
  color:#ffffff !important;
  cursor:pointer;
  flex-shrink:0;
}

.header-right{
  display:flex;
  align-items:center;
  gap:18px;
}

/* ===== BODY ===== */

.category-body{
  flex:1;
  display:flex;
  width:100%;
  overflow:hidden;
  background:#f5f5f5;
}

/* =====================================================
   CATEGORY PAGE CSS
   PART 2
   LEFT CATEGORY PANEL
===================================================== */

.left-panel{
  width:95px;
  background:#ffffff;
  border-right:1px solid #e8e8e8;
  overflow-y:auto;
  flex-shrink:0;
}

.left-panel::-webkit-scrollbar{
  width:0;
}

/* ===== CATEGORY ITEM ===== */

.left-item{
  width:100%;
  min-height:92px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 6px;
  box-sizing:border-box;
  cursor:pointer;
  background:#f7f7f7;
  border-left:4px solid transparent;
  transition:.25s;
}

.left-item img{
  width:44px;
  height:44px;
  object-fit:cover;
  border-radius:50%;
  background:#fff;
}

.left-item span{
  font-size:11px;
  font-weight:600;
  color:#555;
  text-align:center;
  line-height:15px;
  word-break:break-word;
}

/* ===== ACTIVE CATEGORY ===== */

.left-item.active{
  background:#ffffff;
  border-left:4px solid #e91e63;
}

.left-item.active span{
  color:#e91e63;
  font-weight:700;
}

.left-item.active img{
  border:2px solid #e91e63;
}

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

.left-item:active{
  transform:scale(.97);
}

/* =====================================================
   CATEGORY PAGE CSS
   PART 3
   RIGHT PANEL + SUB CATEGORIES
===================================================== */

.right-panel{
  flex:1;
  background:#ffffff;
  padding:16px;
  overflow-y:auto;
}

.right-panel h3{
  margin:0 0 18px;
  font-size:18px;
  font-weight:700;
  color:#222;
  text-transform:uppercase;
}

/* ===== LOADING ===== */

.loading-box{
  display:flex;
  justify-content:center;
  align-items:center;
  height:250px;
  font-size:16px;
  font-weight:600;
  color:#777;
}

/* ===== SUBCATEGORY GRID ===== */

.subcategory-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px 14px;
}

/* ===== SUBCATEGORY CARD ===== */

.subcategory-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  cursor:pointer;
  transition:.25s;
}

.subcategory-card:active{
  transform:scale(.95);
}

/* ===== ROUND IMAGE ===== */

.subcategory-card img{
  width:88px;
  height:88px;
  border-radius:50%;
  object-fit:cover;
  background:#f5f5f5;
  border:1px solid #ececec;
  padding:3px;
}

/* ===== NAME ===== */

.subcategory-card p{
  margin-top:10px;
  font-size:12px;
  font-weight:600;
  color:#333;
  text-align:center;
  line-height:17px;
  text-transform:uppercase;
  word-break:break-word;
}

/* ==========================================
   RIGHT PANEL
========================================== */

.right-panel{
  flex:1;
  background:#fff;
  padding:16px;
  overflow-y:auto;
}

.right-panel h3{
  font-size:20px;
  font-weight:700;
  color:#222;
  margin-bottom:18px;
}

/* ==========================================
   LOADING
========================================== */

.loading-box{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:80px 0;
  font-size:16px;
  font-weight:600;
  color:#666;
}

/* ==========================================
   SUB CATEGORY GRID
========================================== */

.subcategory-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px 18px;
}

/* ==========================================
   SUB CATEGORY CARD
========================================== */

.subcategory-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  cursor:pointer;
  transition:.25s;
}

.subcategory-card:hover{
  transform:translateY(-4px);
}

.subcategory-card img{
  width:90px;
  height:90px;
  border-radius:50%;
  object-fit:cover;
  background:#fff;
  border:1px solid #ececec;
  padding:4px;
}

.subcategory-card p{
  margin-top:10px;
  font-size:13px;
  font-weight:600;
  color:#333;
  text-align:center;
  line-height:18px;
}

/* ==========================================
   MOBILE
========================================== */

@media (max-width:480px){

  .subcategory-grid{
    grid-template-columns:repeat(3,1fr);
    gap:20px 12px;
  }

  .subcategory-card img{
    width:82px;
    height:82px;
  }

  .subcategory-card p{
    font-size:12px;
  }

}/* =====================================================
   PRODUCT LIST PAGE
   PART 1
   Page + Header + Search + Product Count
===================================================== */

/* ===== PAGE ===== */

.product-page{
  width:100%;
  min-height:100vh;
  background:#f5f5f5;
  padding-bottom:90px;
  animation:pageFade .3s ease;
  overflow-x:hidden;
}

@keyframes pageFade{

  from{
    opacity:0;
  }

  to{
    opacity:1;
  }

}

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

.product-header{
  position:sticky;
  top:0;
  left:0;
  width:100%;
  height:60px;
  background:#ff3f6c;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 16px;
  box-sizing:border-box;
  z-index:100;
}

.product-header h2{
  margin:0;
  color:#fff;
  font-size:20px;
  font-weight:700;
  letter-spacing:.5px;
  text-transform:uppercase;
}

/* ===== RIGHT ICONS ===== */

.header-right{
  display:flex;
  align-items:center;
  gap:18px;
}

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

.header-icon{
  font-size:24px;
  color:#ffffff;
  cursor:pointer;
  transition:.25s;
  flex-shrink:0;
}

.header-icon:hover{
  transform:scale(1.08);
}

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

.search-box{
  background:#ffffff;
  padding:14px;
  box-sizing:border-box;
}

.search-box input{
  width:100%;
  height:48px;
  border:none;
  outline:none;
  border-radius:12px;
  background:#f3f3f3;
  padding:0 16px;
  font-size:15px;
  color:#222;
  box-sizing:border-box;
  transition:.25s;
}

.search-box input::placeholder{
  color:#999;
}

.search-box input:focus{
  background:#ffffff;
  border:2px solid #ff3f6c;
}

/* ===== PRODUCT COUNT ===== */

.product-count{
  padding:12px 16px;
  color:#555;
  font-size:15px;
  font-weight:700;
  box-sizing:border-box;
}

/* =====================================================
   PRODUCT LIST PAGE
   PART 2
   Product Grid + Product Card + Image + Rating + Tag
===================================================== */

/* ===== PRODUCT GRID ===== */

.product-list-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
  padding:0 14px 20px;
  box-sizing:border-box;
}

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

.product-list-card{
  background:#fff;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 3px 12px rgba(0,0,0,.08);
  height:auto;
  display:flex;
  flex-direction:column;
}


.product-lost-card:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 20px rgba(0,0,0,.14);
}

.product-lost-card:active{
  transform:scale(.98);
}

/* ===== IMAGE BOX ===== */

.product-list-image-box{
  position:relative;
  width:100%;
  height:220px;
  background:#f7f7f7;
  overflow:hidden;
}

/* ===== PRODUCT IMAGE ===== */

.product-lost-image-box img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .35s ease;
}

.product-list-card:hover .product-list-image-box img{
  transform:scale(1.05);
}

/* ===== PRODUCT TAG ===== */

.product-list-tag{
  position:absolute;
  top:10px;
  left:10px;
  background:#ff3f6c;
  color:#fff;
  padding:5px 8px;
  border-radius:8px;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  z-index:2;
}

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

.rating-badge{
  position:absolute;
  left:10px;
  bottom:10px;
  background:rgba(255,255,255,.95);
  border-radius:18px;
  padding:5px 8px;
  display:flex;
  align-items:center;
  gap:4px;
  font-size:12px;
  font-weight:600;
  color:#222;
  box-shadow:0 2px 8px rgba(0,0,0,.12);
  z-index:2;
}

.rating-badge svg{
  color:#18a558;
  font-size:13px;
}

.rating-divider{
  color:#999;
  margin:0 2px;
}

/* =====================================================
   PRODUCT LIST PAGE
   PART 3
   Product Info + Price + Coupon + Stock
===================================================== */

/* ===== PRODUCT INFO ===== */

.product-list-info{
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:4px;
}

/* ===== BRAND ===== */

.brand-name{
  margin:0;
  font-size:13px;
  font-weight:700;
  color:#222;
  text-transform:uppercase;
  letter-spacing:.3px;
}

/* ===== PRODUCT NAME ===== */

.product-name{
  margin:0;
  font-size:14px;
  font-weight:500;
  color:#555;
  line-height:1.4;

  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;

  min-height:40px;
}

/* ===== SHORT DESCRIPTION ===== */

.short-desc{
  margin:0;
  font-size:12px;
  color:#888;
  line-height:1.4;

  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* ===== PRICE ROW ===== */

.price-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  margin-top:4px;
}

/* ===== SALE PRICE ===== */

.sale-price{
  font-size:18px;
  font-weight:700;
  color:#111;
}

/* ===== MRP ===== */

.mrp{
  font-size:13px;
  color:#999;
  text-decoration:line-through;
}

/* ===== DISCOUNT ===== */

.discount{
  font-size:13px;
  font-weight:700;
  color:#ff3f6c;
}

/* ===== COUPON ===== */

.coupon-box{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:6px;
  padding:5px 10px;

  background:#fff4e5;
  color:#ff9800;

  border-radius:8px;

  font-size:12px;
  font-weight:600;

  width:fit-content;
}

.coupon-icon{
  font-size:14px;
}

/* ===== STOCK ===== */

.stock{
  margin-top:8px;
  padding:5px 10px;
  width:fit-content;

  border-radius:20px;

  font-size:11px;
  font-weight:700;
}

.in-stock{
  background:#e8f5e9;
  color:#2e7d32;
}

.low-stock{
  background:#fff3e0;
  color:#ef6c00;
}

.out-stock{
  background:#ffebee;
  color:#d32f2f;
}

/* =====================================================
   PRODUCT LIST PAGE
   PART 4
   Loading + Empty + Responsive + Scrollbar
===================================================== */

/* ===== LOADING ===== */

.product-loading{
  width:100%;
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:18px;
  font-weight:600;
  color:#555;
}

/* ===== NO PRODUCTS ===== */

.no-products{
  width:100%;
  text-align:center;
  padding:80px 20px;
  font-size:18px;
  font-weight:600;
  color:#777;
  box-sizing:border-box;
}

/* ===== TABLET ===== */

@media (min-width:768px){

  .product-list-grid{
    grid-template-columns:repeat(3,1fr);
  }

  .product-list-image-box{
    height:260px;
  }

  .product-header{
    padding:0 24px;
  }

}

/* ===== DESKTOP ===== */

@media (min-width:1024px){

  .product-list-grid{
    grid-template-columns:repeat(4,1fr);
    max-width:1400px;
    margin:auto;
  }

  .product-list-image-box{
    height:300px;
  }

}

/* ===== SMALL MOBILE ===== */

@media (max-width:420px){

  .product-list-grid{
    gap:10px;
    padding:0 10px 20px;
  }

  .product-list-image-box{
    height:180px;
  }

  .brand-name{
    font-size:12px;
  }

  .product-name{
    font-size:13px;
    min-height:36px;
  }

  .sale-price{
    font-size:16px;
  }

  .mrp,
  .discount{
    font-size:12px;
  }

  .rating-badge{
    font-size:11px;
    padding:4px 7px;
  }

}

/* ===== CUSTOM SCROLLBAR ===== */

.product-page::-webkit-scrollbar{
  width:6px;
}

.product-page::-webkit-scrollbar-track{
  background:#f2f2f2;
}

.product-page::-webkit-scrollbar-thumb{
  background:#c7c7c7;
  border-radius:10px;
}

.product-page::-webkit-scrollbar-thumb:hover{
  background:#999;
}/* ===========================
   Review Page
=========================== */

.review-page{
  max-width:700px;
  margin:20px auto;
  padding:20px;
  background:#fff;
  border-radius:16px;
  box-shadow:0 6px 20px rgba(0,0,0,.08);
}

.review-page h2{
  margin:0 0 20px;
  text-align:center;
  font-size:28px;
  color:#222;
  font-weight:700;
}

.review-page h3{
  margin:18px 0 12px;
  font-size:18px;
  color:#333;
}

/* ===========================
   Product Card
=========================== */

.review-product{
  display:flex;
  align-items:center;
  gap:16px;
  padding:16px;
  border:1px solid #eee;
  border-radius:14px;
  background:#fafafa;
}

.review-product img{
  width:95px;
  height:95px;
  object-fit:cover;
  border-radius:12px;
  border:1px solid #eee;
  background:#fff;
}

.review-product h3{
  margin:0;
  font-size:18px;
  color:#222;
}

.review-product p{
  margin-top:6px;
  color:#ff5a1f;
  font-size:18px;
  font-weight:700;
}

/* ===========================
   Textarea
=========================== */

.review-page textarea{
  width:100%;
  min-height:140px;
  margin-top:16px;
  padding:14px;
  border:1px solid #ddd;
  border-radius:12px;
  outline:none;
  resize:vertical;
  font-size:15px;
  box-sizing:border-box;
  transition:.25s;
}

.review-page textarea:focus{
  border-color:#ff5a1f;
  box-shadow:0 0 0 3px rgba(255,90,31,.12);
}

/* ===========================
   Upload
=========================== */

.review-image-upload{
  margin-top:20px;
}

.review-image-upload label{
  display:block;
  margin-bottom:10px;
  font-weight:600;
  color:#333;
}

.review-image-upload input[type=file]{
  width:100%;
  padding:12px;
  border:2px dashed #ff5a1f;
  border-radius:12px;
  background:#fffaf7;
  cursor:pointer;
  box-sizing:border-box;
}

/* ===========================
   Preview Images
=========================== */

.preview-images{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:16px;
}

.preview-image-box{
  position:relative;
}

.preview-image{
  width:90px;
  height:90px;
  object-fit:cover;
  border-radius:12px;
  border:1px solid #ddd;
  transition:.25s;
}

.preview-image:hover{
  transform:scale(1.05);
  border-color:#ff5a1f;
}

.remove-image-btn{
  position:absolute;
  top:-8px;
  right:-8px;
  width:24px;
  height:24px;
  border:none;
  border-radius:50%;
  background:#e53935;
  color:#fff;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  display:flex;
  justify-content:center;
  align-items:center;
  transition:.25s;
}

.remove-image-btn:hover{
  background:#c62828;
}

/* ===========================
   Submit Button
=========================== */

.submit-review-btn{
  width:100%;
  margin-top:24px;
  padding:14px;
  border:none;
  border-radius:12px;
  background:#ff5a1f;
  color:#fff;
  font-size:17px;
  font-weight:700;
  cursor:pointer;
  transition:.3s;
}

.submit-review-btn:hover{
  background:#e94c14;
  transform:translateY(-1px);
}

.submit-review-btn:active{
  transform:scale(.98);
}

/* ===========================
   Error Page
=========================== */

.review-error{
  max-width:450px;
  margin:80px auto;
  padding:30px;
  text-align:center;
  background:#fff;
  border-radius:16px;
  box-shadow:0 5px 18px rgba(0,0,0,.08);
}

.review-error h2{
  margin-bottom:18px;
  color:#222;
}

.review-error button{
  padding:12px 24px;
  border:none;
  border-radius:10px;
  background:#ff5a1f;
  color:#fff;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  transition:.25s;
}

.review-error button:hover{
  background:#e94c14;
}

/* ===========================
   Mobile Responsive
=========================== */

@media (max-width:600px){

  .review-page{
    margin:10px;
    padding:16px;
    border-radius:14px;
  }

  .review-page h2{
    font-size:24px;
  }

  .review-product{
    gap:12px;
    padding:12px;
  }

  .review-product img{
    width:75px;
    height:75px;
  }

  .review-product h3{
    font-size:16px;
  }

  .review-product p{
    font-size:16px;
  }

  .review-page textarea{
    min-height:120px;
    font-size:14px;
  }

  .preview-image{
    width:72px;
    height:72px;
  }

  .submit-review-btn{
    padding:13px;
    font-size:16px;
  }
}/* =====================================================
   SEARCH PAGE
   PART 1
   Main Layout + Header + Search Box
===================================================== */

/* ===== MAIN PAGE ===== */

.search-page{
  width:100%;
  min-height:100vh;
  background:#f5f5f5;
  overflow-x:hidden;
  padding-bottom:90px;
}

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

.search-header{
  position:sticky;
  top:0;
  z-index:9999;

  width:100%;
  height:60px;

  display:flex;
  align-items:center;

  padding:0 14px;
  box-sizing:border-box;
  gap:12px;

  background:#ff3f6c;
}

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

.search-header-icon{
  width:24px;
  height:24px;

  flex-shrink:0;

  color:#fff;
  cursor:pointer;
mnnw
/* ===== SEARCH BOX ===== */

.search-input-box{

  position:relative;

  flex:1;

  display:flex;
  align-items:center;

  height:42px;

  background:#fff;

  border-radius:12px;

  overflow:hidden;

  padding:0 12px;

  box-sizing:border-box;

  border:none;

  box-shadow:none;
}

/* Remove any global pseudo elements */

.search-input-box::before,
.search-input-box::after{
  display:none !important;
  content:none !important;
}

/* ===== SEARCH ICON ===== */

.search-icon{

  flex-shrink:0;

  font-size:19px;

  color:#777;

  z-index:2;
}

/* ===== INPUT ===== */

.search-input-box input{

  position:relative;

  z-index:2;

  flex:1;

  width:100%;

  height:100%;

  border:none !important;

  outline:none !important;

  box-shadow:none !important;

  background:transparent !important;

  margin:0;

  padding:0 10px;

  font-size:15px;

  color:#222;

  font-family:inherit;

  appearance:none;

  -webkit-appearance:none;
}

.search-input-box input::placeholder{

  color:#999;

  opacity:1;

}

/* ===== CLEAR ICON ===== */

.clear-search{

  flex-shrink:0;

  font-size:20px;

  color:#777;

  cursor:pointer;

  z-index:2;
}

.search-action-icon{
  font-size:22px;
  color:#777;
  cursor:pointer;
  margin-left:10px;
  flex-shrink:0;
  transition:.2s;
}

.search-action-icon:hover{
  color:#ff3f6c;
}

.search-action-icon.listening{
  color:#ff3f6c;
  animation:micPulse .8s infinite;
}

@keyframes micPulse{

  0%{
    transform:scale(1);
  }

  50%{
    transform:scale(1.25);
  }

  100%{
    transform:scale(1);
  }

}

/* ===== MAIN PAGE ===== */

.search-page{
  min-height:100vh;
  background:#f5f5f5;
  padding-bottom:90px;
  animation:searchPageFade .3s ease;
}

@keyframes searchPageFade{

  from{
    opacity:0;
  }

  to{
    opacity:1;
  }

}

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

.search-header{
  width:100%;
  height:60px;
  background:#ff3f6c;
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 14px;
  box-sizing:border-box;
  position:sticky;
  top:0;
  z-index:100;
}

.search-header-icon{
  font-size:24px;
  color:#fff;
  cursor:pointer;
  flex-shrink:0;
}

/* ===== SEARCH INPUT ===== */

.search-input-box{
  flex:1;
  height:42px;
  background:#fff;
  border-radius:12px;
  display:flex;
  align-items:center;
  padding:0 12px;
  box-sizing:border-box;
}

.search-icon{
  font-size:18px;
  color:#777;
  flex-shrink:0;
}

.search-input-box input{
  flex:1;
  height:100%;
  border:none;
  outline:none;
  background:transparent;
  padding:0 10px;
  font-size:15px;
  color:#222;
}

.search-input-box input::placeholder{
  color:#999;
}

.clear-search{
  font-size:20px;
  color:#777;
  cursor:pointer;
  flex-shrink:0;
}

/* =====================================================
   SEARCH PAGE
   PART 2
   Recent Search + Search Count
===================================================== */

/* ===== RECENT SEARCH ===== */

.recent-search-section{
  margin-top:14px;
  padding:0 14px;
  box-sizing:border-box;
}

.recent-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
}

.recent-header h3{
  margin:0;
  font-size:16px;
  font-weight:700;
  color:#222;
}

.clear-btn{
  border:none;
  outline:none;
  background:none;
  color:#ff3f6c;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  padding:0;
}

.empty-recent{
  margin:30px 0;
  text-align:center;
  color:#888;
  font-size:15px;
}

.recent-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.recent-item{
  display:flex;
  align-items:center;
  gap:12px;
  background:#fff;
  border-radius:12px;
  padding:12px 14px;
  cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  transition:.25s;
}

.recent-item:hover{
  transform:translateX(4px);
}

.recent-item svg{
  font-size:18px;
  color:#777;
  flex-shrink:0;
}

.recent-item span{
  font-size:14px;
  color:#333;
  font-weight:500;
}

/* ===== SEARCH COUNT ===== */

.search-count{
  padding:14px 16px 10px;
  font-size:14px;
  font-weight:600;
  color:#666;
}

/* =====================================================
   SEARCH PAGE
   PART 3
   Product Grid + Product Card
===================================================== */

/* ===== PRODUCT GRID ===== */

.search-product-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
  padding:0 14px 20px;
  box-sizing:border-box;
}

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

.search-product-card{
  background:#fff;
  border-radius:16px;
  overflow:hidden;
  cursor:pointer;
  box-shadow:0 3px 12px rgba(0,0,0,.08);
  transition:.25s ease;
}

.search-product-card:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 22px rgba(0,0,0,.14);
}

.search-product-card:active{
  transform:scale(.98);
}

/* ===== IMAGE ===== */

.search-image-box{
  position:relative;
  width:100%;
  overflow:hidden;
  background:#f5f5f5;
}

.search-image-box img{
  width:100%;
  height:220px;
  object-fit:cover;
  display:block;
  transition:transform .35s ease;
}

.search-product-card:hover .search-image-box img{
  transform:scale(1.05);
}

/* ===== RATING ===== */

.search-rating{
  position:absolute;
  left:10px;
  bottom:10px;
  display:flex;
  align-items:center;
  gap:4px;
  padding:4px 8px;
  border-radius:20px;
  background:rgba(255,255,255,.95);
  font-size:12px;
  font-weight:600;
  color:#222;
  box-shadow:0 2px 8px rgba(0,0,0,.12);
}

.search-rating svg{
  color:#16a34a;
  font-size:12px;
}

.search-rating span{
  color:#999;
}

/* ===== PRODUCT INFO ===== */

.search-product-info{
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.search-brand{
  margin:0;
  font-size:12px;
  font-weight:700;
  color:#222;
  text-transform:uppercase;
  letter-spacing:.3px;
}

.search-product-info h3{
  margin:0;
  font-size:14px;
  font-weight:500;
  color:#555;
  line-height:1.4;

  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* ===== PRICE ===== */

.search-price-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
}

.sale-price{
  font-size:17px;
  font-weight:700;
  color:#111;
}

.mrp{
  font-size:13px;
  color:#999;
  text-decoration:line-through;
}

.discount{
  font-size:13px;
  font-weight:700;
  color:#ff3f6c;
}

/* =====================================================
   SEARCH PAGE
   PART 4
   Loading + Empty + Responsive
===================================================== */

/* ===== LOADING ===== */

.search-loading{
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:18px;
  font-weight:600;
  color:#555;
}

/* ===== NO PRODUCTS ===== */

.no-search-product{
  padding:80px 20px;
  text-align:center;
}

.no-search-icon{
  font-size:60px;
  color:#cfcfcf;
  margin-bottom:16px;
}

.no-search-product h3{
  margin:0 0 10px;
  font-size:22px;
  font-weight:700;
  color:#222;
}

.no-search-product p{
  margin:0;
  font-size:15px;
  color:#888;
}

/* ===== TABLET ===== */

@media (min-width:768px){

  .search-product-grid{
    grid-template-columns:repeat(3,1fr);
  }

  .search-image-box img{
    height:250px;
  }

}

/* ===== DESKTOP ===== */

@media (min-width:1024px){

  .search-product-grid{
    grid-template-columns:repeat(4,1fr);
    max-width:1400px;
    margin:auto;
  }

  .search-image-box img{
    height:300px;
  }

}

/* ===== SMALL MOBILE ===== */

@media (max-width:420px){

  .search-product-grid{
    gap:10px;
    padding:0 10px 20px;
  }

  .search-image-box img{
    height:185px;
  }

  .search-brand{
    font-size:11px;
  }

  .search-product-info h3{
    font-size:13px;
  }

  .sale-price{
    font-size:16px;
  }

  .mrp,
  .discount{
    font-size:12px;
  }

  .search-rating{
    font-size:11px;
  }

}

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

.search-page::-webkit-scrollbar{
  width:6px;
}

.search-page::-webkit-scrollbar-track{
  background:#f1f1f1;
}

.search-page::-webkit-scrollbar-thumb{
  background:#c9c9c9;
  border-radius:10px;
}

.search-page::-webkit-scrollbar-thumb:hover{
  background:#999;
}


.selected-image-preview{
  padding:15px;
}

.selected-image-preview img{
  width:100%;
  max-height:220px;
  object-fit:cover;
  border-radius:12px;
}

.image-search-loading{
  position:fixed;
  inset:0;
  background:rgba(255,255,255,.9);
  z-index:9999;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}

.image-search-loader{
  width:55px;
  height:55px;
  border:5px solid #eee;
  border-top:5px solid #ff3f6c;
  border-radius:50%;
  animation:imageSearchSpin .8s linear infinite;
}

.image-search-loading p{
  margin-top:18px;
  font-size:16px;
  font-weight:600;
  color:#333;
}

@keyframes imageSearchSpin{
  to{
    transform:rotate(360deg);
  }
}.wallet-container {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 16px;
  box-sizing: border-box;
}

/* Wallet Card */

.wallet-card {
  background: linear-gradient(135deg, #ff3f6c, #ff6b81);
  border-radius: 18px;
  padding: 22px;
  color: #fff;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.wallet-title {
  font-size: 16px;
  font-weight: 500;
  opacity: .9;
}

.wallet-balance {
  margin-top: 10px;
  font-size: 34px;
  font-weight: 700;
}

/* Heading */

.transaction-title {
  margin: 25px 0 15px;
  font-size: 19px;
  font-weight: 700;
  color: #222;
}

/* Transaction Card */

.transaction-card {
  background: #fff;
  border-radius: 14px;
  padding: 15px;
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  transition: .2s;
}

.transaction-card:hover {
  transform: translateY(-2px);
}

.transaction-left h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #222;
}

.transaction-left p {
  margin-top: 5px;
  font-size: 12px;
  color: #777;
}

/* Amount */
.amount-add,
.amount-minus{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  white-space: nowrap;
  font-size: 18px;
  font-weight: 700;
}

.amount-add{
  color: #00a884;
}

.amount-minus{
  color: #ff3f6c;
}

/* Empty */

.empty-wallet {
  background: #fff;
  border-radius: 15px;
  padding: 40px 20px;
  text-align: center;
  color: #888;
  font-size: 15px;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

/* Mobile */

@media (max-width:600px){

.wallet-container{
padding:14px;
}

.wallet-card{
padding:18px;
border-radius:16px;
}

.wallet-balance{
font-size:30px;
}

.transaction-title{
font-size:17px;
}

.transaction-card{
padding:13px;
}

.transaction-left h4{
font-size:14px;
}

.transaction-left p{
font-size:11px;
}

.amount-add,
.amount-minus{
font-size:16px;
}

}


.wallet-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 56px;
  background: #ff3681;
  display: flex;
  align-items: center;
  padding: 0 16px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
  margin: -16px -16px 20px -16px;
}

.wallet-back-btn {
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
}

.wallet-header-title {
  margin: 0;
  margin-left: 30%;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
}

.transaction-id-credit{
  font-size:12px;
  font-weight:600;
  color:#03a685 !important;
  margin-top:4px;
}

.transaction-id-debit{
  font-size:12px;
  font-weight:600;
  color:#ff3f6c !important;
  margin-top:4px;
}


.transaction-title-text{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.help-container {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 30px;
  font-family: "Poppins", sans-serif;
}

/* Header */

.help-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #ff3681;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

.back-icon {
  font-size: 28px !important;
  cursor: pointer;
  color: #fff !important;
}

.help-header h2 {
  margin: 0;
  margin-left: 30px;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
}

/* Cards */

.help-card {
  background: #fff;
  margin: 15px;
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 3px 10px rgba(0,0,0,.08);
}

.help-card h3 {
  margin: 0 0 18px;
  color: #222;
  font-size: 18px;
}

/* Quick Help */

.quick-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 15px;
}

.quick-item {
  background: #fafafa;
  border-radius: 12px;
  padding: 18px;
  text-align: center;
  border: 1px solid #ececec;
  transition: .25s;
}

.quick-item:hover {
  background: #fff0f4;
  border-color: #ff3f6c;
}

.quick-item svg {
  color: #ff3f6c;
  font-size: 34px !important;
}

.quick-item span {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

/* FAQ */

.faq-box {
  border-bottom: 1px solid #eee;
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  cursor: pointer;
  font-weight: 600;
  color: #333;
}

.faq-answer {
  color: #666;
  line-height: 1.7;
  padding-bottom: 15px;
  font-size: 14px;
}

/* Buttons */

.contact-btn {
  width: 100%;
  border: none;
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.phone {
  background: #2196f3;
}

.email {
  background: #ff3f6c;
}

.whatsapp {
  background: #25D366;
}

.contact-btn svg {
  font-size: 22px !important;
}

/* About */

.about-text {
  color: #666;
  line-height: 1.8;
  font-size: 14px;
}

.version {
  margin-top: 15px;
  text-align: center;
  background: #f7f7f7;
  padding: 10px;
  border-radius: 8px;
  font-size: 13px;
  color: #777;
  font-weight: 600;
}

/* Mobile */

@media (max-width:600px) {

  .help-header h2 {
    font-size: 20px;
  }

  .quick-item {
    padding: 15px;
  }

  .quick-item svg {
    font-size: 30px !important;
  }

  .faq-question {
    font-size: 14px;
  }

  .faq-answer {
    font-size: 13px;
  }

}/* ===== Page ===== */

.return-container {
  background: #f5f7fb;
  min-height: 100vh;
  padding: 15px;
}

/* ===== Header ===== */

.return-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.return-header h2 {
  font-size: 22px;
  font-weight: 700;
  color: #222;
}

.back-icon {
  cursor: pointer;
  color: #444;
}

/* ===== Card ===== */

.return-card {
  background: #fff;
  border-radius: 18px;
  padding: 18px;
  margin-bottom: 18px;
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
}

.return-card h3 {
  margin-bottom: 12px;
  color: #222;
}

/* ===== Policy ===== */

.return-card p {
  margin: 8px 0;
  color: #555;
  line-height: 1.6;
}

/* ===== Title ===== */

.title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

/* ===== Button ===== */

.new-return-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #1976d2;
  color: white;
  border: none;
  padding: 10px 16px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  transition: .3s;
}

.new-return-btn:hover {
  background: #125bb5;
  transform: translateY(-2px);
}

/* ===== Return Item ===== */

.return-box {
  display: flex;
  gap: 15px;
  background: #fafafa;
  border-radius: 14px;
  padding: 14px;
  margin-top: 15px;
  transition: .3s;
}

.return-box:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

.return-box img {
  width: 90px;
  height: 90px;
  border-radius: 12px;
  object-fit: cover;
}

.return-info {
  flex: 1;
}

.return-info h4 {
  margin: 0 0 8px;
  color: #222;
}

.return-info p {
  margin: 4px 0;
  color: #666;
  font-size: 14px;
}

/* ===== Status ===== */

.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 50px;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
}

.pending {
  background: #fff3cd;
  color: #856404;
}

.approved {
  background: #d4edda;
  color: #155724;
}

.rejected {
  background: #f8d7da;
  color: #721c24;
}

/* ===== Mobile ===== */

@media (max-width:768px){

.return-box{
flex-direction:column;
}

.return-box img{
width:100%;
height:200px;
}

.title-row{
flex-direction:column;
align-items:flex-start;
gap:12px;
}

.new-return-btn{
width:100%;
justify-content:center;
}

}



/* ===== New Return Request Dialog ===== */

.MuiDialog-paper {
  border-radius: 18px !important;
  padding: 8px;
}

.MuiDialogTitle-root {
  text-align: center;
  font-size: 22px !important;
  font-weight: 700 !important;
}

.MuiDialogContent-root {
  padding-top: 10px !important;
}

.MuiTextField-root {
  margin-top: 12px !important;
}

.MuiDialogActions-root {
  padding: 12px 16px !important;
  padding: 16px !important;
  justify-content: space-between !important;
}

.MuiButton-contained {
  border-radius: 10px !important;
  text-transform: none !important;
  font-weight: 600 !important;
  padding: 8px 22px !important;
}

.MuiButton-text {
  text-transform: none !important;
  font-weight: 600 !important;
}

/* Mobile */

@media (max-width: 768px) {
  .MuiDialog-paper {
    margin: 16px !important;
    border-radius: 16px !important;
  }
}

.order-preview{
display:flex;
gap:15px;
align-items:center;
padding:12px;
margin:15px 0;
border:1px solid #ddd;
border-radius:12px;
background:#fafafa;
}

.preview-image{
width:80px;
height:80px;
border-radius:10px;
object-fit:cover;
}

.order-preview h4{
margin:0 0 6px;
font-size:16px;
}

.order-preview p{
margin:2px 0;
font-size:13px;
color:#666;
}

/* ===== Order Preview ===== */

.order-preview {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 14px;
  margin: 15px 0;
  background: #f8f9fa;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
}

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

.order-preview h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #222;
}

.order-preview p {
  margin: 4px 0;
  font-size: 13px;
  color: #666;
}

/* ===== Upload Button ===== */

.upload-btn {
  width: 100%;
  margin-top: 15px !important;
  border: 2px dashed #1976d2 !important;
  border-radius: 12px !important;
  padding: 12px !important;
  text-transform: none !important;
  font-weight: 600 !important;
}

/* ===== Uploaded Image Preview ===== */

.upload-preview {
  width: 100%;
  margin-top: 15px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #ddd;
}

.upload-preview img {
  width: 100%;
  max-height: 220px;
  object-fit: cover;
}

/* ===== Mobile ===== */

@media (max-width: 768px) {
  .MuiDialog-paper {
    width: calc(100% - 20px) !important;
    max-width: calc(100% - 20px)  !important;
    margin: 10px !important;
    border-radius: 16px !important;
  }
}

.preview-image {
  width: 100px;
  height: 100px;
}

.return-images {
  display: flex;
  gap: 12px;
  margin-bottom: 10px;
}

.return-images img{
width:80px;
height:80px;
object-fit:cover;
border-radius:8px;
border:1px solid #ddd;
}

.return-images p{
margin:0 0 6px;
font-size:12px;
font-weight:600;
text-align:center;
}/* ===================================
   RETURN DETAILS PAGE
=================================== */

*{
  box-sizing:border-box;
}

.rd-return-details-container{
  width:100%;
  max-width:900px;
  margin:0 auto;
  padding:16px;
  background:#f5f7fb;
  min-height:100vh;
  overflow-x:hidden;
}

/* ===================================
   LOADING
=================================== */

.rd-loading-box{
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:100vh;
}

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

.rd-return-details-header{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:20px;
}

.rd-return-details-header h2{
  margin:0;
  font-size:28px;
  font-weight:700;
  color:#222;
}

.rd-back-icon{
  font-size:30px !important;
  cursor:pointer;
  color:#222;
}

/* ===================================
   COMMON CARD
=================================== */

.rd-return-card,
.rd-return-product-card,
.rd-timeline{
  width:100%;
  background:#fff;
  border-radius:20px;
  padding:20px;
  margin-bottom:20px;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}


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

.rd-return-product-card{
  display:flex;
  align-items:center;
  gap:20px;
}

.rd-return-product-image{
  width:170px;
  height:170px;
  object-fit:cover;
  border-radius:16px;
  border:1px solid #eee;
  background:#f7f7f7;
  flex-shrink:0;
}

.rd-return-product-info{
  flex:1;
  min-width:0;
}

.rd-return-product-info h3{
  margin:0 0 15px;
  font-size:28px;
  font-weight:700;
  color:#222;
  word-break:break-word;
}

.rd-return-product-info p{
  margin:10px 0;
  font-size:16px;
  line-height:1.6;
  color:#555;
  word-break:break-word;
}

.rd-return-product-info strong{
  color:#222;
}

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

.rd-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:16px;
  padding:8px 18px;
  border-radius:50px;
  font-size:14px;
  font-weight:700;
}

.rd-pending{
  background:#fff3cd;
  color:#856404;
}

.rd-approved{
  background:#d4edda;
  color:#155724;
}

.rd-rejected{
  background:#f8d7da;
  color:#721c24;
}


/* ===================================
   TIMELINE
=================================== */

.rd-timeline{
  overflow:hidden;
}

.rd-timeline-item{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:16px;
  padding-bottom:28px;
  opacity:.45;
}

.rd-timeline-item.active{
  opacity:1;
}

.rd-timeline-item:last-child{
  padding-bottom:0;
}

.rd-timeline-item::before{
  content:"";
  position:absolute;
  left:8px;
  top:18px;
  width:2px;
  height:calc(100% + 10px);
  background:#ddd;
}

.rd-timeline-item:last-child::before{
  display:none;
}

.rd-timeline-dot{
  width:18px;
  height:18px;
  min-width:18px;
  border-radius:50%;
  background:#d9d9d9;
  margin-top:2px;
  flex-shrink:0;
  z-index:2;
}

.rd-timeline-item.active .rd-timeline-dot{
  background:#4caf50;
}

.rd-timeline-item > div:last-child{
  flex:1;
  min-width:0;
}

.rd-timeline-item h4{
  margin:0;
  font-size:18px;
  font-weight:700;
  color:#222;
}

.rd-timeline-item p{
  margin-top:6px;
  color:#666;
  font-size:15px;
  line-height:1.6;
  word-break:break-word;
}

/* ===================================
   RETURN CARD
=================================== */

.rd-return-card h3{
  margin:0 0 16px;
  font-size:24px;
  font-weight:700;
  color:#222;
}

.rd-return-card p{
  margin:10px 0;
  font-size:16px;
  line-height:1.7;
  color:#555;
  word-break:break-word;
}

.rd-return-card strong{
  color:#222;
}

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

.rd-return-card .MuiButton-root{
  margin-top:18px;
  height:48px;
  border-radius:12px;
  text-transform:none;
  font-size:16px;
  font-weight:600;
}

/* ===================================
   MOBILE
=================================== */

@media (max-width:768px){

.rd-return-details-container{
  padding:12px;
}

.rd-return-details-header h2{
  font-size:22px;
}

.rd-back-icon{
  font-size:28px !important;
}

.rd-return-card,
.rd-return-product-card,
.rd-timeline{
  padding:16px;
  border-radius:16px;
}

.rd-return-product-card{
  flex-direction:column;
  text-align:center;
}

.rd-return-product-image{
  width:180px;
  height:180px;
}

.rd-return-product-info h3{
  font-size:22px;
}

.rd-return-product-info p{
  font-size:15px;
}

.rd-return-card h3{
  font-size:20px;
}

.rd-timeline-item{
  gap:12px;
  padding-bottom:24px;
}

.rd-timeline-dot{
  width:16px;
  height:16px;
  min-width:16px;
}

.rd-timeline-item::before{
  left:7px;
}

.rd-timeline-item h4{
  font-size:16px;
}

.rd-timeline-item p{
  font-size:14px;
}

.rd-status{
  font-size:13px;
  padding:8px 16px;
}

}

/* ===== Return Policy ===== */

.rd-policy-list{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.rd-policy-list p{
  margin:0;
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:16px;
  line-height:1.7;
  color:#555;
}

@media (max-width:768px){

.rd-policy-list{
gap:12px;
}

.rd-policy-list p{
font-size:15px;
line-height:1.6;
}

}

/* Refund Values */

.rd-refund-value{
  color:#2e7d32;
  font-weight:600;
}

/* Shipping Details */

.rd-return-card .MuiButton-root{
  margin-top:16px;
  border-radius:12px;
  text-transform:none;
  font-weight:600;
}

.rd-return-proof-image{
  width:100%;
  max-width:350px;
  border-radius:12px;
  margin-top:10px;
}

.swal-popup{
  border-radius:18px;
  padding:20px;
}

.swal-title{
  font-size:22px;
  font-weight:700;
}

.swal-btn{
  border-radius:10px !important;
  padding:10px 28px !important;
  font-weight:600 !important;
}/* =========================
   Payment Help CSS
========================= */

.payment-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 20px;
}


.payment-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: #f8f8f8;
  border-radius: 12px;
  font-size: 15px;
  color: #333;
}


.payment-item svg {
  color: #ff3f6c;
  font-size: 26px;
}



/* =========================
   Support & Payment Icon
========================= */

.support-big-icon {
  font-size: 55px !important;
  color: #ff3f6c;
  display: block;
  margin: 0 auto 15px;
}



/* =========================
   Contact Buttons
========================= */

.contact-btn {
  width: 100%;
  border: none;
  padding: 14px;
  margin-top: 12px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  color: white;
  transition: 0.3s;
}


.contact-btn:hover {
  transform: translateY(-2px);
}



/* Phone */

.contact-btn.phone {
  background: #28a745;
}



/* Email */

.contact-btn.email {
  background: #2563eb;
}



/* WhatsApp */

.contact-btn.whatsapp {
  background: #25D366;
}




/* =========================
   Refund / Payment Text
========================= */

.help-card p {
  line-height: 1.6;
  color: #555;
}


.help-card ul {
  padding-left: 20px;
}


.help-card li {
  margin-bottom: 8px;
}


/* ===========================
   Refund Account
=========================== */

.refund-method {
  display: flex;
  gap: 10px;
  margin: 18px 0;
}

.refund-method button {
  flex: 1;
  padding: 12px;
  border: 2px solid #e5e5e5;
  background: #fff;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  color: #444;
  cursor: pointer;
  transition: 0.3s;
}

.refund-method button.active-method {
  background: #ff3f6c;
  color: #fff;
  border-color: #ff3f6c;
}

.refund-method button:hover {
  border-color: #ff3f6c;
}


/* ===========================
   Refund Inputs
=========================== */

.refund-input {
  width: 100%;
  padding: 14px;
  margin-bottom: 14px;
  border: 1px solid #ddd;
  border-radius: 10px;
  font-size: 15px;
  outline: none;
  transition: 0.3s;
  box-sizing: border-box;
}

.refund-input:focus {
  border-color: #ff3f6c;
  box-shadow: 0 0 0 3px rgba(255, 63, 108, 0.12);
}


/* ===========================
   Save Button
=========================== */

.save-refund-btn {
  width: 100%;
  padding: 14px;
  margin-top: 10px;
  background: #ff3f6c;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.3s;
}

.save-refund-btn:hover {
  background: #e73360;
}

.save-refund-btn:active {
  transform: scale(0.98);
}

.save-refund-btn:disabled {
  background: #bdbdbd;
  cursor: not-allowed;
}


/* ===========================
   Mobile
=========================== */

@media (max-width: 480px) {

  .refund-method {
    flex-direction: column;
  }

  .refund-method button {
    width: 100%;
  }

}

.saved-refund-card{
  border:1px solid #e5e5e5;
  border-radius:12px;
  padding:15px;
  margin-bottom:15px;
  background:#fff;
}

.saved-refund-card label{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
  cursor:pointer;
}

.saved-refund-card input[type="radio"]{
  accent-color:#ff3f6c;
}

.saved-refund-card p{
  margin:6px 0;
  color:#555;
  font-size:14px;
}/* ==========================
   SUPPORT PAGE
========================== */

.help-container {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background: #f8f8f8;
  min-height: 100vh;
}



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

.help-header {

  display: flex;
  align-items: center;
  gap: 15px;

  background: #ffffff;
  padding: 16px 18px;

  border-radius: 16px;

  margin-bottom: 20px;

  box-shadow: 0 4px 15px rgba(0,0,0,0.06);

}


.help-header h2 {

  margin: 0;

  font-size: 22px;

  font-weight: 700;

  color: #222;

}



.back-icon {

  cursor: pointer;

  color: #e91e63;

  font-size: 28px !important;

}




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

.help-card {

  background: #ffffff;

  border-radius: 18px;

  padding: 22px;

  margin-bottom: 18px;

  box-shadow:
  0 8px 25px rgba(0,0,0,0.07);

}



.help-card h3 {

  margin-top: 10px;

  margin-bottom: 12px;

  font-size: 20px;

  color:#222;

}



.help-card p {

  color:#666;

  line-height:1.6;

  font-size:15px;

}



/* ==========================
   SUPPORT ICON
========================== */


.support-big-icon {

  width:70px !important;

  height:70px !important;

  padding:15px;

  border-radius:50%;

  background:#ffe5ee;

  color:#e91e63;

}





/* ==========================
   CONTACT BUTTONS
========================== */


.contact-btn {


  width:100%;

  display:flex;

  align-items:center;

  justify-content:center;

  gap:10px;


  border:none;

  padding:14px;

  margin-top:14px;


  border-radius:12px;

  font-size:16px;

  font-weight:600;


  cursor:pointer;

  transition:.3s;

}




.contact-btn:hover {

  transform:translateY(-2px);

}



/* Call */

.contact-btn.phone {

  background:#e8f5e9;

  color:#2e7d32;

}



/* Email */

.contact-btn.email {

  background:#e3f2fd;

  color:#1565c0;

}



/* WhatsApp */

.contact-btn.whatsapp {

  background:#e8f5e9;

  color:#128c7e;

}






/* ==========================
   CONTACT INFO
========================== */


.help-card strong {

 color:#222;

}




/* ==========================
   MOBILE RESPONSIVE
========================== */


@media(max-width:480px){


.help-container{

padding:12px;

}


.help-header h2{

font-size:19px;

}



.help-card{

padding:18px;

}



.contact-btn{

font-size:15px;

padding:13px;

}


}

.ticket{

background:#fff3e0;
color:#ef6c00;

}


.help-card input,
.help-card textarea,
.help-card select{

width:100%;

padding:14px;

margin-top:12px;

border-radius:10px;

border:1px solid #ddd;

font-size:15px;

}


.help-card textarea{

height:120px;

resize:none;

}

/* ===========================
   MY SUPPORT TICKETS BUTTON
=========================== */

.contact-btn.ticket-history{
  width: 100%;
  margin-top: 15px;
  background: #673ab7;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.3s ease;
}

.contact-btn.ticket-history:hover{
  background: #5e35b1;
  transform: translateY(-2px);
}

.contact-btn.ticket-history:active{
  transform: scale(0.98);
}

.contact-btn.ticket-history svg{
  font-size: 22px;
}/* ===================================
   MY SUPPORT TICKETS
=================================== */

.mst-container{
  padding:20px;
  background:#f5f7fb;
  min-height:100vh;
}

/* Header */

.mst-header{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:20px;
}

.mst-back{
  font-size:30px !important;
  cursor:pointer;
  color:#333;
}

.mst-header h2{
  margin:0;
  font-size:26px;
  font-weight:700;
  color:#222;
}

/* Dashboard Cards */

.mst-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:15px;
  margin-bottom:25px;
}

.mst-card{
  background:#fff;
  border-radius:14px;
  padding:20px;
  text-align:center;
  box-shadow:0 5px 15px rgba(0,0,0,.08);
  transition:.3s;
}

.mst-card:hover{
  transform:translateY(-4px);
}

.mst-card svg{
  font-size:38px !important;
  color:#1976d2;
}

.mst-card h3{
  margin:10px 0 5px;
  font-size:28px;
  color:#222;
}

.mst-card p{
  margin:0;
  color:#666;
  font-size:15px;
}

.mst-card.open{
  border-top:4px solid #ff9800;
}

.mst-card.progress{
  border-top:4px solid #2196f3;
}

.mst-card.resolved{
  border-top:4px solid #4caf50;
}

.mst-card.closed{
  border-top:4px solid #757575;
}

/* Toolbar */

.mst-toolbar{
  display:flex;
  justify-content:space-between;
  gap:15px;
  margin-bottom:25px;
  flex-wrap:wrap;
}

.mst-search{
  flex:1;
  display:flex;
  align-items:center;
  background:#fff;
  border-radius:10px;
  padding:0 12px;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}

.mst-search svg{
  color:#777;
}

.mst-search input{
  flex:1;
  border:none;
  outline:none;
  padding:14px 10px;
  font-size:15px;
  background:transparent;
}

.mst-toolbar select{
  border:none;
  outline:none;
  background:#fff;
  border-radius:10px;
  padding:14px 18px;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
  cursor:pointer;
}

/* Ticket List */

.mst-list{
  display:grid;
  gap:20px;
}

.mst-ticket{
  background:#fff;
  border-radius:15px;
  padding:22px;
  box-shadow:0 4px 15px rgba(0,0,0,.08);
}

.mst-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:15px;
}

.mst-top h3{
  margin:0;
  color:#e91e63;
  font-size:20px;
  word-break:break-word;
}

.mst-ticket p{
  margin:10px 0;
  color:#444;
  line-height:1.6;
}

.mst-ticket strong{
  color:#111;
}

/* Status */

.mst-status{
  padding:6px 14px;
  border-radius:30px;
  font-size:13px;
  font-weight:700;
  color:#fff;
  white-space:nowrap;
}

.mst-status.Open{
  background:#ff9800;
}

.mst-status.InProgress{
  background:#2196f3;
}

.mst-status.Resolved{
  background:#4caf50;
}

.mst-status.Closed{
  background:#616161;
}

/* Complaint */

.mst-message{
  background:#fafafa;
  border-left:4px solid #e91e63;
  padding:14px;
  border-radius:8px;
  margin:12px 0;
  color:#555;
  line-height:1.7;
  word-break:break-word;
}

/* Reply */

.mst-reply{
  background:#e8f5e9;
  border-left:4px solid #4caf50;
  padding:14px;
  border-radius:8px;
  margin-top:10px;
  color:#222;
  line-height:1.7;
  word-break:break-word;
}

.mst-reply-date{
  margin-top:12px;
  color:#777;
  font-size:14px;
}

/* Loading */

.mst-loading{
  text-align:center;
  padding:70px 20px;
  font-size:20px;
  color:#666;
}

/* Empty */

.mst-empty{
  text-align:center;
  background:#fff;
  border-radius:15px;
  padding:70px 20px;
  color:#777;
  font-size:20px;
  box-shadow:0 4px 15px rgba(0,0,0,.08);
}

/* Divider */

.mst-ticket hr{
  margin:20px 0;
  border:none;
  border-top:1px solid #eee;
}

/* Responsive */

@media (max-width:768px){

  .mst-container{
    padding:15px;
  }

  .mst-header h2{
    font-size:22px;
  }

  .mst-toolbar{
    flex-direction:column;
  }

  .mst-toolbar select{
    width:100%;
  }

  .mst-top{
    flex-direction:column;
    align-items:flex-start;
  }

  .mst-status{
    margin-top:8px;
  }

  .mst-card{
    padding:16px;
  }

}/* ===========================
   NOTIFICATION PAGE
=========================== */

.notification-page{
    min-height:100vh;
    background:#f5f5f6;
    padding:18px;
    padding-bottom:90px;
    font-family:Arial,sans-serif;
}

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

.notification-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:22px;
}

.notification-header h2{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:30px;
    font-weight:700;
    color:#222;
}

.notification-header svg{
    color:#ff3f6c;
    font-size:32px;
}

.notification-header span{
    background:#fff;
    color:#666;
    padding:8px 15px;
    border-radius:30px;
    font-size:14px;
    font-weight:600;
    box-shadow:0 3px 10px rgba(0,0,0,.08);
}

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

.notification-card{
    background:#fff;
    border-radius:22px;
    margin-bottom:20px;
    overflow:hidden;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
    transition:.25s;
    border-left:7px solid #ff3f6c;
}

.notification-card:active{
    transform:scale(.98);
}

.notification-card.unread{
    background:#fffafc;
}

/* ===========================
   IMAGE
=========================== */

.notification-image{
    width:100%;
    height:190px;
    object-fit:cover;
    display:block;
}

/* ===========================
   CONTENT
=========================== */

.notification-content{
    padding:18px;
}

.notification-content h3{
    margin:0;
    color:#222;
    font-size:23px;
    font-weight:700;
    line-height:1.4;
}

.notification-content p{
    margin-top:12px;
    color:#666;
    font-size:16px;
    line-height:1.7;
}

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

.notification-footer{
    margin-top:18px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.notification-time{
    display:flex;
    align-items:center;
    gap:6px;
    color:#888;
    font-size:14px;
    font-weight:500;
}

.notification-time svg{
    font-size:19px;
    color:#999;
}

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

.unread-badge{
    background:linear-gradient(135deg,#ff3f6c,#ff6b81);
    color:#fff;
    padding:8px 18px;
    border-radius:30px;
    font-size:13px;
    font-weight:700;
    letter-spacing:.4px;
    box-shadow:0 4px 12px rgba(255,63,108,.35);
}

/* ===========================
   EMPTY
=========================== */

.notification-empty{
    text-align:center;
    background:#fff;
    border-radius:22px;
    padding:70px 20px;
    box-shadow:0 8px 18px rgba(0,0,0,.06);
}

.empty-icon{
    font-size:75px!important;
    color:#ff3f6c;
    margin-bottom:20px;
}

.notification-empty h3{
    margin:0;
    font-size:25px;
    color:#222;
}

.notification-empty p{
    margin-top:12px;
    color:#777;
    font-size:16px;
    line-height:1.6;
}

/* ===========================
   LOADING
=========================== */

.notification-loading{
    min-height:80vh;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    color:#666;
}

.notification-loading p{
    margin-top:18px;
    font-size:18px;
    font-weight:600;
}

.spin-icon{
    font-size:46px!important;
    color:#ff3f6c;
    animation:spin 1s linear infinite;
}

@keyframes spin{
    from{
        transform:rotate(0deg);
    }
    to{
        transform:rotate(360deg);
    }
}

/* ===========================
   MOBILE
=========================== */

@media(max-width:600px){

.notification-page{
    padding:14px;
}

.notification-header h2{
    font-size:25px;
}

.notification-content{
    padding:15px;
}

.notification-content h3{
    font-size:20px;
}

.notification-content p{
    font-size:15px;
}

.notification-image{
    height:180px;
}

.notification-header span{
    font-size:12px;
}

}

.notification-count{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:8px;
}

.notification-badge{
    min-width:22px;
    height:22px;
    border-radius:50%;
    background:#ff3f6c;
    color:#fff;
    font-size:12px;
    font-weight:700;
    display:flex;
    justify-content:center;
    align-items:center;
}


.notification-card{
    cursor:pointer;
    transition:.25s;
}

.notification-card:active{
    transform:scale(.98);
}

.notification-card.unread{
    border-left:5px solid #ff3f6c;
    background:#fff8fa;
}.privacy-page {
  padding: 40px 20px;
  background: #f8f8f8;
  min-height: 100vh;
}

.privacy-card {
  max-width: 900px;
  margin: auto;
  background: white;
  padding: 35px;
  border-radius: 12px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}

.privacy-card h1 {
  text-align: center;
  margin-bottom: 25px;
  font-size: 32px;
}

.privacy-card h2 {
  margin-top: 25px;
  font-size: 21px;
}

.privacy-card p {
  line-height: 1.7;
  color: #555;
  font-size: 16px;
}

.privacy-card ul {
  padding-left: 25px;
  line-height: 1.8;
  color: #555;
}

.privacy-card li {
  margin-bottom: 8px;
}

.privacy-update {
  margin-top: 30px;
  font-size: 14px;
  color: #888;
}.legal-page {
  padding: 40px 20px;
  background: #f8f8f8;
  min-height: 100vh;
}

.legal-card {
  max-width: 900px;
  margin: auto;
  background: #fff;
  padding: 35px;
  border-radius: 14px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}

.legal-card h1 {
  text-align: center;
  font-size: 32px;
  margin-bottom: 30px;
}

.legal-card h2 {
  margin-top: 25px;
  font-size: 21px;
}

.legal-card p,
.legal-card li {
  color: #555;
  line-height: 1.8;
  font-size: 16px;
}

.legal-card ul {
  padding-left: 25px;
}

.updated {
  margin-top: 30px;
  font-size: 14px !important;
  color: #888 !important;
}/* =========================================================
   ALIZA AI ASSISTANT
   Unique CSS - No Global Class Conflict
========================================================= */

.aliza-ai-root {
  position: static;
  width: 0;
  height: 0;
}


/* =========================================================
   FLOATING AI BUTTON
========================================================= */

.aliza-ai-floating-button {
  position: fixed !important;

  top: auto !important;
  right: 18px !important;
  bottom: 30px !important;
  left: auto !important;

  width: 58px !important;
  height: 58px !important;

  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border: 1px solid #dddddd !important;
  border-radius: 50% !important;

  background: #eeeeee !important;
  color: #333333 !important;

  font-size: 27px !important;
  line-height: 1 !important;

  cursor: pointer !important;

  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.18) !important;

  z-index: 2147483000 !important;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease !important;
}

.aliza-ai-floating-button:hover {
  background: #e2e2e2 !important;

  transform: translateY(-2px) !important;

  box-shadow: 0 7px 22px rgba(0, 0, 0, 0.22) !important;
}

.aliza-ai-floating-button:active {
  transform: scale(0.94) !important;
}

.aliza-ai-robot-icon {
  display: block;

  font-size: 27px;
  line-height: 1;
}


/* =========================================================
   CHAT WINDOW
========================================================= */

.aliza-ai-chat-window {
  position: fixed !important;

  top: auto !important;
  right: 18px !important;
  bottom: 100px !important;
  left: auto !important;

  width: 350px;
  height: 480px;

  display: flex;
  flex-direction: column;

  background: #ffffff;

  border: 1px solid #e5e5e5;
  border-radius: 18px;

  overflow: hidden;

  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);

  z-index: 2147482999 !important;
}


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

.aliza-ai-chat-header {
  min-height: 66px;

  padding: 12px 14px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  background: #f7f7f7;

  border-bottom: 1px solid #e8e8e8;
}

.aliza-ai-title-area {
  display: flex;
  align-items: center;

  gap: 10px;

  min-width: 0;
}

.aliza-ai-title-icon {
  width: 40px;
  height: 40px;

  display: flex;
  align-items: center;
  justify-content: center;

  flex-shrink: 0;

  border-radius: 50%;

  background: #eeeeee;

  font-size: 21px;
}

.aliza-ai-title {
  font-size: 15px;
  font-weight: 700;

  color: #282c3f;

  white-space: nowrap;
}

.aliza-ai-status {
  margin-top: 2px;

  font-size: 11px;

  color: #35a853;
}


/* =========================================================
   CLOSE BUTTON
========================================================= */

.aliza-ai-close-button {
  width: 34px !important;
  height: 34px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 0 !important;
  margin: 0 !important;

  border: none !important;
  border-radius: 50% !important;

  background: transparent !important;
  color: #555555 !important;

  font-size: 26px !important;
  line-height: 1 !important;

  cursor: pointer !important;
}

.aliza-ai-close-button:hover {
  background: #e8e8e8 !important;
}


/* =========================================================
   MESSAGES
========================================================= */

.aliza-ai-messages {
  flex: 1;

  min-height: 0;

  padding: 15px;

  overflow-y: auto;

  background: #ffffff;

  scroll-behavior: smooth;
}

.aliza-ai-bot-message,
.aliza-ai-user-message {
  width: fit-content;

  max-width: 82%;

  padding: 10px 13px;

  margin-bottom: 10px;

  border-radius: 15px;

  font-size: 14px;
  line-height: 1.45;

  word-break: break-word;
}

.aliza-ai-bot-message {
  margin-right: auto;

  background: #f1f1f1;

  color: #333333;

  border-bottom-left-radius: 5px;
}

.aliza-ai-user-message {
  margin-left: auto;

  background: #eeeeee;

  color: #222222;

  border-bottom-right-radius: 5px;
}

.aliza-ai-typing {
  opacity: 0.7;
}


/* =========================================================
   INPUT AREA
========================================================= */

.aliza-ai-input-area {
  display: flex;

  align-items: center;

  gap: 8px;

  padding: 10px;

  background: #ffffff;

  border-top: 1px solid #e5e5e5;
}

.aliza-ai-message-input {
  flex: 1;

  min-width: 0;

  height: 42px;

  padding: 0 14px;

  border: 1px solid #dddddd !important;
  border-radius: 22px !important;

  outline: none !important;

  background: #ffffff !important;

  color: #333333 !important;

  font-size: 14px;

  box-sizing: border-box;
}

.aliza-ai-message-input:focus {
  border-color: #bbbbbb !important;
}


/* =========================================================
   SEND BUTTON
========================================================= */

.aliza-ai-send-button {
  height: 42px;

  padding: 0 16px !important;

  border: none !important;
  border-radius: 22px !important;

  background: #eeeeee !important;
  color: #333333 !important;

  font-size: 14px;
  font-weight: 600;

  cursor: pointer !important;

  white-space: nowrap;

  transition: background 0.2s ease;
}

.aliza-ai-send-button:hover {
  background: #dddddd !important;
}

.aliza-ai-send-button:disabled {
  opacity: 0.5;

  cursor: not-allowed !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

  .aliza-ai-floating-button {
    right: 15px !important;
    bottom: 30px !important;

    width: 56px !important;
    height: 56px !important;
  }

  .aliza-ai-robot-icon {
    font-size: 25px;
  }


  .aliza-ai-chat-window {
    top: auto !important;

    right: 10px !important;
    bottom: 96px !important;
    left: 10px !important;

    width: auto;

    height: 480px;

    max-height: calc(100vh - 120px);

    border-radius: 17px;
  }


  .aliza-ai-chat-header {
    min-height: 62px;
  }


  .aliza-ai-messages {
    padding: 12px;
  }


  .aliza-ai-bot-message,
  .aliza-ai-user-message {
    max-width: 86%;

    font-size: 13px;
  }


  .aliza-ai-input-area {
    padding: 8px;
  }


  .aliza-ai-send-button {
    padding: 0 14px !important;
  }
}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 380px) {

  .aliza-ai-floating-button {
    right: 12px !important;
    bottom: 28px !important;

    width: 54px !important;
    height: 54px !important;
  }


  .aliza-ai-chat-window {
    right: 7px !important;
    bottom: 90px !important;
    left: 7px !important;

    height: 480px;

    max-height: calc(100vh - 110px);
  }


  .aliza-ai-title {
    font-size: 14px;
  }


  .aliza-ai-message-input {
    font-size: 13px;
  }


  .aliza-ai-send-button {
    padding: 0 12px !important;

    font-size: 13px;
  }
}