/* Overall Total Reviews Section */
.esrc-total-reviews {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
}

/* Header Row */
.header-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    align-items: center;
	gap:50px;
}

/* Left and Right Columns */
.left-column,
.right-column {
    flex: 50%;
}

/* Average Rating */
.average-rating {
    font-size: 1.5em;
    margin-right: 10px;
}

/* Total Reviews */
.total-reviews {
    font-size: 1em;
}

/* Progress Bars Section */
.rating-bar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 5px;
    gap: 10px;
}

/* Star Rating Style */
.star-ratings {
    display: flex;
    align-items: center;
}

/* ====================================
   WINDMILL STAR RATING 
   WooCommerce ile çakışma YOK!
   ==================================== */
.windmill-star-rating {
    margin: 0;
    display: flex;
    align-items: center;
}

.windmill-star-rating .esrc-review-icon {
    font-size: 18px;
    color: #111827;
    cursor: pointer;
}

.windmill-star-rating .esrc-review-icon {
    color: #111827;
}

.windmill-star-rating .esrc-review-icon.is-active {
    color: #111827;
}

/* Progress Bar Container */
.progress-bar {
    flex: 1;
    background: #e5e7eb;
    border-radius: 5px;
    height: 10px;
}

/* Filled Bar */
.filled-bar {
    background: #111827;
    height: 100%;
    border-radius: 5px;
}

/* Error styling */
.esrc-error-message {
    font-size: 12px;
    color: red;
    margin-top: 5px;
    display: none;
}

/* Review note styling */
.review-note {
    font-size: 14px;
    color: #333;
    margin: 10px 0 14px;
}

.esrc-widget .review-popup .esrc-interactive-rating {
    margin: 0 0 14px;
}

/* Popup close button: fixed square dimensions prevent theme padding from stretching it. */
.popup-close {
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 2;
    width: 36px;
    height: 36px;
    min-width: 36px;
    padding: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    color: #111;
    background: transparent;
    border: 1px solid currentColor;
    border-radius: 50%;
    box-shadow: none;
    transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
    appearance: none;
    -webkit-appearance: none;
}
.popup-close i,
.popup-close svg {
    display: block;
    flex: 0 0 auto;
    pointer-events: none;
}
.popup-close svg,
.popup-close svg path {
    fill: currentColor;
}
.popup-close:focus-visible {
    outline: 1px solid currentColor;
    outline-offset: 2px;
}

/* Center the popup */
.popup {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 750px;
    background-color: rgba(255, 255, 255, 1);
    justify-content: center;
    align-items: center;
}

/* Background blur effect */
.popup-open .content {
    filter: blur(10px);
}

.popup-content {
    padding: 30px;
    text-align: left;
    position: relative;
}

.popup-content p {
    margin-bottom: 10px !important;
}

/* Background overlay for closing the popup on click */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    display: none;
}

/* Disable pointer events for static stars in the comment section */
.esrc-comments .windmill-star-rating .esrc-review-icon {
    pointer-events: none;
}

/* Comment Container */
.esrc-comment {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    padding: 20px;
}

/* Alternating background colors for comments */
.esrc-comment:nth-child(odd) {
    background-color: #ffffff;
}

.esrc-comment:nth-child(even) {
    background-color: #f7f7f8;
}

/* Comment Header */
.comment-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

/* First Column: Profile Picture */
.comment-left {
    display: flex;
    align-items: center;
}

/* Profile Picture */
.profile-picture {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 10px;
}

/* Second Column: Name, Rating, Date */
.comment-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 5px;
}

.comment-info p {
    margin-bottom: 0px !important;
}

/* Date Style */
.comment-date {
    font-size: 13px;
    color: #6b7280;
}

/* Third Column: Reply Button */
.comment-reply {
    margin-left: 10px;
}

/* Reply Button */
.reply-btn {
    margin-left: auto;
    padding: 8px 12px !important;
    background-color: #111827 !important;
    color: #ffffff !important;
    font-size: 12px !important;
}

/* Comment Body */
.comment-body {
    margin-top: 10px;
}

.comment-body p {
    margin-bottom: 0px!important;
}

/* Reply Comment Styling */
.esrc-reply {
    padding: 15px;
    background-color: #f0f0f0;
    margin-left: 20px;
    border-radius: 8px;
    margin-top: 10px;
}

/* Additional styling for left and right columns */
.left-column {
    width: 50%;
    float: left;
}

.right-column {
    width: 50%;
    float: right;
}

.rating-and-progress {
    display: flex;
    justify-content: space-around;
    width: 100%;
    background: #f8fafc;
    padding: 20px;
    margin-bottom: 20px;
    align-items: center;
    gap: 24px;
    box-sizing: border-box;
}

.rating-left-column {
    flex: 0 0 35%;
    min-width: 0;
    padding-inline: 0;
    margin-inline: 0;
    text-align: center;
}

.rating-right-column {
    flex: 1 1 65%;
    min-width: 0;
    padding-inline: 0;
    margin-inline: 0;
}

.esrc-main {
    display: flex;
    gap: 25px;
}

.average-rating {
    font-size: 35px;
    font-weight: 600;
}

/* CSS for Comments */
.comment-background-white {
    background-color: #ffffff;
}

.comment-background-light-pink {
    background-color: #ffffff;
}

/* Additional classes for replies */
.reply-background-white {
    background-color: #ffffff;
}

.reply-background-light-pink {
    background-color: #ffffff;
}

.no-reviews-message {
    text-align: center;
}

.esrc-widget textarea.review-content, .esrc-widget textarea.reply-content {
    min-height: 20vh;
}

/* Mobile view adjustments */
@media (max-width: 768px) {
    .esrc-main {
        flex-direction: column;
    }

    .left-column, .right-column {
        width: 100%;
        float: none;
    }

    .esrc-comment {
        padding: 15px;
    }
}

/* ====================================
   COMMENT SECTION'DA YILDIZLAR STATİK
   Tıklanamaz, hover çalışmaz
   ==================================== */
.esrc-comment .windmill-star-rating {
    pointer-events: none;
}

.esrc-comment .windmill-star-rating .esrc-review-icon {
    cursor: default;
}

/* ====================================
   WOOCOMMERCE UYUMLULUK
   WooCommerce'in kendi star-rating'i korunur
   ==================================== */
.woocommerce .star-rating {
    /* WooCommerce'in kendi stilleri korunur */
    /* Hiçbir şey override edilmez */
}

/* ====================================
   SADECE BİZİM WİDGETIMIZDAKİ YILDIZLAR
   ==================================== */
.esrc-widget .windmill-star-rating {
    /* Bizim stillerimiz sadece widget içinde çalışır */
}

/* ====================================
   POPUP'TAKİ YILDIZLAR AKTİF
   Tıklanabilir ve hover çalışır
   ==================================== */
.esrc-widget .review-popup .windmill-star-rating .esrc-review-icon {
    cursor: pointer;
    pointer-events: auto;
    transition: color 0.2s ease;
}

.esrc-widget .review-popup .windmill-star-rating .esrc-review-icon:hover {
    transform: scale(1.1);
}

/* Elementor review rating widget. */
.windmill-rating-widget-wrap {
    display: flex;
    width: 100%;
}

.windmill-rating-widget-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: inherit;
    text-decoration: none;
}

.windmill-rating-widget-link:hover,
.windmill-rating-widget-link:focus {
    color: inherit;
    text-decoration: none;
}

.windmill-rating-widget-stars {
    display: inline-flex;
    align-items: center;
}

.windmill-rating-widget-count {
    display: inline-block;
    line-height: 1;
}

/* Keep Elementor controls authoritative without changing the existing markup. */
.esrc-widget .header-row h2 {
    margin-top: 0;
}

.esrc-widget .write-review-btn,
.esrc-widget .reply-btn,
.esrc-widget .submit-review-btn,
.esrc-widget .submit-reply-btn {
    cursor: pointer;
}

.esrc-widget .comment-left img {
    object-fit: cover;
}


/* Rating widget uses full, half and outline Font Awesome stars in one color. */
.windmill-rating-stars {
    display: inline-flex;
    align-items: center;
    gap: 0;
    line-height: 1;
    white-space: nowrap;
}

.windmill-rating-stars .esrc-review-icon {
    color: #111827;
    flex: 0 0 auto;
}

.esrc-status-message {
    display: none;
    margin-top: 10px;
}

.esrc-no-summary {
    width: 100%;
}

.esrc-widget[id^="windmill-reviews-"] {
    scroll-margin-top: 30px;
}


.esrc-widget .esrc-guest-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}
.esrc-widget .esrc-guest-fields input {
    width: 100%;
    min-width: 0;
}
@media (max-width: 600px) {
    .esrc-widget .esrc-guest-fields { grid-template-columns: 1fr; }
}


/* Form fields: keep the border width fixed so focus never shifts the layout. */
.esrc-widget .review-popup input[type="text"],
.esrc-widget .review-popup input[type="email"],
.esrc-widget .reply-popup input[type="text"],
.esrc-widget .reply-popup input[type="email"],
.esrc-widget .review-popup textarea,
.esrc-widget .reply-popup textarea {
    border: 1px solid #111;
    outline: none;
    box-shadow: none;
    transition: border-color 120ms ease, background-color 120ms ease;
}

.esrc-widget .review-popup input[type="text"]:focus,
.esrc-widget .review-popup input[type="email"]:focus,
.esrc-widget .reply-popup input[type="text"]:focus,
.esrc-widget .reply-popup input[type="email"]:focus,
.esrc-widget .review-popup textarea:focus,
.esrc-widget .reply-popup textarea:focus {
    border-color: #111;
    outline: none;
    box-shadow: none;
}

.esrc-widget .esrc-status-message {
    display: none;
    margin: 44px 0 24px;
    text-align: center;
    font-size: 18px;
    line-height: 1.5;
}


/* Elementor editor popup preview: visible for styling without blocking the canvas. */
.elementor-editor-active .esrc-widget .popup-overlay--editor-preview {
    pointer-events: none;
}
.elementor-editor-active .esrc-widget .esrc-editor-popup-preview {
    pointer-events: auto;
}

/* Stable Elementor popup preview. The preview is driven by wrapper data attributes,
   so style-control updates do not rely on transient inline open/close state. */
.elementor-editor-active .esrc-widget[data-popup-preview]:not([data-popup-preview=""]) .popup-overlay {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
    animation: none !important;
    transition: none !important;
}
.elementor-editor-active .esrc-widget[data-popup-preview="review"] .review-popup,
.elementor-editor-active .esrc-widget[data-popup-preview="reply"] .reply-popup,
.elementor-editor-active .esrc-widget[data-popup-preview="login"] .login-required-popup {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    animation: none !important;
    transition: none !important;
}
.elementor-editor-active .esrc-widget[data-popup-preview="review"] .reply-popup,
.elementor-editor-active .esrc-widget[data-popup-preview="review"] .login-required-popup,
.elementor-editor-active .esrc-widget[data-popup-preview="reply"] .review-popup,
.elementor-editor-active .esrc-widget[data-popup-preview="reply"] .login-required-popup,
.elementor-editor-active .esrc-widget[data-popup-preview="login"] .review-popup,
.elementor-editor-active .esrc-widget[data-popup-preview="login"] .reply-popup {
    display: none !important;
}

/* Elementor panel-driven confirmation preview. */
.elementor-editor-active .esrc-widget[data-popup-preview="confirmation"] .popup-overlay {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
    animation: none !important;
    transition: none !important;
}
.elementor-editor-active .esrc-widget[data-popup-preview="confirmation"] .review-popup {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    animation: none !important;
    transition: none !important;
}
.elementor-editor-active .esrc-widget[data-popup-preview="confirmation"] .review-popup .esrc-form-body {
    display: none !important;
}
.elementor-editor-active .esrc-widget[data-popup-preview="confirmation"] .review-popup .review-status {
    display: block !important;
}
.elementor-editor-active .esrc-widget[data-popup-preview="confirmation"] .reply-popup,
.elementor-editor-active .esrc-widget[data-popup-preview="confirmation"] .login-required-popup {
    display: none !important;
}


/* One selectable Elementor icon powers summary, cards, form and rating widget. */
.esrc-review-icon {
    --esrc-icon-fill: 0%;
    position: relative;
    display: inline-flex;
    width: 1em;
    height: 1em;
    line-height: 1;
    color: #111827;
    flex: 0 0 auto;
    vertical-align: middle;
}

.esrc-review-icon__base,
.esrc-review-icon__fill {
    position: absolute;
    inset: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.esrc-review-icon__base {
    opacity: 1;
    color: currentColor;
}

/* Standard stars use Font Awesome's real regular outline glyph. For custom
   SVG/icons, keep the fallback outline deliberately thin to avoid a bold look. */
.esrc-review-icon__base i.far,
.esrc-review-icon__base i.fa-regular {
    color: currentColor !important;
    -webkit-text-stroke: 0 !important;
}
.esrc-review-icon__base i:not(.far):not(.fa-regular) {
    color: transparent !important;
    -webkit-text-stroke: .45px currentColor;
    text-stroke: .45px currentColor;
}
.esrc-review-icon__base svg,
.esrc-review-icon__base svg * {
    fill: transparent !important;
    stroke: currentColor !important;
    stroke-width: .75;
    vector-effect: non-scaling-stroke;
}

.esrc-review-icon__fill {
    overflow: hidden;
    width: var(--esrc-icon-fill);
    justify-content: flex-start;
    opacity: 1;
}

.esrc-review-icon i,
.esrc-review-icon svg {
    display: block;
    width: 1em;
    height: 1em;
    min-width: 1em;
    color: currentColor;
    fill: currentColor;
}

.esrc-review-icon__fill i,
.esrc-review-icon__fill svg {
    flex: 0 0 1em;
}

.esrc-interactive-rating .esrc-review-icon {
    cursor: pointer;
    pointer-events: auto;
    transition: transform .15s ease;
}

.esrc-interactive-rating .esrc-review-icon:hover,
.esrc-interactive-rating .esrc-review-icon:focus-visible {
    transform: scale(1.08);
}

.esrc-review-icon__fill i { color: currentColor !important; -webkit-text-stroke: 0 !important; }
.esrc-review-icon__fill svg, .esrc-review-icon__fill svg * { fill: currentColor !important; stroke: none !important; }


/* Stable star rendering: full and empty states render one glyph only. */
.esrc-review-icon.is-full > i,
.esrc-review-icon.is-empty > i,
.esrc-review-icon.is-full > svg,
.esrc-review-icon.is-empty > svg {
    position: static;
    display: block;
    width: 1em;
    height: 1em;
}
.esrc-review-icon.is-full > i,
.esrc-review-icon.is-full > svg,
.esrc-review-icon.is-full > svg * {
    color: currentColor !important;
    fill: currentColor !important;
    stroke: none !important;
    -webkit-text-stroke: 0 !important;
}
.esrc-review-icon.is-empty > i.far,
.esrc-review-icon.is-empty > i.fa-regular {
    color: currentColor !important;
    -webkit-text-stroke: 0 !important;
}

/* v1.4.4: interactive review-form stars keep outline + fill layers alive. */
.esrc-widget .review-popup .esrc-review-icon--interactive {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    color: inherit;
}
.esrc-widget .review-popup .esrc-review-icon--interactive .esrc-review-icon__base,
.esrc-widget .review-popup .esrc-review-icon--interactive .esrc-review-icon__fill {
    position: absolute;
    inset: 0;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    height: 100%;
}
.esrc-widget .review-popup .esrc-review-icon--interactive .esrc-review-icon__fill {
    width: var(--esrc-icon-fill, 0%);
    overflow: hidden;
}

/* v1.4.6: the default interactive FA star is a single glyph, never layered. */
.esrc-widget .review-popup .esrc-review-icon--fa-star {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
}
.esrc-widget .review-popup .esrc-review-icon--fa-star > i {
    position: static;
    display: block;
    width: 1em;
    height: 1em;
    min-width: 1em;
    color: currentColor !important;
    fill: currentColor !important;
    -webkit-text-stroke: 0 !important;
}
.esrc-widget .review-popup .esrc-review-icon--layered .esrc-review-icon__fill {
    min-width: 0 !important;
    max-width: var(--esrc-icon-fill, 0%);
}


/* v1.4.12 — portable default design.
   Themes may set very light global text/link colors; these defaults keep both
   widgets readable until the user explicitly overrides them in Elementor. */
.windmill-rating-widget-link {
    gap: 6px;
    color: #111827;
    font-size: 13px;
    line-height: 1.2;
}
.windmill-rating-widget-link:hover,
.windmill-rating-widget-link:focus {
    color: #111827;
}
/* v1.4.22 — value + count share one inline-flex text group so the gap between
   them is controlled independently of the stars-to-text gap. */
.windmill-rating-widget-text {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.windmill-rating-widget-value,
.windmill-rating-widget-count,
.windmill-rating-widget-custom {
    display: inline-block;
    color: #111827;
    line-height: 1.2;
    white-space: nowrap;
}
.windmill-rating-widget-value {
    font-weight: 600;
}
.windmill-rating-widget-count,
.windmill-rating-widget-custom {
    font-weight: 400;
}
.windmill-rating-stars {
    gap: 2px;
}
.windmill-rating-stars .esrc-review-icon {
    font-size: 16px;
    color: #111827;
}

.esrc-widget,
.esrc-widget .average-rating,
.esrc-widget .total-reviews,
.esrc-widget .rating-bar > span,
.esrc-widget .no-reviews-message,
.esrc-widget .no-reviews-message h4,
.esrc-widget .comment-info,
.esrc-widget .comment-info > p,
.esrc-widget .comment-body,
.esrc-widget .comment-body p {
    color: #111827;
}
.esrc-widget .rating-and-progress {
    background-color: #f7f7f8;
}
.esrc-widget .progress-bar {
    background-color: #ffffff;
}
.esrc-widget .filled-bar {
    background-color: #111827;
}
.esrc-widget .rating-and-progress .esrc-review-icon,
.esrc-widget .esrc-comment .windmill-star-rating .esrc-review-icon {
    color: #111827;
}


/* v1.4.13 — neutral, marketplace-ready defaults. */
.esrc-widget .rating-and-progress {
    background-color: #f8fafc;
    border: 1px solid #e5e7eb;
}

.esrc-widget .comment-background-white,
.esrc-widget .reply-background-white {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
}

.esrc-widget .comment-background-light-pink,
.esrc-widget .reply-background-light-pink {
    background-color: #f7f7f8;
    border: 1px solid #e5e7eb;
}

.esrc-widget .progress-bar {
    background-color: #e5e7eb;
}

.esrc-widget .average-rating,
.esrc-widget .total-reviews,
.esrc-widget .rating-bar > span,
.esrc-widget .comment-info > p:first-child,
.esrc-widget .comment-body p,
.esrc-widget .no-reviews-message {
    color: #111827;
}

.esrc-widget .comment-date {
    color: #6b7280;
}


/* ====================================
   PORTABLE NEUTRAL DEFAULT UI
   Keeps the plugin readable on any theme. Elementor controls override these.
   ==================================== */
.esrc-widget {
    --esrc-text: #111827;
    --esrc-muted: #6B7280;
    --esrc-border: #D1D5DB;
    --esrc-surface: #FFFFFF;
    --esrc-surface-muted: #F8FAFC;
    --esrc-action: #111827;
    --esrc-action-hover: #374151;
    color: var(--esrc-text);
}

.esrc-widget .header-row h2,
.esrc-widget .popup-content h3,
.esrc-widget .login-required-popup h3,
.esrc-widget .no-reviews-message {
    color: var(--esrc-text);
}

.esrc-widget .header-row h2 {
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.15;
    font-weight: 600;
}

.esrc-widget button.write-review-btn,
.esrc-widget button.reply-btn,
.esrc-widget button.submit-review-btn,
.esrc-widget button.submit-reply-btn {
    font-family: inherit;
    line-height: 1.2;
    text-decoration: none;
    box-shadow: none;
    cursor: pointer;
    transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.esrc-widget button.write-review-btn {
    color: var(--esrc-text);
    background: var(--esrc-surface);
    border: 1px solid var(--esrc-text);
    border-radius: 999px;
    padding: 10px 18px;
}
.esrc-widget button.write-review-btn:hover,
.esrc-widget button.write-review-btn:focus-visible {
    color: #FFFFFF;
    background: var(--esrc-action);
    border-color: var(--esrc-action);
}

.esrc-widget button.reply-btn,
.esrc-widget button.submit-review-btn,
.esrc-widget button.submit-reply-btn {
    color: #FFFFFF;
    background: var(--esrc-action);
    border: 1px solid var(--esrc-action);
    border-radius: 999px;
}
.esrc-widget button.reply-btn:hover,
.esrc-widget button.reply-btn:focus-visible,
.esrc-widget button.submit-review-btn:hover,
.esrc-widget button.submit-review-btn:focus-visible,
.esrc-widget button.submit-reply-btn:hover,
.esrc-widget button.submit-reply-btn:focus-visible {
    color: #FFFFFF;
    background: var(--esrc-action-hover);
    border-color: var(--esrc-action-hover);
}
.esrc-widget button.submit-review-btn,
.esrc-widget button.submit-reply-btn {
    padding: 11px 18px;
}

.esrc-widget .popup {
    color: var(--esrc-text);
    background: var(--esrc-surface);
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    box-shadow: 0 24px 60px rgba(17, 24, 39, 0.18);
}
.esrc-widget .popup-content h3 {
    margin: 0 0 18px;
    font-size: 28px;
    line-height: 1.2;
    font-weight: 600;
}
.esrc-widget .popup-content p,
.esrc-widget .review-note,
.esrc-widget .login-required-message,
.esrc-widget .esrc-status-message {
    color: #4B5563;
}

.esrc-widget .review-popup input[type="text"],
.esrc-widget .review-popup input[type="email"],
.esrc-widget .reply-popup input[type="text"],
.esrc-widget .reply-popup input[type="email"],
.esrc-widget .review-popup textarea,
.esrc-widget .reply-popup textarea {
    width: 100%;
    color: var(--esrc-text);
    background: var(--esrc-surface);
    border: 1px solid var(--esrc-border);
    border-radius: 6px;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 16px;
    line-height: 1.5;
    caret-color: var(--esrc-text);
}
.esrc-widget .review-popup input::placeholder,
.esrc-widget .reply-popup input::placeholder,
.esrc-widget .review-popup textarea::placeholder,
.esrc-widget .reply-popup textarea::placeholder {
    color: var(--esrc-muted);
    opacity: 1;
}
.esrc-widget .review-popup input:focus,
.esrc-widget .reply-popup input:focus,
.esrc-widget .review-popup textarea:focus,
.esrc-widget .reply-popup textarea:focus {
    border-color: var(--esrc-text);
    outline: none;
    box-shadow: none;
}

.esrc-widget .popup-close {
    color: var(--esrc-text);
    background: transparent;
    border-color: var(--esrc-text);
}
.esrc-widget .popup-close:hover,
.esrc-widget .popup-close:focus-visible {
    color: #FFFFFF;
    background: var(--esrc-action);
    border-color: var(--esrc-action);
}

.esrc-widget .esrc-status-message {
    color: var(--esrc-text);
    background: var(--esrc-surface-muted);
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    padding: 20px;
}

.esrc-widget .no-reviews-message {
    font-weight: 600;
}

/* ====================================
   v1.4.15 — Premium portable defaults + editor-safe responsiveness
   ==================================== */
.esrc-widget,
.esrc-widget * { box-sizing: border-box; }

.esrc-widget,
.esrc-widget .header-row,
.esrc-widget .esrc-main,
.esrc-widget .left-column,
.esrc-widget .right-column,
.esrc-widget .rating-and-progress,
.esrc-widget .rating-left-column,
.esrc-widget .rating-right-column {
    min-width: 0;
    max-width: 100%;
}

.esrc-widget .esrc-main {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    width: 100%;
}

.esrc-widget .left-column,
.esrc-widget .right-column {
    float: none;
    width: auto;
    flex: 1 1 0;
}

.esrc-widget .header-row {
    width: 100%;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.esrc-widget .header-row h2 {
    flex: 1 1 320px;
    min-width: 0;
    margin: 0;
    font-size: clamp(26px, 2.6vw, 36px);
    letter-spacing: -0.025em;
}

.esrc-widget .write-review-btn { flex: 0 0 auto; }

.esrc-widget .rating-and-progress {
    gap: 24px;
    padding: 26px;
    border-radius: 14px;
    box-shadow: 0 8px 26px rgba(17, 24, 39, 0.055);
    box-sizing: border-box;
}

.esrc-widget .esrc-comment {
    border-radius: 14px;
    padding: 22px;
    box-shadow: 0 6px 20px rgba(17, 24, 39, 0.045);
}

.esrc-widget .progress-bar {
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
}
.esrc-widget .filled-bar { border-radius: inherit; }

.esrc-widget .popup {
    width: min(750px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    overflow: auto;
    border-radius: 16px;
    box-shadow: 0 30px 80px rgba(17, 24, 39, 0.22);
}

.esrc-widget .popup-content { padding: 34px; }
.esrc-widget .popup-content h3 {
    margin: 0 48px 18px 0;
    font-size: clamp(25px, 3vw, 32px);
    letter-spacing: -0.025em;
}

.esrc-widget .review-popup input[type="text"],
.esrc-widget .review-popup input[type="email"],
.esrc-widget .reply-popup input[type="text"],
.esrc-widget .reply-popup input[type="email"],
.esrc-widget .review-popup textarea,
.esrc-widget .reply-popup textarea {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px;
    margin: 0;
    padding: 12px 14px;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: var(--esrc-border);
    border-radius: 10px;
    background-color: var(--esrc-surface);
    color: var(--esrc-text);
    opacity: 1;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.esrc-widget .review-popup textarea,
.esrc-widget .reply-popup textarea {
    min-height: 180px;
    resize: vertical;
}

.esrc-widget .esrc-guest-fields {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    width: 100%;
    margin: 0 0 12px;
}

.esrc-widget .review-popup input:focus,
.esrc-widget .reply-popup input:focus,
.esrc-widget .review-popup textarea:focus,
.esrc-widget .reply-popup textarea:focus {
    border-color: var(--esrc-text);
    outline: none;
    box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.07);
}

.esrc-widget .review-note {
    margin: 14px 0 16px;
    line-height: 1.55;
}

.esrc-widget button.write-review-btn,
.esrc-widget button.submit-review-btn,
.esrc-widget button.submit-reply-btn {
    min-height: 42px;
    padding: 11px 20px;
    font-weight: 600;
}

.esrc-widget button.reply-btn {
    min-height: 34px;
    padding: 8px 14px !important;
    font-weight: 600;
}

.esrc-widget .popup-close {
    top: 18px;
    right: 18px;
    width: 34px;
    height: 34px;
    min-width: 34px;
}

@media (max-width: 900px) {
    .esrc-widget .esrc-main { flex-direction: column; }
    .esrc-widget .left-column,
    .esrc-widget .right-column {
        width: 100%;
        flex-basis: auto;
    }
}

@media (max-width: 600px) {
    .esrc-widget .header-row {
        align-items: stretch;
        gap: 16px;
    }
    .esrc-widget .write-review-btn { width: 100%; }
    .esrc-widget .rating-and-progress {
        flex-direction: column;
        align-items: stretch;
    }
    .esrc-widget .rating-left-column,
    .esrc-widget .rating-right-column {
        flex: 1 1 auto;
        width: 100%;
        padding: 0;
    }
    .esrc-widget .esrc-guest-fields { grid-template-columns: 1fr; }
    .esrc-widget .popup-content { padding: 26px 20px 22px; }
}

/* v1.4.16 — neutral premium typography fallback.
   Elementor Typography controls remain free to override these defaults. */
.esrc-widget,
.windmill-rating-widget-wrap {
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.esrc-widget h1,
.esrc-widget h2,
.esrc-widget h3,
.esrc-widget h4,
.esrc-widget h5,
.esrc-widget h6,
.esrc-widget p,
.esrc-widget span,
.esrc-widget label,
.esrc-widget button,
.esrc-widget input,
.esrc-widget textarea,
.esrc-widget select,
.windmill-rating-widget-link,
.windmill-rating-widget-link span {
    font-family: inherit;
}


/* ====================================
   v1.4.17 — Stable editor preview + unified responsive form fields
   ==================================== */
/* A premium default should stay compact when Elementor's panel reduces the canvas. */
.esrc-widget .popup {
    width: calc(100% - 40px);
    max-width: 640px;
}

/* Name, Email and textarea share exactly the same resting/focus language. */
.esrc-widget .review-popup input[type="text"],
.esrc-widget .review-popup input[type="email"],
.esrc-widget .reply-popup input[type="text"],
.esrc-widget .reply-popup input[type="email"],
.esrc-widget .review-popup textarea,
.esrc-widget .reply-popup textarea {
    border: 1px solid var(--esrc-border) !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: var(--esrc-surface) !important;
}
.esrc-widget .review-popup input[type="text"]:focus,
.esrc-widget .review-popup input[type="email"]:focus,
.esrc-widget .reply-popup input[type="text"]:focus,
.esrc-widget .reply-popup input[type="email"]:focus,
.esrc-widget .review-popup textarea:focus,
.esrc-widget .reply-popup textarea:focus {
    border-color: var(--esrc-text) !important;
    outline: 0 !important;
    box-shadow: none !important;
}

/* Prevent browser/theme autofill from making guest fields look permanently focused. */
.esrc-widget .review-popup input:-webkit-autofill,
.esrc-widget .reply-popup input:-webkit-autofill {
    -webkit-text-fill-color: var(--esrc-text);
    -webkit-box-shadow: 0 0 0 1000px var(--esrc-surface) inset !important;
    box-shadow: 0 0 0 1000px var(--esrc-surface) inset !important;
    border-color: var(--esrc-border) !important;
}

@media (max-width: 767px) {
    .esrc-widget .popup {
        width: calc(100% - 24px);
        max-width: none;
    }
}

/* ====================================
   v1.4.18 — Container-aware widget responsiveness
   The widget adapts to its actual Elementor column/container width,
   not only to the browser viewport width.
   ==================================== */
.esrc-widget {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    container-type: inline-size;
    container-name: esrc-reviews;
}

/* v1.4.20 — Root fix for "widget never shrinks in the editor".
   The Elementor flex-item wrapper defaults to min-width:auto, so inside an
   Elementor flex Container it refuses to shrink below the content's desktop
   width. Allowing it to shrink lets the widget track the real canvas width
   (and lets the container query / editor width classes actually fire). */
.elementor-widget-esrc_reviews_comments,
.elementor-widget-esrc_reviews_comments > .elementor-widget-container {
    min-width: 0;
    max-width: 100%;
}

@container esrc-reviews (max-width: 880px) {
    .esrc-widget .esrc-main {
        flex-direction: column;
        align-items: stretch;
    }

    .esrc-widget .left-column,
    .esrc-widget .right-column {
        width: 100%;
        flex: 1 1 auto;
    }

    .esrc-widget .header-row {
        align-items: stretch;
    }

    .esrc-widget .header-row h2 {
        flex-basis: auto;
    }
}

@container esrc-reviews (max-width: 620px) {
    .esrc-widget .header-row {
        gap: 16px;
    }

    .esrc-widget .write-review-btn {
        width: 100%;
    }

    .esrc-widget .rating-and-progress {
        flex-direction: column;
        align-items: stretch;
    }

    .esrc-widget .rating-left-column,
    .esrc-widget .rating-right-column {
        width: 100%;
        flex: 1 1 auto;
        padding: 0;
    }

    .esrc-widget .esrc-guest-fields {
        grid-template-columns: 1fr;
    }
}

/* ====================================
   v1.4.19 — Elementor editor width-state fallback
   Container queries can be unreliable inside the editor iframe. In the editor
   ONLY, JS (ResizeObserver) adds esrc-width-medium / esrc-width-narrow based on
   the real .esrc-widget width, mirroring the 880/620 container breakpoints above.
   These classes are never added on the frontend, so frontend output is unchanged.
   ==================================== */
.elementor-editor-active .esrc-widget.esrc-width-medium .esrc-main,
.elementor-editor-active .esrc-widget.esrc-width-narrow .esrc-main {
    flex-direction: column;
    align-items: stretch;
}

.elementor-editor-active .esrc-widget.esrc-width-medium .left-column,
.elementor-editor-active .esrc-widget.esrc-width-medium .right-column,
.elementor-editor-active .esrc-widget.esrc-width-narrow .left-column,
.elementor-editor-active .esrc-widget.esrc-width-narrow .right-column {
    width: 100%;
    flex: 1 1 auto;
    min-width: 0;
}

.elementor-editor-active .esrc-widget.esrc-width-medium .header-row,
.elementor-editor-active .esrc-widget.esrc-width-narrow .header-row {
    align-items: stretch;
}

.elementor-editor-active .esrc-widget.esrc-width-medium .header-row h2,
.elementor-editor-active .esrc-widget.esrc-width-narrow .header-row h2 {
    flex-basis: auto;
}

.elementor-editor-active .esrc-widget.esrc-width-narrow .header-row {
    gap: 16px;
}

.elementor-editor-active .esrc-widget.esrc-width-narrow .write-review-btn {
    width: 100%;
}

.elementor-editor-active .esrc-widget.esrc-width-narrow .rating-and-progress {
    flex-direction: column;
    align-items: stretch;
}

.elementor-editor-active .esrc-widget.esrc-width-narrow .rating-left-column,
.elementor-editor-active .esrc-widget.esrc-width-narrow .rating-right-column {
    width: 100%;
    flex: 1 1 auto;
    padding: 0;
}

.elementor-editor-active .esrc-widget.esrc-width-narrow .esrc-guest-fields {
    grid-template-columns: 1fr;
}