/* ================================
   Coupon Mart - PRO VERSION
   Black Premium Offer Theme
   ================================ */

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

/* Root Colors */
:root {
  --primary: #0d6efd;
  --dark: #0f0f0f;
  --dark-card: #161616;
  --light-text: #e5e5e5;
  --muted-text: #9a9a9a;
  --success: #28a745;
}

/* Reset */
body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  background: #f4f6f8;
  color: #222;
}

/* Container */
.store-container {
  max-width: 1000px;
  margin: 0px auto;
  padding: 20px;
}

/* ================= STORE HEADER ================= */
.store-header {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  overflow: hidden;
  margin-bottom: 20px;
}

.store-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.store-logo-container {
  padding: 35px;
  text-align: center;
}

.store-logo {
  width: 180px;
  height: 180px;
  border-radius: 14px;
  object-fit: cover;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.store-title-container {
    display: flex;           /* Flex layout */
    align-items: center;     /* Vertically align center */
    gap: 10px;               /* Space between title and heading */
    flex-wrap: wrap;         /* Wrap on small screens */
}

.store-title {
    font-size: 28px;
    font-weight: 700;
    margin: 0;
    color: var(--text);
}

.store-heading {
     font-size: 28px;
    font-weight: 700;
    margin: 0;
    color: var(--text);  /* Prevent wrapping on large screens */
}


.store-description {
  color: #555;
  margin-top: 10px;
  max-width: 600px;
}

/* Track Button */
.track-button {
  margin-top: 25px;
  padding: 14px 34px;
  border-radius: 50px;
  border: none;
  background: linear-gradient(135deg, #0d6efd, #003cff);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.track-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(13,110,253,0.4);
}

/* ================= COUPONS HEADING ================= */
.coupons-heading {
  text-align: center;
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 35px;
  color: #111;
}

/* ================= COUPON GRID ================= */
.limited-offers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  max-width: 1050px;
  margin: auto;
}

/* ================= BLACK COUPON CARD ================= */
.coupon-card {
  background: linear-gradient(180deg, #1a1a1a, #0f0f0f);
  border-radius: 18px;
  overflow: hidden;
  color: var(--light-text);
  box-shadow: 0 15px 40px rgba(0,0,0,0.35);
  transition: all 0.35s ease;
}

.coupon-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 25px 60px rgba(0,0,0,0.6);
}

/* Coupon Image */
.coupon-logo {
  width: 100%;
  height: 200px;
  object-fit: cover;
 /* filter: brightness(0.9);*/
}

/* Card Content */
.coupon-card-content {
  padding: 22px;
  text-align: center;
}

.coupon-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #ffffff;
}

.coupon-details {
  font-size: 15px;
  color: var(--muted-text);
  margin-bottom: 10px;
}

.coupon-expiry {
  font-size: 13px;
  color: #b5b5b5;
  margin-bottom: 18px;
}

/* ================= BUTTONS ================= */
.button-container {
  display: flex;
  gap: 12px;
  justify-content: center;
  padding: 20px;
}

.show-code-button,
.get-deal-button {
  flex: 1;
  padding: 15px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: all 0.25s ease;
}

/* HOT DEAL Badge */
.hot-badge {
  position: absolute;
  top: 15px;
  left: 15px;
  background: linear-gradient(135deg, #ff512f, #dd2476);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 30px;
  letter-spacing: 0.5px;
  box-shadow: 0 8px 20px rgba(255,81,47,0.6);
  animation: pulse 1.8s infinite;
  z-index: 2;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* Coupon card relative */
.coupon-card {
  position: relative;
}


/* Show Code */
.show-code-button {
  background: linear-gradient(135deg, #0d6efd, #003cff);
  color: #ffffff;
  border: 1px solid #333;
}

.show-code-button:hover {
  background: #2c2c2c;
}

/* Get Deal */
.get-deal-button {
  background: linear-gradient(135deg, #ff512f, #dd2476);
  color: #ffffff;
}

.get-deal-button:hover {
  box-shadow: 0 10px 25px rgba(0,200,83,0.45);
}
/* ================= NO COUPONS ================= */
.no-coupons{
font-size:16px;
color:#6b7280;
text-align:center;
margin:30px 0;
}

/* ================= RELATED STORES ================= */
.related-stores-heading{
font-size:24px;
font-weight:700;
margin:50px 0 20px;
text-align:center;
color:var(--text);
}

.related-stores-container{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
gap:24px;
}

.related-store-card{
background:#fff;
border:1px solid var(--border);
border-radius:14px;
text-align:center;
padding:20px;
transition:.25s;
}

.related-store-card:hover{
transform:translateY(-4px);
box-shadow:0 10px 22px rgba(0,0,0,.12);
}

.related-store-logo{
width:160px;
height:160px;
object-fit:contain;
margin:0 auto 14px;
border-radius:10px;
border:1px solid var(--border);
background:#fff;
}

.related-store-name{
font-size:16px;
font-weight:600;
color:var(--text);
}

/* ================= POPUPS ================= */
#deal-popup,
#code-popup{
display:none;
position:fixed;
inset:0;
background:rgba(0,0,0,.55);
justify-content:center;
align-items:center;
z-index:9999;
}

#popup-content,
#code-popup-content{
background:#fff;
padding:28px;
border-radius:14px;
max-width:420px;
width:90%;
text-align:center;
box-shadow:0 10px 28px rgba(0,0,0,.2);
}

.popup-logo{
width:100px;
height:100px;
object-fit:contain;
margin-bottom:14px;
}

#code-popup-content p{
font-size:18px;
font-weight:600;
color:var(--text);
margin-bottom:12px;
}

.coupon-code-display{
display:inline-block;
padding:14px 24px;
font-size:20px;
font-weight:700;
color:var(--primary);
border:2px dashed var(--primary);
border-radius:12px;
margin:12px 0;
background:#f8fafc;
}

.copied-message{
font-size:14px;
color:var(--success);
margin-top:6px;
}

/* CLOSE BUTTON */
.close-button{
margin-top:18px;
padding:10px 22px;
border-radius:10px;
border:none;
background:#ff9900;
color:#111;
font-weight:600;
cursor:pointer;
}
.close-button:hover{
background:#f08804;
}

/* ================= RESPONSIVE ================= */
@media(max-width:992px){
.store-title{font-size:26px}
.store-heading{font-size:20px}
}

@media(max-width:600px){
.store-banner{
flex-direction:column;
text-align:center;
}
.store-logo{
width:130px;
height:130px;
}
.related-store-logo{
width:130px;
height:130px;
}
}