/* ============================================================
   Best Sellers Mart — custom.css
   (Bootstrap overrides + brand styles)
   Edit this file to restyle the whole site.
   ============================================================ */

/* --- Brand colors (override Bootstrap) --- */
:root {
  --bs-primary: #4f46e5;
  --bs-primary-rgb: 79, 70, 229;
  --bs-link-color: #4f46e5;
  --bs-link-hover-color: #4338ca;
  --accent: #f97316;        /* orange accent */
  --accent-rgb: 249, 115, 22;
  --dark: #0f172a;
}

.text-accent { color: var(--accent) !important; }
.btn-accent {
  --bs-btn-bg: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: #ea580c;
  --bs-btn-hover-border-color: #ea580c;
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #c2410c;
  --bs-btn-active-border-color: #c2410c;
}

/* --- Brand mark (logo) --- */
.brand-mark {
  display: inline-grid; place-items: center;
  width: 38px; height: 38px; border-radius: 11px;
  background: linear-gradient(135deg, #4f46e5, #f97316);
  font-size: 19px; vertical-align: -8px;
}

/* --- Navbar --- */
.navbar { border-bottom: 1px solid #eef0f7; }
.nav-link { font-weight: 500; }

/* --- Hero banner --- */
.hero {
  position: relative; color: #fff; overflow: hidden;
  background: url("../hero-banner.jpg") center/cover no-repeat;
}
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(30, 7, 140, 0.9) 0%, rgba(30,27,75,.75) 45%, rgba(79,70,229,.3) 100%);
}
.hero .container { position: relative; z-index: 1; padding-top: 6rem; padding-bottom: 6rem; }
.hero h1 { font-weight: 800; line-height: 1.1; }
.hero .lead { color: #dbe1ff; max-width: 560px; }
.hero-stat .num { font-size: 1.5rem; font-weight: 800; }
.hero-stat .lbl { font-size: .82rem; color: #cbd5e1; }

/* --- Page hero (inner pages) --- */
.page-hero { background: linear-gradient(120deg, #312e81, #4f46e5); color: #fff; padding: 3rem 0; }
.page-hero .breadcrumb { --bs-breadcrumb-divider-color: #c7d2fe; }
.page-hero a { color: #dbe1ff; text-decoration: none; }
.page-hero a:hover { text-decoration: underline; }
.page-hero h1 { font-weight: 800; }

/* --- Category tiles --- */
.category-tile {
  position: relative; display: flex; align-items: center; gap: 1rem;
  color: #fff !important; text-decoration: none;
  border-radius: 16px; padding: 1.5rem 1.25rem; min-height: 130px;
  transition: transform .18s ease, box-shadow .18s ease; box-shadow: 0 4px 14px rgba(15,23,42,.1);
}
.category-tile:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(15,23,42,.2); color: #fff; }
.category-tile .tile-icon {
  width: 68px; height: 68px; border-radius: 16px; flex: none;
  display: grid; place-items: center; font-size: 34px; background: rgba(255,255,255,.18);
}
.category-tile .tile-name { font-weight: 700; font-size: 1.1rem; }
.category-tile .tile-tag { font-size: .8rem; color: rgba(255,255,255,.85); }
.category-tile .tile-count {
  display: inline-block; margin-top: .45rem; font-size: .72rem; font-weight: 700;
  background: rgba(255,255,255,.2); padding: .2rem .65rem; border-radius: 999px;
}

/* --- Product cards --- */
.product-card { border: 1px solid #eef0f7; border-radius: 16px; overflow: hidden; transition: transform .16s ease, box-shadow .16s ease; }
.product-card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(15,23,42,.12); }
.product-media { position: relative; height: 165px; display: grid; place-items: center; }
.product-emoji { font-size: 64px; }
.product-brand { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--bs-primary); }
.product-name { font-weight: 600; line-height: 1.3; }
.add-btn { width: 40px; height: 40px; border-radius: 50% !important; font-size: 1.25rem; line-height: 1; }

/* --- Promo cards --- */
.promo-card {
  position: relative; border-radius: 16px; overflow: hidden; min-height: 210px; color: #fff;
  display: flex; flex-direction: column; justify-content: center; padding: 2rem;
}
.promo-card .promo-bg { position: absolute; inset: 0; background: url("../electronic.jpg") center/cover; }
.promo-card  .promo-bg1 { position: absolute; inset: 0; background: url("../gidt-card.jpg") center/cover; }
.promo-card .promo-overlay { position: absolute; inset: 0; background: linear-gradient(120deg, rgba(49,46,129,.92), rgba(249,115,22,.55)); }
.promo-card.promo-2 .promo-overlay { background: linear-gradient(120deg, rgba(15,23,42,.9), rgba(79,70,229,.55)); }
.promo-card > * { position: relative; z-index: 1; }
.promo-card .kicker { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fcd34d; }

/* --- Trust bar --- */
.trust-item { display: flex; align-items: center; gap: .9rem; }
.trust-item .t-icon {
  width: 48px; height: 48px; border-radius: 12px; flex: none;
  display: grid; place-items: center; font-size: 22px;
  background: #fff; border: 1px solid #eef0f7;
}

/* --- Newsletter box --- */
.newsletter-box { border-radius: 20px; background: linear-gradient(120deg, #312e81, #4f46e5); color: #fff; }

/* --- Cart / checkout --- */
.qty-btn { width: 34px; height: 34px; border-radius: 50%; }
.cart-item-media { width: 84px; height: 84px; border-radius: 14px; display: grid; place-items: center; font-size: 36px; background: #f6f7fb; flex: none; }
.order-mini { max-height: 420px; overflow: auto; }
.pay-pill { display: inline-block; border: 1px solid #e5e8f0; border-radius: 8px; padding: .25rem .6rem; font-size: .72rem; font-weight: 700; color: #64748b; letter-spacing: .05em; }

/* --- Footer --- */
footer a.text-secondary:hover { color: #fff !important; }

/* --- Toast --- */
.toast-custom { z-index: 2000; }

/* --- Section titles --- */
.section-title { font-weight: 800; letter-spacing: -.02em; }
.sub-text { color: #5b6474; }

/* --- Misc --- */
.rounded-16 { border-radius: 16px !important; }

.about-img img{
  width: 100%;
}

.about-content{
  text-align: justify;
}

.about-content h4{
  font-weight: bold;
}

.unsubscribe-container{
    width:100%;
    max-width:500px;
    background:#fff;
    padding:35px;
    border-radius:12px;
    box-shadow:0 10px 30px rgba(0,0,0,0.1);
}


.unsubscribe-container h2{
    color:#222;
    margin-bottom:10px;
    text-align:center;
}

.unsubscribe-container p{
    color:#666;
    text-align:center;
    margin-bottom:25px;
    line-height:1.6;
}

.form-group{
    margin-bottom:18px;
}

label{
    display:block;
    margin-bottom:8px;
    font-weight:600;
    color:#333;
}

input[type="text"],
input[type="email"],
input[type="date"]{
    width:100%;
    padding:14px;
    border:1px solid #ccc;
    border-radius:8px;
    font-size:15px;
    outline:none;
    transition:.3s;
}

input:focus{
    border-color:#0d6efd;
}

.checkbox{
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin-bottom:20px;
}

.checkbox input{
    margin-top:3px;
}

.checkbox label{
    font-size:14px;
    font-weight:400;
    line-height:1.5;
    color:#555;
}


.success-message{
    display:none;
    margin-top:20px;
    background:#d1e7dd;
    color:#0f5132;
    border:1px solid #badbcc;
    padding:15px;
    border-radius:8px;
    text-align:center;
}

.success-message h3{
    margin-bottom:8px;
}

.policy-content {
  text-align: justify;
}

.testimonial-content {
  box-shadow: 2px 2px 5px 2px #0d6efd;
  padding: 20px;
  border-radius: 10%;
}

.testimonial-content h4{
  font-size: 20px;
  font-weight: bold;
}

.latest-blog img{
  width: 100%;
}

.latest-blog h4{
  font-size: 22px;
  font-weight: 600;
}

.navbar-brand img{
  width: 250px;
}