/* =========================================================
   ABB Display Bridge – Frontend CSS (UPDATED)
   Goal:
   - Reuse the old ABB Platform frontend look (cards/top3/single)
   - Prevent CSS conflicts with ABB core plugin (same class names)
   How:
   - Scope ALL “old good look” rules under:
       .abb-bridge-wrap  (preferred)
       .abb-bridge       (compat)
   - Add a careful fallback only when Bridge-specific structure exists
     (so we don't break ABB core layouts).
   ========================================================= */


/* =========================================================
   1) SCOPED (PREFERRED) — applies only inside Bridge output
   ========================================================= */

/* Container */
.abb-bridge-wrap .abb-wrap,
.abb-bridge .abb-wrap {
  display: grid;
  gap: 32px; /* ↑ spacing between ABB blocks */
}

/* Add vertical rhythm when abb blocks are adjacent to headings/text */
.abb-bridge-wrap .abb-wrap + .abb-wrap,
.abb-bridge .abb-wrap + .abb-wrap {
  margin-top: 24px;
}

.abb-bridge-wrap .abb-wrap h2,
.abb-bridge-wrap .abb-wrap h3,
.abb-bridge-wrap .abb-wrap h4,
.abb-bridge .abb-wrap h2,
.abb-bridge .abb-wrap h3,
.abb-bridge .abb-wrap h4 {
  margin-top: 8px;
}

/* Card */
.abb-bridge-wrap .abb-card,
.abb-bridge .abb-card {
  position: relative;
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 20px;
  align-items: center;
  padding: 24px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 2px 0 rgba(20,20,20,.03), 0 0 0 1px rgba(30,30,30,.06) inset;
  margin-bottom: 12px; /* ↑ spacing within table lists */
}

@media (max-width:680px){
  .abb-bridge-wrap .abb-card,
  .abb-bridge .abb-card{
    grid-template-columns: 1fr;
  }
}

.abb-bridge-wrap .abb-badge,
.abb-bridge .abb-badge {
  position: absolute;
  left: 16px;
  top: -12px;
  background: #2f7df6;
  color: #fff;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 8px;
  box-shadow: 0 6px 0 rgba(47,125,246,.25);
  font-size: 13px;
  line-height: 1;
}

.abb-bridge-wrap .abb-media,
.abb-bridge .abb-media{
  width: 140px;
  height: 140px;
  border-radius: 12px;
  overflow: hidden;
  background: #f4f6f8;
  display: flex;
  align-items: center;
  justify-content: center;
}

.abb-bridge-wrap .abb-media img,
.abb-bridge .abb-media img{
  max-width: 100%;
  max-height: 100%;
  display: block;
}

/* (Core ABB uses .abb-fullclick; Bridge usually doesn't, but safe) */
.abb-bridge-wrap .abb-fullclick,
.abb-bridge .abb-fullclick{
  position: absolute;
  inset: 0;
}

@media (max-width:680px){
  .abb-bridge-wrap .abb-media,
  .abb-bridge .abb-media{
    width: 100%;
    height: auto;
  }
  .abb-bridge-wrap .abb-media img,
  .abb-bridge .abb-media img{
    width: 100%;
    height: auto;
  }
}

/* Title / text:
   Bridge markup uses h3 inside .abb-body, not .abb-title.
   We style both for compatibility. */
.abb-bridge-wrap .abb-title,
.abb-bridge .abb-title{
  font-size: 22px;
  line-height: 1.25;
  margin: 0 0 8px;
  font-weight: 800;
}

.abb-bridge-wrap .abb-title a,
.abb-bridge .abb-title a{
  text-decoration: none;
  color: #1f4ea8;
}

.abb-bridge-wrap .abb-title a:hover,
.abb-bridge .abb-title a:hover{
  text-decoration: underline;
}

/* Bridge card title is <h3> */
.abb-bridge-wrap .abb-card h3,
.abb-bridge .abb-card h3{
  font-size: 22px;
  line-height: 1.25;
  margin: 0 0 8px;
  font-weight: 800;
}

.abb-bridge-wrap .abb-card h3 a,
.abb-bridge .abb-card h3 a{
  text-decoration: none;
  color: #1f4ea8;
}

.abb-bridge-wrap .abb-card h3 a:hover,
.abb-bridge .abb-card h3 a:hover{
  text-decoration: underline;
}

.abb-bridge-wrap .abb-desc,
.abb-bridge .abb-desc{
  color: #4a5568;
  margin: 0 0 12px;
}

/* Bridge description is typically <p> inside card */
.abb-bridge-wrap .abb-card p,
.abb-bridge .abb-card p{
  color: #4a5568;
  margin: 0 0 12px;
}

.abb-bridge-wrap .abb-bestfor,
.abb-bridge .abb-bestfor{
  color: #2d3748;
  margin: 0 0 14px;
}

/* Button:
   Core ABB uses .abb-button
   Bridge uses .abb-btn
   We style both to match the old look. */
.abb-bridge-wrap .abb-button,
.abb-bridge-wrap .abb-btn,
.abb-bridge .abb-button,
.abb-bridge .abb-btn{
  display: inline-block;
  padding: 14px 18px;
  border-radius: 14px;
  background: linear-gradient(180deg,#ff6d6d 0%,#ff4b4b 60%,#ff6262 100%);
  color: #fff !important;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 10px 0 rgba(255,75,75,.28);
  transition: transform .06s ease, box-shadow .06s ease, opacity .2s ease;
  border: none; /* Bridge .abb-btn originally had border:1px solid #111 */
}

.abb-bridge-wrap .abb-button:hover,
.abb-bridge-wrap .abb-btn:hover,
.abb-bridge .abb-button:hover,
.abb-bridge .abb-btn:hover{
  transform: translateY(1px);
  box-shadow: 0 8px 0 rgba(255,75,75,.28);
  opacity: .95;
}

.abb-bridge-wrap .abb-button:active,
.abb-bridge-wrap .abb-btn:active,
.abb-bridge .abb-button:active,
.abb-bridge .abb-btn:active{
  transform: translateY(2px);
  box-shadow: 0 6px 0 rgba(255,75,75,.28);
}

@media (max-width:680px){
  .abb-bridge-wrap .abb-button,
  .abb-bridge-wrap .abb-btn,
  .abb-bridge .abb-button,
  .abb-bridge .abb-btn{
    width: 100%;
    text-align: center;
  }
}

/* Single detail & spacing between blocks */
.abb-bridge-wrap .abb-single,
.abb-bridge .abb-single{
  margin-bottom: 24px; /* ↑ spacing between singles */
}

.abb-bridge-wrap .abb-single-details,
.abb-bridge .abb-single-details{
  margin-top: 14px;
  padding: 18px;
  border: 1px solid #e6e7ea;
  border-radius: 12px;
  background: #fbfbfc;
}

.abb-bridge-wrap .abb-list,
.abb-bridge .abb-list{
  margin: 10px 0 16px 20px;
}

.abb-bridge-wrap .abb-pros-cons,
.abb-bridge .abb-pros-cons{
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr 1fr;
}

@media (max-width:680px){
  .abb-bridge-wrap .abb-pros-cons,
  .abb-bridge .abb-pros-cons{
    grid-template-columns: 1fr;
  }
}

.abb-bridge-wrap .abb-specs,
.abb-bridge .abb-specs{
  width: 100%;
  border-collapse: collapse;
}

.abb-bridge-wrap .abb-specs th,
.abb-bridge-wrap .abb-specs td,
.abb-bridge .abb-specs th,
.abb-bridge .abb-specs td{
  border: 1px solid #e6e7ea;
  padding: 8px 10px;
  text-align: left;
}

/* Bridge chips use .abb-meta as a div, but single_detail uses .abb-meta as UL.
   Keep this rule light to avoid breaking chips layout. */
.abb-bridge-wrap ul.abb-meta,
.abb-bridge ul.abb-meta{
  margin: 10px 0 0 20px;
  padding-left: 0;
  list-style: none;
}

/* Keep chips layout for Bridge cards */
.abb-bridge-wrap .abb-meta,
.abb-bridge .abb-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0 0;
}

.abb-bridge-wrap .abb-chip,
.abb-bridge .abb-chip{
  font-size: 13px;
  padding: 6px 10px;
  border: 1px solid #e6e7ea;
  border-radius: 999px;
  background: #f7f9fb;
  color: #2d3748;
}

/* Comparison table (A vs B) — included for completeness if Bridge outputs it later */
.abb-bridge-wrap .abb-compare-wrap,
.abb-bridge .abb-compare-wrap{
  margin: 10px 0;
}

.abb-bridge-wrap .abb-compare,
.abb-bridge .abb-compare{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  border: 1px solid #e6e7ea;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.abb-bridge-wrap .abb-compare-head,
.abb-bridge-wrap .abb-compare-row,
.abb-bridge .abb-compare-head,
.abb-bridge .abb-compare-row{
  border-bottom: 1px solid #e6e7ea;
  padding: 12px 14px;
}

.abb-bridge-wrap .abb-compare-head,
.abb-bridge .abb-compare-head{
  background: #f7f9fb;
  font-weight: 700;
}

.abb-bridge-wrap .abb-compare-label,
.abb-bridge .abb-compare-label{
  background: #fafbfc;
}

@media (max-width:680px){
  .abb-bridge-wrap .abb-compare,
  .abb-bridge .abb-compare{
    grid-template-columns: 1fr;
  }
  .abb-bridge-wrap .abb-compare-head,
  .abb-bridge .abb-compare-head{
    display: none;
  }
  .abb-bridge-wrap .abb-compare-label,
  .abb-bridge .abb-compare-label{
    border-top: 1px solid #e6e7ea;
  }
}

/* =========================================================
   TOP 3 LAYOUT STYLES (Style1 / Style2 / Style3)
   Scoped to Bridge wrappers.
   ========================================================= */

/* Common wrapper for Top 3 */
.abb-bridge-wrap .abb-top3,
.abb-bridge .abb-top3{
  margin-bottom: 24px;
}

/* Shared grid used by Style 1 and Style 2 */
.abb-bridge-wrap .abb-top3-grid,
.abb-bridge .abb-top3-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  align-items: stretch;
}

.abb-bridge-wrap .abb-top3-col,
.abb-bridge .abb-top3-col{
  display: flex;
  flex-direction: column;
}

/* STYLE 1 */
.abb-bridge-wrap .abb-top3-style1-item,
.abb-bridge .abb-top3-style1-item{
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
  padding: 24px 20px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.abb-bridge-wrap .abb-top3-style1-ribbon,
.abb-bridge .abb-top3-style1-ribbon{
  background: #16a34a;
  color: #ffffff;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 12px;
  padding: 10px 24px;
  border-radius: 0 0 8px 8px;
  margin: -24px -20px 20px;
  text-align: center;
}

.abb-bridge-wrap .abb-top3-style1-media,
.abb-bridge .abb-top3-style1-media{
  margin-bottom: 12px;
}

.abb-bridge-wrap .abb-top3-style1-media img,
.abb-bridge .abb-top3-style1-media img{
  max-width: 220px;
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.abb-bridge-wrap .abb-top3-style1-title,
.abb-bridge .abb-top3-style1-title{
  margin: 8px 0 10px;
  font-size: 16px;
  font-weight: 600;
}

.abb-bridge-wrap .abb-top3-style1-title a,
.abb-bridge .abb-top3-style1-title a{
  text-decoration: none;
}

.abb-bridge-wrap .abb-top3-style1-title a:hover,
.abb-bridge .abb-top3-style1-title a:hover{
  text-decoration: underline;
}

.abb-bridge-wrap .abb-top3-style1-features,
.abb-bridge .abb-top3-style1-features{
  list-style: none;
  padding: 0;
  margin: 8px 0 18px;
  text-align: left;
}

.abb-bridge-wrap .abb-top3-style1-features li,
.abb-bridge .abb-top3-style1-features li{
  position: relative;
  padding-left: 20px;
  margin-bottom: 6px;
}

.abb-bridge-wrap .abb-top3-style1-features li::before,
.abb-bridge .abb-top3-style1-features li::before{
  content: "✔";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 13px;
}

.abb-bridge-wrap .abb-top3-style1-best,
.abb-bridge .abb-top3-style1-best{
  margin: 8px 0 18px;
}

.abb-bridge-wrap .abb-top3-style1-footer,
.abb-bridge .abb-top3-style1-footer{
  margin-top: auto;
}

.abb-bridge-wrap .abb-top3-style1-btn,
.abb-bridge .abb-top3-style1-btn{
  display: inline-block;
  padding: 10px 22px;
  border-radius: 999px;
  background: #f97316;
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
  font-size: 14px;
}

.abb-bridge-wrap .abb-top3-style1-btn:hover,
.abb-bridge .abb-top3-style1-btn:hover{
  opacity: 0.9;
}

/* STYLE 2 */
.abb-bridge-wrap .abb-top3-style2-item,
.abb-bridge .abb-top3-style2-item{
  position: relative;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
  padding: 24px 20px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.abb-bridge-wrap .abb-top3-style2-rank,
.abb-bridge .abb-top3-style2-rank{
  position: absolute;
  top: 14px;
  left: 16px;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: #f97316;
  color: #ffffff;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.abb-bridge-wrap .abb-top3-style2-label,
.abb-bridge .abb-top3-style2-label{
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #f97316;
}

.abb-bridge-wrap .abb-top3-style2-media,
.abb-bridge .abb-top3-style2-media{
  margin-bottom: 12px;
}

.abb-bridge-wrap .abb-top3-style2-media img,
.abb-bridge .abb-top3-style2-media img{
  max-width: 220px;
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.abb-bridge-wrap .abb-top3-style2-title,
.abb-bridge .abb-top3-style2-title{
  margin: 8px 0 10px;
  font-size: 16px;
  font-weight: 600;
}

.abb-bridge-wrap .abb-top3-style2-title a,
.abb-bridge .abb-top3-style2-title a{
  text-decoration: none;
}

.abb-bridge-wrap .abb-top3-style2-title a:hover,
.abb-bridge .abb-top3-style2-title a:hover{
  text-decoration: underline;
}

.abb-bridge-wrap .abb-top3-style2-features,
.abb-bridge .abb-top3-style2-features{
  list-style: none;
  padding: 0;
  margin: 8px 0 18px;
  text-align: left;
}

.abb-bridge-wrap .abb-top3-style2-features li,
.abb-bridge .abb-top3-style2-features li{
  position: relative;
  padding-left: 20px;
  margin-bottom: 6px;
}

.abb-bridge-wrap .abb-top3-style2-features li::before,
.abb-bridge .abb-top3-style2-features li::before{
  content: "✔";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 13px;
}

.abb-bridge-wrap .abb-top3-style2-best,
.abb-bridge .abb-top3-style2-best{
  margin: 8px 0 18px;
}

.abb-bridge-wrap .abb-top3-style2-footer,
.abb-bridge .abb-top3-style2-footer{
  margin-top: auto;
}

.abb-bridge-wrap .abb-top3-style2-btn,
.abb-bridge .abb-top3-style2-btn{
  display: inline-block;
  padding: 10px 22px;
  border-radius: 6px;
  background: #111827;
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
  font-size: 14px;
}

.abb-bridge-wrap .abb-top3-style2-btn:hover,
.abb-bridge .abb-top3-style2-btn:hover{
  opacity: 0.9;
}

/* STYLE 3 */
.abb-bridge-wrap .abb-top3-style3-list,
.abb-bridge .abb-top3-style3-list{
  margin: 0 0 8px;
  padding-left: 1.2em;
}

.abb-bridge-wrap .abb-top3-style3-item,
.abb-bridge .abb-top3-style3-item{
  margin-bottom: 6px;
}

.abb-bridge-wrap .abb-top3-style3-item a,
.abb-bridge .abb-top3-style3-item a{
  font-weight: 600;
  text-decoration: underline;
}

.abb-bridge-wrap .abb-top3-style3-tag,
.abb-bridge .abb-top3-style3-tag{
  color: #555;
  font-weight: 400;
}

/* Responsive tweaks for Top 3 grid */
@media (max-width: 768px) {
  .abb-bridge-wrap .abb-top3-grid,
  .abb-bridge .abb-top3-grid{
    grid-template-columns: 1fr;
  }

  .abb-bridge-wrap .abb-top3-style1-item,
  .abb-bridge-wrap .abb-top3-style2-item,
  .abb-bridge .abb-top3-style1-item,
  .abb-bridge .abb-top3-style2-item{
    padding: 20px 16px 18px;
  }
}


/* =========================================================
   2) BACKWARD-COMPAT FALLBACK (UNSCOPED, SAFE)
   Only apply old look when Bridge structure exists:
   - Bridge cards include .abb-body
   This avoids overriding ABB core plugin cards.
   ========================================================= */

/* Only style .abb-card when it's Bridge markup (has .abb-body) */
.abb-card:has(.abb-body){
  position: relative;
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 20px;
  align-items: center;
  padding: 24px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 2px 0 rgba(20,20,20,.03), 0 0 0 1px rgba(30,30,30,.06) inset;
  margin-bottom: 12px;
}

@media (max-width:680px){
  .abb-card:has(.abb-body){
    grid-template-columns: 1fr;
  }
}

.abb-card:has(.abb-body) .abb-media{
  width: 140px;
  height: 140px;
  border-radius: 12px;
  overflow: hidden;
  background: #f4f6f8;
  display: flex;
  align-items: center;
  justify-content: center;
}

.abb-card:has(.abb-body) .abb-media img{
  max-width: 100%;
  max-height: 100%;
  display: block;
}

@media (max-width:680px){
  .abb-card:has(.abb-body) .abb-media{
    width: 100%;
    height: auto;
  }
  .abb-card:has(.abb-body) .abb-media img{
    width: 100%;
    height: auto;
  }
}

/* Bridge title inside <h3> */
.abb-card:has(.abb-body) h3{
  font-size: 22px;
  line-height: 1.25;
  margin: 0 0 8px;
  font-weight: 800;
}
.abb-card:has(.abb-body) h3 a{
  text-decoration: none;
  color: #1f4ea8;
}
.abb-card:has(.abb-body) h3 a:hover{
  text-decoration: underline;
}

.abb-card:has(.abb-body) p{
  color: #4a5568;
  margin: 0 0 12px;
}

/* Bridge button */
.abb-card:has(.abb-body) .abb-btn{
  display: inline-block;
  padding: 14px 18px;
  border-radius: 14px;
  background: linear-gradient(180deg,#ff6d6d 0%,#ff4b4b 60%,#ff6262 100%);
  color: #fff !important;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 10px 0 rgba(255,75,75,.28);
  transition: transform .06s ease, box-shadow .06s ease, opacity .2s ease;
  border: none;
}

.abb-card:has(.abb-body) .abb-btn:hover{
  transform: translateY(1px);
  box-shadow: 0 8px 0 rgba(255,75,75,.28);
  opacity: .95;
}

.abb-card:has(.abb-body) .abb-btn:active{
  transform: translateY(2px);
  box-shadow: 0 6px 0 rgba(255,75,75,.28);
}