/* =========================================================
   RECo-op Custom Dashboard Header
   Copied style pattern for Testimonials admin page
   ========================================================= */
.rtcd-dashboard-header,
.rtcd-dashboard-header * {
    box-sizing: border-box;
    font-family: Poppins, Inter, Arial, sans-serif;
}

.rdp-topbar {
    width: 100%;
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 0 0 18px;
    padding: 14px 18px;
    background: #ffffff;
    border: 1px solid #eeeeee;
    border-radius: 18px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.035);
    position: relative;
    z-index: 50;
}

.rdp-topbar {
    width: 100%;
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    margin-bottom: 18px;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.rdp-admin-logo {
    display: none !important;
}

.rdp-admin-title-pill {
    height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0 18px;
    border-radius: 999px;
    background: #ffffff;
    color: #2f2f2f;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255,255,255,.8);
}

.rdp-admin-title-pill svg {
    width: 20px;
    height: 20px;
}

.rdp-admin-menu-toggle,
.rdp-admin-circle-btn,
.rdp-admin-avatar-btn {
    background: #ffffff !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.08) !important;
}

.rdp-topbar-left,
.rdp-topbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.rdp-admin-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
}

.rdp-admin-menu-toggle {
    width: 42px;
    height: 42px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0;
    border: 0 !important;
    border-radius: 50%;
    background: #f7f8f7 !important;
    color: #1f1f1f !important;
    cursor: pointer;
    box-shadow: none !important;
    outline: none !important;
}

.rdp-admin-menu-toggle span {
    width: 17px;
    height: 2px;
    display: block;
    border-radius: 999px;
    background: #1f1f1f;
    transition: 0.2s ease;
}

.rdp-admin-nav.open .rdp-admin-menu-toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.rdp-admin-nav.open .rdp-admin-menu-toggle span:nth-child(2) {
    opacity: 0;
}

.rdp-admin-nav.open .rdp-admin-menu-toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.rdp-admin-logo {
    width: 42px;
    height: 42px;
    display: block;
    object-fit: contain;
}

.rdp-admin-dropdown {
    min-width: 244px;
    display: none;
    position: absolute;
    top: 56px;
    left: 0;
    z-index: 1000;
    padding: 10px;
    background: #ffffff;
    border: 1px solid #eeeeee;
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.12);
}

.rdp-admin-nav.open .rdp-admin-dropdown {
    display: block;
}

.rdp-admin-dropdown-item {
    min-height: 46px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 0 12px;
    border-radius: 13px;
    color: #686868 !important;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    background: transparent;
    transition: 0.18s ease;
}

.rdp-admin-dropdown-item:hover,
.rdp-admin-dropdown-item:focus {
    background: #f6faf7;
    color: #2f7c52 !important;
}

.rdp-admin-dropdown-item.active {
    background: #edf8f1;
    color: #2f7c52 !important;
}

.rdp-admin-item-icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #f3f4f3;
    color: currentColor;
}

.rdp-admin-dropdown-item.active .rdp-admin-item-icon,
.rdp-admin-dropdown-item:hover .rdp-admin-item-icon {
    background: #dff3e7;
}

.rdp-admin-item-icon svg {
    width: 17px;
    height: 17px;
}

.rdp-admin-circle-btn,
.rdp-admin-avatar-btn {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0 !important;
    border-radius: 50%;
    background: #f7f8f7 !important;
    color: #333333 !important;
    cursor: pointer;
    box-shadow: none !important;
    outline: none !important;
}

.rdp-admin-circle-btn:hover,
.rdp-admin-avatar-btn:hover {
    background: #edf8f1 !important;
    color: #2f7c52 !important;
}

.rdp-admin-circle-btn svg {
    width: 20px;
    height: 20px;
}

.rdp-account-menu {
    position: relative;
}

.rdp-admin-avatar,
.rdp-account-avatar {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #2f7c52, #54b873);
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
}

.rdp-account-dropdown {
    width: 250px;
    display: none;
    position: absolute;
    top: 56px;
    right: 0;
    z-index: 1000;
    padding: 12px;
    background: #ffffff;
    border: 1px solid #eeeeee;
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.12);
}

.rdp-account-menu.open .rdp-account-dropdown {
    display: block;
}

.rdp-account-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 4px 12px;
    border-bottom: 1px solid #eeeeee;
}

.rdp-account-name {
    color: #2e2e2e;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
}

.rdp-account-sub {
    margin-top: 3px;
    color: #9a9a9a;
    font-size: 11px;
    font-weight: 500;
}

.rdp-account-logout {
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    padding: 0 10px;
    border-radius: 12px;
    color: #d93025 !important;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none !important;
}

.rdp-account-logout:hover {
    background: #fff2f1;
}

.rdp-account-logout-icon {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #fff2f1;
}

.rdp-account-logout-icon svg {
    width: 17px;
    height: 17px;
}

@media (max-width: 767px) {
    .rdp-topbar {
        min-height: 68px;
        padding: 12px;
        border-radius: 16px;
    }

    .rdp-admin-dropdown {
        min-width: 230px;
        left: 0;
    }

    .rdp-account-dropdown {
        width: 230px;
        right: 0;
    }

    .rdp-admin-circle-btn {
        display: none;
    }
}

/* =========================================================
   RECo-op Testimonials Custom Dashboard
   Main CSS file
   ========================================================= */

/* ---------- Global scope ---------- */
.rtcd-wrap,
.rtcd-wrap * {
    box-sizing: border-box;
    font-family: Inter, Arial, sans-serif;
}

.rtcd-wrap {
    width: 100%;
    padding: 8px 0 30px;
    color: #333333;
}

/* ---------- Stats ---------- */
.rtcd-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 16px;
}

.rtcd-stat {
    height: 92px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 18px 20px;
    background: #ffffff;
    border: 1px solid #eeeeee;
    border-radius: 14px;
}

.rtcd-stat span {
    font-size: 13px;
    font-weight: 600;
    color: #333333;
}

.rtcd-stat strong {
    font-size: 26px;
    line-height: 1;
    color: #222222;
}

.rtcd-stat b {
    color: #e6ad25;
}

/* ---------- Panel ---------- */
.rtcd-panel {
    overflow: visible;
    background: #ffffff;
    border: 1px solid #eeeeee;
    border-radius: 14px;
}

.rtcd-panel-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 18px 10px;
}

.rtcd-panel-top h3 {
    margin: 0 0 14px;
    font-size: 15px;
    font-weight: 700;
    color: #333333;
}

/* ---------- Tabs ---------- */
.rtcd-tabs {
    display: flex;
    align-items: center;
    gap: 14px;
}

.rtcd-tabs button {
    min-height: 30px;
    padding: 0 10px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #888888;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    box-shadow: none !important;
    outline: none !important;
}

.rtcd-tabs button:hover,
.rtcd-tabs button:focus,
.rtcd-tabs button:active {
    background: transparent !important;
    color: #267348 !important;
    box-shadow: none !important;
    outline: none !important;
}

.rtcd-tabs button.active {
    border: 1px solid #5fbf7b;
    background: #ffffff !important;
    color: #267348 !important;
    font-weight: 700;
}

.rtcd-tabs em {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    margin-left: 3px;
    padding: 0 5px;
    border-radius: 999px;
    background: #e5e5e5;
    color: #999999;
    font-size: 10px;
    font-style: normal;
    line-height: 1;
}

.rtcd-tabs .active em {
    background: #3c9864;
    color: #ffffff;
}

/* ---------- Top tools ---------- */
.rtcd-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.rtcd-sort {
    height: 32px;
    border: 0 !important;
    background: transparent !important;
    color: #777777;
    font-size: 12px;
    box-shadow: none !important;
    outline: none !important;
}

.rtcd-search {
    width: 170px;
    height: 32px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    border: 1px solid #eeeeee;
    border-radius: 999px;
    background: #fbfbfb;
    color: #777777;
}

.rtcd-search input {
    width: 100%;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #777777;
    font-size: 12px;
    box-shadow: none !important;
    outline: 0 !important;
}

.rtcd-add,
.rtcd-add:visited {
    width: auto;
    min-width: 132px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 14px;
    border: 0 !important;
    border-radius: 4px;
    background: #2f7c52 !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: none !important;
    text-decoration: none !important;
}

.rtcd-add:hover,
.rtcd-add:focus,
.rtcd-add:active {
    background: #2f7c52 !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    transform: none !important;
}

/* ---------- Table ---------- */
.rtcd-table-wrap {
    overflow: visible;
}

.rtcd-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.rtcd-table th {
    height: 36px;
    padding: 0 12px;
    text-align: left;
    background: #fafafa;
    color: #8a8a8a;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.rtcd-table td {
    padding: 14px 12px;
    vertical-align: middle;
    color: #555555;
    font-size: 12px;
}

.rtcd-table input[type="checkbox"] {
    width: 16px;
    height: 16px;
    border-radius: 5px;
}

.rtcd-person-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 175px;
}

.rtcd-avatar {
    width: 32px;
    height: 32px;
    min-width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e9faee;
    color: #2f8b55;
    font-size: 11px;
    font-weight: 800;
}

.rtcd-person-cell strong {
    display: block;
    margin: 0;
    color: #555555;
    font-size: 12px;
    line-height: 1.15;
}

.rtcd-person-cell small {
    display: block;
    margin-top: 2px;
    color: #aaaaaa;
    font-size: 10px;
    line-height: 1.15;
}

.rtcd-coop-icon {
    color: #777777;
}

.rtcd-stars {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    white-space: nowrap;
}

.rtcd-stars span {
    color: #d7d7d7;
    font-size: 15px;
    line-height: 1;
}

.rtcd-stars span.filled {
    color: #e3ad25;
}

.rtcd-stars + small,
.rtcd-table td small {
    color: #888888;
    font-size: 11px;
}

.rtcd-truncate {
    max-width: 250px;
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    color: #555555;
    line-height: 1.3;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* ---------- Status switch ---------- */
.rtcd-inline-form {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.rtcd-switch {
    width: 30px;
    height: 16px;
    display: inline-block;
    position: relative;
    padding: 0;
    border: 0 !important;
    border-radius: 999px;
    background: #e5e5e5 !important;
    vertical-align: middle;
    cursor: pointer;
    box-shadow: none !important;
    outline: none !important;
}

.rtcd-switch span {
    width: 14px;
    height: 14px;
    position: absolute;
    top: 1px;
    left: 1px;
    border-radius: 50%;
    background: #ffffff;
    transition: 0.2s ease;
}

.rtcd-switch.on {
    background: #368b5d !important;
}

.rtcd-switch.on span {
    left: 15px;
}

.rtcd-switch:hover,
.rtcd-switch:focus,
.rtcd-switch:active {
    background: #e5e5e5 !important;
    box-shadow: none !important;
    outline: none !important;
}

.rtcd-switch.on:hover,
.rtcd-switch.on:focus,
.rtcd-switch.on:active {
    background: #368b5d !important;
}

.rtcd-status-text {
    font-size: 12px;
}

.rtcd-status-text.shown {
    color: #2f8b55;
}

.rtcd-status-text.hidden {
    color: #aaaaaa;
}

/* ---------- More button and dropdown ---------- */
.rtcd-more-cell {
    position: relative;
    text-align: center;
}

.rtcd-more-btn {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 7px;
    background: transparent !important;
    color: #777777 !important;
    font-size: 19px !important;
    line-height: 1 !important;
    cursor: pointer;
    box-shadow: none !important;
    outline: none !important;
}

.rtcd-more-btn:hover,
.rtcd-more-btn:focus,
.rtcd-more-btn:active {
    background: transparent !important;
    color: #777777 !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

.rtcd-more-menu {
    width: 188px;
    display: none;
    position: absolute;
    top: 34px;
    right: 12px;
    z-index: 9999;
    padding: 6px 0;
    overflow: hidden;
    text-align: left;
    background: #ffffff;
    border: 1px solid #eeeeee;
    border-radius: 10px;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.12);
}

.rtcd-more-menu.open {
    display: block;
}

.rtcd-more-menu a,
.rtcd-more-menu button {
    width: 100%;
    height: 34px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px !important;
    border: 0 !important;
    background: #ffffff !important;
    color: #777777 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-align: left;
    text-decoration: none !important;
    cursor: pointer;
    box-shadow: none !important;
    outline: none !important;
}

.rtcd-more-menu a:hover,
.rtcd-more-menu a:focus,
.rtcd-more-menu button:hover,
.rtcd-more-menu button:focus {
    background: #f8f8f8 !important;
    color: #555555 !important;
    box-shadow: none !important;
    outline: none !important;
}

.rtcd-more-menu span {
    width: 15px;
    min-width: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #777777;
    font-size: 13px;
    line-height: 1;
}

.rtcd-more-menu form {
    margin: 0;
}

.rtcd-more-menu .danger {
    color: #d90000 !important;
}

.rtcd-more-menu .danger span {
    color: #d90000 !important;
}

.rtcd-more-menu hr {
    margin: 6px 0;
    border: 0;
    border-top: 1px solid #eeeeee;
}

.rtcd-menu-toggle {
    color: #777777 !important;
    font-size: 13px !important;
}

.rtcd-menu-toggle .rtcd-switch,
.rtcd-more-menu .rtcd-switch {
    width: 30px;
    min-width: 30px;
    height: 16px;
    margin-right: 1px;
}

.rtcd-menu-toggle .rtcd-switch span,
.rtcd-more-menu .rtcd-switch span {
    width: 14px;
    height: 14px;
}

.rtcd-menu-toggle .rtcd-switch.on span,
.rtcd-more-menu .rtcd-switch.on span {
    left: 15px;
}

/* ---------- Footer ---------- */
.rtcd-footer {
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    border-top: 1px solid #eeeeee;
    color: #aaaaaa;
    font-size: 12px;
}

/* ---------- Modal ---------- */
.rtcd-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.35);
}

.rtcd-modal.show {
    display: flex;
}

.rtcd-modal-card {
    width: min(760px, 100%);
    position: relative;
    padding: 24px;
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 20px 80px rgba(0, 0, 0, 0.2);
}

.rtcd-close {
    width: 34px;
    height: 34px;
    position: absolute;
    top: 14px;
    right: 18px;
    border: 0 !important;
    border-radius: 50%;
    background: transparent !important;
    color: #777777 !important;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    box-shadow: none !important;
    outline: none !important;
}

.rtcd-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.rtcd-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: #444444;
    font-size: 13px;
    font-weight: 700;
}

.rtcd-form input,
.rtcd-form textarea,
.rtcd-form select {
    width: 100%;
    padding: 10px !important;
    border: 1px solid #dddddd !important;
    border-radius: 10px !important;
    background: #ffffff;
    box-shadow: none !important;
    outline: none !important;
}

.rtcd-form .full {
    grid-column: 1 / -1;
}

.rtcd-save {
    margin-top: 18px;
    padding: 12px 18px;
    border: 0 !important;
    border-radius: 10px;
    background: #2f7c52 !important;
    color: #ffffff !important;
    font-weight: 800;
    cursor: pointer;
    box-shadow: none !important;
}

.rtcd-save:hover,
.rtcd-save:focus {
    background: #2f7c52 !important;
    color: #ffffff !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Request feedback for testimonial saves and management actions. */
.rtcd-request-loader {
    position: fixed;
    inset: 0;
    z-index: 1000001;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(18, 32, 24, 0.3);
}

.rtcd-request-loader.show {
    display: flex;
}

.rtcd-request-loader-card {
    min-width: 220px;
    padding: 22px 26px;
    display: flex;
    align-items: center;
    gap: 13px;
    border-radius: 14px;
    background: #ffffff;
    color: #26322b;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.2);
    font: 700 14px/1.3 Inter, Arial, sans-serif;
}

.rtcd-request-spinner {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    border: 3px solid #dcece2;
    border-top-color: #2f7c52;
    border-radius: 50%;
    animation: rtcd-request-spin 0.75s linear infinite;
}

@keyframes rtcd-request-spin {
    to { transform: rotate(360deg); }
}

.rtcd-preview-card {
    max-width: 520px;
}

.rtcd-preview-content .quote {
    color: #888888;
    font-size: 18px;
    line-height: 1.5;
}

.rtcd-denied,
.recoop-testimonials-empty {
    padding: 20px;
    background: #ffffff;
    border: 1px solid #dddddd;
    border-radius: 14px;
}

/* =========================================================
   Frontend Testimonials Display
   ========================================================= */
.recoop-testimonials,
.recoop-testimonials * {
    box-sizing: border-box;
}

.recoop-testimonials {
    width: 100%;
    max-width: 1280px;
    display: grid;
    grid-template-columns: 560px minmax(0, 1fr);
    align-items: center;
    gap: 70px;
    margin: 0 auto;
    padding: 30px 20px;
    overflow: visible;
    font-family: Inter, Arial, sans-serif;
}

.recoop-testimonials-left {
    width: 100%;
    height: 620px;
    min-height: 620px;
    position: relative;
    overflow: visible;
}

.recoop-line {
    width: 156px;
    height: 470px;
    position: absolute;
    top: 38px;
    left: 54px;
    z-index: 0;
    border: 1.5px solid #cfcfcf;
    border-left: none;
    border-radius: 0 220px 220px 0;
    background: transparent;
    pointer-events: none;
}

.recoop-coop-item {
    width: 100%;
    max-width: 470px;
    display: flex;
    align-items: center;
    gap: 18px;
    position: absolute;
    z-index: 2;
    padding: 0;
    margin: 0;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    text-align: left;
    cursor: pointer;
    transform-origin: left center;
    transition: top 0.42s ease, left 0.42s ease, transform 0.42s ease, opacity 0.42s ease;
    -webkit-tap-highlight-color: transparent;
}

.recoop-coop-item:hover,
.recoop-coop-item:focus,
.recoop-coop-item:active {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

.recoop-coop-item.pos-above {
    top: 60px;
    left: 130px;
    opacity: 1;
    transform: scale(0.88);
}

.recoop-coop-item.pos-active {
    top: 204px;
    left: 132px;
    opacity: 1;
    transform: scale(1);
}

.recoop-coop-item.pos-below {
    top: 406px;
    left: 130px;
    opacity: 1;
    transform: scale(0.88);
}

.recoop-coop-circle {
    width: 100px;
    height: 100px;
    min-width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 50%;
    background: #e8e8e8;
    transition: all 0.42s ease;
}

.recoop-coop-item.pos-active .recoop-coop-circle {
    width: 160px;
    height: 160px;
    min-width: 160px;
}

.recoop-coop-circle img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

.recoop-coop-circle span {
    color: #2f7c52;
    font-size: 22px;
    font-weight: 700;
}

.recoop-coop-item.pos-active .recoop-coop-circle span {
    font-size: 58px;
}

.recoop-coop-meta {
    min-width: 0;
}

.recoop-coop-name {
    margin: 0 0 8px;
    color: #4a4a4a;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.15;
    transition: all 0.42s ease;
}

.recoop-coop-item.pos-active .recoop-coop-name {
    margin-bottom: 14px;
    color: #111111;
    font-size: 34px;
}

.recoop-coop-rating {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    color: #9a9a9a;
    font-size: 14px;
    line-height: 1.2;
    transition: all 0.42s ease;
}

.recoop-coop-item.pos-active .recoop-coop-rating {
    font-size: 18px;
}

.recoop-star {
    background: linear-gradient(180deg, #4eca69 0%, #3b8749 35%, #2f5023 70%, #4eca61 100%);
    font-size: 18px;
    line-height: 1;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.recoop-coop-item.pos-active .recoop-star {
    font-size: 40px;
}

.recoop-rating-num {
    color: #111111;
    font-weight: 600;
}

.recoop-date {
    color: #9a9a9a;
    font-weight: 400;
}

.recoop-testimonials-right {
    min-height: 360px;
    display: flex;
    align-items: center;
    position: relative;
}

.recoop-testimonial-card {
    width: 100%;
    max-width: 700px;
    display: none;
    padding: 32px 34px 28px;
    border: 1px solid #f0f0f0;
    border-radius: 42px;
    background: #ffffff;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.08);
    animation: recoopFade 0.28s ease;
}

.recoop-testimonial-card.active {
    display: block;
}

@keyframes recoopFade {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.recoop-quote-box {
    width: 28px;
    height: 28px;
    margin-bottom: 24px;
    border-radius: 7px;
    background: linear-gradient(180deg, #4eca69 0%, #3b8749 35%, #2f5023 70%, #4eca61 100%);
    color: #ffffff;
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    text-align: center;
}

.recoop-testimonial-text {
    margin-bottom: 26px;
    color: #8e8e8e;
    font-size: 19px;
    line-height: 1.42;
    white-space: normal;
    word-break: break-word;
}

.recoop-divider {
    margin-bottom: 16px;
    border-top: 1px solid #e8e8e8;
}

.recoop-person {
    display: flex;
    align-items: center;
    gap: 16px;
}

.recoop-person-avatar {
    width: 48px;
    height: 48px;
    min-width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 50%;
    background: #eaeaea;
}

.recoop-person-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.recoop-person-avatar span {
    color: #2f7c52;
    font-size: 22px;
    font-weight: 700;
}

.recoop-person-name {
    margin-bottom: 4px;
    color: #111111;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
}

.recoop-person-role {
    color: #8e8e8e;
    font-size: 14px;
    line-height: 1.2;
}

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

    .rtcd-panel-top,
    .rtcd-tools {
        flex-direction: column;
        align-items: stretch;
    }

    .rtcd-search {
        width: 100%;
    }

    .rtcd-table-wrap {
        overflow-x: auto;
    }

    .rtcd-table {
        min-width: 980px;
    }

    .recoop-testimonials {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 28px 20px;
    }

    .recoop-testimonials-left {
        height: 540px;
        min-height: 540px;
        max-width: 720px;
        margin: 0 auto;
    }

    .recoop-line {
        top: 0;
        left: 60px;
        width: 180px;
        height: 500px;
    }

    .recoop-coop-item.pos-above {
        top: 20px;
        left: 140px;
    }

    .recoop-coop-item.pos-active {
        top: 184px;
        left: 170px;
    }

    .recoop-coop-item.pos-below {
        top: 384px;
        left: 140px;
    }

    .recoop-testimonials-right {
        width: 100%;
        max-width: 720px;
        margin: 0 auto;
    }

    .recoop-testimonial-card {
        max-width: 100%;
    }
}

@media (max-width: 767px) {
    .rtcd-form-grid {
        grid-template-columns: 1fr;
    }

    .rtcd-form .full {
        grid-column: auto;
    }

    .rtcd-more-menu {
        right: 0;
    }

    .recoop-testimonials {
        width: 100%;
        max-width: 100%;
        gap: 24px;
        padding: 18px 14px;
        overflow: hidden;
    }

    .recoop-testimonials-left {
        width: 100%;
        height: 420px;
        min-height: 420px;
        position: relative;
    }

    .recoop-line {
        top: 0;
        left: 8%;
        width: 34%;
        height: 360px;
    }

    .recoop-coop-item {
        width: 92%;
        max-width: none;
        gap: 12px;
    }

    .recoop-coop-item.pos-above {
        top: 0;
        left: 16%;
        transform: scale(0.82);
    }

    .recoop-coop-item.pos-active {
        top: 128px;
        left: 20%;
        transform: scale(1);
    }

    .recoop-coop-item.pos-below {
        top: 285px;
        left: 16%;
        transform: scale(0.82);
    }

    .recoop-coop-circle {
        width: 62px;
        height: 62px;
        min-width: 62px;
    }

    .recoop-coop-item.pos-active .recoop-coop-circle {
        width: 100px;
        height: 100px;
        min-width: 100px;
    }

    .recoop-coop-name {
        font-size: 15px;
    }

    .recoop-coop-item.pos-active .recoop-coop-name {
        font-size: 22px;
    }

    .recoop-testimonial-card {
        padding: 22px 18px;
        border-radius: 22px;
    }

    .recoop-testimonial-text {
        font-size: 15px;
        line-height: 1.55;
    }
}