/* =========================================
   13. UTILITY CLASSES & PAGE STYLES
   ইউটিলিটি ক্লাস এবং অন্যান্য পেজ স্টাইল
   ========================================= */

/* Hero Centered / সেন্ট্রাল হিরো সেকশন */
.hero-centered {
  text-align: center;
  padding: 4rem 1rem;
  display: block;
}

/* Margin Top Utilities / মার্জিন টপ ইউটিলিটি */
.mt-2 { margin-top: 2rem; }
.mt-1 { margin-top: 1rem; }
.mt-20 { margin-top: 20px; }

/* Tracking Input / ট্র্যাকিং পেজের ইনপুট বক্স */
.tracking-input {
  padding: 0.5rem;
  width: 60%;
  max-width: 300px;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: #12110f;
  color: #fff;
}

/* Tracking Button / ট্র্যাকিং পেজের বাটন */
.tracking-btn {
  padding: 0.5rem 1rem;
  border: none;
  background: var(--gold);
  color: #000;
  cursor: pointer;
  font-weight: bold;
  border-radius: 4px;
}

/* Icon Link / আইকন লিংক স্টাইল */
.icon-link {
  text-decoration: none;
  color: inherit;
}

/* Cursor Pointer / মাউস কার্সর পরিবর্তন */
.cursor-pointer {
  cursor: pointer;
}

/* Dropdown Content Links / ড্রপডাউনের ভেতরের লিংক */
.icons .dropdown-content a {
  font-size: 14px;
}

/* =========================================
   PAGE HERO & PANEL STYLES
   পেজ হিরো এবং প্যানেল স্টাইলিং
   ========================================= */
.page-hero { padding: 70px 0 30px; }
.page-hero h1 { margin: 0 0 10px; font-size: clamp(38px, 6vw, 68px); }
.page-hero h1 span, .eyebrow { color: var(--gold); }

/* Page Panel (Cards/Boxes) / পেজ প্যানেল বা কার্ড */
.page-panel { 
  margin: 28px 0 70px; 
  padding: clamp(20px, 4vw, 38px); 
  border: 1px solid #352d20; 
  border-radius: 18px; 
  background: rgba(25, 21, 18, 0.82); 
}

/* =========================================
   CART PAGE STYLES
   শপিং কার্ট পেজের স্টাইল
   ========================================= */
.cart-list { display: grid; gap: 14px; }
.cart-row { 
  display: grid; 
  grid-template-columns: 82px 1fr auto auto auto; 
  align-items: center; 
  gap: 18px; 
  padding: 14px; 
  border: 1px solid #3b3125; 
  border-radius: 12px; 
}
.cart-row img { width: 82px; height: 82px; object-fit: contain; }
.cart-row h3, .cart-row p { margin: 0 0 5px; }

/* Quantity Control / পরিমাণ পরিবর্তন করার অপশন */
.cart-quantity-label { display: grid; align-self: end; gap: 7px; color: #c7bfb4; font-size: 13px; }
.cart-quantity-control { 
  display: grid; 
  grid-template-columns: 36px 48px 36px; 
  overflow: hidden; 
  border: 1px solid #554226; 
  border-radius: 8px; 
  background: #100f0c; 
}
.cart-quantity-control button { 
  min-height: 40px; 
  border: 0; 
  background: transparent; 
  color: #e2ae54; 
  font-size: 20px; 
  cursor: pointer; 
}
.cart-quantity-control button:hover { background: rgba(217, 156, 46, .12); }
.cart-quantity-control input { 
  width: 48px; 
  min-width: 0; 
  border: 0; 
  border-inline: 1px solid #3d3327; 
  outline: 0; 
  background: transparent; 
  color: #fff; 
  font: inherit; 
  font-weight: 700; 
  text-align: center; 
  appearance: textfield; 
}
.cart-quantity-control input::-webkit-inner-spin-button,
.cart-quantity-control input::-webkit-outer-spin-button { margin: 0; appearance: none; }

/* Cart Row Total & Action Buttons / কার্টের মোট মূল্য এবং বাটন */
.cart-row > strong { display: flex; min-height: 40px; align-items: center; align-self: end; }
.cart-row > .danger-btn { height: 40px; padding-block: 0; align-self: end; }
.cart-summary { margin: 24px 0 14px; padding-top: 18px; border-top: 1px solid #3b3125; font-size: 20px; }

/* Checkout Row / চেকআউট সেকশন */
.cart-checkout-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.cart-checkout-row > #cart-total { flex: 0 0 auto; color: #f4eee6; font-size: 20px; }

/* Checkout Link (Button) / চেকআউট লিংক বা বাটন */
.checkout-link { 
  display: flex; 
  flex-flow: row nowrap; 
  align-items: center; 
  justify-content: space-between; 
  gap: 24px; 
  width: min(100%, 330px); 
  min-height: 48px; 
  text-decoration: none; 
  white-space: nowrap; 
  box-shadow: 0 0 12px rgba(239, 181, 68, .2); 
  animation: checkoutLinkGlow 1.9s ease-in-out infinite alternate; 
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease; 
}
.checkout-link > span, .checkout-link > strong { display: inline-flex; align-items: center; line-height: 1; }
.checkout-link > strong { margin-left: auto; text-shadow: 0 0 8px rgba(255, 220, 145, .28); }
.checkout-link:hover { 
  transform: translateY(-3px) scale(1.015); 
  filter: brightness(1.08); 
  box-shadow: 0 8px 22px rgba(0, 0, 0, .3), 0 0 28px rgba(239, 181, 68, .52); 
}

/* Secondary & Danger Buttons / অন্যান্য বাটন স্টাইল */
.danger-btn, .secondary-btn { 
  border: 1px solid #70533b; 
  border-radius: 8px; 
  background: transparent; 
  color: #e8d9c6; 
  padding: 10px 14px; 
}

/* Empty State Message / খালি অবস্থার মেসেজ */
.empty-state { grid-column: 1 / -1; padding: 50px 20px; text-align: center; }
.empty-state .primary { display: inline-block; margin-top: 12px; text-decoration: none; }

/* =========================================
   PRODUCT DETAIL STYLES
   প্রোডাক্ট ডিটেইলস পেজের স্টাইল
   ========================================= */
.product-detail-grid { display: grid; grid-template-columns: minmax(260px, .85fr) 1fr; gap: clamp(28px, 6vw, 75px); align-items: center; }
.product-detail-grid > img {
  width: 100%;
  max-height: 520px;
  object-fit: contain;
  filter: drop-shadow(0 20px 24px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 14px rgba(234, 182, 85, 0.35));
  animation: productDetailFloat 4s ease-in-out infinite, productDetailGlow 2.8s ease-in-out infinite alternate;
}
.product-detail-grid h1 { font-size: clamp(36px, 5vw, 64px); margin: 8px 0 16px; }
.product-detail-price { display: block; margin: 22px 0; color: var(--gold); font-size: 30px; }
.product-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Checkout Grid / চেকআউট গ্রিড */
.checkout-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: 30px; align-items: start; }
.info-card { padding: 24px; border: 1px solid #3b3125; border-radius: 14px; background: #16120f; }

/* Wishlist Toggle Button / উইশলিস্ট বাটন */
.wishlist-toggle { 
  position: absolute; 
  top: 12px; 
  right: 12px; 
  z-index: 2; 
  width: 38px; 
  height: 38px; 
  border-radius: 50%; 
  border: 1px solid #58452d; 
  background: #17120fd9; 
  color: #fff; 
  font-size: 23px; 
}
.wishlist-toggle.active { color: #eab655; }

/* =========================================
   ANIMATIONS & KEYFRAMES
   অ্যানিমেশন এবং কিফ্রেম
   ========================================= */

/* Checkout Link Glow Animation / চেকআউট লিংকের গ্লো অ্যানিমেশন */
@keyframes checkoutLinkGlow { 
  from { box-shadow: 0 0 10px rgba(239, 181, 68, .16); } 
  to { box-shadow: 0 0 26px rgba(239, 181, 68, .48); } 
}

/* Product Detail Floating Animation / প্রোডাক্ট ডিটেইলসের ভাসমান অ্যানিমেশন */
@keyframes productDetailFloat {
  0%, 100% { transform: translateY(0) rotate(-0.25deg); }
  50% { transform: translateY(-9px) rotate(0.25deg); }
}

/* Product Detail Glow Animation / প্রোডাক্ট ডিটেইলসের গ্লো অ্যানিমেশন */
@keyframes productDetailGlow {
  from { filter: drop-shadow(0 20px 24px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 8px rgba(234, 182, 85, 0.25)); }
  to { filter: drop-shadow(0 24px 30px rgba(0, 0, 0, 0.65)) drop-shadow(0 0 23px rgba(234, 182, 85, 0.65)); }
}

/* Animation Reduction for Accessibility / অ্যাক্সেসিবিলিটির জন্য অ্যানিমেশন কমানো */
@media (prefers-reduced-motion: reduce) {
  .product-detail-grid > img { animation: none; }
}

/* =========================================
   RESPONSIVE STYLES
   মোবাইল ও ট্যাবের জন্য রেস্পন্সিভ স্টাইল
   ========================================= */
@media (max-width: 760px) {
  .cart-row { grid-template-columns: 64px 1fr; }
  .cart-row img { width: 64px; height: 64px; }
  .cart-row label, .cart-row > strong, .cart-row .danger-btn { grid-column: 2; }
  .cart-quantity-label, .cart-row > strong, .cart-row > .danger-btn { align-self: auto; justify-self: start; }
  .product-detail-grid, .checkout-grid { grid-template-columns: 1fr; }
  .cart-checkout-row { align-items: stretch; flex-direction: column; }
  .cart-checkout-row > #cart-total { align-self: flex-end; }
}