:root{
  --brand-pink:#FF6F6F;
  --brand-pink-dark:#A64747;
  --brand-beige:#F5F5DC;
  --brand-brown:#795548;
}

body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color:#222;
  line-height:1.6;
  margin:0;
  background: linear-gradient(270deg, #ffeaea, #ffd6d6, #ffeaea, #fffdfd);
  background-size: 400% 400%;
  animation: gradientFlow 15s ease infinite;
}

@keyframes gradientFlow {
  0%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
  100%{ background-position:0% 50%; }
}

.navbar-brand img{ height:36px; width:auto; margin-right:.5rem; }
.navbar{ box-shadow:0 2px 8px rgba(0,0,0,.06); }
.nav-link.active {
  color: var(--brand-pink-dark) !important;
}

.hero{
  background: var(--brand-beige);
  border-radius: 1rem;
  overflow:hidden;
}

.section-title{
  font-weight:700;
  color: var(--brand-pink-dark);
}

.card.feature{
  border:0;
  border-radius:1rem;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  transition: transform .2s ease, box-shadow .2s ease;
}
.card.feature:hover{
  transform: translateY(-4px);
  box-shadow:0 12px 32px rgba(0,0,0,.12);
}

.btn-brand{
  background: var(--brand-pink);
  border-color: var(--brand-pink);
  color: #fff;
}
.btn-brand:hover{
  background: var(--brand-pink-dark);
  border-color: var(--brand-pink-dark);
}

/* Grid section */
.grid-why{
  display:grid;
  grid-template-columns: repeat(12,1fr);
  gap:1rem;
}
.grid-why .why-box{
  background:#fff;
  border:1px solid #e9ecef;
  border-radius:1rem;
  padding:1.25rem;
}
.grid-why .a{ grid-column: span 6; }
.grid-why .b{ grid-column: span 6; }
.grid-why .c{ grid-column: span 4; }
.grid-why .d{ grid-column: span 4; }
.grid-why .e{ grid-column: span 4; }

/* Cards row */
.cards-row{
  display:flex;
  gap:1rem;
}
.cards-row .card{ flex:1 1 0; }

/* Image gallery */
.gallery{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
}
.gallery img{
  width:100%;
  height: 220px;
  object-fit: cover;
  border-radius:.75rem;
  transition: transform .2s ease;
}
.gallery img:hover{ transform: scale(1.02); }

/* Responsive Typography */
h1{ font-size: clamp(1.8rem, 1.2rem + 2vw, 3rem); }
h2{ font-size: clamp(1.4rem, 1rem + 1.2vw, 2rem); }
.lead{ font-size: clamp(1rem, .95rem + .6vw, 1.25rem); }

/* Media Queries */
@media (max-width: 991.98px){
  .grid-why{ grid-template-columns: repeat(6,1fr); }
  .grid-why .a, .grid-why .b{ grid-column: span 6; }
  .grid-why .c, .grid-why .d, .grid-why .e{ grid-column: span 3; }
}
@media (max-width: 767.98px){
  .cards-row{ flex-wrap:wrap; }
  .cards-row .card{ flex: 1 1 100%; }
  .grid-why{ grid-template-columns: repeat(2,1fr); }
  .grid-why .a, .grid-why .b, .grid-why .c, .grid-why .d, .grid-why .e{ grid-column: span 2; }
  .gallery{ grid-template-columns: 1fr; }
}

footer{
  background:#f8f9fa;
  border-top:1px solid #eee;
  margin-top:2rem;
  padding:1.5rem 0;
  color:#555;
}
.footer-small{ font-size:.95rem; }

/* Carousel */
.carousel-item img{
  height: 420px;
  width: 100%;
  object-fit: cover;
  border-radius: .75rem;
}

/* Card images */
.card-img-top{
  height: 220px;
  object-fit: cover;
}

/* Timeline (if needed) */
.timeline{
  position: relative;
  padding-left: 1.5rem;
}
.timeline::before{
  content: "";
  position: absolute;
  left: .4rem;
  top: .2rem;
  bottom: .2rem;
  width: 3px;
  background: var(--brand-pink);
  opacity: .25;
}
.timeline-step{
  position: relative;
  margin-bottom: .75rem;
  padding-left: 1rem;
}
.timeline-step::before{
  content: "";
  position: absolute;
  left: -1.05rem;
  top: .25rem;
  width: .8rem;
  height: .8rem;
  background: var(--brand-pink);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(255,111,111,.15);
}

/* Order summary */
.order-summary{
  border: 1px solid #e9ecef;
  border-radius: 1rem;
  padding: 1rem;
  background: #fcfefd;
}

/* Subtle section spacing */
.section{
  margin-top: 2.25rem;
  margin-bottom: 2rem;
}

/* Popup Form */
.popup-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,.4);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.popup-overlay.active { display: flex; }
.popup-content {
  background: #fff;
  padding: 2rem;
  width: 90%;
  max-width: 400px;
  position: relative;
  animation: fadeIn .3s ease;
}
@keyframes fadeIn {
  from { opacity: 0; transform: scale(.9); }
  to { opacity: 1; transform: scale(1); }
}

/* === quick-actions styles === */
.quick-actions {
  background: linear-gradient(180deg, rgba(255,235,235,0.9), rgba(255,245,245,0.8));
  padding: 18px;
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.04);
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

.quick-actions h2 {
  color: var(--brand-pink-dark);
  margin-bottom: 10px;
}

/* Show Notification button */
#showNotificationBtn {
  background: var(--brand-pink);
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 10px;
  cursor: pointer;
}
#showNotificationBtn:hover { background: var(--brand-pink-dark); transform: translateY(-2px); }

/* Copy container and promo code */
.copy-container {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

#promoCode {
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
}

#copyBtn {
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--brand-pink-dark);
  background: #fff;
  color: var(--brand-pink-dark);
  cursor: pointer;
}
#copyBtn:hover { background: var(--brand-pink); color: #fff; border-color: var(--brand-pink); }

/* when JS sets .btn-success on copy */
#copyBtn.btn-success {
  background: #4caf50 !important;
  color: #fff !important;
  border-color: #4caf50 !important;
}

/* Highlight class used by your highlight script */
.highlight {
  background: #ffe58a;
  padding: 0 3px;
  border-radius: 3px;
}

/* Notification popup styling (used by JS) */
.notification, .toast-msg {
  position: fixed;
  right: 20px;
  bottom: 20px;
  background: var(--brand-pink-dark);
  color: white;
  padding: 10px 14px;
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.15);
  z-index: 1200;
}

/* Autocomplete suggestion look */
#suggestionsList .suggestion-item {
  cursor: pointer;
}
#suggestionsList { max-height: 220px; overflow:auto; }