:root{
  --tdsx-blue:#003f5e;
  --tdsx-teal:#00848a;
  --tdsx-green:#8bc53f;
  --tdsx-gray:#f4f6f8;
}

*{box-sizing:border-box;font-family:Helvetica,Arial,sans-serif}

body{
  margin:0;
  background:linear-gradient(135deg,var(--tdsx-blue)0%,var(--tdsx-teal)100%);
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  color:#fff;
}

.container{
  width: min(92vw,500px);
  background:#fff;
  color:#222;
  border-radius:12px;
  padding:32px 40px;
  box-shadow:0 8px 24px rgba(0,0,0,.15);
}

header{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:24px;
}

header img{
  height:48px;
  object-fit:contain;
}

header h1{
  font-size:1.5rem;
  margin:0;
  color:var(--tdsx-blue);
}

label{display:block;margin-block:12px 4px;font-weight:600;color:var(--tdsx-blue)}
input{
  width:100%;
  padding:10px 12px;
  border:2px solid var(--tdsx-blue);
  border-radius:8px;
  font-size:1rem;
}
button{
  margin-top:20px;
  width:100%;
  background:var(--tdsx-teal);
  border:none;
  color:#fff;
  padding:12px;
  font-size:1rem;
  border-radius:8px;
  cursor:pointer;
  transition:background .2s;
}
button:hover{background:var(--tdsx-green)}

.chatbox{
  border:2px solid var(--tdsx-blue);
  height:340px;
  overflow-y:auto;
  padding:12px;
  border-radius:8px;
  background:var(--tdsx-gray);
}

.player{text-align:right;color:#111;margin:6px 0}
.seller{text-align:left;color:var(--tdsx-blue);margin:6px 0}

.info-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-weight:600;
  margin-bottom:12px;
}

table{
  width:100%;
  border-collapse:collapse;
  margin-bottom:16px;
}
table th,table td{
  border:1px solid #ddd;
  padding:8px;
  text-align:left;
}
table th{
  background:var(--tdsx-blue);
  color:#fff;
}
.hero-logo{
  height:48px;
  margin-bottom:12px;
}


.partners{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  font-size:0.9rem;
  color:#555;
  margin-top:18px;
}

/* ─── HEADER LAYOUT FIX ─────────────────────────────────────────── */
header {
  display: flex;
  flex-direction: column;   /* stack logo + title vertically */
  align-items: center;
  text-align: center;
  gap: 12px;                /* space between logo & title */
}

.hero-logo {                /* TD SYNNEX logo */
  width: 100%;              /* fill the card width */
  height: auto;
  max-height: 80px;         /* keep it reasonable */
}

/* ─── PARTNER “POWERED BY” BLOCK ────────────────────────────────── */
.partners {
  margin-top: 20px;         /* space below the button */
  text-align: center;
}

.partners span {            /* the small “powered by” text */
  display: block;
  font-size: 0.85rem;
  color: #666;
  margin-bottom: 6px;
}

.partners img {
  height: 70px;             /* equal logo height */
  margin-inline: 6px;       /* little horizontal breathing room */
  object-fit: contain;
}