.elementor-1852 .elementor-element.elementor-element-02f3a64{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--gap:0px 0px;--background-transition:0.3s;}.elementor-1852 .elementor-element.elementor-element-eb3d53b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--background-transition:0.3s;}.elementor-1852 .elementor-element.elementor-element-d55227e{text-align:center;}.elementor-1852 .elementor-element.elementor-element-3ea258d .circle-progress-bar{max-width:185px;}.elementor-1852 .elementor-element.elementor-element-3ea258d .circle-progress{width:185px;height:185px;}.elementor-1852 .elementor-element.elementor-element-3ea258d .position-in-circle{height:185px;}.elementor-1852 .elementor-element.elementor-element-3ea258d .circle-progress__meter{stroke:#e6e9ec;}.elementor-1852 .elementor-element.elementor-element-3ea258d .circle-progress__value{stroke:var( --e-global-color-92f8fba );stroke-linecap:butt;}.elementor-1852 .elementor-element.elementor-element-3ea258d .circle-counter .circle-val{color:var( --e-global-color-92f8fba );}.elementor-1852 .elementor-element.elementor-element-3ea258d .circle-counter .circle-val .circle-counter__prefix{align-self:center;}.elementor-1852 .elementor-element.elementor-element-3ea258d .circle-counter .circle-val .circle-counter__suffix{align-self:center;}.elementor-1852 .elementor-element.elementor-element-51092f4{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--background-transition:0.3s;}.elementor-1852 .elementor-element.elementor-element-7556ae2{text-align:center;color:#FCA80F;font-size:26px;font-weight:bold;line-height:12px;width:var( --container-widget-width, 200px );max-width:200px;--container-widget-width:200px;--container-widget-flex-grow:0;}.elementor-1852 .elementor-element.elementor-element-7556ae2 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:15px 8px 5px 8px;background-color:#FFF4E0;border-radius:15px 15px 15px 15px;}.elementor-1852 .elementor-element.elementor-element-7556ae2.elementor-element{--align-self:center;}.elementor-1852 .elementor-element.elementor-element-f9674f4{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--background-transition:0.3s;}.elementor-1852 .elementor-element.elementor-element-646c7be{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--background-transition:0.3s;}.elementor-1852 .elementor-element.elementor-element-82efc57{--spacer-size:150px;}@media(min-width:768px){.elementor-1852 .elementor-element.elementor-element-eb3d53b{--width:100%;}}/* Start custom CSS for container, class: .elementor-element-51092f4 *//* --- Accordion Button (Styled as Header) --- */
.accordion {
  background-color: #4C5EB3 !important; /* <<< ADDED !important */
  color: #fff;
  cursor: pointer;
  padding: 0; /* Remove default button padding */
  border: none;
  text-align: right; /* Default alignment for content */
  width: 100%;
  transition: background-color 0.3s;
  border-radius: 5px;
  margin-top: 20px;
  display: block; /* Make it block level */
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  overflow: hidden; /* Hide overflow from internal elements */
}

.accordion.active, .accordion:hover {
  background-color:red !important; /* Darker on hover/active */
}

/* Add focus styles for accessibility */
.accordion:focus {
    outline: 2px solid #FCA80F; /* Highlight color matching progress bar */
    outline-offset: 2px;
}
/* For browsers that support focus-visible */
.accordion:focus-visible {
    outline: 2px solid #FCA80F;
    outline-offset: 2px;
}

/* Container inside the button for flex layout */
.accordion-header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0px; /* Apply padding here */
    text-align: right; /* Ensure text aligns right */
    /* Default flex-direction is row (or row-reverse in RTL due to browser defaults) */
}

.accordion-header-left {
    display: flex; /* Keeps icon and info together */
    align-items: center; /* Vertically align icon and info */
    flex-grow: 1; /* Allow left side to take space */
    margin-left: 15px; /* Space between left and right (RTL needs adjustment) */
    min-width: 0; /* Prevent flex item overflow */
}

.accordion-header-icon,
.accordion-header-icon-placeholder {
    width: 35px;
    height: 35px;
    margin-right: 0; /* Remove right margin */
    margin-left: 0; /* Push icon to the right */
    flex-shrink: 0; /* Prevent icon from shrinking */
    object-fit: contain;
    border-radius: 4px; /* Placeholder style */
}

.accordion-header-info {
     min-width: 0; /* Prevent flex item overflow */
     /* Added margin to create space between icon/placeholder and info */
     margin-right: 20px; /* Space after icon/placeholder */
}

.accordion-header-title {
    font-size: 18px;
    font-weight: bold;
    display: block; /* Stack title */
    margin-bottom: 3px;
	/* Removed conflicting margin-right: 20px; */

    white-space: nowrap; /* Prevent wrapping */
    overflow: hidden; /* Hide overflow */
    text-overflow: ellipsis; /* Add ellipsis if text too long */
}

.accordion-header-details {
    font-size: 13px;
    color: #bdc3c7; /* Lighter color for details */
    display: block; /* Stack details */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.accordion-header-details span {
    margin-left: 0px; /* Space between counts (RTL) */
    /* Added spacing between detail spans in LTR */
    margin-right: 15px;
}

.accordion-header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Align right (RTL: align left) */
    flex-shrink: 0; /* Prevent shrinking */
    margin-left: 20px; /* Space between left and right header sections (RTL needs adjustment) */
}

.accordion-header-percentage {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 4px;
}

.accordion-progress-bar-container {
    width: 120px; /* Adjust width */
    height: 6px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
    overflow: hidden;
}

.accordion-progress-bar {
    height: 100%;
    background-color: #f39c12; /* Orange progress */
    border-radius: 3px;
    transition: width 0.5s ease-in-out;
}

/* --- Panel Styling --- */
.panel {
   padding: 0px 0px;
  background-color: #f8f9fa; /* Light background for content */
  display: none; /* Initially hidden */
  overflow: hidden;
  border: 1px solid #e0e0e0;
  border-top: none;
  border-radius: 0 0 5px 5px;
  margin-top: -1px; /* Overlap slightly */
}
/* Added padding when panel is active */
.accordion.active + .panel {
    padding: 15px; /* Add padding when the panel is open */
}


/* --- Engagement Card Styling (Inside Panel) --- */
.engagement-card {
  background-color: #ffffff;
  border: 1: 1px solid #e9ecef;
  border-radius: 6px;
  margin-bottom: 15px;
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.engagement-card:last-child {
    margin-bottom: 0;
}

.engagement-content {
    flex-grow: 1; /* Take available space */
    min-width: 0; /* Prevent flex item overflow */
}

.engagement-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
    gap: 10px; /* Add gap between title and number */
}

.engagement-title {
    font-size: 16px;
    font-weight: 600;
    color: #343a40;
    margin: 0;
    /* Optional: prevent wrapping if needed */
    /* white-space: nowrap; */
    /* overflow: hidden; */
    /* text-overflow: ellipsis; */
}

.engagement-number {
    font-size: 14px;
    font-weight: bold;
    color: #6c757d;
    flex-shrink: 0; /* Prevent number from shrinking/wrapping */
}

.engagement-excerpt {
    font-size: 14px;
    color: #495057;
    line-height: 1.5;
    margin-bottom: 10px;
}

.engagement-details-link {
    font-size: 13px;
    color: #007bff;
    text-decoration: none;
    font-weight: 500;
    display: inline-block;
}
.engagement-details-link:hover {
    text-decoration: underline;
}

/* --- Progress Area Styling --- */
.engagement-progress {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0; /* Prevent shrinking */
}

/* --- CORRECTED CSS FOR SVG PROGRESS CIRCLE --- */

/* Container for the SVG and text */
.percent-circle {
  /* Size is set inline by PHP (width: 65px; height: 65px;) */
  /* Removed old rules */
  /* width: 65px; height: 65px; border: 4px solid #f39c12; background-color: #e9ecef; display: flex; justify-content: center; align-items: center; */

  border-radius: 50%; /* Keep border-radius for potential background style */
  margin-bottom: 5px; /* Space below circle */
  position: relative; /* Relative positioning for the absolutely positioned text */
}

/* Style for the SVG element itself */
.progress-ring {
    display: block; /* Prevent extra space below SVG */
    /* Width and height are set inline by PHP */
}

/* Style for the background circle (the full track) */
.progress-ring-circle-bg {
    /* stroke color is set inline by PHP (#e6e6e6) */
    /* stroke-width is set inline by PHP */
    fill: transparent; /* Ensure inside is transparent */
}

/* Style for the foreground circle (the progress line) */
.progress-ring-circle-progress {
    /* stroke color is set inline by PHP (dynamic based on percentage) */
    /* stroke-width is set inline by PHP */
    fill: transparent; /* Ensure inside is transparent */
    transition: stroke-dashoffset 0.35s ease-in-out; /* Optional: Add smooth animation */
    /* Stroke-dasharray and stroke-dashoffset are set inline by PHP */
    /* transform is set inline by PHP */
}


/* Style for the percentage text (positioned absolutely over the circle) */
.percent-circle-text {
    position: absolute; /* Absolute positioning relative to .percent-circle */
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust for text element's own size */
    /* Keep your existing font styles */
    font-size: 16px;
    font-weight: bold;
    color: #343a40;
    z-index: 1; /* Ensure text is above the SVG */
    white-space: nowrap; /* Prevent wrapping */
}

/* Style the label below the circle */
.percent-label {
    font-size: 11px;
    color: #6c757d;
    text-align: center;
    white-space: nowrap; /* Prevent label wrapping */
}


/* --- RTL Adjustments --- */
html[dir="rtl"] .accordion {
    text-align: right;
}
html[dir="rtl"] .accordion-header-content {
    text-align: right;
}
html[dir="rtl"] .accordion-header-left {
    margin-left: 0;
    margin-right: 0; /* Space on the right */
}
html[dir="rtl"] .accordion-header-icon,
html[dir="rtl"] .accordion-header-icon-placeholder {
    margin-left: 0;
    margin-right: 0;
}
html[dir="rtl"] .accordion-header-details .commit-total {
    margin-left: 0;
    margin-right: 20px;
}
html[dir="rtl"] .accordion-header-right {
    align-items: flex-start; /* Align left in RTL */
}

/* Engagement Card RTL (Keep your original flex layout) */
html[dir="rtl"] .engagement-card {
    /* Do NOT add flex-direction: row-reverse; here */
    /* Rely on the default browser behavior for flex-direction: row */
}

html[dir="rtl"] .engagement-content {
    padding-right: 0;
    padding-left: 0px;
}
html[dir="rtl"] .engagement-header {
    /* Keep this if it was in your working CSS for reversing title/number */
    /* flex-direction: row-reverse; */
    /* justify-content: space-between; */
}
html[dir="rtl"] .engagement-title {
     margin-left: 0;
     margin-right: 0;
}
html[dir="rtl"] .engagement-number {
     margin-left: 0;
     margin-right: 0;
     text-align: left; /* Align number to the left within its flex item */
}
html[dir="rtl"] .engagement-excerpt {
    text-align: right; /* Align excerpt text right */
}
html[dir="rtl"] .engagement-details-link {
    text-align: right; /* Ensure link alignment */
}
html[dir="rtl"] .engagement-progress {
     align-items: center; /* Keep circle and label centered */
}
/* .percent-circle and .percent-circle-text centering works with transform, no RTL change needed */
html[dir="rtl"] .percent-label {
     text-align: center; /* Keep label centered below circle */
}


/* --- Mobile Specific Styles for Accordion Header --- */
@media (max-width: 767px) { /* Adjust breakpoint as needed (e.g., 768px, 600px) */

    .accordion-header-content {
        flex-direction: column; /* Stack .accordion-header-left and .accordion-header-right vertically */
        align-items: center; /* Center the stacked blocks horizontally */
        padding: 15px; /* Adjust padding for mobile layout */
    }

    .accordion-header-left {
        width: 100%; /* Make the left block take full width when stacked */
        /* Remove horizontal margins */
        margin-left: 0;
        margin-right: 0;
        /* Add bottom margin for spacing below */
        margin-bottom: 15px;
        /* Center content (icon+info) within the left block */
        justify-content: center;
    }

    /* Adjust spacing between icon/placeholder and info in mobile header */
     .accordion-header-icon,
     .accordion-header-icon-placeholder {
          margin-right: 10px; /* Space after icon in LTR */
          margin-left: 0;
     }
     html[dir="rtl"] .accordion-header-icon,
     html[dir="rtl"] .accordion-header-icon-placeholder {
          margin-left: 10px; /* Space after icon in RTL */
          margin-right: 0;
     }

    /* Center the info block's text content */
    .accordion-header-info {
        text-align: center;
    }
    /* Remove margins from title that pushed it left/right */
    .accordion-header-title {
        margin-right: 0;
        margin-left: 0;
    }
     html[dir="rtl"] .accordion-header-title {
         margin-right: 0;
         margin-left: 0;
     }

    /* Adjust spacing between details (counts) in mobile header */
    .accordion-header-details span {
        margin-left: 10px; /* Space between counts in RTL */
        margin-right: 10px; /* Space between counts in LTR */
    }


    .accordion-header-right {
        width: 100%; /* Make the right block take full width when stacked */
        /* Center content (percentage+bar) within the right block */
        align-items: center;
         /* Remove horizontal margins */
         margin-left: 0;
         margin-right: 0;
    }

    /* Progress bar container width - center if it's not 100% wide */
    .accordion-progress-bar-container {
        /* width: 120px; */ /* Keep the original width you set */
        margin: 0 auto; /* Center the block horizontally */
    }

     /* Percentage text - remove horizontal margin */
     .accordion-header-percentage {
         margin-right: 0;
         margin-left: 0;
     }
}/* End custom CSS */