/* Eiibso - Public site styles */

:root{
  --gn-primary:#1E3A8A;
  --gn-primary-dark:#152C69;
  --gn-primary-light:#E8EEFB;
  --gn-accent:#06B6D4;
  --gn-ink:#10241d;
  --gn-muted:#6b7a75;
  --gn-border:#e7ede9;
  --gn-danger:#e5484d;
  --gn-radius:14px;
  --gn-radius-lg:20px;
  font-size:16px;
}

*{box-sizing:border-box;}

body{
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--gn-ink);
  background:#f7faf8;
}

a{text-decoration:none;color:inherit;}

.gn-navbar{
  background:#fff;
  border-bottom:1px solid var(--gn-border);
  position:sticky;top:0;z-index:1030;
}
.gn-navbar .logo-mark{
  width:38px;height:38px;border-radius:10px;
  background:linear-gradient(135deg,var(--gn-primary),var(--gn-primary-dark));
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;
}
.brand-logo-full{height:34px;width:auto;max-width:150px;object-fit:contain;}
.brand-logo-mark{height:36px;width:36px;object-fit:contain;}
.login-brand .brand-logo-full{height:46px;max-width:220px;}
.gn-navbar .brand-name{font-weight:800;font-size:1.15rem;letter-spacing:-.01em;}
.gn-navbar .nav-link{font-weight:600;color:var(--gn-ink);}
.gn-search-form input{border-radius:999px 0 0 999px;border-right:none;}
.gn-search-form button{border-radius:0 999px 999px 0;background:var(--gn-primary);border-color:var(--gn-primary);color:#fff;}
.cart-badge{position:absolute;top:-6px;right:-8px;background:var(--gn-accent);color:#10241d;border-radius:999px;font-size:.65rem;padding:1px 6px;font-weight:700;}

.hero{
  background:linear-gradient(135deg,var(--gn-primary) 0%,var(--gn-primary-dark) 100%);
  color:#fff;border-radius:0 0 32px 32px;padding:48px 0 64px;
}
.hero h1{font-weight:800;font-size:2.1rem;}
.hero p{opacity:.9;}

.gn-card{
  background:#fff;border:1px solid var(--gn-border);border-radius:var(--gn-radius);
  transition:transform .15s ease, box-shadow .15s ease;overflow:hidden;
}
.gn-card:hover{transform:translateY(-3px);box-shadow:0 18px 34px -18px rgba(16,36,29,.25);}

.category-pill{
  display:inline-flex;align-items:center;gap:6px;padding:.4rem .9rem;border-radius:999px;
  background:#fff;border:1px solid var(--gn-border);font-weight:600;font-size:.85rem;color:var(--gn-ink);
  white-space:nowrap;
}
.category-pill.active,.category-pill:hover{background:var(--gn-primary);color:#fff;border-color:var(--gn-primary);}

.product-thumb{aspect-ratio:1/1;object-fit:cover;width:100%;background:#f0f4f2;}
.product-name{font-weight:700;font-size:.95rem;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.5em;}
.seller-tag{font-size:.72rem;color:var(--gn-muted);margin-top:4px;display:flex;align-items:center;gap:4px;}
.seller-tag i{color:var(--gn-primary);font-size:.75rem;}
.price{font-weight:800;color:var(--gn-primary-dark);}
.price-old{text-decoration:line-through;color:var(--gn-muted);font-weight:500;font-size:.85rem;}
.badge-discount{background:var(--gn-danger);color:#fff;font-weight:700;}
.badge-featured{background:var(--gn-accent);color:#10241d;font-weight:700;}

/* Chat with seller */
.btn-chat-seller{font-weight:600;}
.chat-box{height:320px;max-height:60vh;overflow-y:auto;padding:14px;background:#f7faf8;}
.chat-msg{display:flex;margin-bottom:8px;}
.chat-msg .bubble{max-width:78%;padding:.5rem .8rem;border-radius:14px;font-size:.88rem;line-height:1.35;word-wrap:break-word;}
.chat-msg.theirs{justify-content:flex-start;}
.chat-msg.theirs .bubble{background:#fff;border:1px solid var(--gn-border);border-bottom-left-radius:4px;}
.chat-msg.mine{justify-content:flex-end;}
.chat-msg.mine .bubble{background:var(--gn-primary);color:#fff;border-bottom-right-radius:4px;}
.inbox-item{display:block;padding:12px 14px;border-radius:12px;border:1px solid var(--gn-border);margin-bottom:8px;background:#fff;}
.inbox-item:hover{border-color:var(--gn-primary);}
.inbox-item.active{border-color:var(--gn-primary);background:var(--gn-primary-light);}
.inbox-item .unread-dot{width:9px;height:9px;border-radius:50%;background:var(--gn-primary);display:inline-block;}

/* Floating "Chat with Seller" bubble */
.chat-fab{
  position:fixed;right:20px;bottom:20px;width:60px;height:60px;border-radius:50%;
  background:linear-gradient(135deg,var(--gn-primary),var(--gn-primary-dark));color:#fff;border:none;
  display:flex;align-items:center;justify-content:center;font-size:1.5rem;
  box-shadow:0 10px 30px -6px rgba(18,92,64,.55);z-index:1050;cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease;
}
.chat-fab:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 14px 34px -6px rgba(18,92,64,.65);color:#fff;}
.chat-fab.is-open{background:#fff;color:var(--gn-primary-dark);border:1px solid var(--gn-border);}
.chat-fab-ping{
  position:absolute;top:-3px;right:-3px;width:14px;height:14px;border-radius:50%;
  background:var(--gn-accent);border:2px solid #fff;
  animation:gnPing 1.8s ease-in-out infinite;
}
@keyframes gnPing{0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(1.25);opacity:.7;}}

.chat-fab-panel{
  position:fixed;right:20px;bottom:96px;width:360px;max-width:calc(100vw - 32px);
  height:480px;max-height:calc(100vh - 140px);
  background:#fff;border-radius:20px;box-shadow:0 24px 60px -12px rgba(16,36,29,.35);
  display:flex;flex-direction:column;overflow:hidden;z-index:1049;
  opacity:0;visibility:hidden;transform:translateY(16px) scale(.97);transform-origin:bottom right;
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
}
.chat-fab-panel.open{opacity:1;visibility:visible;transform:translateY(0) scale(1);}

.chat-fab-header{
  background:linear-gradient(135deg,var(--gn-primary),var(--gn-primary-dark));color:#fff;
  padding:14px 16px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;
}
.chat-fab-avatar{
  width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;font-weight:800;flex-shrink:0;
}
.chat-fab-status{font-size:.74rem;opacity:.9;display:flex;align-items:center;gap:5px;}
.chat-fab-status .dot{width:7px;height:7px;border-radius:50%;background:#5be08a;display:inline-block;}
.chat-fab-close{background:rgba(255,255,255,.15);border:none;color:#fff;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.85rem;flex-shrink:0;}
.chat-fab-close:hover{background:rgba(255,255,255,.28);}

.chat-fab-body{flex:1;height:auto;min-height:0;border-radius:0;background:#f7faf8;}
.chat-fab-footer{display:flex;gap:8px;padding:12px;border-top:1px solid var(--gn-border);flex-shrink:0;background:#fff;}
.chat-fab-send{width:44px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:12px;}

@media (max-width:480px){
  .chat-fab-panel{
    right:12px;left:12px;bottom:88px;width:auto;max-width:none;height:min(70vh,540px);
  }
  .chat-fab{right:16px;bottom:16px;}
}

.biz-logo{width:64px;height:64px;border-radius:16px;object-fit:cover;border:1px solid var(--gn-border);background:#fff;}
.biz-cover{height:180px;object-fit:cover;width:100%;border-radius:var(--gn-radius-lg);background:linear-gradient(135deg,#d8f0e3,#eef6f0);}

.status-badge{font-weight:700;font-size:.72rem;padding:.35em .7em;border-radius:999px;text-transform:capitalize;}

.gn-footer{background:#0B1E4A;color:#C9D6F2;padding:48px 0 24px;margin-top:64px;}
.gn-footer a{color:#e7f3ec;}
.gn-footer h6{color:#fff;font-weight:700;}

.btn-gn{background:var(--gn-primary);border-color:var(--gn-primary);color:#fff;font-weight:600;}
.btn-gn:hover{background:var(--gn-primary-dark);border-color:var(--gn-primary-dark);color:#fff;}
.btn-outline-gn{border-color:var(--gn-primary);color:var(--gn-primary);font-weight:600;}
.btn-outline-gn:hover{background:var(--gn-primary);color:#fff;}

.empty-state{text-align:center;padding:60px 20px;color:var(--gn-muted);}
.empty-state .icon{font-size:2.6rem;margin-bottom:10px;}

.toast-container{z-index:2000;}

/* Mobile-first tweaks */
@media (max-width:768px){
  .hero{padding:32px 0 48px;border-radius:0 0 22px 22px;}
  .hero h1{font-size:1.5rem;}
  .biz-cover{height:120px;}
  .gn-card{border-radius:12px;}
  .btn-chat-seller{width:100%;justify-content:center;display:inline-flex;align-items:center;}
}

@media (max-width:480px){
  /* Stack each cart line into two rows instead of squeezing everything into one,
     which was overflowing / getting cramped on narrow phones. */
  .panel-cart .cart-row{flex-wrap:wrap;}
  .panel-cart .cart-row .cart-row-meta{width:100%;order:1;}
  .panel-cart .cart-row .cart-qty{order:2;}
  .panel-cart .cart-row .cart-row-total{order:3;}
  .panel-cart .cart-row .btn-remove-item{order:4;}

  /* Cart order-summary box used a fixed 280px min-width, which can
     exceed the available content width on the narrowest phones. */
  .panel-cart ~ .d-flex.justify-content-end > div[style*="min-width"]{
    min-width:0 !important;width:100%;
  }
}