/* ==========================================================
   DPV Image Hotspot — Stylesheet v3.6.0
   Tooltip renders inline inside the box (inset: 0), not floating outside.
   ========================================================== */

.dpv-hotspot-wrapper {
    position: relative;
    z-index: 0;
    isolation: isolate;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    box-sizing: border-box;
    font-family: inherit;
}

/* ----------------------------------------------------------
   TAB BAR
---------------------------------------------------------- */
.dpv-hotspot-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.dpv-hotspot-tabs.dpv-tabs-hidden {
    display: none !important;
}

.dpv-tab-btn {
    padding: 8px 20px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    background: #ffffff;
    color: #6b7280;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    line-height: 1.4;
}

.dpv-tab-btn:hover {
    border-color: #185FA5;
    color: #185FA5;
}

.dpv-tab-btn.active {
    background: #185FA5;
    color: #ffffff;
    border-color: #185FA5;
    font-weight: 500;
}

/* ----------------------------------------------------------
   IMAGE WRAP
---------------------------------------------------------- */
.dpv-single-wrap,
.dpv-tabs-image-wrap {
    position: relative;
    width: 100%;
    height: 480px;
    border-radius: 12px;
    overflow: hidden;
    isolation: isolate;
    box-sizing: border-box;
}

.dpv-hotspot-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 12px;
    transition: opacity 0.3s ease;
    position: relative;
    z-index: 1;
}

.dpv-hotspots-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}

.dpv-hotspots-layer .dpv-hotspot-item {
    pointer-events: auto;
}

/* ----------------------------------------------------------
   BOX + PULSE ANIMATION
   Pulse ring runs on .dpv-hotspot-item::before, outside .dpv-hs-box.
   The widget wrapper itself clips overflow to prevent cross-section overlap.
---------------------------------------------------------- */
.dpv-hs-box {
    position: relative;
    border-style: solid;
    border-width: 2px;
    border-color: var(--dpv-box-color, #185FA5);
    border-radius: var(--dpv-box-radius, 6px);
    background-color: var(--dpv-box-bg, rgba(24,95,165,0.12));
    transition: background-color 0.22s ease, border-color 0.22s ease;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Pulse ring expands outward — placed on .dpv-hotspot-item
   so it is not clipped by overflow:hidden on .dpv-hs-box */
.dpv-hotspot-item::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: var(--dpv-box-radius, 6px);
    border: 2px solid var(--dpv-box-color, #185FA5);
    opacity: 0;
    animation: dpv-box-pulse var(--dpv-pulse-speed, 2s) ease-out infinite;
    pointer-events: none;
    z-index: 0;
}

.dpv-hotspot-item.dpv-pulse-off::before {
    animation: none;
    opacity: 0;
}

@keyframes dpv-box-pulse {
    0%   { transform: scale(1);    opacity: 0.7; }
    70%  { transform: scale(1.06); opacity: 0; }
    100% { transform: scale(1.06); opacity: 0; }
}

/* Hover & active: more solid background */
.dpv-hotspot-item:hover .dpv-hs-box,
.dpv-hotspot-item.dpv-active .dpv-hs-box {
    background-color: var(--dpv-box-bg-hover, rgba(24,95,165,0.25));
}

/* ----------------------------------------------------------
   HOTSPOT BOX ITEM
---------------------------------------------------------- */
.dpv-hotspot-item {
    position: absolute;
    z-index: 10;
    cursor: pointer;
}

/* ----------------------------------------------------------
   LABEL INSIDE BOX
   Fades out when overlay appears on hover.
---------------------------------------------------------- */
.dpv-hs-label {
    position: absolute;
    bottom: 6px;
    left: 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--dpv-box-color, #185FA5);
    pointer-events: none;
    line-height: 1;
    text-shadow: 0 0 6px rgba(255,255,255,0.85);
    white-space: nowrap;
    transition: opacity 0.18s ease;
    z-index: 1;
}

.dpv-hotspot-item:hover .dpv-hs-label,
.dpv-hotspot-item.dpv-active .dpv-hs-label {
    opacity: 0;
}

/* ----------------------------------------------------------
   TOOLTIP — INLINE INSIDE BOX
   Covers inset: 0 — not floating outside.
   Appears on hover replacing the label.
---------------------------------------------------------- */
.dpv-hs-tooltip {
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s ease, visibility 0.22s ease;
    pointer-events: none;
    background: var(--dpv-tip-bg, #ffffff);
    border-radius: calc(var(--dpv-box-radius, 6px) - 2px);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.dpv-hotspot-item:hover .dpv-hs-tooltip,
.dpv-hs-tooltip.dpv-show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* ----------------------------------------------------------
   TOOLTIP CONTENT
---------------------------------------------------------- */
.dpv-hs-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--dpv-tooltip-title-color, #111827);
    margin: 0 0 4px 0;
    line-height: 1.3;
}

.dpv-hs-desc {
    font-size: 11px;
    color: var(--dpv-tooltip-desc-color, #6b7280);
    margin: 0 0 6px 0;
    line-height: 1.5;
    flex-shrink: 1;
    overflow: hidden;
}

.dpv-hs-desc p              { margin: 0 0 4px 0; font-size: inherit; color: inherit; line-height: inherit; }
.dpv-hs-desc p:last-child   { margin-bottom: 0; }
.dpv-hs-desc ul,
.dpv-hs-desc ol             { margin: 0 0 4px 12px; padding: 0; font-size: inherit; color: inherit; }
.dpv-hs-desc li             { margin-bottom: 2px; }
.dpv-hs-desc a              { color: #185FA5; text-decoration: underline; }
.dpv-hs-desc strong         { font-weight: 600; }
.dpv-hs-desc em             { font-style: italic; }

.dpv-hs-badge {
    display: inline-block;
    align-self: flex-start;
    flex-shrink: 0;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 20px;
    border: 1px solid var(--dpv-badge-color, #185FA5);
    color: var(--dpv-badge-color, #185FA5);
    font-weight: 500;
    background: var(--dpv-badge-bg, #EFF6FF);
    white-space: nowrap;
}

/* ----------------------------------------------------------
   RESPONSIVE
---------------------------------------------------------- */
@media (max-width: 767px) {
    .dpv-tab-btn {
        font-size: 11px;
        padding: 6px 10px;
    }

    .dpv-hs-title { font-size: 11px; }
    .dpv-hs-desc  { font-size: 10px; }
}


/* ----------------------------------------------------------
   TOOLTIP ICON — Image Tabs Carousel extension
---------------------------------------------------------- */
.dpv-hs-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    align-self:flex-start;
    flex:0 0 auto;
    width:34px;
    height:34px;
    color:#22C55E;
    background:#ECFDF5;
    border-radius:50%;
    overflow:hidden;
    line-height:1;
    --dpv-hs-icon-x:0px;
    --dpv-hs-icon-y:0px;
    transform:translate(var(--dpv-hs-icon-x),var(--dpv-hs-icon-y));
    transition-property:color,background-color,border-color,box-shadow,transform,opacity;
    transition-timing-function:ease;
    transition-duration:.2s;
}
.dpv-hs-icon i{line-height:1}
.dpv-hs-icon svg,.dpv-hs-icon img{
    display:block;
    width:18px;
    height:18px;
    max-width:100%;
    max-height:100%;
    object-fit:contain;
}
.dpv-hs-icon svg{fill:currentColor}
.dpv-hs-badge{text-decoration:none;transition:color .2s ease,background-color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease}
a.dpv-hs-badge:hover,a.dpv-hs-badge:focus{text-decoration:none}