/* Specialized Landing Page - Flexible template styles */
/* Loaded only on the specialized-landing-page-flexible.php template. */

/********Provider Search Box****************/
.provider-dashboard-search{
    padding-bottom: 5px;
}
.provider-search-wrapper {
    background: #EBF3F5;
    border-radius: 12px;
    padding: 40px 20px;
    text-align: center;
    margin-bottom: 32px;
}
.provider-search-header{
    padding-bottom: 24px;
}
.provider-search-title {
    color: #0A0A0A;
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 8px;
    line-height: 32px; 
letter-spacing: -0.6px;
}
.provider-search-subtitle {
    color: #2C353F;
    text-align: center;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px; 
    margin: 0 0 24px;
}
.provider-search-box {
    position: relative;
    max-width: 580px;
    margin: 0 auto;
}
.provider-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    pointer-events: none;
    z-index: 1;
}
.provider-search-input {
    width: 100%;
    padding: 14px 16px 14px 44px;
    border: 1.5px solid #1A7A8A;
    border-radius: 8px;
    font-size: 15px;
    color: #274552;
    background: #fff;
    outline: none;
    box-sizing: border-box;
}
.provider-search-input::placeholder {
    color: #9EADB3;
}
.provider-search-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #E5E5E5;
    border-radius: 8px;
    list-style: none;
    margin: 0;
    padding: 6px 0;
    z-index: 100;
    max-height: 420px;
    overflow-y: auto;
    text-align: left;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    margin-top: -4px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}


.provider-search-dropdown.open {
    display: block;
}
.provider-search-dropdown li {
    padding: 10px 16px;
    font-size: 14px;
    color: #274552;
    cursor: pointer;
    border-bottom: #E5E5E5 1px solid;
}
.provider-search-dropdown li:last-child {
    border-bottom: none;
    background: #fff;
}
.provider-search-dropdown li:hover,
.provider-search-dropdown li.highlighted {
    background: #f6fafb;
    color: #1A7A8A;
}

.provider-search-dropdown .pw-dd-name {
   color: #0A0A0A;
    font-size: 16px;
    font-style: normal;
    font-weight: 510;
    line-height: 24px; 
    letter-spacing: -0.32px;
}
.provider-search-dropdown  .pw-dd-trend--stable {
    background: #F5F5F5;
    color: #737373;
}
.provider-search-dropdown   .pw-dd-trend--worsening{
    color: #E63946;
    background-color: #F5F5F5   ;
}
.provider-search-dropdown   .pw-dd-trend--improving {
    background: rgba(64, 119, 163, 0.10);
    color:#4077A3;
}
.provider-search-dropdown  .pw-dd-count {
    font-size: 14px;
    color: #737373;
}
.provider-search-dropdown  .pw-dd-stars {
    font-size: 20px;
 
}
.provider-dashboard .pw-nc-text{
    font-size: 18px;
    color: #59656D;
    max-width: 95%;
}
.provider-dashboard  .pw-nc-breakdown{
    border: 1px #E5E7EB dashed;
}
.provider-dashboard  .pw-nc-breakdown-text{
    font-size: 16px;
    color: #59656D;
}
.provider-dashboard  .pw-nc-breakdown-title {
    font-size: 18px;
}
.provider-dashboard  .pw-nc-month-item{
    margin: 0px 5px;
}
.provider-dashboard  .pw-nc-month-item span{
    color:#59656D;
}


/*************Start custom css*************/
.sources-info{
    margin-bottom: 15px;
    color: #59656D;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px; 
}
.sources-info strong{
    color: #274552;;
    font-weight: 500;
}
.sources-info a{
    color: #2D788D;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px; 
    
}

/*************End custom css*************/

.city-banner-content p{
    max-width: 590px;
}
/* Provider dashboard (Champion Energy section) */
.provider-dashboard {
    margin-bottom: 10px;

}

.provider-header {
    margin-bottom: 24px;
}

.provider-header h2 {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 8px;
    color: #111827;
}

.provider-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.provider-rating .stars {
    color: #FBBF24;
    font-size: 18px;
    letter-spacing: 2px;
}

.provider-rating .rating-text {
    color: #6B7280;
    font-size: 14px;
}

.provider-summary {
    color: #6B7280;
    font-size: 14px;
    margin: 0;
    padding-top:10px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 16px;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    background: #ffffff;
}

.stat-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    flex-shrink: 0;
}

.stat-icon svg {
    width: 20px;
    height: 20px;
}

.icon-rating {
    background: rgba(234, 86, 53, 0.10);
    color: #EA5635;
}

.icon-complaints {
    background: #F5F5F5;
    color: #737373;
}

.icon-trend {
    background: #F3F4F6;
    color: #6B7280;
}

.stat-content {
    display: flex;
    flex-direction: column;
}

.stat-label {
    font-size: 12px;
    color: #6B7280;
    margin-bottom: 2px;
    line-height: normal;
}

.stat-value {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    line-height: normal;
}

.charts-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.chart-card,
.breakdown-card {
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    padding: 20px;
    background: #ffffff;
}

.chart-card h3,
.breakdown-card h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 2px;
    color: #111827;
     line-height: normal;
}

.specialized-template .chart-subtitle {
    font-size: 13px;
    color: #6B7280;
    margin: 0 0 20px;
}

.bar-chart {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: 200px;
    gap: 8px;
    padding-bottom: 15px;
    padding-left: 20px;
    position: relative;
}

.bar-chart::before,
.bar-chart::after {
    position: absolute;
    left: 0;
    font-size: 11px;
    color: #9CA3AF;
    line-height: 1;
}

.bar-chart::before {
    content: attr(data-max);
    top: 0;
}

.bar-chart::after {
    content: "0";
    bottom: 28px;
}

.bar-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    position: relative;
}

.bar-fill {
    width: 100%;
    max-width: 50px;
    background: #E85A3C;
    border-radius: 4px 4px 0 0;
    height: calc(var(--bar-value) * 100%);
    min-height: 1px;
}

.bar-label {
    position: absolute;
    bottom: -24px;
    font-size: 12px;
    color: #6B7280;
    text-transform: uppercase;
}

.donut-chart {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 160px;
}

.donut-chart canvas {
    width: 160px;
    height: 160px;
}

.breakdown-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.breakdown-item {
    display: grid;
    grid-template-columns: 0px 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 6px 0px;
    position: relative;
}

.breakdown-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    grid-row: 1 / 3;
    margin-top:-10px;
}

.breakdown-label {
    font-size: 14px;
    color: #111827;
    grid-column: 2;
    padding-left:20px;
}

.breakdown-bar {
    grid-column: 2;
    height: 6px;
    background: #F3F4F6;
    border-radius: 3px;
    overflow: hidden;
}

.breakdown-fill {
    display: block;
    height: 100%;
    border-radius: 3px;
}

.breakdown-count {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    text-align: right;
    white-space: nowrap;
    grid-column: 3;
    grid-row: 1 / 3;
    position: absolute;
    right: 0;
    bottom:10px;
}

.breakdown-count.muted {
    font-weight: 300;
    color: #9CA3AF;
}

.breakdown-dot.billing,
.breakdown-fill.billing { background: #E85A3C; }

.breakdown-dot.customer-service,
.breakdown-fill.customer-service { background: #5B9DB8; }

.breakdown-dot.service-transfer,
.breakdown-fill.service-transfer { background: #2E6B7A; }

.breakdown-dot.disconnection,
.breakdown-fill.disconnection { background: #1A3A4A; }

.breakdown-dot.contract,
.breakdown-fill.contract { background: #D4C5A3; }

/* Sources / methodology section */

.sources-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.source-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
}

.source-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: #E6F4F8;
    color: #2D788D;
    border-radius: 6px;
}

.source-icon svg {
    width: 22px;
    height: 22px;
}

.source-text {
    margin: 0;
    color: #111827;
    font-size: 16px;
    line-height: 1.5;
}

.source-text strong {
    font-weight: 600;
}

.sources-note {
    color: #59656D;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

/********Complaint Ratings Section****************/
.complaint-ratings-layout {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 40px;
}
.complaint-input-card {
    flex: 0 0 350px;
    border: 2px solid #E8A89C;
    border-radius: 10px;
    background: #FFF5F4;
    padding: 24px 20px;
    text-align: center;
}
.city-content-row  .complaint-input-card span{
    display: block;
    color: #D94F3D;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.city-content-row .complaint-input-card h3 {
    color: #274552;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 10px;
}
.city-content-row  .complaint-input-card p:first-child   {
    color: #EF5B4E;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
    font-weight: 600;
}
.city-content-row  .complaint-input-card p {
    color: #59656D;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}
.complaint-plus-sign {
    flex: 0 0 auto;
    font-size: 40px;
    font-weight: 300;
    color: #274552;
    line-height: 1;
}
.complaint-evaluate-card {
    flex: 1;
    border: 1px solid #DCE3E5;
    border-radius: 10px;
    padding: 20px 20px 24px 20px ;
}
.city-content-row .complaint-evaluate-title {
    color: #1A7A8A;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0 0 10px;
    padding-top:0px;
    line-height: 22px;
}
.city-content-row .complaint-evaluate-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 20px;
}
.city-content-row .complaint-evaluate-list li {
    color: #274552;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    padding-left: 22px;
    position: relative;
}
.complaint-evaluate-list li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    color: #1A7A8A;
    font-weight: 700;
}
@media (max-width: 767px) {
    .complaint-ratings-layout {
        flex-direction: column;
        align-items: stretch;
    }
    .complaint-input-card {
        flex: none;
    }
    .complaint-plus-sign {
        text-align: center;
    }
    .complaint-evaluate-list {
        grid-template-columns: 1fr;
    }
    .city-content-row .complaint-evaluate-list {
       grid-template-columns: inherit;
 
    }
    .bar-fill{max-width: 35px;}
}

/********Rating section css****************/
.city-content-row .rating-section-title{
    color:#274552;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px; 
}
.city-content-row  .rating-text{
    color:  #274552;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px; 
}
.rating-main-block{
    border: 1px solid #DCE3E5;
    border-radius: 10px;
    padding: 24px;
    margin-bottom: 20px;
    margin-top: 25px;
}
.rating-group-row{
    border-bottom: 1px #DCE3E5 solid;
    padding: 10px 0px;
    display: flex;
    justify-content: space-between;
}
.rating-group-row:last-child{
    border-bottom: none;
}
.rating-note{
    color: #59656D;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22.75px; 
}
.specialized-template .pros-cons-layout .thumbs-up {
    flex:inherit;
}
.specialized-template .pros-cons-layout .thumbs-up ul{
     display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
.specialized-template .pros-cons-layout .thumbs-down {
    flex:inherit;
}
.specialized-template .pros-cons-layout .thumbs-down ul{
     display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.puct-complaint{
    color: #59656D;
    font-size: 11.8px;
    font-weight: 400;
    line-height: 16px; 
    padding-top:25px;
}
.chart-description{
    color: #2C353F;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px; 
}

.rep-rating .rating{
    background-size: 22px;
    height: 18px;
    width: 110px;
    margin-right: 5px;
}
.specialized-template .rep-rating .rating-active{
    background-size: 22px;
}
.specialized-template .rep-rating .rating-number{
    color: #737373;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; 
    letter-spacing: -0.154px;
}
.overview-charts .chart-card:last-child{
    border-radius: 11.2px;
    border: 2px solid rgba(45, 120, 141, 0.30);
    background: rgba(224, 242, 247, 0.40);
}
.overviewchart-image {
    text-align: center;
    position: relative;
    height: 220px;
}
.overviewchart-image canvas {
    max-width: 100%;
}
.overview-charts .chart-card--monthly-volume .chart-subtitle {
    color: #6B7280;
}
.overview-charts .chart-card--rating-distribution .chart-subtitle {
    color: #6B7280;
}
.overview-charts .chart-card--complaint-distribution .chart-subtitle {
    color: #6B7280;
}


/*******************************************/
@media (max-width: 991px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }

    .charts-row {
        grid-template-columns: 1fr;
    }

    .sources-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
.specialized-template .pros-cons-layout .thumbs-up ul, .specialized-template .pros-cons-layout .thumbs-down ul {
    
    grid-template-columns: inherit;
    
}
.rating-group-row {
    justify-content: inherit;
    flex-direction: column;
}
.source-text{
    font-size: 14px;
}


}
@media (max-width: 575px) {

    .stat-card {
        padding: 12px;
    }

    .stat-value {
        font-size: 16px;
    }

    .donut-chart canvas {
        width: 140px;
        height: 140px;
    }

    .breakdown-item {
        grid-template-columns: 16px 1fr auto;
        gap: 4px 0px;
    }

    .breakdown-count {
        font-size: 13px;
    }
}

/* ── No-complaints fallback card ─────────────────────────────────────────── */
.pw-no-complaints-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 48px 32px;
    background: #F0FAF4;
    border: 1.5px solid #A7D7B4;
    border-radius: 12px;
    margin-top: 8px;
}

.pw-no-complaints-icon {
    width: 72px;
    height: 72px;
    background: #D1F2DA;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: #1E7A3C;
}

.pw-no-complaints-title {
    font-size: 20px;
    font-weight: 700;
    color: #1E7A3C;
    margin: 0 0 12px;
}

.pw-no-complaints-text {
    font-size: 15px;
    color: #3D6B47;
    margin: 0;
    max-width: 480px;
    line-height: 1.6;
}

@media (max-width: 600px) {
    .pw-no-complaints-card {
        padding: 32px 20px;
    }
}