/* Styles specific to brokers accordion and logos */

.broker-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:14px}

details.broker-card{background:white;border-radius:12px;padding:0;box-shadow:0 6px 20px rgba(12,22,63,0.04);overflow:hidden}

details.broker-card summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:14px 16px}

details.broker-card summary::-webkit-details-marker{display:none}

/* Broker page header with logo */
.broker-header {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 32px;
  padding: 24px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.broker-logo {
  width: 140px;
  height: auto;
  flex-shrink: 0;
}

.broker-header h1 {
  margin: 0 0 8px 0;
  font-size: 36px;
  color: #0f172a;
}

.broker-subtitle {
  margin: 0;
  color: #475569;
  font-size: 16px;
  line-height: 1.5;
}
.logo{width:86px;height:28px;object-fit:contain;border-radius:6px}

.broker-title{font-weight:700;color:#071133}

.broker-body{padding:12px 16px 18px;color:#334155;background:linear-gradient(180deg,#fbfdff,#ffffff)}

details.broker-card[open]{transform:translateY(-6px);box-shadow:0 18px 40px rgba(12,22,63,0.08);transition:all .22s ease}

@media(max-width:980px){
	.broker-grid{grid-template-columns:1fr}
	.broker-header{gap:20px;padding:20px}
	.broker-logo{width:120px}
	.broker-header h1{font-size:28px}
}

@media(max-width:640px){
	.broker-header{flex-direction:column;text-align:center;gap:16px;padding:18px 16px}
	.broker-logo{width:100px}
	.broker-header h1{font-size:24px}
	.broker-subtitle{font-size:15px}
	.logo{width:60px;height:20px}
	details.broker-card summary{padding:12px 14px;gap:10px}
	.broker-body{padding:10px 14px 16px}
}