/* /database/ pages (mu-plugins/product-database.php); lists use product-list/style.css */
.updb { padding: 0 8px 30px; }
.updb h2 { margin: 28px 0 10px; padding-bottom: 4px; border-bottom: 1px solid #d9e3ea; }
.updb-crumbs { font-size: 14px; color: #6b7a86; margin: 4px 0 2px; }
.updb-crumbs a { text-decoration: none; }
.updb-intro { font-size: 17px; line-height: 1.5; max-width: 52em; }
.updb-count { font-size: 15px; color: #44525c; margin: 6px 0 10px; }
.updb-note { font-size: 13px; color: #6b7a86; }

.updb-form { background: #eef4f8; border: 1px solid #d9e3ea; border-radius: 8px; margin: 14px 0 18px; }
.updb-form > summary { cursor: pointer; padding: 10px 14px; font-weight: 600; color: #046fb3; }
.updb-form form { padding: 2px 14px 14px; }
.updb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 14px; }
.updb-grid label { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: #44525c; }
.updb-grid .updb-wide { grid-column: 1 / -1; }
.updb-grid input, .updb-grid select { font: inherit; font-size: 15px; padding: 6px 8px; border: 1px solid #c3d2dd; border-radius: 5px; background: #fff; width: 100%; box-sizing: border-box; color: #1d2a33; }
.updb-checks { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; font-size: 14px; }
.updb-checks label { display: flex; gap: 6px; align-items: flex-start; }
.updb-buttons { margin: 12px 0 0; display: flex; gap: 14px; align-items: center; }
.updb-buttons button { font: inherit; font-weight: 600; font-size: 15px; background: #046fb3; color: #fff; border: 0; border-radius: 5px; padding: 8px 18px; cursor: pointer; }
.updb-buttons button:hover { background: #035a91; }

.updb-browse { list-style: none !important; margin: 0; padding: 0; columns: 4 160px; column-gap: 20px; }
.updb-browse li { list-style: none !important; margin: 0 0 4px; break-inside: avoid; font-size: 15px; }
.updb-browse li a { text-decoration: none; }
.updb-browse li a:hover { text-decoration: underline; }
.updb-browse li span { color: #8a98a3; font-size: 13px; }
.updb-browse-wide { columns: 3 220px; }

.updb-pager { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0; }
.updb-pager a, .updb-pager span { padding: 5px 10px; border: 1px solid #d9e3ea; border-radius: 5px; text-decoration: none; font-size: 14px; }
.updb-pager span[aria-current] { background: #046fb3; color: #fff; border-color: #046fb3; }
.updb-pager span:not([aria-current]) { border: 0; }

/* compare */
.updb-cmp-add { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; margin: 6px 0 14px; }
.updb-cmp-add label { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: #44525c; }
.updb-cmp-add input { font: inherit; font-size: 15px; padding: 6px 8px; border: 1px solid #c3d2dd; border-radius: 5px; min-width: 260px; }
.updb-cmp-add button { font: inherit; font-weight: 600; font-size: 15px; background: #046fb3; color: #fff; border: 0; border-radius: 5px; padding: 7px 16px; cursor: pointer; }
.updb-cmp .upl-table td { white-space: nowrap; }
.updb-cmp .upl-table td.upl-c-name, .updb-cmp .upl-table td.upl-c-cpu, .updb-cmp .upl-table td.upl-c-gpu, .updb-cmp .upl-table td.upl-c-os { white-space: normal; min-width: 8em; }
.updb-cmp .updb-best { background: #e3f3e8; font-weight: 600; color: #1d6b3a; }
.updb-cmp .updb-sub, .updb-cmp .updb-cmp-status { font-size: 12px; color: #6b7a86; font-weight: normal; }
.updb-cmp .upl-c-remove a { display: inline-block; width: 24px; height: 24px; line-height: 22px; text-align: center; border-radius: 12px; color: #8a98a3; text-decoration: none; font-size: 18px; }
.updb-cmp .upl-c-remove a:hover { background: #fbe3e0; color: #c0392b; }
.updb-cmp .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); }
@media (max-width: 640px) {
  .updb-cmp .upl-table td { white-space: normal; }
  .updb-cmp .upl-table td:not(.upl-c-image):not(.upl-c-name):not(.upl-c-remove)::before { content: attr(data-label) ": "; color: #777; font-weight: normal; }
  .updb-cmp .upl-table tr { position: relative; }
  .updb-cmp .upl-table td.upl-c-remove { position: absolute; top: 6px; right: 0; }
  .updb-cmp-add input { min-width: 0; width: 100%; }
}
@media (max-width: 640px) { .updb-cmp .upl-table td.upl-c-image { grid-row: span 20; } }

/* browse lists (manufacturers / processors) */
.updb-embedded { padding: 0; }
.updb-more { margin: 8px 0 0; font-weight: 600; }
.updb-more a { text-decoration: none; }
.updb-letters { display: flex; flex-wrap: wrap; gap: 4px; margin: 10px 0 4px; }
.updb-letters a { padding: 3px 9px; border: 1px solid #d9e3ea; border-radius: 5px; text-decoration: none; font-size: 14px; background: #fff; }
.updb-letters a:hover { background: #eef4f8; }
.updb h2.updb-letter { margin-top: 18px; }
.updb .updb-h2-count { font-size: 14px; font-weight: normal; color: #8a98a3; }
.updb-cards { list-style: none !important; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.updb .updb-cards, .updb ul.updb-browse { padding-left: 0 !important; margin-left: 0 !important; }
.updb .updb-cards li, .updb ul.updb-browse li { list-style: none !important; margin: 0 !important; padding: 0 !important; background: none !important; }
.updb .updb-cards li::before, .updb ul.updb-browse li::before { content: none !important; display: none !important; }
.updb-cards a { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; background: #eef4f8; border-radius: 6px; text-decoration: none; height: 100%; box-sizing: border-box; }
.updb-cards a:hover { background: #e1edf5; }
.updb-cards strong { color: #046fb3; font-size: 15px; line-height: 1.25; }
.updb-cards span { color: #5b6b77; font-size: 13px; }