/* ── shared utility classes replacing one-off inline styles on frontend pages ── */
.d-none-important { display: none !important; }
.captcha-img { height: 50px; border: 1px solid #dee2e6; border-radius: 6px; cursor: pointer; }
.captcha-refresh-icon { font-size: 1.1rem; color: #6c757d; }
.captcha-refresh-icon-light { font-size: 1.1rem; color: #aaa; }
.icon-fs-48-30 { font-size: 48px; opacity: .3; }
.captcha-input { text-transform: uppercase; letter-spacing: 3px; }
.color-inherit { color: inherit; }
.industry-title-sm { font-size: 16px; }
.about-sec-2-left .img2 img { max-width: 100%; height: 100%; }

/* ── fixed industry-card accent colors (from $ind_icons_home / placeholder palette in index.php) ── */
.ind-color-ff6b6b { --card-color: #FF6B6B; --card-bg-light: #FF6B6B18; }
.ind-color-4ecdc4 { --card-color: #4ECDC4; --card-bg-light: #4ECDC418; }
.ind-color-f7b731 { --card-color: #F7B731; --card-bg-light: #F7B73118; }
.ind-color-5f27cd { --card-color: #5F27CD; --card-bg-light: #5F27CD18; }
.ind-color-00b894 { --card-color: #00B894; --card-bg-light: #00B89418; }
.ind-color-0984e3 { --card-color: #0984E3; --card-bg-light: #0984E318; }
.ind-color-e17055 { --card-color: #E17055; --card-bg-light: #E1705518; }
.ind-color-6c5ce7 { --card-color: #6C5CE7; --card-bg-light: #6C5CE718; }

/* ── client logos (client-logos.php) — Swiper handles slide/drag/arrows,
   this styles each logo's card. Every logo gets its own fixed-size white
   card (backend normalizes uploads to a 400x200 / 2:1 canvas, see
   resizeToFixedCanvas() in admin/lib/utility.php, so a matching 2:1 box
   here means no logo looks bigger/smaller than another). ── */
.client-logo-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 200px;
    height: 100px;
    margin: 0 auto;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .06);
    padding: 16px 20px;
}
.client-logo-static .client-logo-item {
    flex: 0 0 auto;
}

/* Pure-CSS tooltip — no JS/Popper dependency (Popper isn't loaded on the
   frontend, which made the Bootstrap JS tooltip break after its first
   show). Shows the client name from data-tooltip on hover/focus. */
.client-logo-item[data-tooltip]::after,
.client-logo-item[data-tooltip]::before {
    position: absolute;
    left: 50%;
    bottom: 100%;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
    z-index: 20;
}
.client-logo-item[data-tooltip]::after {
    content: attr(data-tooltip);
    transform: translate(-50%, -4px);
    background: #1a1a2e;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    padding: 5px 12px;
    border-radius: 6px;
}
.client-logo-item[data-tooltip]::before {
    content: '';
    transform: translate(-50%, 4px);
    border: 5px solid transparent;
    border-top-color: #1a1a2e;
}
.client-logo-item[data-tooltip]:hover::after,
.client-logo-item[data-tooltip]:hover::before {
    opacity: 1;
    visibility: visible;
}
.client-logo-item[data-tooltip]:hover::after { transform: translate(-50%, -10px); }
.client-logo-item[data-tooltip]:hover::before { transform: translate(-50%, -2px); }
.client-logo-item img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Static (non-slider) layout used when there's only 1 logo — nothing to
   slide, so just center the single card. */
.client-logo-static {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 24px;
}