.merchant-shop header nav{padding:0 2rem}
/* Global theme variables */
:root{
  --fp-navy:#081b3f;
  --fp-navy-2:#0b2a6b;
  --fp-accent:#0f5bd0;
  --fp-primary:#2aa0ff;
  --fp-text:#e8eefc;
}

body{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  color: #1b2a4e;
}

.navbar-brand{font-family:'Chakra Petch', sans-serif; letter-spacing:.2px; font-size:1.35rem;}
.navbar-brand .brand-dot{width:14px;height:14px;border-radius:50%;display:inline-block;background:linear-gradient(135deg,var(--fp-primary),var(--fp-accent));}

.hero{background: radial-gradient(1200px 600px at 70% 0%, rgba(47,116,255,.25) 0%, rgba(47,116,255,0) 60%),
                 radial-gradient(900px 500px at -10% 50%, rgba(13,110,253,.35) 0%, rgba(13,110,253,0) 60%),
                 linear-gradient(180deg, var(--fp-navy-2), var(--fp-navy));}

.text-white-70{color: rgba(255,255,255,.7)!important;}

/* Search */
.search .form-control::placeholder{color:#cfe0ff; opacity:.6;}
.merchant-shop .nav-links{display:flex; gap:2rem !important; list-style:none !important; padding-left:0 !important; align-items:center}
.search .input-group-text{border-color: rgba(255,255,255,.25);}
.search .form-control:focus{box-shadow:none; border-color:#cfe0ff;}
/* Merchant-shop hero styles handled in scoped section below */
.hero-title{font-family:'Chakra Petch', sans-serif;}
@media (min-width: 992px){
  .hero-title{font-size:3.2rem;}
}

/* Mockups */
.merchant-shop .search-box{max-width:600px; margin:0 auto; display:flex; gap:1rem}
.mockups .laptop{width:100%;}
.merchant-shop .btn{padding:1rem 2rem; border:0; border-radius:8px; font-size:1rem; cursor:pointer; transition:transform .2s}

.merchant-shop .btn-primary{background:#ff6b6b !important; border:0 !important; color:#fff}
.orbit{position:absolute; border:1px solid rgba(255,255,255,.2); border-radius:50%;}
.merchant-shop .section-title{text-align:center !important; font-size:2rem; margin-bottom:3rem; color:#333}
.merchant-shop .categories{margin-bottom:4rem}
.merchant-shop .category-card{background:#fff !important; padding:2rem !important; border-radius:12px !important; text-align:center !important; box-shadow:0 4px 6px rgba(0,0,0,.1) !important; cursor:pointer; transition:transform .3s, box-shadow .3s}
/* Buttons */
.btn-primary{background:linear-gradient(135deg,var(--fp-primary),var(--fp-accent)); border:0;}
.merchant-shop .products{ /* grid handled by Bootstrap row/cols */ }
.merchant-shop .product-card{background:#fff !important; border:0 !important; border-radius:12px !important; overflow:hidden; box-shadow:0 4px 6px rgba(0,0,0,.1) !important; transition:transform .3s, box-shadow .3s}
footer{background:#fff;}
.merchant-shop .product-image{width:100%; height:200px; background:linear-gradient(135deg,#667eea 0%,#764ba2 100%) !important; display:flex; align-items:center; justify-content:center; font-size:4rem; color:#fff}
/* Product area */
.product-area{background:linear-gradient(180deg,#f8fbff, #ffffff 30%)}
.eyebrow{letter-spacing:.18em; font-weight:700; color:#7a8eb2; font-size:.8rem}

.product-card{background:#fff; border:1px solid #e7eefb; border-radius:1rem; box-shadow:0 12px 24px rgba(9,38,90,.06); transition:.2s ease;}
.product-card:hover{transform:translateY(-3px); box-shadow:0 18px 36px rgba(9,38,90,.12)}
.product-card .thumb img{height:110px; width:auto}
.product-card h5{font-family:'Chakra Petch', sans-serif; font-weight:700;}
.merchant-shop footer{background:#2d3748 !important; color:#fff !important; padding:3rem 2rem; margin-top:4rem}

.badge-soft{background:#e8f1ff; color:#0a58ca; border-radius:999px; padding:.2rem .5rem; font-weight:600; font-size:.7rem}
.btn-navy{background:#0b2a6b; border-color:#0b2a6b; color:#fff}
.btn-navy:hover{background:#0a255e; border-color:#0a255e; color:#fff}

/* FAQ */
.faq-area{background:linear-gradient(180deg,#ffffff 0%, #f7fbff 40%, #ffffff 100%)}
.faq-title{font-family:'Chakra Petch', sans-serif;}
.faq-card{background:#fff; border:1px solid #e7eefb; border-radius:1.2rem; box-shadow:0 24px 64px rgba(9,38,90,.12), 0 2px 6px rgba(9,38,90,.06); position:relative;}
.faq-card::before{content:""; position:absolute; inset:-30px; border-radius:inherit; box-shadow:0 80px 160px rgba(9,38,90,.08); z-index:-1;}
.faq-icon{width:92px; height:92px; border-radius:1rem; display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg,#eaf6ff,#ffffff); border:1px solid #e1eafb; position:relative;}
.faq-icon .bi{font-size:2.6rem; background:linear-gradient(135deg,#22c1c3,#0f5bd0); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
.faq-icon .overlay{position:absolute; right:8px; bottom:8px; font-size:1.4rem;}

/* Pricing band */
.pricing-band{background:linear-gradient(180deg, var(--fp-navy), #062050 80%); position:relative;}
.pricing-band .stacked-photos{position:relative; height:240px;}
.pricing-band .photo{position:absolute; border-radius:.75rem; box-shadow:0 12px 24px rgba(0,0,0,.25);}
.pricing-band .photo.top{top:-20px; left:20px; width:220px;}
.pricing-band .photo.bottom{bottom:-10px; right:0; width:360px;}

/* Contact area */
.contact-area{background:#ffffff}
.contact-chip{display:inline-flex; align-items:center; gap:.5rem; padding:.6rem 1rem; border:1px solid #dbe6f8; border-radius:.75rem; color:#0a255e; text-decoration:none; background:#f7fbff; transition:.2s ease;}
.contact-chip:hover{background:#eef5ff; border-color:#cfe0ff;}
.contact-chip .bi{color:#0f5bd0; font-size:1rem}
.social-icons .si{color:#0a255e; opacity:.8}
.social-icons .si:hover{opacity:1}
.footer-links ul li a{color:#5b6e8a; text-decoration:none}
.footer-links ul li a:hover{color:#0f5bd0}

/* Docs layout */
.docs-wrap{background:#f8fbff}
.docs-sidebar{position:sticky; top:80px}
.docs-sidebar .list-group-item{border:0; padding:.55rem .75rem; border-radius:.5rem; color:#0a255e}
.docs-sidebar .list-group-item.active{background:#eef5ff; color:#0f5bd0; font-weight:600}
.docs-content{line-height:1.7}
.docs-content p{color:#3f4f6a}
.list-steps{padding-left:1rem}
.list-steps li{margin-bottom:1rem}

/* Register layout */
.register-wrap{background:#f7fbff}
.register-left{background:linear-gradient(180deg, var(--fp-navy-2), var(--fp-navy)); position:relative; overflow:hidden}
.register-left .pattern{position:absolute; inset:0}
.register-left .p{position:absolute; border-radius:120px; border:18px solid transparent; opacity:.9}
.register-left .p1{width:420px; height:240px; border-color:#ffb400; left:40px; top:80px; transform:rotate(25deg)}
.register-left .p2{width:360px; height:220px; border-color:#22c1c3; left:220px; top:300px; transform:rotate(-20deg)}
.register-left .p3{width:280px; height:180px; border-color:#ff5252; left:520px; top:460px; transform:rotate(30deg)}
.register-left .p4{width:520px; height:280px; border-color:#22c1c3; left:-160px; top:420px; transform:rotate(-40deg)}
.register-left .p5{width:300px; height:180px; border-color:#ffb400; right:60px; top:160px; transform:rotate(-12deg)}
.register-left .p6{width:380px; height:220px; border-color:#ff5252; right:-120px; bottom:80px; transform:rotate(18deg)}
.register-left .navbar-brand{font-size:2rem}
.register-left h2{font-family:'Chakra Petch', sans-serif}
.register-left .lead{font-weight:600}

/* Register card tweaks */
.card .form-label{font-weight:600}
.input-group-lg .btn{border-color:#dee6f7}
.input-group-lg .btn:hover{background:#f7fbff}

/* Dashboard layout */
.dash-wrap{background:#f3f7ff}
.dash-sidebar{width:220px; min-height:100vh; background:#0b2a6b; position:relative}
.dash-sidebar .brand{font-family:'Chakra Petch', sans-serif; font-size:1.1rem}
.dash-sidebar .nav-link{color:#cfe0ff; padding:.55rem .9rem; border-radius:.5rem; margin:.15rem .5rem}
.dash-sidebar .nav-link:hover{background:rgba(255,255,255,.06); color:#fff}
.dash-sidebar .nav-link.active{background:#081b3f; color:#fff}
.dash-sidebar button.nav-link{background:none; border:0; width:100%; text-align:left}
.dash-sidebar .angle{transition:transform .2s ease}
.dash-sidebar .angle.rot{transform:rotate(180deg)}
.dash-sidebar .submenu{max-height:0; overflow:hidden; opacity:0; margin:.1rem .5rem .0rem; padding-left:.6rem; border-left:1px dashed rgba(255,255,255,.18); transition:max-height .2s ease, opacity .2s ease, margin .2s ease}
.dash-sidebar .submenu.open{max-height:240px; opacity:1; margin:.1rem .5rem .4rem}
.dash-sidebar .nav-link.sub{padding:.45rem .9rem; opacity:.9}
.dash-sidebar .nav-link.sub:hover{opacity:1}
.dash-sidebar .nav-link.sub::before{content:"•"; display:inline-block; margin-right:.5rem; color:#cfe0ff; opacity:.7}
.dash-sidebar .pattern .p{position:absolute; border-radius:120px; border:16px solid transparent; opacity:.5}
.dash-sidebar .p1{width:120px;height:70px;border-color:#22c1c3;left:-20px;bottom:140px;transform:rotate(20deg)}
.dash-sidebar .p2{width:160px;height:90px;border-color:#ffb400;left:40px;bottom:60px;transform:rotate(-30deg)}
.dash-sidebar .p3{width:140px;height:80px;border-color:#ff5252;left:-10px;bottom:10px;transform:rotate(15deg)}

.dash-main{min-height:100vh}
.dash-topbar{height:56px; background:#ffffff; border-bottom:1px solid #e6eefb; padding:0 1rem}
.dash-card{border:1px solid #e6eefb; box-shadow:0 6px 18px rgba(9,38,90,.06); border-radius:.75rem}
.chart-placeholder{height:260px; border:2px dashed #d5e2fb; border-radius:.75rem; display:flex; align-items:center; justify-content:center; color:#7a8eb2}
.chart-placeholder.large{height:360px}
.circle-placeholder{width:240px; height:240px; border:3px solid #ffb87a; border-radius:50%; opacity:.7}

/* Invoice page */
.invoice-wrap{background:#f4f7fb}
.invoice-card{background:#fff; border:1px solid #e6eefb; border-radius:1rem; width:100%; max-width:760px}
.invoice-header{background:linear-gradient(180deg, var(--fp-navy-2), var(--fp-navy)); color:#fff; border-top-left-radius:inherit; border-top-right-radius:inherit; padding:.85rem 1rem}
.invoice-header .company-name{color:#fff}
.invoice-header .lang-chip{color:#e8eefc; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); border-radius:.5rem; padding:.25rem .5rem}
.brand-logo{width:40px; height:40px; border-radius:.6rem; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.8rem; color:#fff; background:linear-gradient(135deg,var(--fp-primary),var(--fp-accent))}
.subhead{border-bottom:1px solid #e6eefb}
.amount-area{padding-top:1rem; padding-bottom:1rem}
.amount-display{font-family:'Chakra Petch', sans-serif; font-weight:700; font-size:2.4rem; color:#0a255e}

/* Methods */
.method-toggle{border:1px solid #e6eefb; border-radius:.75rem; padding:.65rem .9rem; background:#f8fbff; cursor:pointer}
.method-toggle .toggle-head{color:#0a255e; font-weight:600}
.method-list{max-height:220px; overflow:hidden; transition:max-height .2s ease, margin .2s ease, opacity .2s ease; opacity:1}
.method-list.open{max-height:0; margin-top:0; opacity:0}
.method-item{border:1px solid #e6eefb; border-radius:.75rem; padding:.75rem .9rem; background:#fff}
.method-item + .method-item{margin-top:.6rem}
.method-icon{width:36px; height:36px; border-radius:.6rem; display:flex; align-items:center; justify-content:center; background:#f2f6ff; color:#0f5bd0; font-size:1.2rem}

/* Pay button */
.btn-pay{background:#e53935; border:0; color:#fff; border-radius:.75rem; padding:.8rem 1rem; font-weight:700}
.btn-pay:hover{background:#d83430; color:#fff}

/* === Merchant Shop page-specific styles (scoped) === */
.merchant-shop *{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
.merchant-shop{
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height:1.6;
  color:#333;
}
.merchant-shop header{
  background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
  color:#fff;
  padding:1rem 0;
  position:sticky;
  top:0;
  z-index:100;
  box-shadow:0 2px 10px rgba(0,0,0,.1);
}
.merchant-shop nav{
  max-width:1200px;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 2rem;
}
.merchant-shop .logo{font-size:1.5rem; font-weight:bold}
.merchant-shop .nav-links{display:flex; gap:2rem; list-style:none; padding-left:0}
.merchant-shop .nav-links a{color:#fff; text-decoration:none; transition:opacity .3s}
.merchant-shop .nav-links a:hover{opacity:.8}
.merchant-shop .hero{
  background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
  color:#fff;
  padding:4rem 2rem;
  text-align:center;
}
.merchant-shop .hero h1{font-size:2.5rem; margin-bottom:1rem}
.merchant-shop .hero p{font-size:1.2rem; margin-bottom:2rem; opacity:.9}
.merchant-shop .search-box{max-width:600px; margin:0 auto; display:flex; gap:1rem}
.merchant-shop .search-box input{flex:1; padding:1rem; border:0; border-radius:8px; font-size:1rem}
.merchant-shop .btn{padding:1rem 2rem; border:0; border-radius:8px; font-size:1rem; cursor:pointer; transition:transform .2s}
.merchant-shop .btn:hover{transform:translateY(-2px)}
.merchant-shop .btn-primary{background:#ff6b6b; color:#fff}
.merchant-shop .container{max-width:1200px; margin:0 auto; padding:3rem 2rem}
.merchant-shop .section-title{text-align:center; font-size:2rem; margin-bottom:3rem; color:#333}
.merchant-shop .categories{margin-bottom:4rem}
.merchant-shop .category-card{background:#fff; padding:2rem; border-radius:12px; text-align:center; box-shadow:0 4px 6px rgba(0,0,0,.1); cursor:pointer; transition:transform .3s, box-shadow .3s}
.merchant-shop .category-card:hover{transform:translateY(-5px); box-shadow:0 8px 15px rgba(0,0,0,.2)}
.merchant-shop .category-icon{font-size:3rem; margin-bottom:1rem}
.merchant-shop .products{ /* grid handled by Bootstrap row/cols */ }
.merchant-shop .product-card{background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 4px 6px rgba(0,0,0,.1); transition:transform .3s, box-shadow .3s}
.merchant-shop .product-card:hover{transform:translateY(-5px); box-shadow:0 8px 15px rgba(0,0,0,.2)}
.merchant-shop .product-image{width:100%; height:200px; background:linear-gradient(135deg,#667eea 0%,#764ba2 100%); display:flex; align-items:center; justify-content:center; font-size:4rem; color:#fff}
.merchant-shop .product-info{padding:1.5rem}
.merchant-shop .product-title{font-size:1.2rem; font-weight:bold; margin-bottom:.5rem}
.merchant-shop .product-desc{color:#666; margin-bottom:1rem; font-size:.9rem}
.merchant-shop .product-footer{display:flex; justify-content:space-between; align-items:center}
.merchant-shop .price{font-size:1.5rem; font-weight:bold; color:#667eea}
.merchant-shop .btn-small{padding:.5rem 1rem; background:#667eea; color:#fff; border:0; border-radius:6px; cursor:pointer; transition:background .3s}
.merchant-shop .btn-small:hover{background:#5568d3}
.merchant-shop .rating{color:#ffd700; margin-bottom:.5rem}
.merchant-shop footer{background:#2d3748; color:#fff; padding:3rem 2rem; margin-top:4rem}
.merchant-shop .footer-content{max-width:1200px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:2rem}
.merchant-shop .footer-section h3{margin-bottom:1rem}
.merchant-shop .footer-section ul{list-style:none}
.merchant-shop .footer-section a{color:#a0aec0; text-decoration:none; transition:color .3s}
.merchant-shop .footer-section a:hover{color:#fff}
.merchant-shop .cart-icon{position:relative; cursor:pointer}
.merchant-shop .cart-count{position:absolute; top:-8px; right:-8px; background:#ff6b6b; color:#fff; border-radius:50%; width:20px; height:20px; display:flex; align-items:center; justify-content:center; font-size:.8rem}
@media (max-width:768px){
  .merchant-shop .nav-links{gap:1rem}
  .merchant-shop .hero h1{font-size:1.8rem}
  .merchant-shop .search-box{flex-direction:column}
}