/* Wrapper & layout */
.dib-wrapper {
  display: inline-flex;
  align-items: center;
  gap: var(--dib-gap,16px);
  line-height: 1.4;
  transition: none;
}

/* ensure vertical layout when icon position = top */
.dib-wrapper[style*="flex-direction:column"] {
  align-items: center;
}

/* Icon container */
.dib-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Inner frame */
.dib-inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-style: solid;
  border-color: var(--dib-border-color, transparent);
  border-width: var(--dib-border-width, 0px);
  padding: var(--dib-padding, 0px);
  border-radius: 0;
}

/* SVG sizing */
.dib-inner svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* apply color variables to all shapes inside the SVG */
.dib-inner svg * {
  transition: all var(--dib-duration,250ms) ease;
  fill: var(--dib-primary, currentColor);
  stroke: var(--dib-primary, currentColor);
}

/* Hover states - only active when transition enabled class exists */
.dib-transition:hover .dib-inner svg * {
  fill: var(--dib-hover) !important;
  stroke: var(--dib-hover) !important;
}

.dib-transition:hover .dib-inner {
  border-color: var(--dib-border-hover) !important;
}

/* Title and description */
.dib-text {
  display: flex;
  flex-direction: column;
}

/* Title default styling - users can override via widget typography/colors */
.dib-title {
  margin: 0 0 4px 0;
  line-height: 1.2;
  color: inherit;
  transition: color var(--dib-duration,250ms) ease;
}

/* Description default */
.dib-desc {
  margin: 0;
  line-height: 1.4;
  color: inherit;
  transition: color var(--dib-duration,250ms) ease;
}

/* Hover change for title and desc (uses inline var set by widget) */
.dib-transition:hover .dib-title {
  color: var(--dib-title-hover) !important;
}
.dib-transition:hover .dib-desc {
  color: var(--dib-desc-hover) !important;
}

/* Accessibility: focus states when widget is focusable (if you add link later) */
.dib-wrapper:focus-within .dib-inner,
.dib-wrapper:focus .dib-inner {
  outline: none;
}

.dib-title,
.dib-desc {
  transition: color var(--dib-duration, 250ms) ease, 
              font-weight var(--dib-duration, 250ms) ease;
}

/* Responsive niceties: ensure when stacked vertically text is centered by default */
@media (max-width: 768px) {
  /* nothing forced here — responsive controls in Elementor will override as needed */
}