/* Dynamic constants cards on quote backends — mirrors /quote/Constants/ layout. */

.constants-dynamic-grid{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:flex-start;
  gap:14px;
  min-width:0;
  width:100%;
}

.constants-dynamic-cards,
.constants-extra-cards{
  display:contents;
}

.constants-dynamic-card,
.constants-extra-cards > .card{
  flex:0 0 auto;
  width:max-content;
  min-width:0;
  max-width:100%;
  background:#fff;
  border:1px solid #dbe7f3;
  border-radius:17px;
  padding:15px;
  box-shadow:0 7px 22px rgba(15,76,129,.065);
  overflow:hidden;
  box-sizing:border-box;
}

.constants-dynamic-card h2,
.constants-extra-cards > .card h3{
  margin:0 0 11px;
  color:#0f4c81;
  font-size:20px;
  white-space:nowrap;
  overflow-wrap:anywhere;
}

.constants-dynamic-card .table-scroll{
  width:max-content;
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-radius:12px;
}

.constants-dynamic-card table{
  width:max-content;
  border-collapse:separate;
  border-spacing:0;
  border:1px solid #dbe3ef;
  border-radius:12px;
  overflow:hidden;
  background:#fff;
}

.constants-dynamic-card th,
.constants-dynamic-card td{
  padding:8px 10px;
  border-bottom:1px solid #e5eaf1;
  text-align:left;
  vertical-align:middle;
  white-space:nowrap;
  font-size:14px;
}

.constants-dynamic-card tbody tr:nth-child(even) td,
.constants-dynamic-card tbody tr:nth-child(even) th{
  background:#f6f9fd;
}

.constants-dynamic-card tr:last-child th,
.constants-dynamic-card tr:last-child td{
  border-bottom:0;
}

.constants-dynamic-card th{
  background:#f6f9fd;
  font-weight:700;
}

.constants-dynamic-card .matrix-table th,
.constants-dynamic-card .matrix-table td{
  text-align:center;
}

.constants-dynamic-card .matrix-table tbody th{
  text-align:right;
}

.constants-dynamic-card .matrix-table .group-head{
  background:#eef6ff;
  color:#0f4c81;
  font-size:15px;
}

.constants-dynamic-card .matrix-table .sub-head{
  background:#f8fbff;
  color:#334155;
}

.constants-dynamic-card .photo-cell{
  width:154px;
}

.constants-dynamic-card .constant-photo{
  display:block;
  width:126px;
  height:86px;
  object-fit:contain;
  border-radius:8px;
  background:#fff;
}

.constants-dynamic-card .card-note{
  margin-top:12px;
  padding:11px 12px;
  border:1px solid #dbe3ef;
  border-radius:12px;
  background:#f8fbff;
  color:#334155;
  line-height:1.55;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-break:break-word;
  max-width:100%;
}

.constants-dynamic-card .why-us-lead{
  margin:-2px 0 12px;
  color:#64748b;
  font-size:14px;
  line-height:1.45;
}

.constants-dynamic-card .why-us-name{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid #d5e5f4;
  border-radius:11px;
  background:linear-gradient(180deg,#f8fbff 0%,#eef5fb 100%);
  color:#0f4c81;
  padding:9px 13px;
  font-weight:800;
  text-decoration:none;
}

.constants-readonly-value{
  display:inline-block;
  color:#1f2937;
  line-height:1.45;
}

.constants-readonly-description{
  display:block;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-break:break-word;
  max-width:min(70ch,100%);
}

@media (max-width:900px){
  .constants-dynamic-card,
  .constants-extra-cards > .card{
    width:100%;
    min-width:0;
    max-width:100%;
    flex:1 1 100%;
  }

  .constants-dynamic-card h2,
  .constants-extra-cards > .card h3{
    white-space:normal;
  }

  .constants-dynamic-card .table-scroll,
  .constants-dynamic-card table{
    width:100%;
    max-width:100%;
  }
}