/* Base search container style */
:root{
  --tl-badge-size-card: 22px;
  --tl-badge-size-iw: 20px;
}

    #tl-search-container {
        margin-bottom: 20px;
    }

    /* Side-by-side layout (default) */
    /* Stacked layout */
#tl-container
    #tl-container.tl-stacked {
        display: block;
        margin-top: 20px;
    }
    /* For a letterbox look, we now use a 16:9 aspect ratio for the map */
    #tl-container.tl-stacked #tl-map-wrap {
        width: 100%;
        aspect-ratio: 16/9;
        /* Fallback for older browsers:
        position: relative;
        height: 0;
        padding-top: 56.25%;
        */
    }
    #tl-container.tl-stacked #tl-results {
        width: 100%;
        margin-top: 20px;
        overflow-y: auto;
        max-height: 500px;
    }

    /* Responsive Auto Layout: force stacking on small screens */
    @media screen and (max-width: 768px) {
        #tl-container {
            display: block !important;
        }
        

/* Side-by-side layout (stable widths) */
#tl-container.tl-side{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 20px;
  margin-top: 20px;
  align-items: stretch;
}
#tl-container.tl-side #tl-map-wrap{
  height: 560px;
  min-width: 0;
}
#tl-container.tl-side #tl-results{
  max-height: 560px;
  overflow-y: auto;
  min-width: 0;
}
#tl-map{ width:100%; height:100%; }

#tl-container #tl-map,
        #tl-container #tl-results {
            width: 100% !important;
            margin: 0;
        }
        #tl-container #tl-results {
            margin-top: 20px;
        }
    }
    /* Badge styles */
/* Badge base - uses rem so it scales with your font-size */
.tl-badge {
  display: inline-block;
  width: 2.5rem;           /* ~= 32px if root font is 16px */
  height: 2.5rem;
  background-size: contain;
  background-repeat: no-repeat;
  margin-left: 0.5rem;
  vertical-align: middle;
}

/* Smaller on very small screens */
@media (max-width: 480px) {
  .tl-badge {
    width: 1.5rem;       /* ~= 24px */
    height: 1.5rem;
    margin-left: 0.25rem;
  }
}

/* Your icon URLs */
.tl-badge-preferred {
  background-image: url('https://glassrenu.com/wp-content/uploads/Sponsorship-Program-Featured-Technician.svg');
}
.tl-badge-certified {
  background-image: url('https://glassrenu.com/wp-content/uploads/GR-Cert-Logo-Small.png');
}

/* Text pills (for things that don't have icons yet) */
.tl-pill{
  display:inline-block;
  padding: 0.15rem 0.45rem;
  margin-left: 0.4rem;
  border-radius: 999px;
  font-size: 0.75rem;
  line-height: 1.4;
  border: 1px solid #c3c4c7;
  background: #fff;
  vertical-align: middle;
}
.tl-pill-travel{
  border-color:#2271b1;
  color:#2271b1;
}
.tl-pill-website{
  border-color:#2c8a3f;
  color:#2c8a3f;
}


/* --- Technician result cards --- */
.tl-tech-item{
    border:1px solid #e2e8f0;      /* light grey */
    border-radius:8px;
    padding:12px 16px;
    margin-bottom:16px;
    box-shadow:0 2px 4px rgba(0,0,0,0.06);
    background:#fff;
    line-height:1.45;
}
.tl-tech-item strong{
    font-size:1.1rem;
}

/* --- Sticky header for results list --- */
#tl-results .tl-results-header{
    position: sticky;
    top: 0;
    z-index: 1;                 /* stay above the scrolling cards */
    background: #fff;           /* matches card background */
    padding: 8px 0;
    margin: 0 0 8px;            /* small gap below header */
    font-size: 1rem;
    font-weight: 600;
    border-bottom: 1px solid #e2e8f0;
}

/* Placeholder card BEFORE a search */
.tl-placeholder-card{
    opacity: 0.7;
    text-align: center;
}

/* Search bar controls */
#tl-search-container{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
#tl-search-address{
  flex: 1 1 260px;
  min-width: 220px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  font-size: 14px;
}
#tl-map{width:100%;height:100%;}


/* Map wrapper + overlay button */
#tl-map-wrap{
  position: relative;
  width: 100%;
}
#tl-search-area{
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.15);
  background: #ffffff;
  color: #0f172a;
  -webkit-text-fill-color: currentColor;
  font-size: 14px;
  line-height: 1;
  font-weight: 800;
  cursor: pointer;
  display: none;
  z-index: 5;
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
}
#tl-search-area.is-visible{ display: inline-flex; align-items:center; gap:8px; }
#tl-search-area:hover{ border-color: rgba(0,0,0,.25); }

.tl-tech-item.is-active{
  border-color: rgba(14, 165, 233, 0.45);
  box-shadow: 0 10px 22px rgba(14,165,233,.12);
}


/* =========================
   Modern UI overrides
   ========================= */
#tl-search-container{
  background:#fff;
  border:1px solid rgba(15,23,42,.12);
  border-radius:16px;
  padding: 12px;
  box-shadow: 0 10px 24px rgba(15,23,42,.08);
}
#tl-search-container input, #tl-search-container button{
  height: 44px;
}
#tl-search-address{
  border-radius: 12px;
}
#tl-container.tl-side{
  display: grid;
  grid-template-columns: 1fr 440px;
  gap: 14px;
  align-items: stretch;
  margin-top: 14px;
}
#tl-container.tl-side #tl-map-wrap{
  height: 560px;
  border: 1px solid rgba(15,23,42,.12);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(15,23,42,.08);
}
#tl-results{
  height: 560px;
  overflow: auto;
  border: 1px solid rgba(15,23,42,.12);
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(15,23,42,.08);
  background:#fff;
}
.tl-tech-item{
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: none;
  transition: transform .08s ease, box-shadow .08s ease, border-color .08s ease;
}
.tl-tech-item:hover{
  transform: translateY(-1px);
  border-color: rgba(14,165,233,.35);
  box-shadow: 0 12px 26px rgba(15,23,42,.10);
}
.tl-tech-title strong{
  font-size: 15px;
}
.tl-tech-distance{
  font-weight: 800;
  font-size: 13px;
  opacity: .8;
}
.tl-tech-loc, .tl-tech-contact, .tl-tech-website, .tl-tech-blurb{
  font-size: 13px;
}
#tl-results .tl-results-header{
  backdrop-filter: blur(8px);
}
@media (max-width: 980px){
  #tl-container.tl-side{
    grid-template-columns: 1fr;
  }
  #tl-container.tl-side #tl-map-wrap, #tl-results{
    height: auto;
    min-height: 420px;
  }
}


/* ==========================================================
   Layout hardening (fix results column + full-width cards)
   Ensures the results panel never "shrink-wraps" to content.
========================================================== */
#tl-container.tl-side{
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 420px !important;
  gap: 20px !important;
  align-items: stretch !important;
  justify-items: stretch !important;
}
#tl-container.tl-side #tl-map-wrap{
  width: 100% !important;
  min-width: 0 !important;
}
#tl-container.tl-side #tl-results{
  width: 100% !important;
  min-width: 0 !important;
  justify-self: end !important;
  box-sizing: border-box !important;
}
#tl-container.tl-side #tl-results .tl-tech-item{
  width: 100% !important;
  box-sizing: border-box !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}


/* "See more" controls */
.tl-more-row{
  display:flex;
  gap: 10px;
  align-items:center;
  justify-content:flex-end;
  margin: 0 4px 14px;
}
.tl-more-btn{
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(15,23,42,0.16);
  background: #fff;
  font-weight: 800;
  cursor:pointer;
}
.tl-more-btn:hover{
  border-color: rgba(14,165,233,0.45);
}
.tl-more-link{
  padding: 10px 10px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  font-weight: 800;
  color: rgba(2,132,199,0.95);
  cursor:pointer;
}
.tl-more-link:hover{
  text-decoration: underline;
}

.tl-muted-note{
  margin: 6px 6px 10px;
  color: rgba(15,23,42,0.68);
  font-size: 13px;
}


/* Google Maps InfoWindow tightening */
.gm-style .gm-style-iw-c{
  padding: 10px 12px !important;
}
.gm-style .gm-style-iw-d{
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
}
.gm-style .gm-ui-hover-effect{
  top: 6px !important;
  right: 6px !important;
}
.tl-iw{
  font-family: inherit;
  max-width: 240px;
  margin: 0;
  padding: 0;
}
.tl-iw strong{ font-size: 14px; }


/* ==========================================================
   Google Maps InfoWindow tightening (Chrome)
   Removes extra top buffer and keeps padding controlled by .tl-iw.
========================================================== */
.gm-style .gm-style-iw-c{ padding: 0 !important; }
.gm-style .gm-style-iw-d{ padding: 0 !important; margin: 0 !important; overflow: hidden !important; }
.gm-style .gm-ui-hover-effect{ top: 4px !important; right: 4px !important; }
.tl-iw{ padding: 10px 34px 10px 12px !important; margin: 0 !important; }

/* Pin indicator on technician cards */
.tl-tech-item{ position: relative; }
.tl-card-pin{
  position:absolute;
  top: 10px;
  right: 10px;
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;
  pointer-events:none;
  opacity: 0.98;
}


/* ==========================================================
   InfoWindow width: allow bubble to fit content (avoid email wrapping)
========================================================== */
.gm-style .gm-style-iw,
.gm-style .gm-style-iw-c,
.gm-style .gm-style-iw-d{
  max-width: none !important;
  width: auto !important;
}

.tl-iw{
  display: inline-block;
  width: max-content;
  max-width: 520px; /* prevents huge bubbles on very long strings */
}

.tl-iw a{
  white-space: nowrap;
}


/* ==========================================================
   InfoWindow header buffer fix (gm-style-iw-ch*)
   Chrome sometimes reserves a header row for the close button.
   We collapse that row and absolutely-position the close button.
========================================================== */
.gm-style .gm-style-iw-ch{
  padding: 0 !important;
  margin: 0 !important;
  height: 0 !important;
  line-height: 0 !important;
  overflow: hidden !important;
}
.gm-style .gm-style-iw-chr{
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.gm-style .gm-style-iw-chr .gm-ui-hover-effect{
  position: absolute !important;
  top: 6px !important;
  right: 6px !important;
  margin: 0 !important;
}

/* Keep our content from touching the close button */
.tl-iw{
  padding-right: 44px !important;
}



/* Let Astra theme style primary buttons (Search + Use my location) */
#tl-search-btn.ast-button,
#tl-use-location.ast-button{
  background: unset !important;
  color: unset !important;
  border: unset !important;
}


/* =================================================
   Tier / Endorsement badges (IMG-based)
   ================================================= */
.tl-badges{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 6px 0 0;
}
.tl-iw .tl-badges{
  margin: 6px 0 4px;
}
.tl-badge-img{
  width: var(--tl-badge-size-card, 22px);
  height: var(--tl-badge-size-card, 22px);
  object-fit: contain;
  display: inline-block;
}
@media (max-width: 480px){
  .tl-badge-img{
  width: var(--tl-badge-size-card, 22px);
  height: var(--tl-badge-size-card, 22px);
  }
}
.tl-badges:empty{ display: none; }


/* Badge sizing override inside Google Maps info bubble */
.tl-iw .tl-badge-img{
  width: var(--tl-badge-size-iw, 20px);
  height: var(--tl-badge-size-iw, 20px);
}


/* =================================================
   EXPANDED RESULT CARD BADGES (v1.3.6)
   Click a result card to expand/collapse its badges into a grid.
   (Map InfoWindow badges are unaffected.)
   ================================================= */

#tl-results .tl-tech-item.is-expanded{
  border-color: rgba(2, 116, 190, 0.45);
  box-shadow: 0 18px 46px rgba(15,23,42,0.18);
}

#tl-results .tl-tech-item.is-expanded .tl-badges{
  margin-top: 10px;
  padding: 12px 12px;
  border-radius: 12px;
  background: rgba(2, 116, 190, 0.06);
  border: 1px solid rgba(2, 116, 190, 0.14);

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 10px;
  align-items: start;
}

/* Make badges fill their grid cells more */
#tl-results .tl-tech-item.is-expanded .tl-badge-img{
  width: calc(var(--tl-badge-size-card, 22px) + 14px) !important;
  height: calc(var(--tl-badge-size-card, 22px) + 14px) !important;
}

/* Travel pill aligns better in the grid */
#tl-results .tl-tech-item.is-expanded .tl-pill{
  justify-self: start;
  width: 100%;
  text-align: center;
  padding: 10px 12px;
  border-radius: 999px;
}

/* Tablet / mobile: fewer columns, slightly larger tap targets */
@media (max-width: 900px){
  #tl-results .tl-tech-item.is-expanded .tl-badges{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 480px){
  #tl-results .tl-tech-item.is-expanded .tl-badges{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 8px;
  }
}

/* =================================================
   PREMIUM BADGE CHIPS (v1.3.7)
   - Keeps badges compact in collapsed state
   - In expanded cards: chip layout + label + nicer spacing
   ================================================= */

/* Wrapper around each badge image (enables labels in expanded view) */
.tl-badge-chip{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  line-height: 0;
}


/* =================================================
   ENDORSEMENT OVERFLOW (v1.3.17)
   Collapsed cards show up to 3 endorsements, then "+N".
   Expanded cards show all endorsements (existing behavior).
   ================================================= */
#tl-results .tl-tech-item:not(.is-expanded) .tl-badge-chip.tl-badge-extra{
  display: none !important;
}

#tl-results .tl-tech-item.is-expanded .tl-badge-more{
  display: none !important;
}

.tl-badge-more{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  height: calc(var(--tl-badge-size-card, 22px) + 2px);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.01em;
  color: rgba(15,23,42,0.72);
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(15,23,42,0.10);
  box-shadow: 0 8px 20px rgba(15,23,42,0.08);
}

/* Expanded card: each badge becomes a “chip” that fills its grid cell */
#tl-results .tl-tech-item.is-expanded .tl-badge-chip{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,0.86);
  border: 1px solid rgba(15,23,42,0.08);
  box-shadow: 0 10px 26px rgba(15,23,42,0.08);
}

/* Expanded card: bump badge image size (overrides the admin hard override safely) */
#tl-results .tl-tech-item.is-expanded .tl-badge-img{
  width: calc(var(--tl-badge-size-card, 22px) + 22px) !important;
  height: calc(var(--tl-badge-size-card, 22px) + 22px) !important;
}

/* Expanded card: show labels (no tooltips needed) */
#tl-results .tl-tech-item.is-expanded .tl-badge-chip::after{
  content: attr(data-label);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 650;
  letter-spacing: 0.01em;
  color: rgba(15,23,42,0.78);
  text-align: center;
  white-space: normal;
}

/* Travel pill should also look like it belongs in the expanded badge grid */
#tl-results .tl-tech-item.is-expanded .tl-pill{
  width: 100%;
  justify-self: stretch;
  text-align: center;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(255,255,255,0.86);
  box-shadow: 0 10px 26px rgba(15,23,42,0.08);
}

/* Subtle motion, but respect reduced motion */
@media (prefers-reduced-motion: no-preference){
  #tl-results .tl-tech-item.is-expanded .tl-badge-chip{
    animation: tlBadgeChipIn 180ms ease-out both;
  }
  @keyframes tlBadgeChipIn{
    from{ opacity: 0; transform: translateY(3px); }
    to{ opacity: 1; transform: translateY(0); }
  }
}

/* =================================================
   v1.3.7.1 – Premium expanded badges (2-column “luxury”)
   Safe CSS-only polish on top of v1.3.7 behavior
   ================================================= */

#tl-results .tl-tech-item.is-expanded .tl-badges{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px 12px !important;
  align-items: stretch !important;
}

@media (max-width: 900px){
  #tl-results .tl-tech-item.is-expanded .tl-badges{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px 10px !important;
  }
}

@media (max-width: 520px){
  #tl-results .tl-tech-item.is-expanded .tl-badges{
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}

#tl-results .tl-tech-item.is-expanded .tl-badge-chip{
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 10px 10px !important;
  border-radius: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

#tl-results .tl-tech-item.is-expanded .tl-badge-img{
  width: calc(var(--tl-badge-size-card, 22px) + 18px) !important;
  height: calc(var(--tl-badge-size-card, 22px) + 18px) !important;
}

#tl-results .tl-tech-item.is-expanded .tl-badge-label{
  font-size: 12px !important;
  line-height: 1.15 !important;
  margin-top: 6px !important;
  opacity: 0.92 !important;
}

/* =================================================
   v1.3.7.3 – Cleaner InfoWindow (text tags, no badge row)
   ================================================= */
.tl-iw-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 4px;
}
.tl-iw-tag{
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.1;
  font-weight: 700;
  color: rgba(15,23,42,0.78);
  background: rgba(15,23,42,0.06);
  border: 1px solid rgba(15,23,42,0.12);
}

/* =================================================
   Avatars (result cards only) – v1.3.8
   ================================================= */
.tl-tech-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.tl-tech-title-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.tl-avatar{
  width:56px;
  height:56px;
  border-radius:999px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:1px solid rgba(15,23,42,.10);
  box-shadow:0 6px 16px rgba(15,23,42,.08);
  background:#f1f5f9;
}
.tl-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.tl-avatar-text{
  font-weight:900;
  letter-spacing:.02em;
  font-size:14px;
  text-transform:uppercase;
  user-select:none;
}

/* Slightly smaller avatars on narrow screens */
@media (max-width: 520px){
  .tl-avatar{ width:48px; height:48px; }
  .tl-avatar-text{ font-size:13px; }
}

/* =================================================
   v1.3.9 – Contact icons (collapsed) + details on expand
   ================================================= */

.tl-tech-actions{
  display:flex;
  gap:10px;
  margin-top: 8px;
  align-items:center;
}

.tl-action{
  width:36px;
  height:36px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(15,23,42,.04);
  color: rgba(15,23,42,.72);
  text-decoration:none !important;
  box-shadow: 0 8px 18px rgba(15,23,42,.08);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}

.tl-action svg{
  width:18px;
  height:18px;
  fill: currentColor;
}

.tl-action:active{
  transform: scale(.96);
}

#tl-results .tl-tech-item.is-expanded .tl-action{
  width:40px;
  height:40px;
  background: rgba(2, 116, 190, 0.08);
  border-color: rgba(2, 116, 190, 0.20);
  color: rgba(2, 116, 190, 0.90);
}

/* Hide verbose contact details until expanded */
.tl-contact-details{
  display:none;
  margin-top: 8px;
}

#tl-results .tl-tech-item.is-expanded .tl-contact-details{
  display:block;
}

/* When expanded, tighten typography so it still feels clean */
#tl-results .tl-tech-item.is-expanded .tl-contact-details{
  font-size: 13px;
  line-height: 1.35;
}

/* On very small screens, make icons easier to tap */
@media (max-width: 520px){
  .tl-action{ width:40px; height:40px; }
  .tl-action svg{ width:19px; height:19px; }
}

/* =================================================
   v1.3.9.2 – Location line under name + reuse card pin inline
   ================================================= */

.tl-tech-title-left{
  align-items: flex-start;
}

/* Name + location stack */
.tl-tech-title-text{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}

/* Location row becomes a compact “meta” line with the (existing) pin moved inline */
.tl-tech-loc{
  display:flex;
  align-items:center;
  gap:6px;
  font-size: 12.5px;
  line-height: 1.2;
  opacity: .78;
  margin-top: 2px;
}

.tl-tech-loc--listed{
  font-size: 12px;
  opacity: .80;
}

/* The same generated pin, but inline instead of top-right */
.tl-card-pin{
  position: static !important;
  top: auto !important;
  right: auto !important;
  display: inline-block;
  margin: 0;
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;
  pointer-events:none;
  opacity: 0.98;
}

/* =================================================
   v1.3.9.3 – Location under business name (true inline stack)
   ================================================= */

/* Remove any leftover wrapper spacing if present */
.tl-tech-loc-wrap{ display:block !important; }

/* Location line already flex; tighten to align under name nicely */
.tl-tech-title-text .tl-tech-loc{
  margin-top: 2px;
}

/* =================================================
   v1.3.9.5 – Header “two column” layout (avatar left, text right)
   This guarantees City/State sits under the business name.
   ================================================= */

.tl-tech-title{
  align-items:flex-start;
}

.tl-tech-title-left{
  display:grid !important;
  grid-template-columns: auto 1fr;
  column-gap: 12px;
  align-items:start !important;
}

/* The avatar sits in column 1 automatically; the text stack fills column 2 */
.tl-tech-title-text{
  min-width:0;
}

/* Ensure inline pin stays inline (even if older rules set absolute) */
#tl-results .tl-tech-loc .tl-card-pin{
  position: static !important;
  top:auto !important;
  right:auto !important;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  opacity: .95;
}

/* =================================================
   v1.3.9.6 – Actions in header right + Website label consistency
   ================================================= */

.tl-tech-title-right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
}

/* In the header, actions shouldn’t push the card down */
.tl-tech-title-right .tl-tech-actions{
  margin-top: 0;
}

/* Slightly smaller icons in header so they don’t compete with the title */
.tl-tech-title-right .tl-action{
  width: 34px;
  height: 34px;
  box-shadow: 0 6px 14px rgba(15,23,42,.08);
}
.tl-tech-title-right .tl-action svg{
  width: 17px;
  height: 17px;
}

/* Expanded state still gets a bit more emphasis */
#tl-results .tl-tech-item.is-expanded .tl-tech-title-right .tl-action{
  width: 38px;
  height: 38px;
}

/* Mobile: allow header right to wrap below if space is tight */
@media (max-width: 520px){
  .tl-tech-title{
    gap:10px;
  }
  .tl-tech-title-right{
    gap:8px;
  }
}