.deensimcpro-tabs {
  --deensimcpro-tabs-primary: #61ce70;
  --deensimcpro-tabs-secondary: #0073aa;
  --deensimcpro-tabs-light: #f7f7f7;
  --deensimcpro-tabs-dark: #333;
  --deensimcpro-tabs-border: #d5d8dc;
  --deensimcpro-tabs-hover: #e9e9e9;
  --deensimcpro-tabs-padding: 20px;
  --deensimcpro-tabs-gap: 15px;
  --deensimcpro-tabs-radius: 4px;
  --deensimcpro-tabs-transition: all 0.3s ease;
}

.deensimcpro-tab-card-left-section h1,
.deensimcpro-tab-card-left-section h2,
.deensimcpro-tab-card-left-section h3,
.deensimcpro-tab-card-left-section h4,
.deensimcpro-tab-card-left-section h5,
.deensimcpro-tab-card-left-section h6 {
  margin-block-start: unset;
}

.deensimcpro-tab-description p {
  margin-block-start: unset;
}

/* Base Container Styles */
.deensimcpro-tabs {
  width: 100%;
  position: relative;
  box-sizing: border-box;
}

.deensimcpro-tabs-inner {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  flex-direction: var(--tabs-inner, column);
  gap: 20px;
}

/* Wrapper */
.deensimcpro-tabs {
  --tabs-aside-min: 96px;
  --tabs-x: hidden;
  --tabs-y: hidden; /* <- stops vertical bar on desktop */
}

.deensimcpro-tabs-wrapper {
  display: flex;
  flex-direction: var(--tabs-wrapper, row);
  /* flex-wrap: var(--tabs-wrap, wrap); */
  flex-wrap: wrap;
  justify-content: var(--tabs-justify, center);
  flex-shrink: 0;
  min-width: calc(var(--is-vertical, 0) * var(--tabs-aside-min));
  overflow-x: var(--tabs-x, hidden);
  /* overflow-y: var(--tabs-y, auto);  */
  white-space: var(--tabs-white-space, normal);
  box-sizing: border-box;
  overscroll-behavior: contain;
  z-index: 1;
  gap: 15px;
}

/* Horizontal Tabs Alignment helpers (if you keep them) */
.deensimcpro-tabs-align-start .deensimcpro-tabs-wrapper {
  justify-content: flex-start;
  text-align: left;
}
.deensimcpro-tabs-align-center .deensimcpro-tabs-wrapper {
  justify-content: center;
  text-align: center;
}
.deensimcpro-tabs-align-end .deensimcpro-tabs-wrapper {
  justify-content: flex-end;
  text-align: right;
}

.deensimcpro-tabs-align-stretch .deensimcpro-tabs-wrapper {
  display: flex;
}
.deensimcpro-tabs-align-stretch .deensimcpro-tab-title {
  flex: 1;
  min-width: 0;
  justify-content: center;
}

/* Tab Title Base Styles */
.deensimcpro-tab-title {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-grow: var(--tabs-grow, 0);
  cursor: pointer;
  transition: var(--deensimcpro-tabs-transition);
  position: relative;
  padding: 15px 30px;
  /* border: 1px solid var(--deensimcpro-tabs-border); */
  border: 1px solid black;
  background-color: var(--deensimcpro-tabs-light);
  color: var(--deensimcpro-tabs-dark);
  margin: 0;
  outline: none;
  box-sizing: border-box;
  text-align: center;
  white-space: var(--tab-title-ws, nowrap);
}

.deensimcpro-tab-title:hover {
  background-color: var(--deensimcpro-tabs-hover);
}
.deensimcpro-tab-title.deensimcpro-active {
  background-color: var(--deensimcpro-tabs-primary);
  color: #fff;
  z-index: 2;
}
.deensimcpro-tab-title:focus-visible {
  outline: 2px solid var(--deensimcpro-tabs-primary);
  outline-offset: 2px;
}

/* Content Wrapper */
.deensimcpro-tabs-content-wrapper {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
  background-color: #fff;
  box-sizing: border-box;
  /* height: 100%; */
  border: 1px solid var(--deensimcpro-tabs-border);
  border-top: var(--cw-top, initial);
  border-right: var(--cw-right, initial);
  border-bottom: var(--cw-bottom, initial);
  border-left: var(--cw-left, initial);
  /* overflow-y: auto;
  overflow-x: hidden; */

  overflow: hidden;
}

/* Tab Content */
.deensimcpro-tab-content {
  display: none;
  box-sizing: border-box;
  /* height: 100%; */
  overflow: hidden;
  opacity: 0;
  transition: var(--deensimcpro-tabs-transition);
  border: 1px solid black;
  padding: 20px;
}

.deensimcpro-tab-content.deensimcpro-active {
  display: flex;
  flex-direction: column;
  /* height: 100%; */
  opacity: 1;
  overflow: hidden;
}

/* Tab Icon */
.deensimcpro-tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.deensimcpro-tab-icon svg {
  width: 20px;
  height: 20px;
  transition: var(--deensimcpro-tabs-transition);
}

/* Title inner & icon wrappers */
.deensimcpro-tab-title-inner,
.deensimcpro-tab-icon-wrapper {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-direction: var(--icon-dir, row);
}

.deensimcpro-tab-title-inner {
  gap: 8px;
  flex: 1;
  word-break: break-word;
  justify-content: inherit;
  text-align: inherit;
}

/* Explicit order */
.deensimcpro-tab-title-inner .deensimcpro-tab-icon,
/* .deensimcpro-tab-icon-wrapper .deensimcpro-tab-icon { order: var(--icon-order, 0) !important; } */
.deensimcpro-tab-icon-wrapper .deensimcpro-tab-icon {
  order: var(--icon-order, 0);
}
.deensimcpro-tab-title-inner .deensimcpro-tab-title-text {
  white-space: nowrap;
}

.deensimcpro-tab-title-inner .deensimcpro-tab-title-text,
/* .deensimcpro-tab-icon-wrapper .deensimcpro-tab-title-text { order: var(--text-order, 1) !important; } */
.deensimcpro-tab-icon-wrapper .deensimcpro-tab-title-text {
  order: var(--text-order, 1);
}

/* Icon wrapper directions */
.deensimcpro-tab-icon-wrapper-top,
.deensimcpro-tab-icon-wrapper-bottom {
  flex-direction: column;
  text-align: center;
}
.deensimcpro-tab-icon-wrapper-bottom {
  flex-direction: column;
}
.deensimcpro-tab-icon-wrapper-left {
  flex-direction: row;
}
.deensimcpro-tab-icon-wrapper-right {
  flex-direction: row-reverse;
}

/* Card Content Layout */
.deensimcpro-tab-card-content-wrapper {
  display: flex;
  width: 100%;
  /* gap: var(--deensimcpro-tabs-gap); */
  transition: var(--deensimcpro-tabs-transition);
}

/* Image Positioning */
.deensimcpro-tab-image-position-left .deensimcpro-tab-card-content-wrapper {
  flex-direction: row;
  /* align-items: center;  */
}
.deensimcpro-tab-image-position-right .deensimcpro-tab-card-content-wrapper {
  flex-direction: row-reverse;
  /* align-items: center; */
}
.deensimcpro-tab-image-position-top .deensimcpro-tab-card-content-wrapper {
  flex-direction: column;
}
.deensimcpro-tab-image-position-bottom .deensimcpro-tab-card-content-wrapper {
  flex-direction: column-reverse;
}

/* Optional alignment helpers */
.align-start .deensimcpro-tab-card-left-section {
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
}
.align-center .deensimcpro-tab-card-left-section {
  align-items: center;
  justify-content: center;
  text-align: center;
}
.align-end .deensimcpro-tab-card-left-section {
  align-items: flex-end;
  justify-content: flex-end;
  text-align: right;
}

/* Content Section */
.deensimcpro-tab-card-left-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20px;
}
.deensimcpro-tab-card-description {
  margin-bottom: 20px;
}

/* Image block */
.deensimcpro-tab-card-image {
  flex-shrink: 0;
  width: 40%;
  display: flex;
  justify-content: center;
  position: relative;
  overflow: hidden;
  transition: var(--deensimcpro-tabs-transition);
  padding: 20px;
}

.deensimcpro-tab-card-image img {
  border: 1px solid black;
}

/* Specific image widths */
.deensimcpro-tab-image-position-left .deensimcpro-tab-card-image,
.deensimcpro-tab-image-position-right .deensimcpro-tab-card-image {
  max-width: 50%;
}

.deensimcpro-tab-image-position-top .deensimcpro-tab-card-image {
  max-width: 100%;
  margin-bottom: var(--deensimcpro-tabs-gap);
}
.deensimcpro-tab-image-position-bottom .deensimcpro-tab-card-image {
  max-width: 100%;
}

/* Button */
.deensimcpro-tab-card-button {
  display: inline-block;
  color: #000000;
  padding: 10px;
  border-radius: var(--deensimcpro-tabs-radius);
  text-decoration: none !important;
  transition: var(--deensimcpro-tabs-transition);
  /* align-self: flex-start; */

  align-self: auto; /* was flex-start */
  width: auto;
}

.deensimcpro-tab-card-button:hover {
  transform: translateY(-2px);
}

/* Text align utilities */
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}

/* Editor specific */
.elementor-editor-active .deensimcpro-tabs-wrapper {
  pointer-events: auto;
}
.elementor-editor-active .deensimcpro-tab-content:not(.deensimcpro-active) {
  display: none;
}
.elementor-editor-active .deensimcpro-tab-content.deensimcpro-active {
  display: block;
}

/* =============================================
   Responsive
   ============================================= */

/* >= 768px: show all tabs without a scrollbar */
@media (min-width: 768px) {
  /* 1) Let the header create multiple rows and never scroll horizontally */
  .deensimcpro-tabs {
    --tabs-x: hidden; /* no horizontal scroll on desktop */
    --tabs-wrap: wrap; /* allow 2+ rows */
    --tabs-white-space: normal;
    --tab-title-ws: normal; /* labels can wrap inside buttons */
  }

  /* 2) Header must grow in height; don't clip content */
  .deensimcpro-tabs-wrapper {
    overflow-x: visible; /* important: no clipping */
    white-space: normal;
    row-gap: var(--deensimcpro-tabs-gap);
    column-gap: var(--deensimcpro-tabs-gap);
  }

  /* 3) Each tab button: allow text to wrap and item to shrink */
  .deensimcpro-tab-title {
    flex: 0 1 auto; /* allow shrinking */
    min-width: 0; /* allow shrink below content width */
    max-width: 100%;
    white-space: normal; /* wrap lines inside the button */
    word-break: break-word; /* common long words */
    overflow-wrap: anywhere; /* super-long strings */
  }

  /* 4) Inner flex wrappers must also be shrinkable */
  .deensimcpro-tab-title-inner,
  .deensimcpro-tab-title-text {
    min-width: 0; /* prevents text from pushing outside */
  }
}

@media (max-width: 767px) {
  .deensimcpro-tabs {
    --deensimcpro-tabs-padding: 15px;
    --deensimcpro-tabs-gap: 12px;
  }
  .deensimcpro-tabs-wrapper::after {
    content: "\203A";
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 20px;
    font-size: 20px;
    display: var(--arrow-state);
    align-items: center;
    justify-content: right;
    padding-right: 2px;
    background: linear-gradient(to right, transparent, #555 50%);
    color: #fff;
    z-index: 2;
  }
  .deensimcpro-tabs {
    --tabs-inner: column !important;
    --tabs-wrapper: row !important;
    --tabs-aside: auto;
    --is-vertical: 0;
    --tabs-x: auto;
    --tabs-y: hidden;
    --tabs-white-space: nowrap;
    --tabs-wrap: nowrap;
    --tab-title-ws: nowrap;
    --cw-top: none;
    --cw-right: initial;
    --cw-bottom: initial;
    --cw-left: initial;
  }

  .deensimcpro-tabs-wrapper {
    --arrow-state: none;
    position: relative;

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap;
    justify-content: start;
    width: 100%;
    flex: none;
    overflow-x: auto;
    gap: 8px;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
  }
  .deensimcpro-tabs-wrapper::-webkit-scrollbar {
    display: none;
  }

  .deensimcpro-tab-title {
    display: inline-flex;
    flex: 0 0 auto;
    min-width: max-content;
    white-space: nowrap;
    padding: 10px 15px;
  }

  .deensimcpro-tabs-content-wrapper {
    margin: 0;
  }

  .deensimcpro-tab-icon-wrapper-top {
    flex-direction: column;
  }
  .deensimcpro-tab-icon-wrapper-bottom {
    flex-direction: column-reverse;
  }
  .deensimcpro-tab-icon-wrapper-left {
    flex-direction: row;
  }
  .deensimcpro-tab-icon-wrapper-right {
    flex-direction: row-reverse;
  }

  .deensimcpro-tab-card-content-wrapper {
    flex-direction: column;
  }

  .deensimcpro-tab-image-position-left .deensimcpro-tab-card-content-wrapper,
  .deensimcpro-tab-image-position-right .deensimcpro-tab-card-content-wrapper {
    flex-direction: column;
  }

  .deensimcpro-tab-image-position-left .deensimcpro-tab-card-image,
  .deensimcpro-tab-image-position-right .deensimcpro-tab-card-image {
    order: -1;
    width: 100%;
    max-width: 100%;
  }

  .deensimcpro-tab-image-position-top .deensimcpro-tab-card-image,
  .deensimcpro-tab-image-position-bottom .deensimcpro-tab-card-image {
    max-width: 100%;
    margin: 0 0 var(--deensimcpro-tabs-gap) 0;
  }

  .deensimcpro-tab-card-button {
    align-self: center;
    width: 100%;
    text-align: center;
  }
}