/* Layout */
.support-guide-custom-filter-grid .elementor-shortcode {
  display: flex;
  flex-direction: row;
}

/* Sidebar */
.scsf-sidebar {
  display: flex;
  min-width: 260px;
  margin-right: 20px;
  flex-direction: column;
  border-top: 10px solid #F26C43;
  border-radius: 8px;
  outline: 1px solid #EAEEF5;
  padding: 32px 20px;
  background-color: #fff;
  height: auto;
  align-self: flex-start;
}

.filter-title{margin: 0px; font-weight: 500;
    font-size: 20px;
    font-family: 'Albert Sans', 'Sans-Serif'; color: #263238}

/* Sections */
.scsf-section {
  margin-top: 20px;
}

.scsf-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  padding: 8px 0px;
  border-bottom: 1px solid #EAEEF5;
}

.scsf-title{flex: 1; margin: 0px; font-weight: 500;
    font-size: 16px;
    font-family: 'Albert Sans', 'Sans-Serif'; color: #263238;} 

/* Right side (count + chevron) */
.scsf-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.scsf-count {
  font-size: 12px;
  background: #EAEEF5;
  color: #333;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

/* Chevron */
.scsf-chevron {
  width: 16px;
  height: 16px;
  background: url("https://setshapestage.wpenginepowered.com/wp-content/uploads/2025/08/akar-icons_chevron-down-1.svg") no-repeat center center;
  background-size: contain;
  transition: transform 0.2s ease;
  border: none; /* remove old triangle */
}

/* Rotate when open */
.scsf-section.active .scsf-chevron {
  transform: rotate(180deg);
}

.scsf-content {
  display: none; /* collapsed by default */
  flex-direction: column;
  margin-top: 10px;
  row-gap: 12px;
}

/* Hide the default checkbox */
.scsf-content input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  margin: 0;
  cursor: pointer;

  /* Box styling */
  width: 14px;
  height: 14px;
  border: 2px solid #EAEEF5;
  border-radius: 4.65px;
  background-color: #FDFDFD;
  display: inline-block;
  position: relative;
  vertical-align: middle;
}

/* Checked state box */
.scsf-content input[type="checkbox"]:checked {
  background-color: #2E66F6; /* Blue box */
  border-color: #2E66F6;
}

/* White checkmark */
.scsf-content input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 3px;
  width: 4px;
  height: 7px;
  border: solid #fff;   /* White check */
  border-width: 0 1px 1px 0;
  transform: rotate(45deg);
}

/* Label styling */
.scsf-content label {
  color: #828282;
  font-size: 16px;
  font-family: 'Albert Sans', 'Sans-Serif';
  cursor: pointer;
}


/* Custom RADIO BUTTONS   */
.scsf-content input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  margin: 0;
  cursor: pointer;

  width: 14px;
  height: 14px;
  border: 2px solid #EAEEF5;
  border-radius: 50%;
  background-color: #FDFDFD;
  display: inline-block;
  position: relative;
  vertical-align: middle;
}

/* Selected state */
.scsf-content input[type="radio"]:checked {
  background-color: #FDFDFD;
  border-color: #2E66F6;
}

/* White inner dot */
.scsf-content input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 6px;
  height: 6px;
  background: #2E66F6;
  border-radius: 50%;
}


/* Labels                 */
.scsf-content label {
  color: #828282;
  font-size: 16px;
  font-family: 'Albert Sans', 'Sans-Serif';
  cursor: pointer;
}


.scsf-content label {
  color: #828282 !important;
  font-size: 16px;
  font-family: 'Albert Sans', 'Sans-Serif';
  cursor: pointer;
}

.scsf-section.active .scsf-content {
  display: flex; /* expand when active */
}

.scsf-body{display: flex; flex-direction: column; flex-grow: 1; width: 60%;}

/* Container for all posts */

#scbf-posts > * {
    display: block !important;
    width: auto !important;
}

#scsf-posts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px; /* Space between posts */
}

a.e-parent {
    height: 100%;
}

#scsf-posts .elementor-icon-list-item {font-size: 14px !important;}
#scsf-posts .elementor-icon-list-text{padding-left: 10px !important;}

#scsf-posts .post-tag-bubbles div {
    color: #2E66F6 !important;
    background-color: #F2F6FE;
}
/* Load More Button */
button#scsf-load-more {border-radius: 8px; font-size: 18px; font-weight: 500; font-family: "Albert Sans"; background: none;
    padding: 16px 24px; width: auto; align-self: center; margin-top: 1rem; border: 1px solid #FF7043; color: #FF7043;
}
button#scsf-load-more:hover{background: #FF7043 ;
    color: #fff;
}
/* 2 columns for tablets / 1024px */
@media (max-width: 1024px) {
  #scsf-posts {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 1 column for mobile / 767px */
@media (max-width: 767px) {
  #scsf-posts {
    grid-template-columns: 1fr;
  }

  .support-guide-custom-filter-grid .elementor-shortcode {
  flex-direction: column;
}

.scsf-sidebar, .scsf-body{
  width: 100%;
}
.scsf-sidebar {margin-bottom: 20px;}

#scsf-posts .elementor-icon-list-item {font-size: 16px !important;}

}