/* /css/topnav.css */
.topnav {
  background-color:#fff; 
  color:#000;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 20px; font-size:14px;
  
  --blue:#1f3b74;
      --blue-2:#274d9b;

      --green:#1d7a59;
      --green-2:#176248;
}
.topnav .nav-left { display:flex; align-items:center; }
.topnav .burger { font-size:22px; margin-right:10px; cursor:default; }
.topnav .brand { font-size:35px; font-weight:bold; }
.topnav .brand-link { color:#fff;text-decoration: none;}
.topnav .brand span { font-size:15px; font-weight:normal; display:block; margin-top:-2px; color:#4ca3e0;}
.topnav .nav-right { display:flex; align-items:center; gap:12px; }
.topnav .nav-right a { color:var(--blue-2); text-decoration:none; font-weight:bold; }


/*  Below styles are for Modal HTML (popup) */
.hidden { display: none !important; }

.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:1000;backdrop-filter:blur(1px)
}
.modal{
  position:fixed;z-index:1001;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(92vw,520px);background:#fff;border-radius:10px;box-shadow:0 10px 40px rgba(0,0,0,.2);
  padding:20px 22px
}
.modal h2{margin:6px 0 12px 0;font-size:26px;color: black;}
.modal-close{
  position:absolute;right:10px;top:8px;border:none;background:transparent;font-size:22px;cursor:pointer
}
.field{display:block;margin:12px 0}
.field span{display:block;font-size:12px;color:#6b7280;margin-bottom:6px}
.field input{width:100%;padding:10px;border:1px solid #e5e7eb;border-radius:8px;font-size:14px}
.pw-wrap{position:relative}
.pw-wrap input{padding-right:44px}
.pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:none;background:transparent;cursor:pointer}
.row{display:flex;justify-content:space-between;align-items:center;margin:10px 0}
.row.small{font-size:16px;color: black;}
.row.small a{color: #0b5ed7;font-weight: bold;}
.muted{color:#6b7280;text-decoration:none}
.highestBid{color:#e51515;text-decoration:solid;font-weight: bold;}
.totalMsrpDisplay{color:var(--brand);text-decoration:solid;font-weight: bold;}
.btn{padding:10px 14px;border-radius:8px;border:1px solid #e5e7eb;background:#fff;cursor:pointer;font-weight:700}
.btn-primary{background:#2563eb;border-color:#2563eb;color:#fff}
.btn-block{width:100%}
.auth-msg{margin-top:10px;font-size:13px}

/* User menu wrapper */
.user-menu {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
  /*color: var(--text); */
  color:3fff;
  margin-left: 20px;
  font-weight: 600;
}

.user-menu i {
  margin-left: 6px;
  font-size: 14px;
  color: var(--green); 
  /* color: #fff;*/
}

/* Dropdown panel */
.user-dropdown {
  position: absolute;
  top: 36px;
  right: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 15px;
  padding: 10px 0;
  box-shadow: 0 6px 15px rgba(0,0,0,0.15);
  width: 200px;
  z-index: 9999;
  background: #eaf6ff;
  color: var(--blue-2);
}

.user-dropdown a {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
}

.user-dropdown a i {
  margin-right: 10px;
  color: var(--brand);
}

.user-dropdown a:hover {
  background: var(--bg);
}

/* Hide helper */
.hidden {
  display: none !important;
}

.chip {
  background: #eaf6ff;
  color: var(--blue-2);
  border-radius: 999px;
  padding: 15px 30px;
  border: 1px solid #cde9ff;
  font-size: 15px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.chip-back {
  background: #eaf6ff;
  color: var(--blue-2);
  border-radius: 999px;
  padding: 6px 6px;
  border: 1px solid #cde9ff;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.chip-logo {
  background: #fff;
  color: var(--blue-2);
  border-radius: 15px;
  padding: 10px 10px;
  border: 1px solid #cde9ff;
  font-size: 15px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 50px;
  height: 50px;
  overflow: hidden;
}

.chip-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;   /* keeps full image visible */
}


/**** 	Password Reset View in Topnav.html ***/
.auth-msg.ok { color: #0f7a3d; font-weight:700; }
.auth-msg.err { color: crimson; font-weight:700; }

.badge{
    margin-left: 8px;
    background:#ff3b30;
    color:#fff;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 12px;
    line-height: 1.4;
    min-width: 22px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
  }
.badge.hidden { display:none; }


/* =========================
   Mobile responsive topnav
   ========================= */

/* Make logo image responsive without inline style fights */
.brand img{
  max-height: 70px;
  width: auto;
  display: block;
}

/* Keep header aligned */
.topnav{
  position: sticky;
  top: 0;
  z-index: 999;
  gap: 10px;
}

.greet{
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
}

/* Burger should be clickable */
.topnav .burger{
  cursor: pointer;
  user-select: none;
}

/* ===== Mobile breakpoint ===== */
@media (max-width: 768px){

  .topnav{
    padding: 10px 12px;
  }

  .brand img{
    max-height: 44px; /* smaller logo */
  }

  /* Turn right side into dropdown panel */
  .topnav .nav-right{
    position: absolute;
    left: 12px;
    right: 12px;
    top: 64px;
    background: #fff;
    border: 1px solid #cde9ff;
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(0,0,0,.12);
    padding: 10px;
    display: none;              /* hidden by default */
    flex-direction: column;     /* stack items */
    align-items: stretch;
    gap: 10px;
  }

  /* when opened */
  .topnav .nav-right.open{
    display: flex;
  }

  /* Chips/buttons take full width on mobile */
  .chip{
    width: 100%;
    justify-content: space-between;
    padding: 12px 14px;
    font-size: 14px;
  }

  /* Dropdown should not overflow screen */
  .user-dropdown{
    position: static;  /* so it flows inside the panel */
    width: 100%;
    top: auto;
    right: auto;
    margin-top: 8px;
  }

  /* Make dropdown links easier to tap */
  .user-dropdown a{
    padding: 12px 14px;
    font-size: 14px;
  }
}