@font-face {
font-family: 'SF Pro Display';
src: url(//www.speakr.focusimpact-agency.com/wp-content/plugins/collabable-core/assets/fonts/SF-Pro-Display-Light.woff2) format('woff2');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'SF Pro Display';
src: url(//www.speakr.focusimpact-agency.com/wp-content/plugins/collabable-core/assets/fonts/SF-Pro-Display-LightItalic.woff2) format('woff2');
font-weight: 300;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'SF Pro Display';
src: url(//www.speakr.focusimpact-agency.com/wp-content/plugins/collabable-core/assets/fonts/SF-Pro-Display-Regular.woff2) format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'SF Pro Display';
src: url(//www.speakr.focusimpact-agency.com/wp-content/plugins/collabable-core/assets/fonts/SF-Pro-Display-RegularItalic.woff2) format('woff2');
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'SF Pro Display';
src: url(//www.speakr.focusimpact-agency.com/wp-content/plugins/collabable-core/assets/fonts/SF-Pro-Display-Medium.woff2) format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'SF Pro Display';
src: url(//www.speakr.focusimpact-agency.com/wp-content/plugins/collabable-core/assets/fonts/SF-Pro-Display-MediumItalic.woff2) format('woff2');
font-weight: 500;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'SF Pro Display';
src: url(//www.speakr.focusimpact-agency.com/wp-content/plugins/collabable-core/assets/fonts/SF-Pro-Display-Semibold.woff2) format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'SF Pro Display';
src: url(//www.speakr.focusimpact-agency.com/wp-content/plugins/collabable-core/assets/fonts/SF-Pro-Display-SemiboldItalic.woff2) format('woff2');
font-weight: 600;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'SF Pro Display';
src: url(//www.speakr.focusimpact-agency.com/wp-content/plugins/collabable-core/assets/fonts/SF-Pro-Display-Bold.woff2) format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'SF Pro Display';
src: url(//www.speakr.focusimpact-agency.com/wp-content/plugins/collabable-core/assets/fonts/SF-Pro-Display-BoldItalic.woff2) format('woff2');
font-weight: 700;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'SF Pro Display';
src: url(//www.speakr.focusimpact-agency.com/wp-content/plugins/collabable-core/assets/fonts/SF-Pro-Display-Heavy.woff2) format('woff2');
font-weight: 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'SF Pro Display';
src: url(//www.speakr.focusimpact-agency.com/wp-content/plugins/collabable-core/assets/fonts/SF-Pro-Display-HeavyItalic.woff2) format('woff2');
font-weight: 800;
font-style: italic;
font-display: swap;
} body,
body .elementor *,
body .ast-container *,
.entry-content {
font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
}body.page .site-content > .ast-container,
body.single-collabable_studio .site-content > .ast-container,
body.single-collabable_person .site-content > .ast-container {
padding-left: 80px !important;
padding-right: 80px !important;
box-sizing: border-box !important;
}
@media (max-width: 1200px) {
body.page .site-content > .ast-container,
body.single-collabable_studio .site-content > .ast-container,
body.single-collabable_person .site-content > .ast-container {
padding-left: 40px !important;
padding-right: 40px !important;
}
}
@media (max-width: 768px) {
body.page .site-content > .ast-container,
body.single-collabable_studio .site-content > .ast-container,
body.single-collabable_person .site-content > .ast-container {
padding-left: 20px !important;
padding-right: 20px !important;
}
} body.page:not(.home) .content-area.primary {
margin-top: 0 !important;
}
.collabable-wrap{max-width:1100px;margin:0 auto;padding:16px}
.collabable-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width: 900px){.collabable-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width: 600px){.collabable-grid{grid-template-columns:1fr}}
.collabable-card{border:1px solid #e5e5e5;border-radius:12px;padding:14px;background:#fff}
.collabable-card h3{margin:0 0 8px 0;font-size:18px}
.collabable-meta{font-size:13px;color:#666;margin:8px 0}
.collabable-filter{display:flex;flex-wrap:wrap;gap:10px;align-items:end;margin-bottom:16px}
.collabable-filter label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:#333}
.collabable-filter select,.collabable-filter input[type="text"],.collabable-filter input[type="number"],.collabable-filter textarea{min-width:180px;padding:10px 12px;border:1px solid #ddd;border-radius:10px} .collabable-btn{display:inline-block;padding:6px 10px;border-radius:4px;border:1px solid #111;background:#111;color:#fff;text-decoration:none;font-size:13px;font-weight:500;text-align:center;cursor:pointer;}
.collabable-btn.secondary{background:#fff;color:#111}
.collabable-btn.disabled,.collabable-btn:disabled{opacity:0.5;cursor:not-allowed;pointer-events:none}
.collabable-alert{padding:12px 14px;border-radius:12px;margin:12px 0}
.collabable-alert.success{background:#e8f4ea;border:1px solid #27ae60;color:#065f46}
.collabable-alert.error{background:#fef2f2;border:1px solid #CF0000;color:#7f1d1d}
.collabable-form{display:flex;flex-direction:column;gap:10px;max-width:680px}
.collabable-form textarea{min-height:120px}
.collabable-hr{height:1px;background:#eee;margin:20px 0} .collabable-trial-banner{
background:#fef2f2;
border-bottom:1px solid #ddd;
padding:12px 20px;
position:relative;
z-index:100
}
.collabable-trial-banner__content{
display:flex;
align-items:center;
justify-content:center;
gap:12px;
max-width:1200px;
margin:0 auto;
flex-wrap:wrap
}
.collabable-trial-banner__icon{
display:flex;
align-items:center;
color:#CF0000
}
.collabable-trial-banner__icon svg{
width:20px;
height:20px
}
.collabable-trial-banner__text{
font-size:14px;
font-weight:500;
color:#333
}
.collabable-trial-banner__cta{
display:inline-flex;
align-items:center;
padding:6px 16px;
background:#CF0000;
color:#fff;
border-radius:999px;
font-size:13px;
font-weight:600;
text-decoration:none;
} .collabable-trial-banner.warning{
background:#fef3c7;
border-bottom-color:#e67e22
}
.collabable-trial-banner.warning .collabable-trial-banner__icon{
color:#e67e22
}
.collabable-trial-banner.warning .collabable-trial-banner__text{
color:#92400e
}
.collabable-trial-banner.warning .collabable-trial-banner__cta{
background:#e67e22
} .collabable-trial-banner.urgent{
background:linear-gradient(135deg,#fef2f2 0%,#fee2e2 100%);
border-bottom-color:#CF0000
}
.collabable-trial-banner.urgent .collabable-trial-banner__icon{
color:#CF0000
}
.collabable-trial-banner.urgent .collabable-trial-banner__text{
color:#7f1d1d
}
.collabable-trial-banner.urgent .collabable-trial-banner__cta{
background:#CF0000
} .collabable-trial-banner.expired{
background:#fef2f2;
border-bottom:1px solid #ddd
}
.collabable-trial-banner.expired .collabable-trial-banner__icon{
color:#CF0000
}
.collabable-trial-banner.expired .collabable-trial-banner__text{
color:#333
}
.collabable-trial-banner.expired .collabable-trial-banner__cta{
background:#CF0000;
color:#fff
} .collabable-trial-banner.minimal{
background:transparent;
border:none;
padding:8px 16px
}
.collabable-trial-banner.minimal .collabable-trial-banner__content{
justify-content:flex-end
} .collabable-trial-banner.compact{
padding:8px 16px
}
.collabable-trial-banner.compact .collabable-trial-banner__text{
font-size:13px
} .collabable-subscription-plans{
padding:20px 0
} .collabable-billing-toggle{
display:flex;
justify-content:center;
gap:0;
margin-bottom:32px;
background:#f5f5f5;
border-radius:999px;
padding:4px;
width:fit-content;
margin-left:auto;
margin-right:auto
}
.collabable-billing-toggle__btn{
padding:10px 24px;
background:transparent;
border:none;
border-radius:999px;
font-size:14px;
font-weight:500;
color:#666;
cursor:pointer;
transition:all 0.2s ease;
display:flex;
align-items:center;
gap:8px
}
.collabable-billing-toggle__btn.active{
background:#fff;
color:#111;
box-shadow:0 1px 3px rgba(0,0,0,0.1)
}
.collabable-billing-toggle__badge{
background:#27ae60;
color:#fff;
font-size:11px;
font-weight:600;
padding:2px 8px;
border-radius:999px
} .collabable-plans-grid{
display:grid;
gap:24px;
align-items:stretch
}
.collabable-plans-grid.columns-2{
grid-template-columns:repeat(2,1fr)
}
.collabable-plans-grid.columns-3{
grid-template-columns:repeat(3,1fr)
}
.collabable-plans-grid.columns-4{
grid-template-columns:repeat(4,1fr)
}
@media (max-width: 1024px){
.collabable-plans-grid.columns-4{
grid-template-columns:repeat(2,1fr)
}
}
@media (max-width: 768px){
.collabable-plans-grid.columns-3,
.collabable-plans-grid.columns-4{
grid-template-columns:repeat(2,1fr)
}
}
@media (max-width: 600px){
.collabable-plans-grid.columns-2,
.collabable-plans-grid.columns-3,
.collabable-plans-grid.columns-4{
grid-template-columns:1fr
}
} .collabable-plan-card{
background:#fff;
border:1px solid #e5e5e5;
border-radius:16px;
padding:24px;
display:flex;
flex-direction:column;
position:relative;
}
.collabable-plan-card.highlighted{
border-color:#111;
border-width:2px;
transform:scale(1.02)
}
.collabable-plan-card.current{
border-color:#27ae60
}
.collabable-plan-card__badge{
position:absolute;
top:-12px;
left:50%;
transform:translateX(-50%);
background:#111;
color:#fff;
font-size:11px;
font-weight:600;
padding:4px 12px;
border-radius:999px;
white-space:nowrap
}
.collabable-plan-card__header{
margin-bottom:20px
}
.collabable-plan-card__name{
font-size:20px;
font-weight:600;
margin:0 0 4px 0;
color:#111
}
.collabable-plan-card__description{
font-size:14px;
color:#666;
margin:0
}
.collabable-plan-card__price{
display:flex;
align-items:baseline;
gap:2px;
margin-bottom:24px
}
.collabable-plan-card__currency{
font-size:24px;
font-weight:600;
color:#111
}
.collabable-plan-card__amount{
font-size:48px;
font-weight:700;
color:#111;
line-height:1
}
.collabable-plan-card__period{
font-size:14px;
color:#666;
margin-left:4px
}
.collabable-plan-card__free{
font-size:32px;
font-weight:600;
color:#111
}
.collabable-plan-card__features{
list-style:none;
padding:0;
margin:0 0 24px 0;
flex-grow:1
}
.collabable-plan-card__features li{
display:flex;
align-items:flex-start;
gap:10px;
padding:8px 0;
font-size:14px;
color:#333;
border-bottom:1px solid #f5f5f5
}
.collabable-plan-card__features li:last-child{
border-bottom:none
}
.collabable-plan-card__features li svg{
flex-shrink:0;
color:#27ae60;
margin-top:2px
}
.collabable-plan-card__footer{
margin-top:auto
}
.collabable-plan-card__cta{
width:100%;
padding:12px 20px;
font-size:14px
}
.collabable-plan-card.highlighted .collabable-plan-card__cta{
background:#111;
border-color:#111
}  .collabable-login-required{
text-align:center;
padding:60px 24px;
max-width:400px;
margin:40px auto
}
.collabable-login-required .login-required-icon{
color:#999;
margin-bottom:20px
}
.collabable-login-required .login-required-icon svg{
width:64px;
height:64px
}
.collabable-login-required h2{
font-size:20px;
font-weight:600;
color:#111;
margin:0 0 12px 0
}
.collabable-login-required p{
font-size:15px;
color:#666;
margin:0 0 24px 0;
line-height:1.5
}
.collabable-login-required .btn-primary{
display:inline-flex;
align-items:center;
justify-content:center;
padding:12px 32px;
background:#111;
color:#fff;
font-size:15px;
font-weight:600;
text-decoration:none;
border-radius:8px;
} .collabable-loading{
display:flex;
align-items:center;
justify-content:center;
padding:40px;
color:#666
}
.collabable-spinner{
width:24px;
height:24px;
border:2px solid #e5e5e5;
border-top-color:#111;
border-radius:50%;
animation:collabable-spin 0.8s linear infinite
}
@keyframes collabable-spin{
to{transform:rotate(360deg)}
} .cb-toast{
position:fixed;
top:24px;
right:24px;
padding:14px 20px;
border-radius:10px;
font-size:14px;
font-weight:500;
color:#fff;
box-shadow:0 8px 32px rgba(0,0,0,0.3);
z-index:99999;
transform:translateX(120%);
opacity:0;
transition:transform 0.35s cubic-bezier(0.34,1.56,0.64,1),opacity 0.25s ease;
pointer-events:none;
max-width:400px;
display:flex;
align-items:center;
gap:10px
}
.cb-toast--visible{
transform:translateX(0);
opacity:1;
pointer-events:auto
}
.cb-toast--success{background:#27ae60}
.cb-toast--error{background:#CF0000}
.cb-toast--info{background:#CF0000}
.cb-toast--warning{background:#e67e22}
.cb-toast__icon{
flex-shrink:0;
width:20px;
height:20px
}
@media (max-width:640px){
.cb-toast{
top:auto;
bottom:24px;
right:16px;
left:16px;
max-width:none
}
} .btn--loading{
position:relative;
color:transparent !important;
pointer-events:none
}
.btn--loading::after{
content:'';
position:absolute;
top:50%;
left:50%;
width:18px;
height:18px;
margin:-9px 0 0 -9px;
border:2px solid #ddd;
border-top-color:#fff;
border-radius:50%;
animation:collabable-spin 0.7s linear infinite
}
.btn--loading.secondary::after,
.btn--loading.collabable-btn.secondary::after{
border-color:rgba(17,17,17,0.2);
border-top-color:#111
} .cb-loading-overlay{
position:relative;
min-height:80px
}
.cb-loading-overlay::before{
content:'';
position:absolute;
inset:0;
background:rgba(255,255,255,0.7);
z-index:10;
border-radius:inherit
}
.cb-loading-overlay::after{
content:'';
position:absolute;
top:50%;
left:50%;
width:28px;
height:28px;
margin:-14px 0 0 -14px;
border:3px solid #e5e5e5;
border-top-color:#111;
border-radius:50%;
animation:collabable-spin 0.8s linear infinite;
z-index:11
} .cb-char-counter{
position:absolute;
bottom:8px;
right:12px;
font-size:12px;
color:#999;
pointer-events:none;
line-height:1
}
.cb-char-counter--warn{color:#e67e22}
.cb-char-counter--over{color:#CF0000;font-weight:600} .collabable-empty{
text-align:center;
padding:48px 24px;
color:#666
}
.collabable-empty__icon{
color:#ccc;
margin-bottom:16px
}
.collabable-empty__icon svg{
width:64px;
height:64px
}
.collabable-empty__title{
font-size:18px;
font-weight:600;
color:#111;
margin:0 0 8px 0
}
.collabable-empty__text{
font-size:15px;
margin:0 0 20px 0;
line-height:1.5
}
.collabable-empty__cta{
display:inline-flex;
align-items:center;
gap:6px;
padding:10px 20px;
background:#111;
color:#fff;
font-size:14px;
font-weight:500;
border-radius:8px;
text-decoration:none;
} .collabable-badge{
display:inline-flex;
align-items:center;
padding:4px 10px;
font-size:12px;
font-weight:600;
border-radius:999px;
background:#f0f0f0;
color:#333
}
.collabable-badge.host{
background:#fde8e8;
color:#CF0000
}
.collabable-badge.guest{
background:#e8f4ea;
color:#27ae60
}
.collabable-badge.verified{
background:#e8f4ea;
color:#27ae60
}
.collabable-badge.featured{
background:#fef3c7;
color:#92400e
} .collabable-tags{
display:flex;
flex-wrap:wrap;
gap:6px
}
.collabable-tag{
display:inline-flex;
padding:4px 10px;
background:#f0f0f0;
color:#333;
font-size:12px;
font-weight:500;
border-radius:6px;
text-decoration:none;
transition:background 0.2s
}
.collabable-tag:hover{
background:#ddd
} .collabable-avatar{
width:48px;
height:48px;
border-radius:50%;
overflow:hidden;
background:#f0f0f0;
flex-shrink:0
}
.collabable-avatar img{
width:100%;
height:100%;
object-fit:cover
}
.collabable-avatar.sm{
width:32px;
height:32px
}
.collabable-avatar.lg{
width:64px;
height:64px
}
.collabable-avatar.xl{
width:96px;
height:96px
} .collabable-link{
color:#111;
text-decoration:none;
font-weight:500;
transition:opacity 0.2s
}
.collabable-link:hover{
opacity:0.7
}
.collabable-link-muted{
color:#666;
text-decoration:none;
transition:color 0.2s
}
.collabable-link-muted:hover{
color:#111
} .collabable-text-sm{
font-size:13px
}
.collabable-text-muted{
color:#666
}
.collabable-text-center{
text-align:center
}
.collabable-font-medium{
font-weight:500
}
.collabable-font-semibold{
font-weight:600
} .collabable-mt-4{margin-top:16px}
.collabable-mb-4{margin-bottom:16px}
.collabable-my-4{margin-top:16px;margin-bottom:16px}
.collabable-mt-6{margin-top:24px}
.collabable-mb-6{margin-bottom:24px}
.collabable-my-6{margin-top:24px;margin-bottom:24px}
.collabable-p-4{padding:16px}
.collabable-p-6{padding:24px} .collabable-flex{display:flex}
.collabable-flex-col{flex-direction:column}
.collabable-items-center{align-items:center}
.collabable-justify-center{justify-content:center}
.collabable-justify-between{justify-content:space-between}
.collabable-gap-2{gap:8px}
.collabable-gap-3{gap:12px}
.collabable-gap-4{gap:16px} .collabable-upgrade-modal-overlay{
position:fixed;
inset:0;
z-index:999999;
display:flex;
align-items:center;
justify-content:center;
background:rgba(0,0,0,0);
backdrop-filter:blur(0px);
transition:background 0.25s ease, backdrop-filter 0.25s ease;
padding:16px
}
.collabable-upgrade-modal-overlay.is-open{
background:rgba(0,0,0,0.5);
backdrop-filter:blur(4px)
}
.collabable-upgrade-modal{
position:relative;
background:#fff;
border-radius:16px;
box-shadow:0 20px 60px rgba(0,0,0,0.15);
max-width:640px;
width:100%;
max-height:90vh;
overflow-y:auto;
padding:32px;
opacity:0;
transform:translateY(20px) scale(0.97);
transition:opacity 0.25s ease, transform 0.25s ease
}
.collabable-upgrade-modal-overlay.is-open .collabable-upgrade-modal{
opacity:1;
transform:translateY(0) scale(1)
}
.collabable-upgrade-modal__close{
position:absolute;
top:16px;
right:16px;
background:none;
border:none;
cursor:pointer;
color:#999;
padding:4px;
border-radius:8px;
display:flex;
align-items:center;
justify-content:center;
}
.collabable-upgrade-modal__icon{
text-align:center;
color:#999;
margin-bottom:16px
}
.collabable-upgrade-modal__icon svg{
width:48px;
height:48px
}
.collabable-upgrade-modal__title{
text-align:center;
font-size:22px;
font-weight:700;
color:#111;
margin:0 0 8px 0
}
.collabable-upgrade-modal__message{
text-align:center;
font-size:15px;
color:#666;
margin:0 0 24px 0;
line-height:1.5
} .collabable-upgrade-modal__comparison{
margin-bottom:24px;
overflow-x:auto;
-webkit-overflow-scrolling:touch
}
.collabable-upgrade-modal__table{
width:100%;
border-collapse:collapse;
font-size:13px
}
.collabable-upgrade-modal__table thead th{
padding:10px 8px;
font-weight:600;
text-align:center;
border-bottom:2px solid #e5e5e5;
white-space:nowrap
}
.collabable-upgrade-modal__table thead th.collabable-upgrade-modal__table-feature{
text-align:left;
font-size:12px;
color:#666;
font-weight:500
}
.collabable-upgrade-modal__table-plan{
vertical-align:bottom
}
.collabable-upgrade-modal__plan-name{
display:block;
font-size:14px;
font-weight:700;
color:#111
}
.collabable-upgrade-modal__plan-price{
display:block;
font-size:12px;
font-weight:500;
color:#666;
margin-top:2px
}
.collabable-upgrade-modal__plan-price small{
font-size:11px;
color:#999
}
.collabable-upgrade-modal__table tbody td{
padding:10px 8px;
border-bottom:1px solid #f5f5f5;
text-align:center;
vertical-align:middle
}
.collabable-upgrade-modal__table tbody td.collabable-upgrade-modal__table-feature{
text-align:left;
color:#333;
font-weight:500
}
.collabable-upgrade-modal__table tbody tr:last-child td{
border-bottom:none
} .collabable-upgrade-modal__table thead th.highlighted{
background:#fef2f2;
border-radius:8px 8px 0 0;
position:relative
}
.collabable-upgrade-modal__table tbody td.highlighted{
background:#fafafa
}
.collabable-upgrade-modal__table tbody tr:last-child td.highlighted{
border-radius:0 0 8px 8px
}
.collabable-upgrade-modal__check{
color:#27ae60
}
.collabable-upgrade-modal__dash{
color:#ccc;
font-weight:600
}
.collabable-upgrade-modal__text-value{
font-weight:600;
color:#111;
font-size:12px
} .collabable-upgrade-modal__footer{
text-align:center
}
.collabable-upgrade-modal__cta{
display:inline-flex;
align-items:center;
justify-content:center;
padding:12px 32px;
background:#111;
color:#fff;
border:1px solid #111;
border-radius:999px;
font-size:15px;
font-weight:600;
text-decoration:none;
min-width:220px
} @media (max-width: 600px){
.collabable-upgrade-modal-overlay{
padding:0;
align-items:flex-end
}
.collabable-upgrade-modal{
max-width:100%;
max-height:95vh;
border-radius:16px 16px 0 0;
padding:24px 16px;
transform:translateY(100%);
transition:opacity 0.3s ease, transform 0.3s ease
}
.collabable-upgrade-modal-overlay.is-open .collabable-upgrade-modal{
transform:translateY(0)
}
.collabable-upgrade-modal__table{
font-size:12px
}
.collabable-upgrade-modal__table thead th,
.collabable-upgrade-modal__table tbody td{
padding:8px 4px
}
.collabable-upgrade-modal__cta{
width:100%;
min-width:0
}
} .cb-lightbox{
position:fixed;
inset:0;
z-index:999999;
display:flex;
align-items:center;
justify-content:center;
background:rgba(0,0,0,0);
transition:background 0.3s ease;
pointer-events:none
}
.cb-lightbox--open{
background:rgba(0,0,0,0.92);
pointer-events:auto
}
.cb-lightbox__close{
position:absolute;
top:16px;
right:16px;
background:#fff;
border:none;
color:#111;
font-size:28px;
cursor:pointer;
z-index:10;
width:44px;
height:44px;
padding:0;
display:flex;
align-items:center;
justify-content:center;
line-height:1;
border-radius:50%;
box-shadow:0 2px 8px rgba(0,0,0,0.15);
transition:background 0.2s, opacity 0.3s ease;
opacity:0
}
.cb-lightbox--open .cb-lightbox__close{opacity:1}
.cb-lightbox--open .cb-lightbox__close:hover{background:#e0e0e0}
.cb-lightbox__content{
display:flex;
align-items:center;
justify-content:center;
max-width:90vw;
max-height:85vh
}
.cb-lightbox__img{
max-width:90vw;
max-height:85vh;
object-fit:contain;
border-radius:4px;
opacity:0;
transition:opacity 0.3s ease
}
.cb-lightbox--open .cb-lightbox__img{
opacity:1
}
.cb-lightbox__prev,
.cb-lightbox__next{
position:absolute;
top:50%;
transform:translateY(-50%);
background:#fff;
border:none;
color:#111;
cursor:pointer;
width:48px;
height:48px;
padding:0;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
z-index:10;
box-shadow:0 2px 8px rgba(0,0,0,0.15);
transition:background 0.2s, opacity 0.3s ease;
opacity:0
}
.cb-lightbox__prev{left:16px}
.cb-lightbox__next{right:16px}
.cb-lightbox--open .cb-lightbox__prev,
.cb-lightbox--open .cb-lightbox__next{opacity:1}
.cb-lightbox--open .cb-lightbox__prev:hover,
.cb-lightbox--open .cb-lightbox__next:hover{
background:#e0e0e0
}
.cb-lightbox__counter{
position:absolute;
bottom:20px;
left:50%;
transform:translateX(-50%);
color:#fff;
font-size:14px;
font-weight:500;
opacity:0;
transition:opacity 0.3s ease
}
.cb-lightbox--open .cb-lightbox__counter{opacity:1}
@media (max-width:600px){
.cb-lightbox__prev,
.cb-lightbox__next{
padding:8px
}
.cb-lightbox__prev{left:8px}
.cb-lightbox__next{right:8px}
} .collabable-card,
.collabable-plan-card,
.conversation-card,
.collab-grid-card,
.collabable-profile-card{
} .cb-plan-reassurance{
text-align:center;
font-size:13px;
color:#666;
margin-top:8px
}
.cb-plan-faq{
margin-top:40px;
max-width:600px;
margin-left:auto;
margin-right:auto
}
.cb-plan-faq__item{
border-bottom:1px solid #e5e5e5;
padding:16px 0
}
.cb-plan-faq__item:last-child{
border-bottom:none
}
.cb-plan-faq__q{
font-size:15px;
font-weight:600;
color:#111;
margin:0 0 6px 0
}
.cb-plan-faq__a{
font-size:14px;
color:#666;
margin:0;
line-height:1.5
} @media (prefers-reduced-motion:reduce){
.cb-toast,
.cb-lightbox,
.cb-lightbox__img,
.cb-onboarding-complete__check circle,
.cb-onboarding-complete__check path,
.collabable-onboarding__panel.active,
.collabable-upgrade-modal,
.collabable-upgrade-modal-overlay{
animation:none !important;
transition:none !important
}
} .collabable-global-slider {
grid-column: 1 / -1;
width: 100%;
margin-bottom: 0;
border-radius: 24px;
overflow: hidden;
position: relative;
} .collabable-global-slider ss3-force-full-width {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
transform: none !important;
} div#n2-ss-2 .n2-ss-slider-1 {
overflow: hidden !important;
border-radius: 24px !important;
} div#n2-ss-2 .n2-ss-control-bullet {
position: absolute !important;
bottom: 12px !important;
left: 50% !important;
transform: translateX(-50%) !important;
z-index: 10 !important;
margin: 0 !important;
} div#n2-ss-2 .nextend-bullet-bar .n2-bullet {
width: 10px !important;
height: 10px !important;
padding: 0 !important;
border: none !important;
border-radius: 50% !important;
background: rgba(255, 255, 255, 0.35) !important;
margin: 0 4px !important;
transition: width 0.4s ease, border-radius 0.4s ease, background 0.3s ease !important;
}
div#n2-ss-2 .nextend-bullet-bar .n2-bullet.n2-active {
width: 32px !important;
height: 10px !important;
border-radius: 5px !important;
background: #ffffff !important;
border: none !important;
}
@media (max-width: 768px) {
.collabable-global-slider {
margin-bottom: 0;
border-radius: 16px;
min-height: 170px;
}
div#n2-ss-2 .n2-ss-slider-1 {
border-radius: 16px !important;
min-height: 170px !important;
}
div#n2-ss-2 .n2-ss-control-bullet {
bottom: 8px !important;
}
}:root {
--footer-text:          #ffffff;
--footer-text-muted:    #aaaaaa;
--footer-text-dim:      #777777;
--footer-border:        rgba(255, 255, 255, 0.10);
--footer-input-bg:      rgba(255, 255, 255, 0.08);
--footer-input-border:  rgba(255, 255, 255, 0.18);
--footer-btn-bg:        rgba(255, 255, 255, 0.14);
--footer-btn-bg-hover:  rgba(255, 255, 255, 0.22);
--footer-accent:        #9b72cf; --footer-radius-pill:   999px;
--footer-radius-sm:     6px;
--footer-padding-x:     48px;
--footer-padding-y:     48px;
}  .site-content,
#content,
.ast-container,
.site-main,
.entry-content,
.entry-content .elementor,
.elementor.elementor-default,
.elementor-widget-container:last-child {
padding-bottom: 0 !important;
margin-bottom: 0 !important;
} .ast-article-single,
.ast-separate-container .ast-article-single,
.ast-separate-container .ast-article-post,
.ast-separate-container .entry-content,
#primary,
#primary > .ast-container,
.ast-plain-container,
.ast-page-builder-template .entry-content {
padding-bottom: 0 !important;
margin-bottom: 0 !important;
} .collabable-layout__main {
padding-bottom: 0 !important;
}
.collabable-layout__body {
margin-bottom: 0 !important;
}
.collabable-layout {
margin-bottom: 0 !important;
}
.site-footer,
.site-footer .site-footer-above-section-1,
.site-footer .site-footer-primary-section-1,
.site-footer .site-footer-below-section-1,
.site-footer .ast-builder-footer-grid-row,
.site-footer .site-footer-section,
.site-footer .ast-builder-grid-row,
.site-footer .ast-footer-row-inline {
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
border: none !important;
} .site-footer {
margin-top: 0 !important;
padding-top: 0 !important;
} .collabable-footer {
width: calc(100vw - 160px) !important;
max-width: 1400px !important;
margin-left: 50% !important;
transform: translateX(-50%) !important;
box-sizing: border-box !important;
padding: var(--footer-padding-y) 0 !important;
color: var(--footer-text) !important;
font-family: inherit !important;
border-top: 1px solid var(--footer-border) !important;
} .collabable-footer__search {
display: flex !important;
flex-direction: column !important;
gap: 16px !important;
margin-bottom: 40px !important;
} .collabable-footer__search-links {
display: flex !important;
align-items: center !important;
gap: 28px !important;
padding-left: 54px !important;
}
.collabable-footer__search-links a {
font-size: 14px !important;
font-weight: 500 !important;
color: var(--footer-text) !important;
text-decoration: none !important;
white-space: nowrap !important;
transition: color 0.2s !important;
}
.collabable-footer__search-links a:hover {
color: var(--footer-text-muted) !important;
text-decoration: none !important;
} .collabable-footer__search-form {
display: flex !important;
align-items: center !important;
gap: 18px !important;
padding-left: 54px !important; }
.collabable-footer__search-input {
flex: 1 !important;
height: 35px !important;
max-width: 400px !important;
padding: 0 20px !important;
background: #ffffff !important;
border: 1px solid #A2A2A2 !important;
border-radius: 20px !important;
color: #000000 !important;
font-size: 14px !important;
font-family: 'Inter', inherit !important;
outline: none !important;
transition: border-color 0.2s, background 0.2s !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
.collabable-footer__search-input::placeholder {
color: #000000 !important;
font-weight: 400 !important;
}
.collabable-footer__search-input:focus {
border-color: #666666 !important;
background: #ffffff !important;
}
.collabable-footer__search-btn {
width: 149px !important;
height: 35px !important;
padding: 0 !important;
background: #4E4E4E !important;
border: none !important;
border-radius: 20px !important;
color: #ffffff !important;
font-size: 11px !important;
font-weight: 600 !important;
font-family: 'Inter', inherit !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
cursor: pointer !important;
white-space: nowrap !important;
transition: background 0.2s !important;
flex-shrink: 0 !important;
}
.collabable-footer__search-btn:hover {
background: #5a5a5a !important;
} .collabable-footer__grid {
display: grid !important;
grid-template-columns: repeat(6, 1fr) !important;
gap: 24px !important;
margin-bottom: 0 !important;
padding-bottom: 0 !important;
padding-left: 54px !important;
border-bottom: none !important;
} .collabable-footer__col {
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
} .collabable-footer__col-title {
font-size: 14px !important;
font-weight: 700 !important;
color: #ffffff !important;
margin: 0 0 14px 0 !important;
padding: 0 !important;
line-height: 1.4 !important;
letter-spacing: 0 !important;
text-transform: none !important;
} .collabable-footer__col-links {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
}
.collabable-footer__col-links li {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
} .collabable-footer__col-links a {
font-size: 14px !important;
font-weight: 300 !important;
color: #ffffff !important;
text-decoration: none !important;
line-height: 1.4 !important;
letter-spacing: 0 !important;
text-align: left !important;
transition: none !important;
display: inline-block !important;
}
.collabable-footer__col-links a:hover {
color: #ffffff !important;
text-decoration: none !important;
} .collabable-footer__copyright {
display: flex !important;
flex-direction: row !important;
align-items: baseline !important;
gap: 20px !important;
flex-wrap: nowrap !important;
padding-left: 54px !important;
margin-top: 40px !important;
} .collabable-footer__logo {
font-size: 31px !important;
font-weight: 500 !important;
color: var(--footer-text) !important;
text-decoration: none !important;
letter-spacing: -0.01em !important;
flex-shrink: 0 !important;
display: inline !important;
}
.collabable-footer__logo:hover {
color: var(--footer-text) !important;
text-decoration: none !important;
}
.collabable-footer__logo-base {
color: var(--footer-text) !important;
font-weight: 400 !important;
}
.collabable-footer__logo-ai {
color: #ffffff !important;
font-weight: 600 !important;
} .collabable-footer__copy {
font-size: 12px !important;
color: var(--footer-text-dim) !important;
margin: 0 !important;
padding: 0 !important;
line-height: 1.5 !important;
flex-shrink: 0 !important;
white-space: nowrap !important;
} @media (max-width: 1024px) {
.collabable-footer {
width: calc(100vw - 64px) !important;
padding: 40px 0 !important;
}
.collabable-footer__grid {
grid-template-columns: repeat(3, 1fr) !important;
gap: 32px 24px !important;
padding-left: 0 !important;
}
} @media (max-width: 768px) {
.collabable-footer {
padding: 36px 24px !important;
}
.collabable-footer__search {
flex-direction: column !important;
align-items: flex-start !important;
gap: 16px !important;
}
.collabable-footer__search-links {
padding-left: 0 !important;
}
.collabable-footer__search-form {
padding-left: 0 !important;
width: 100% !important;
}
.collabable-footer__search-input {
max-width: 100% !important;
}
.collabable-footer__grid {
grid-template-columns: repeat(3, 1fr) !important;
gap: 28px 20px !important;
padding-left: 0 !important;
}
.collabable-footer__col-links a {
font-size: 14px !important;
font-weight: 300 !important;
color: #ffffff !important;
}
} @media (max-width: 480px) {
.collabable-footer {
width: calc(100vw - 40px) !important;
margin-left: 20px !important;
transform: none !important;
padding: 28px 0 !important;
}
.collabable-footer__search {
gap: 12px !important;
margin-bottom: 28px !important;
}
.collabable-footer__search-links {
gap: 16px !important;
flex-wrap: wrap !important;
padding-left: 0 !important;
}
.collabable-footer__search-links a {
font-size: 13px !important;
}
.collabable-footer__search-form {
padding-left: 0 !important;
width: 100% !important;
}
.collabable-footer__search-btn {
width: 100px !important;
}
.collabable-footer__grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 28px 16px !important;
margin-bottom: 28px !important;
padding-bottom: 28px !important;
padding-left: 0 !important;
}
.collabable-footer__col-links a {
font-size: 13px !important;
font-weight: 300 !important;
color: #ffffff !important;
line-height: 20px !important;
letter-spacing: 0.29px !important;
}
.collabable-footer__logo {
font-size: 13px !important;
}
.collabable-footer__copy {
font-size: 11px !important;
}
}
@media (max-width: 360px) {
.collabable-footer__grid {
grid-template-columns: 1fr !important;
padding-left: 0 !important;
}
.collabable-footer__search-links {
flex-direction: column !important;
gap: 10px !important;
}
}:root {
--cb-primary-color: #CF0000;
--cb-primary-hover: #A60000;
--cb-secondary-color: #666;
--cb-text-color: #000;
--cb-text-muted: #666;
--cb-bg-color: #ffffff;
--cb-bg-muted: #f5f5f5;
--cb-border-color: #ddd;
--cb-border-radius: 12px;
--cb-border-radius-sm: 8px;
--cb-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
--cb-shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.1);
--cb-transition: 0.2s ease;
--cb-font-family: inherit;
--cb-gap: 24px;
--cb-gap-sm: 16px;
}  .cb-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 20px;
font-family: var(--cb-font-family);
font-size: 14px;
font-weight: 500;
line-height: 1.4;
text-decoration: none;
border: none;
border-radius: var(--cb-border-radius-sm);
cursor: pointer;
}
.cb-btn--primary {
background: var(--cb-primary-color);
color: #ffffff;
}
.cb-btn--primary:hover {
background: var(--cb-primary-hover);
color: #ffffff;
}
.cb-btn--secondary {
background: var(--cb-bg-muted);
color: var(--cb-text-color);
}
.cb-btn--secondary:hover {
background: var(--cb-border-color);
}
.cb-btn--sm {
padding: 6px 12px;
font-size: 13px;
}
.cb-btn--danger {
background: #CF0000;
color: #fff;
border: 1px solid #CF0000;
} .cb-tag {
display: inline-block;
padding: 4px 10px;
font-size: 12px;
font-weight: 500;
color: var(--cb-primary-color);
background: #fde8e8;
border-radius: 20px;
} .cb-featured-profiles {
display: grid;
gap: var(--cb-gap);
}
.cb-featured-profiles--cols-2 { grid-template-columns: repeat(2, 1fr); }
.cb-featured-profiles--cols-3 { grid-template-columns: repeat(3, 1fr); }
.cb-featured-profiles--cols-4 { grid-template-columns: repeat(4, 1fr); }
.cb-featured-profiles--empty {
padding: 40px;
text-align: center;
color: var(--cb-text-muted);
}
@media (max-width: 1024px) {
.cb-featured-profiles--cols-4 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
.cb-featured-profiles--cols-3,
.cb-featured-profiles--cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.cb-featured-profiles--cols-2,
.cb-featured-profiles--cols-3,
.cb-featured-profiles--cols-4 { grid-template-columns: 1fr; }
.cb-featured-profiles {
gap: 16px;
}
.cb-profile-card {
padding: 16px;
}
} .cb-profile-card {
position: relative;
display: flex;
flex-direction: column;
padding: 24px;
background: var(--cb-bg-color);
border: 1px solid var(--cb-border-color);
border-radius: var(--cb-border-radius);
}
.cb-profile-card:hover {}
.cb-profile-card__badge {
position: absolute;
top: 12px;
right: 12px;
padding: 4px 8px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
color: #ffffff;
background: var(--cb-primary-color);
border-radius: 4px;
}
.cb-profile-card__avatar {
width: 80px;
height: 80px;
margin-bottom: 16px;
border-radius: 50%;
overflow: hidden;
background: var(--cb-bg-muted);
}
.cb-profile-card__avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.cb-profile-card__avatar-placeholder {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
font-size: 28px;
font-weight: 600;
color: var(--cb-primary-color);
background: #fde8e8;
}
.cb-profile-card__content {
flex: 1;
}
.cb-profile-card__role {
display: inline-block;
padding: 4px 10px;
margin-bottom: 8px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
border-radius: 4px;
}
.cb-profile-card__role--host {
color: #CF0000;
background: #fde8e8;
}
.cb-profile-card__role--guest {
color: #0891b2;
background: #e0f7fa;
}
.cb-profile-card__role--both {
color: #27ae60;
background: #e8f4ea;
}
.cb-profile-card__name {
margin: 0 0 8px;
font-size: 18px;
font-weight: 600;
line-height: 1.3;
color: var(--cb-text-color);
}
.cb-profile-card__name a {
color: inherit;
text-decoration: none;
}
.cb-profile-card__name a:hover {
color: var(--cb-primary-color);
}
.cb-profile-card__headline {
margin: 0 0 12px;
font-size: 14px;
color: var(--cb-text-muted);
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.cb-profile-card__topics {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 12px;
}
.cb-profile-card__experience {
display: inline-block;
font-size: 12px;
color: var(--cb-text-muted);
}
.cb-profile-card__actions {
display: flex;
gap: 8px;
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid var(--cb-border-color);
}
.cb-profile-card__actions .cb-btn {
flex: 1;
}
.cb-profile-card__link {
display: block;
margin-top: 16px;
padding-top: 16px;
font-size: 14px;
font-weight: 500;
color: var(--cb-primary-color);
text-decoration: none;
text-align: center;
border-top: 1px solid var(--cb-border-color);
}
.cb-profile-card__link:hover {
text-decoration: underline;
} .cb-filters {
margin-bottom: var(--cb-gap);
}
.cb-filters__form {
padding: 20px;
background: var(--cb-bg-muted);
border-radius: var(--cb-border-radius);
}
.cb-filters__row {
display: flex;
flex-wrap: wrap;
gap: var(--cb-gap-sm);
align-items: flex-end;
}
.cb-filters__group {
flex: 1;
min-width: 150px;
}
.cb-filters__group--actions {
display: flex;
gap: 8px;
flex: 0 0 auto;
}
.cb-filters__label {
display: block;
margin-bottom: 6px;
font-size: 13px;
font-weight: 500;
color: var(--cb-text-color);
}
.cb-filters__input,
.cb-filters__select {
width: 100%;
padding: 10px 12px;
font-size: 14px;
border: 1px solid var(--cb-border-color);
border-radius: var(--cb-border-radius-sm);
background: var(--cb-bg-color);
transition: border-color var(--cb-transition);
}
.cb-filters__input:focus,
.cb-filters__select:focus {
outline: none;
border-color: var(--cb-primary-color);
}
@media (max-width: 768px) {
.cb-filters__group {
min-width: calc(50% - 8px);
}
.cb-filters__group--actions {
width: 100%;
margin-top: 8px;
}
.cb-filters__group--actions .cb-btn {
flex: 1;
}
}
@media (max-width: 480px) {
.cb-filters__group {
min-width: 100%;
}
} .cb-filters__active {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: var(--cb-gap-sm);
}
.cb-filters__tag {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
font-size: 13px;
color: var(--cb-primary-color);
background: #fde8e8;
border-radius: 20px;
}
.cb-filters__tag-remove {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
font-size: 14px;
color: var(--cb-primary-color);
background: #f5c6c6;
border-radius: 50%;
text-decoration: none;
transition: background var(--cb-transition);
}
.cb-filters__tag-remove:hover {
background: var(--cb-primary-color);
color: #ffffff;
} .cb-categories-grid {
display: grid;
gap: var(--cb-gap-sm);
}
.cb-categories-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.cb-categories-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.cb-categories-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
.cb-categories-grid--cols-5 { grid-template-columns: repeat(5, 1fr); }
.cb-categories-grid--cols-6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1024px) {
.cb-categories-grid--cols-5,
.cb-categories-grid--cols-6 { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 768px) {
.cb-categories-grid--cols-3,
.cb-categories-grid--cols-4,
.cb-categories-grid--cols-5,
.cb-categories-grid--cols-6 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.cb-categories-grid--cols-2,
.cb-categories-grid--cols-3,
.cb-categories-grid--cols-4,
.cb-categories-grid--cols-5,
.cb-categories-grid--cols-6 { grid-template-columns: 1fr; }
}
.cb-categories-grid--empty {
padding: 40px;
text-align: center;
color: var(--cb-text-muted);
} .cb-category-card {
display: flex;
flex-direction: column;
align-items: center;
padding: 24px 16px;
text-align: center;
text-decoration: none;
background: var(--cb-bg-color);
border: 1px solid var(--cb-border-color);
border-radius: var(--cb-border-radius);
}
.cb-category-card:hover {}
.cb-category-card__icon {
font-size: 32px;
margin-bottom: 12px;
}
.cb-category-card__name {
font-size: 14px;
font-weight: 600;
color: var(--cb-text-color);
margin-bottom: 4px;
}
.cb-category-card__count {
font-size: 12px;
color: var(--cb-text-muted);
} .cb-pagination {
display: flex;
justify-content: center;
margin-top: var(--cb-gap);
}
.cb-pagination ul {
display: flex;
gap: 4px;
list-style: none;
margin: 0;
padding: 0;
}
.cb-pagination li {
margin: 0;
}
.cb-pagination a,
.cb-pagination span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 12px;
font-size: 14px;
color: var(--cb-text-color);
background: var(--cb-bg-color);
border: 1px solid var(--cb-border-color);
border-radius: var(--cb-border-radius-sm);
text-decoration: none;
}
.cb-pagination a:hover {
border-color: var(--cb-primary-color);
color: var(--cb-primary-color);
}
.cb-pagination .current {
background: var(--cb-primary-color);
border-color: var(--cb-primary-color);
color: #ffffff;
} .cb-dashboard__welcome {
display: flex;
align-items: center;
gap: var(--cb-gap);
padding: var(--cb-gap);
margin-bottom: var(--cb-gap);
background: var(--cb-bg-color);
border: 1px solid var(--cb-border-color);
border-radius: var(--cb-border-radius);
}
.cb-dashboard__avatar img {
width: 80px;
height: 80px;
border-radius: 50%;
object-fit: cover;
}
.cb-dashboard__greeting {
flex: 1;
}
.cb-dashboard__title {
margin: 0 0 4px;
font-size: 24px;
font-weight: 600;
}
.cb-dashboard__subtitle {
margin: 0;
color: var(--cb-text-muted);
}
.cb-dashboard__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--cb-gap);
margin-bottom: var(--cb-gap);
}
.cb-dashboard__card {
background: var(--cb-bg-color);
border: 1px solid var(--cb-border-color);
border-radius: var(--cb-border-radius);
overflow: hidden;
}
.cb-dashboard__card-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--cb-gap-sm) var(--cb-gap);
border-bottom: 1px solid var(--cb-border-color);
}
.cb-dashboard__card-title {
margin: 0;
font-size: 16px;
font-weight: 600;
}
.cb-dashboard__card-link {
font-size: 14px;
color: var(--cb-primary-color);
text-decoration: none;
}
.cb-dashboard__card-content {
padding: var(--cb-gap);
}
.cb-dashboard__actions {
display: flex;
gap: var(--cb-gap-sm);
flex-wrap: wrap;
}
.cb-dashboard__action {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: var(--cb-gap);
min-width: 120px;
text-decoration: none;
background: var(--cb-bg-color);
border: 1px solid var(--cb-border-color);
border-radius: var(--cb-border-radius);
}
.cb-dashboard__action:hover {}
.cb-dashboard__action-icon {
font-size: 28px;
}
.cb-dashboard__action-label {
font-size: 14px;
font-weight: 500;
color: var(--cb-text-color);
} .cb-subscription-banner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--cb-gap);
padding: var(--cb-gap);
margin-bottom: var(--cb-gap);
border-radius: var(--cb-border-radius);
}
.cb-subscription-banner--trial {
background: #fef3c7;
border: 1px solid #e67e22;
}
.cb-subscription-banner--expired {
background: linear-gradient(135deg, #fee2e2, #fecaca);
border: 1px solid #CF0000;
}
.cb-subscription-banner--active {
background: #e8f4ea;
border: 1px solid #27ae60;
}
.cb-subscription-banner__content {
display: flex;
align-items: center;
gap: 12px;
}
.cb-subscription-banner__icon {
font-size: 24px;
}
.cb-subscription-banner__text {
margin: 0;
font-size: 14px;
color: var(--cb-text-color);
} .cb-project-list {
list-style: none;
margin: 0;
padding: 0;
}
.cb-project-list__item {
border-bottom: 1px solid var(--cb-border-color);
}
.cb-project-list__item:last-child {
border-bottom: none;
}
.cb-project-list__link {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 0;
text-decoration: none;
color: inherit;
}
.cb-project-list__link:hover {
background: var(--cb-bg-muted);
margin: 0 calc(-1 * var(--cb-gap));
padding-left: var(--cb-gap);
padding-right: var(--cb-gap);
}
.cb-project-list__avatar {
width: 40px;
height: 40px;
border-radius: 50%;
}
.cb-project-list__info {
flex: 1;
display: flex;
flex-direction: column;
}
.cb-project-list__name {
font-weight: 500;
color: var(--cb-text-color);
}
.cb-project-list__status {
font-size: 12px;
color: var(--cb-text-muted);
}
.cb-project-list__date {
font-size: 12px;
color: var(--cb-text-muted);
} .cb-connection-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.cb-connection-list__avatar {
width: 48px;
height: 48px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--cb-border-color);
transition: border-color var(--cb-transition);
}
.cb-connection-list__item:hover .cb-connection-list__avatar {
border-color: var(--cb-primary-color);
} .cb-profile-strength__bar {
height: 8px;
background: var(--cb-bg-muted);
border-radius: 4px;
overflow: hidden;
margin-bottom: 8px;
}
.cb-profile-strength__fill {
height: 100%;
background: var(--cb-primary-color);
border-radius: 4px;
transition: width 0.5s ease;
}
.cb-profile-strength__info {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
}
.cb-profile-strength__percentage {
font-size: 24px;
font-weight: 700;
color: var(--cb-primary-color);
}
.cb-profile-strength__label {
font-size: 14px;
color: var(--cb-text-muted);
}
.cb-profile-strength__checklist {
list-style: none;
margin: 0;
padding: 0;
}
.cb-profile-strength__item {
padding: 6px 0;
font-size: 14px;
color: var(--cb-text-muted);
}
.cb-profile-strength__item::before {
content: "○ ";
color: var(--cb-border-color);
} .cb-empty-state {
padding: 40px;
text-align: center;
color: var(--cb-text-muted);
}
.cb-empty-state--sm {
padding: 20px;
}
.cb-empty-state p {
margin: 0 0 16px;
} .cb-login-required {
max-width: 400px;
margin: 0 auto;
padding: 60px 40px;
text-align: center;
background: var(--cb-bg-color);
border: 1px solid var(--cb-border-color);
border-radius: var(--cb-border-radius);
}
.cb-login-required__icon {
font-size: 48px;
margin-bottom: 16px;
}
.cb-login-required__title {
margin: 0 0 8px;
font-size: 24px;
}
.cb-login-required__text {
margin: 0 0 24px;
color: var(--cb-text-muted);
}
.cb-login-required__signup {
margin-top: 16px;
font-size: 14px;
color: var(--cb-text-muted);
}
.cb-login-required__signup a {
color: var(--cb-primary-color);
} .cb-messaging {
display: grid;
grid-template-columns: 350px 1fr;
min-height: 600px;
background: var(--cb-bg-color);
border: 1px solid var(--cb-border-color);
border-radius: var(--cb-border-radius);
overflow: hidden;
}
@media (max-width: 768px) {
.cb-messaging {
grid-template-columns: 1fr;
}
.cb-messaging--conversation-open .cb-messaging__sidebar {
display: none;
}
.cb-messaging:not(.cb-messaging--conversation-open) .cb-messaging__main {
display: none;
}
}
.cb-messaging__sidebar {
border-right: 1px solid var(--cb-border-color);
display: flex;
flex-direction: column;
}
.cb-messaging__sidebar-header {
padding: var(--cb-gap);
border-bottom: 1px solid var(--cb-border-color);
}
.cb-messaging__title {
margin: 0 0 12px;
font-size: 20px;
}
.cb-messaging__filters {
display: flex;
gap: 8px;
}
.cb-messaging__filter {
padding: 6px 12px;
font-size: 13px;
color: var(--cb-text-muted);
text-decoration: none;
border-radius: 20px;
}
.cb-messaging__filter:hover,
.cb-messaging__filter--active {
background: var(--cb-bg-muted);
color: var(--cb-text-color);
}
.cb-messaging__conversations {
flex: 1;
overflow-y: auto;
}
.cb-messaging__empty {
padding: var(--cb-gap);
text-align: center;
color: var(--cb-text-muted);
} .cb-conversation {
display: flex;
gap: 12px;
padding: 16px var(--cb-gap);
text-decoration: none;
color: inherit;
border-bottom: 1px solid var(--cb-border-color);
transition: background var(--cb-transition);
}
.cb-conversation:hover {
background: var(--cb-bg-muted);
}
.cb-conversation--active {
background: #fef2f2;
border-left: 3px solid var(--cb-primary-color);
}
.cb-conversation--unread {
background: #fff5f5;
}
.cb-conversation__avatar {
position: relative;
width: 48px;
height: 48px;
flex-shrink: 0;
}
.cb-conversation__avatar img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
}
.cb-conversation__avatar-placeholder {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
font-size: 18px;
font-weight: 600;
color: var(--cb-primary-color);
background: #fde8e8;
border-radius: 50%;
}
.cb-conversation__unread-badge {
position: absolute;
top: 0;
right: 0;
width: 12px;
height: 12px;
background: var(--cb-primary-color);
border: 2px solid var(--cb-bg-color);
border-radius: 50%;
}
.cb-conversation__content {
flex: 1;
min-width: 0;
}
.cb-conversation__header {
display: flex;
justify-content: space-between;
margin-bottom: 4px;
}
.cb-conversation__name {
font-weight: 600;
color: var(--cb-text-color);
}
.cb-conversation--unread .cb-conversation__name {
color: var(--cb-primary-color);
}
.cb-conversation__time {
font-size: 12px;
color: var(--cb-text-muted);
}
.cb-conversation__preview {
margin: 0;
font-size: 14px;
color: var(--cb-text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} .cb-messaging__main {
display: flex;
flex-direction: column;
}
.cb-messaging__placeholder {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
color: var(--cb-text-muted);
}
.cb-messaging__placeholder-icon {
font-size: 48px;
margin-bottom: 16px;
}
.cb-thread {
display: flex;
flex-direction: column;
height: 100%;
}
.cb-thread__header {
display: flex;
align-items: center;
gap: 12px;
padding: var(--cb-gap);
border-bottom: 1px solid var(--cb-border-color);
}
.cb-thread__back {
display: none;
align-items: center;
gap: 4px;
padding: 8px;
color: var(--cb-text-muted);
text-decoration: none;
}
@media (max-width: 768px) {
.cb-thread__back {
display: flex;
}
}
.cb-thread__user {
display: flex;
align-items: center;
gap: 12px;
flex: 1;
}
.cb-thread__avatar {
width: 44px;
height: 44px;
border-radius: 50%;
object-fit: cover;
}
.cb-thread__user-info {
display: flex;
flex-direction: column;
}
.cb-thread__user-name {
font-weight: 600;
}
.cb-thread__user-role {
font-size: 13px;
color: var(--cb-text-muted);
}
.cb-thread__messages {
flex: 1;
padding: var(--cb-gap);
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 16px;
}
.cb-thread__empty {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
color: var(--cb-text-muted);
} .cb-message {
display: flex;
gap: 8px;
max-width: 70%;
}
.cb-message--mine {
margin-left: auto;
flex-direction: row-reverse;
}
.cb-message__avatar {
width: 32px;
height: 32px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
}
.cb-message__avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.cb-message__avatar span {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
font-size: 12px;
font-weight: 600;
color: var(--cb-primary-color);
background: #fde8e8;
}
.cb-message__content {
display: flex;
flex-direction: column;
gap: 4px;
}
.cb-message--mine .cb-message__content {
align-items: flex-end;
}
.cb-message__bubble {
padding: 12px 16px;
border-radius: 18px;
font-size: 14px;
line-height: 1.5;
}
.cb-message--theirs .cb-message__bubble {
background: var(--cb-bg-muted);
border-bottom-left-radius: 4px;
}
.cb-message--mine .cb-message__bubble {
background: var(--cb-primary-color);
color: #ffffff;
border-bottom-right-radius: 4px;
}
.cb-message__bubble p {
margin: 0;
}
.cb-message__time {
font-size: 11px;
color: var(--cb-text-muted);
padding: 0 8px;
} .cb-thread__composer {
padding: var(--cb-gap);
border-top: 1px solid var(--cb-border-color);
}
.cb-composer {
display: flex;
gap: 12px;
align-items: flex-end;
}
.cb-composer__input {
flex: 1;
padding: 12px 16px;
border: 1px solid var(--cb-border-color);
border-radius: 24px;
font-size: 14px;
resize: none;
max-height: 120px;
}
.cb-composer__input:focus {
outline: none;
border-color: var(--cb-primary-color);
}
.cb-composer__send {
border-radius: 24px;
padding: 12px 24px;
}
.cb-thread__restricted {
padding: var(--cb-gap);
text-align: center;
background: var(--cb-bg-muted);
border-top: 1px solid var(--cb-border-color);
}
.cb-thread__restricted p {
margin: 0 0 12px;
color: var(--cb-text-muted);
} .cb-onboarding {
max-width: 600px;
margin: 0 auto;
}
.cb-onboarding__progress {
margin-bottom: var(--cb-gap);
}
.cb-onboarding__steps {
display: flex;
align-items: center;
justify-content: center;
}
.cb-onboarding__step {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.cb-onboarding__step-number {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
font-size: 16px;
font-weight: 600;
color: var(--cb-text-muted);
background: var(--cb-bg-muted);
border: 2px solid var(--cb-border-color);
border-radius: 50%;
}
.cb-onboarding__step--active .cb-onboarding__step-number {
color: #ffffff;
background: var(--cb-primary-color);
border-color: var(--cb-primary-color);
}
.cb-onboarding__step--completed .cb-onboarding__step-number {
color: #ffffff;
background: #27ae60;
border-color: #27ae60;
}
.cb-onboarding__step-label {
font-size: 13px;
font-weight: 500;
color: var(--cb-text-muted);
}
.cb-onboarding__step--active .cb-onboarding__step-label {
color: var(--cb-primary-color);
}
.cb-onboarding__step-connector {
width: 60px;
height: 2px;
background: var(--cb-border-color);
margin: 0 12px 24px;
}
.cb-onboarding__step-connector--completed {
background: #27ae60;
}
.cb-onboarding__form {
background: var(--cb-bg-color);
border: 1px solid var(--cb-border-color);
border-radius: var(--cb-border-radius);
overflow: hidden;
}
.cb-onboarding__panel {
display: none;
padding: var(--cb-gap);
}
.cb-onboarding__panel--active {
display: block;
}
.cb-onboarding__panel-title {
margin: 0 0 8px;
font-size: 24px;
}
.cb-onboarding__panel-desc {
margin: 0 0 24px;
color: var(--cb-text-muted);
}
.cb-onboarding__actions {
display: flex;
justify-content: space-between;
padding: var(--cb-gap);
border-top: 1px solid var(--cb-border-color);
background: var(--cb-bg-muted);
} .cb-form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--cb-gap-sm);
}
@media (max-width: 480px) {
.cb-form-row {
grid-template-columns: 1fr;
}
}
.cb-form-group {
margin-bottom: var(--cb-gap-sm);
}
.cb-form-label {
display: block;
margin-bottom: 6px;
font-size: 14px;
font-weight: 500;
color: var(--cb-text-color);
}
.cb-form-label .required {
color: #CF0000;
}
.cb-form-input,
.cb-form-textarea,
.cb-form-select {
width: 100%;
padding: 12px 16px;
font-size: 14px;
border: 1px solid var(--cb-border-color);
border-radius: var(--cb-border-radius-sm);
background: var(--cb-bg-color);
transition: border-color var(--cb-transition);
}
.cb-form-input:focus,
.cb-form-textarea:focus,
.cb-form-select:focus {
outline: none;
border-color: var(--cb-primary-color);
}
.cb-form-hint {
margin: 6px 0 0;
font-size: 12px;
color: var(--cb-text-muted);
}
.cb-form-options {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 12px;
}
.cb-form-option {
cursor: pointer;
}
.cb-form-option input {
display: none;
}
.cb-form-option__card {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: var(--cb-gap);
text-align: center;
border: 2px solid var(--cb-border-color);
border-radius: var(--cb-border-radius);
}
.cb-form-option input:checked + .cb-form-option__card {
border-color: var(--cb-primary-color);
background: #fef2f2;
}
.cb-form-option__icon {
font-size: 32px;
}
.cb-form-option__label {
font-weight: 600;
color: var(--cb-text-color);
}
.cb-form-option__desc {
font-size: 12px;
color: var(--cb-text-muted);
}
.cb-form-fieldset {
margin: var(--cb-gap) 0;
padding: 0;
border: none;
}
.cb-form-legend {
margin-bottom: var(--cb-gap-sm);
font-size: 16px;
font-weight: 600;
color: var(--cb-text-color);
}
.cb-form-checkbox {
display: flex;
align-items: flex-start;
gap: 8px;
cursor: pointer;
}
.cb-form-checkbox input {
margin-top: 4px;
}
.cb-form-upload {
position: relative;
}
.cb-form-upload__input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
}
.cb-form-upload__label {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 32px;
border: 2px dashed var(--cb-border-color);
border-radius: var(--cb-border-radius);
cursor: pointer;
}
.cb-form-upload__label:hover,
.cb-form-upload__input:focus + .cb-form-upload__label {
border-color: var(--cb-primary-color);
background: #fff5f5;
}
.cb-form-upload__icon {
font-size: 32px;
}
.cb-form-upload__text {
font-weight: 500;
color: var(--cb-text-color);
}
.cb-form-upload__hint {
font-size: 12px;
color: var(--cb-text-muted);
}
.cb-form-notice {
padding: 12px 16px;
border-radius: var(--cb-border-radius-sm);
margin-bottom: var(--cb-gap-sm);
}
.cb-form-notice--info {
background: #fef2f2;
border: 1px solid #ddd;
}
.cb-form-notice p {
margin: 0;
} .cb-form-checkboxes {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 10px;
padding: 16px;
background: var(--cb-bg-muted);
border: 1px solid var(--cb-border-color);
border-radius: var(--cb-border-radius-sm);
max-height: 280px;
overflow-y: auto;
}
.cb-form-checkbox-item {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
background: var(--cb-bg-color);
border: 1px solid var(--cb-border-color);
border-radius: var(--cb-border-radius-sm);
cursor: pointer;
user-select: none;
}
.cb-form-checkbox-item:hover {
border-color: var(--cb-primary-color);
background: #fff5f5;
}
.cb-form-checkbox-item:has(input:checked) {
border-color: var(--cb-primary-color);
background: #fde8e8;
}
.cb-form-checkbox-input {
width: 18px;
height: 18px;
margin: 0;
cursor: pointer;
accent-color: var(--cb-primary-color);
flex-shrink: 0;
}
.cb-form-checkbox-label {
font-size: 13px;
font-weight: 500;
color: var(--cb-text-color);
line-height: 1.3;
}
.cb-form-checkbox-item:has(input:checked) .cb-form-checkbox-label {
color: var(--cb-primary-color);
} .cb-form-hint--above {
margin: 0 0 8px;
} .cb-form-hint--error {
color: #CF0000;
font-weight: 500;
} .cb-form-checkbox-item.cb-form-checkbox-item--disabled {
opacity: 0.5;
pointer-events: none;
cursor: not-allowed;
}
@media (max-width: 480px) {
.cb-form-checkboxes {
grid-template-columns: repeat(2, 1fr);
}
} .cb-onboarding--completed {
text-align: center;
}
.cb-onboarding__success {
padding: 60px 40px;
background: var(--cb-bg-color);
border: 1px solid var(--cb-border-color);
border-radius: var(--cb-border-radius);
}
.cb-onboarding__success-icon {
font-size: 64px;
margin-bottom: 16px;
}
.cb-onboarding__success h2 {
margin: 0 0 8px;
}
.cb-onboarding__success p {
margin: 0 0 24px;
color: var(--cb-text-muted);
}
.cb-onboarding__success-actions {
display: flex;
justify-content: center;
gap: 12px;
} .cb-pricing__trial-banner {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: var(--cb-gap);
margin-bottom: var(--cb-gap);
background: #f5f5f5;
border-radius: var(--cb-border-radius);
}
.cb-pricing__trial-icon {
font-size: 24px;
}
.cb-pricing__trial-text {
margin: 0;
font-weight: 500;
color: #CF0000;
}
.cb-pricing__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: var(--cb-gap);
margin-bottom: var(--cb-gap);
}
.cb-pricing__card {
position: relative;
display: flex;
flex-direction: column;
padding: var(--cb-gap);
background: var(--cb-bg-color);
border: 2px solid var(--cb-border-color);
border-radius: var(--cb-border-radius);
}
.cb-pricing__card:hover {}
.cb-pricing__card--highlight {
border-color: var(--cb-primary-color);
transform: scale(1.02);
}
.cb-pricing__card--current {
border-color: #27ae60;
}
.cb-pricing__badge {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
padding: 4px 16px;
font-size: 12px;
font-weight: 600;
color: #ffffff;
background: var(--cb-primary-color);
border-radius: 20px;
}
.cb-pricing__current-badge {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
padding: 4px 16px;
font-size: 12px;
font-weight: 600;
color: #ffffff;
background: #27ae60;
border-radius: 20px;
}
.cb-pricing__header {
text-align: center;
margin-bottom: var(--cb-gap);
}
.cb-pricing__name {
margin: 0 0 4px;
font-size: 20px;
}
.cb-pricing__description {
margin: 0;
font-size: 14px;
color: var(--cb-text-muted);
}
.cb-pricing__price {
display: flex;
align-items: baseline;
justify-content: center;
gap: 4px;
margin-bottom: var(--cb-gap);
padding-bottom: var(--cb-gap);
border-bottom: 1px solid var(--cb-border-color);
}
.cb-pricing__currency {
font-size: 24px;
font-weight: 500;
color: var(--cb-text-muted);
}
.cb-pricing__amount {
font-size: 48px;
font-weight: 700;
color: var(--cb-text-color);
line-height: 1;
}
.cb-pricing__period {
font-size: 14px;
color: var(--cb-text-muted);
}
.cb-pricing__features {
list-style: none;
margin: 0 0 var(--cb-gap);
padding: 0;
flex: 1;
}
.cb-pricing__feature {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 0;
font-size: 14px;
}
.cb-pricing__feature-icon {
width: 20px;
text-align: center;
}
.cb-pricing__action {
text-align: center;
}
.cb-pricing__action .cb-btn {
width: 100%;
}
.cb-btn--disabled {
opacity: 0.5;
pointer-events: none;
}
.cb-pricing__footer {
text-align: center;
}
.cb-pricing__guarantee {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin: 0 0 8px;
font-size: 14px;
color: var(--cb-text-muted);
}
.cb-pricing__contact {
margin: 0;
font-size: 14px;
color: var(--cb-text-muted);
}
.cb-pricing__contact a {
color: var(--cb-primary-color);
} .cb-subscription-status {
display: flex;
align-items: center;
gap: var(--cb-gap-sm);
padding: var(--cb-gap-sm);
background: var(--cb-bg-muted);
border-radius: var(--cb-border-radius-sm);
}
.cb-subscription-status__info {
flex: 1;
display: flex;
align-items: center;
gap: 8px;
}
.cb-subscription-status__plan {
font-weight: 600;
}
.cb-subscription-status__badge {
padding: 2px 8px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
border-radius: 4px;
}
.cb-subscription-status__badge--trial {
color: #e67e22;
background: #fef3c7;
}
.cb-subscription-status__badge--active {
color: #27ae60;
background: #d1fae5;
}
.cb-subscription-status__badge--expired {
color: #CF0000;
background: #fee2e2;
}
.cb-subscription-status__trial {
margin: 0;
font-size: 13px;
color: var(--cb-text-muted);
}
@media (max-width: 480px) {
.cb-subscription-status {
flex-direction: column;
text-align: center;
}
.cb-subscription-status__info {
flex-direction: column;
}
}:root {
--cb-score-excellent: #27ae60;
--cb-score-good: #e67e22;
--cb-score-average: #CF0000;
--cb-score-low: #999;
--cb-score-neutral: #bbb;
} .cb-score-badge {
display: inline-flex;
align-items: center;
gap: 4px;
border-radius: 6px;
font-weight: 600;
line-height: 1;
white-space: nowrap;
}
.cb-score-badge--sm {
padding: 3px 8px;
font-size: 12px;
}
.cb-score-badge--md {
padding: 4px 10px;
font-size: 13px;
}
.cb-score-badge--lg {
padding: 6px 14px;
font-size: 18px;
}
.cb-score-badge--excellent { background: rgba(39,174,96,.12); color: var(--cb-score-excellent); }
.cb-score-badge--good      { background: rgba(230,126,34,.12); color: var(--cb-score-good); }
.cb-score-badge--average   { background: rgba(207,0,0,.12);  color: var(--cb-score-average); }
.cb-score-badge--low       { background: #f0f0f0; color: var(--cb-score-low); }
.cb-score-badge--neutral   { background: #f5f5f5; color: var(--cb-score-neutral); }
.cb-score-badge__label {
font-size: 0.85em;
font-weight: 500;
opacity: 0.8;
} .cb-trust-panel {
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.1);
border-radius: 12px;
padding: 20px;
margin-bottom: 20px;
}
.cb-trust-panel__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
}
.cb-trust-panel__title {
font-size: 16px;
font-weight: 600;
color: #fff;
margin: 0;
}
.cb-trust-panel__dimensions {
display: flex;
flex-direction: column;
gap: 12px;
}
.cb-trust-dim__header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 4px;
}
.cb-trust-dim__label {
font-size: 13px;
color: rgba(255,255,255,.7);
}
.cb-trust-dim__score {
font-size: 13px;
font-weight: 600;
}
.cb-trust-dim__score--excellent { color: var(--cb-score-excellent); }
.cb-trust-dim__score--good      { color: var(--cb-score-good); }
.cb-trust-dim__score--average   { color: var(--cb-score-average); }
.cb-trust-dim__score--needs_improvement { color: var(--cb-score-average); }
.cb-trust-dim__score--neutral   { color: var(--cb-score-neutral); }
.cb-trust-dim__bar {
height: 6px;
background: rgba(255,255,255,.1);
border-radius: 3px;
overflow: hidden;
margin-bottom: 4px;
}
.cb-trust-dim__fill {
height: 100%;
border-radius: 3px;
transition: width 0.6s ease;
}
.cb-trust-dim__fill--excellent { background: var(--cb-score-excellent); }
.cb-trust-dim__fill--good      { background: var(--cb-score-good); }
.cb-trust-dim__fill--average   { background: var(--cb-score-average); }
.cb-trust-dim__fill--needs_improvement { background: var(--cb-score-average); }
.cb-trust-dim__explanation {
font-size: 12px;
color: rgba(255,255,255,.5);
margin: 0;
line-height: 1.4;
} .cb-bookability {
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.1);
border-radius: 12px;
padding: 20px;
margin-bottom: 20px;
text-align: center;
}
.cb-bookability__header {
margin-bottom: 12px;
}
.cb-bookability__title {
font-size: 16px;
font-weight: 600;
color: #fff;
margin: 0;
}
.cb-bookability__ring-wrap {
position: relative;
width: 120px;
height: 120px;
margin: 0 auto 12px;
}
.cb-bookability__ring {
width: 100%;
height: 100%;
transform: rotate(-90deg);
}
.cb-bookability__ring-bg {
fill: none;
stroke: rgba(255,255,255,.1);
stroke-width: 8;
}
.cb-bookability__ring-fill {
fill: none;
stroke-width: 8;
stroke-linecap: round;
transition: stroke-dashoffset 0.8s ease;
}
.cb-bookability__ring-fill--excellent { stroke: var(--cb-score-excellent); }
.cb-bookability__ring-fill--good      { stroke: var(--cb-score-good); }
.cb-bookability__ring-fill--average   { stroke: var(--cb-score-average); }
.cb-bookability__ring-fill--needs_improvement { stroke: var(--cb-score-low); }
.cb-bookability__ring-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
}
.cb-bookability__score {
display: block;
font-size: 28px;
font-weight: 700;
color: #fff;
line-height: 1;
}
.cb-bookability__max {
font-size: 12px;
color: rgba(255,255,255,.5);
}
.cb-bookability__label {
font-size: 14px;
font-weight: 600;
margin-bottom: 12px;
}
.cb-bookability__label--excellent { color: var(--cb-score-excellent); }
.cb-bookability__label--good      { color: var(--cb-score-good); }
.cb-bookability__label--average   { color: var(--cb-score-average); }
.cb-bookability__label--needs_improvement { color: var(--cb-score-low); }
.cb-bookability__tips {
text-align: left;
border-top: 1px solid rgba(255,255,255,.1);
padding-top: 12px;
}
.cb-bookability__tips-title {
font-size: 13px;
font-weight: 600;
color: rgba(255,255,255,.7);
margin: 0 0 8px;
}
.cb-bookability__tips ul {
list-style: none;
padding: 0;
margin: 0;
}
.cb-bookability__tips li {
font-size: 12px;
color: rgba(255,255,255,.6);
padding: 4px 0 4px 16px;
position: relative;
line-height: 1.4;
}
.cb-bookability__tips li::before {
content: '\2192';
position: absolute;
left: 0;
color: var(--cb-score-good);
} .cb-freshness {
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.1);
border-radius: 12px;
padding: 16px 20px;
margin-bottom: 20px;
}
.cb-freshness__header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
}
.cb-freshness__icon {
color: rgba(255,255,255,.5);
display: flex;
}
.cb-freshness__label {
font-size: 14px;
font-weight: 600;
color: #fff;
flex: 1;
}
.cb-freshness__explanation {
font-size: 12px;
color: rgba(255,255,255,.5);
margin: 0;
line-height: 1.4;
} .cb-fit-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 10px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
cursor: default;
margin-top: 4px;
}
.cb-fit-badge--excellent { background: rgba(39,174,96,.15); color: var(--cb-score-excellent); }
.cb-fit-badge--good      { background: rgba(230,126,34,.15); color: var(--cb-score-good); }
.cb-fit-badge--average   { background: rgba(207,0,0,.15);  color: var(--cb-score-average); }
.cb-fit-badge--low       { background: #f0f0f0; color: var(--cb-score-low); }
.cb-fit-badge__icon {
display: flex;
opacity: 0.7;
}
.cb-fit-badge__label {
opacity: 0.8;
font-weight: 500;
} .cb-dashboard-scores {
background: #fff;
border: 1px solid #e5e5e5;
border-radius: 12px;
padding: 20px;
margin-top: 20px;
margin-bottom: 20px;
} .collabable-my-account .cb-dashboard-scores,
.collabable-my-account .cb-dashboard-scores h3,
.collabable-my-account .cb-dashboard-scores div,
.collabable-my-account .cb-dashboard-scores span,
.collabable-my-account .cb-dashboard-scores label,
.collabable-my-account .cb-dashboard-scores a,
.collabable-my-account .cb-dashboard-scores p,
.collabable-my-account .cb-dashboard-scores button,
.collabable-my-account .cb-dashboard-scores li {
color: #000;
}
.cb-dashboard-scores__title {
font-size: 16px;
font-weight: 600;
color: #000;
margin: 0 0 16px;
}
.cb-dashboard-scores__grid {
display: flex;
gap: 20px;
}
.cb-dashboard-scores__item {
flex: 1;
text-align: center;
padding: 12px;
background: #fafafa;
border-radius: 8px;
}
.cb-dashboard-scores__value {
font-size: 32px;
font-weight: 700;
line-height: 1;
margin-bottom: 4px;
}
.collabable-my-account .cb-dashboard-scores div.cb-dashboard-scores__value--excellent { color: var(--cb-score-excellent); }
.collabable-my-account .cb-dashboard-scores div.cb-dashboard-scores__value--good      { color: var(--cb-score-good); }
.collabable-my-account .cb-dashboard-scores div.cb-dashboard-scores__value--average   { color: var(--cb-score-average); }
.collabable-my-account .cb-dashboard-scores div.cb-dashboard-scores__value--low       { color: var(--cb-score-low); }
.collabable-my-account .cb-dashboard-scores div.cb-dashboard-scores__value--locked {
color: rgba(0,0,0,.25);
}
.collabable-my-account .cb-dashboard-scores__label {
color: #666;
}
.collabable-my-account .cb-dashboard-scores .cb-score-help-btn {
color: rgba(0,0,0,.4);
}
.cb-dashboard-scores__label {
font-size: 12px;
color: #666;
text-transform: uppercase;
letter-spacing: 0.5px;
} .cb-dashboard-scores__value-row {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
position: relative;
} .cb-dashboard-scores__item--locked {
opacity: 0.45;
}
.cb-dashboard-scores__value--locked {
font-size: 32px;
color: rgba(0,0,0,.25);
display: flex;
align-items: center;
justify-content: center;
}
.cb-dashboard-scores__lock {
opacity: 0.5;
} .cb-score-help-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 50%;
border: 1px solid rgba(0,0,0,.2);
background: rgba(0,0,0,.05);
color: rgba(0,0,0,.4);
font-size: 11px;
font-weight: 600;
cursor: pointer;
padding: 0;
line-height: 1;
flex-shrink: 0;
} .cb-score-popover {
display: none;
position: absolute;
width: 260px;
background: #333;
border: 1px solid rgba(255,255,255,.15);
border-radius: 10px;
padding: 16px;
z-index: 10000;
box-shadow: 0 12px 40px rgba(0,0,0,.4);
text-align: left;
opacity: 0;
transition: opacity 0.2s ease;
}
.cb-score-popover--visible {
display: block;
opacity: 1;
}
.cb-score-popover__arrow {
position: absolute;
top: -6px;
transform: translateX(-50%) rotate(45deg);
width: 10px;
height: 10px;
background: #333;
border-left: 1px solid rgba(255,255,255,.15);
border-top: 1px solid rgba(255,255,255,.15);
}
.cb-score-popover__title {
font-size: 13px;
font-weight: 700;
color: #fff;
margin: 0 0 6px;
}
.cb-score-popover__desc {
font-size: 12px;
color: rgba(255,255,255,.65);
line-height: 1.5;
margin: 0 0 10px;
}
.cb-score-popover__tips {
list-style: none;
padding: 0;
margin: 0 0 12px;
}
.cb-score-popover__tips li {
font-size: 12px;
color: rgba(255,255,255,.8);
padding: 5px 0 5px 18px;
position: relative;
line-height: 1.4;
border-bottom: 1px solid rgba(255,255,255,.06);
}
.cb-score-popover__tips li:last-child {
border-bottom: none;
}
.cb-score-popover__tips li::before {
content: '';
position: absolute;
left: 0;
top: 9px;
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(255,255,255,.2);
}
.cb-score-popover__cta {
display: inline-block;
font-size: 12px;
font-weight: 600;
color: #fff;
background: #CF0000;
padding: 6px 14px;
border-radius: 6px;
text-decoration: none;
} @media (max-width: 768px) {
.cb-dashboard-scores__grid {
flex-direction: column;
gap: 12px;
}
.cb-dashboard-scores__value {
font-size: 24px;
}
.cb-dashboard-scores__value--locked {
font-size: 24px;
}
.cb-score-popover {
width: 230px;
}
} .cb-cred-badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 10px;
border-radius: 20px;
font-size: 11px;
font-weight: 600;
line-height: 1;
white-space: nowrap;
letter-spacing: 0.3px;
margin-top: 6px;
}
.cb-cred-badge--responsive {
background: #f0f0f0;
color: #666;
}
.cb-cred-badge--verified_collaborator {
background: rgba(39, 174, 96, 0.15);
color: #27ae60;
}
.cb-cred-badge--top_rated {
background: rgba(230, 126, 34, 0.15);
color: #e67e22;
}
.cb-cred-badge__text {
text-transform: uppercase;
} .collab-grid-card .cb-cred-badge,
.collabable-profile-card .cb-cred-badge {
margin-top: 8px;
} .cb-cred-section {
margin: 20px 0 24px;
padding: 20px;
background: #f5f5f5;
border: 1px solid #e5e5e5;
border-radius: 12px;
}
.cb-cred-section__title {
font-size: 16px;
font-weight: 600;
margin: 0 0 12px;
color: #111;
letter-spacing: 0.3px;
}
.cb-cred-section__badge-row {
margin-bottom: 16px;
}
.cb-cred-section__badge-row .cb-cred-badge {
margin-top: 0;
padding: 5px 14px;
font-size: 12px;
}
.cb-cred-section__columns {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
} .cb-cred-col {
padding: 14px;
border-radius: 8px;
border: 1px solid #e5e5e5;
}
.cb-cred-col--declared {
background: #fafafa;
border-color: #e0e0e0;
}
.cb-cred-col--observed {
background: #f5f5f5;
border-color: #e0e0e0;
}
.cb-cred-col--verified {
background: rgba(39, 174, 96, 0.08);
border-color: rgba(39, 174, 96, 0.15);
} .cb-cred-col__header {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 10px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.cb-cred-col--declared .cb-cred-col__header {
color: #999;
}
.cb-cred-col--observed .cb-cred-col__header {
color: #666;
}
.cb-cred-col--verified .cb-cred-col__header {
color: #27ae60;
} .cb-cred-col__list {
list-style: none;
margin: 0;
padding: 0;
}
.cb-cred-col__list li {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 4px 0;
font-size: 13px;
line-height: 1.4;
color: #333;
}
.cb-cred-col__list li + li {
border-top: 1px solid #f0f0f0;
}
.cb-cred-col__label {
color: #666;
font-size: 12px;
}
.cb-cred-col__value {
font-weight: 500;
text-align: right;
}
.cb-cred-col--verified .cb-cred-col__value {
color: #27ae60;
} @media (max-width: 768px) {
.cb-cred-section__columns {
grid-template-columns: 1fr;
gap: 10px;
}
.cb-cred-section {
padding: 14px;
}
}.rvw-stars {
display: inline-flex;
align-items: center;
gap: 1px;
line-height: 1;
}
.rvw-star {
display: inline-block;
vertical-align: middle;
} .rvw-section__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 24px;
flex-wrap: wrap;
}
.rvw-section__summary {
display: flex;
align-items: center;
gap: 10px;
}
.rvw-section__avg {
font-size: 48px;
font-weight: 700;
line-height: 1;
color: #fff;
letter-spacing: -1px;
}
.rvw-section__count {
font-size: 14px;
color: rgba(255,255,255,0.5);
}
.rvw-section__no-rating {
font-size: 14px;
color: rgba(255,255,255,0.5);
}
.rvw-section__write-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 24px;
background: #CF0000;
color: #fff;
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
}
.rvw-section__write-btn:hover {
background: #A60000;
} .rvw-section__distribution {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 32px;
max-width: 400px;
}
.rvw-distribution__row {
display: flex;
align-items: center;
gap: 8px;
}
.rvw-distribution__label {
font-size: 13px;
font-weight: 600;
color: rgba(255,255,255,0.7);
width: 12px;
text-align: right;
flex-shrink: 0;
}
.rvw-distribution__star {
flex-shrink: 0;
}
.rvw-distribution__bar {
flex: 1;
height: 8px;
background: rgba(255,255,255,0.1);
border-radius: 4px;
overflow: hidden;
}
.rvw-distribution__fill {
height: 100%;
background: #CF0000;
border-radius: 4px;
transition: width 0.4s ease;
}
.rvw-distribution__count {
font-size: 13px;
color: rgba(255,255,255,0.5);
width: 28px;
text-align: right;
flex-shrink: 0;
} .rvw-section__sort,
.rvw-all-modal__sort {
display: flex;
align-items: center;
gap: 24px;
margin-bottom: 24px;
}
.rvw-sort__tab {
background: none;
border: none;
cursor: pointer;
font-size: 14px;
font-weight: 500;
color: rgba(255,255,255,0.5);
padding: 0 0 6px 0;
border-bottom: 2px solid transparent;
transition: color 0.2s, border-color 0.2s;
}
.rvw-sort__tab:hover {
color: rgba(255,255,255,0.8);
}
.rvw-sort__tab.is-active {
color: #fff;
border-bottom-color: #CF0000;
} .rvw-section__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 48px;
}
.rvw-grid__item {
border-bottom: 1px solid rgba(255,255,255,0.08);
padding-bottom: 24px;
margin-bottom: 24px;
}
.rvw-grid__item:last-child {
border-bottom: none;
margin-bottom: 0;
} .rvw-section__show-all {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 8px;
padding: 12px 24px;
background: transparent;
color: #fff;
border: 1px solid rgba(255,255,255,0.3);
border-radius: 8px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: background 0.2s, border-color 0.2s;
}
.rvw-section__show-all:hover {
background: rgba(255,255,255,0.05);
border-color: rgba(255,255,255,0.5);
} .rvw-card {
display: flex;
flex-direction: column;
gap: 10px;
}
.rvw-card__header {
display: flex;
align-items: center;
gap: 12px;
} .rvw-card__avatar {
width: 40px;
height: 40px;
border-radius: 50%;
flex-shrink: 0;
object-fit: cover;
}
.rvw-card__avatar--initials {
display: inline-flex;
align-items: center;
justify-content: center;
background: #333;
color: #fff;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.5px;
}
.rvw-card__author {
flex: 1;
min-width: 0;
}
.rvw-card__name {
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 600;
font-size: 14px;
color: #fff;
}
.rvw-card__date {
font-size: 13px;
color: rgba(255,255,255,0.4);
margin-left: auto;
flex-shrink: 0;
} .rvw-card__verified,
.rvw-card__google-badge {
display: inline-flex;
align-items: center;
flex-shrink: 0;
} .rvw-card__rating {
display: flex;
align-items: center;
gap: 6px;
} .rvw-card__text {
font-size: 14px;
line-height: 1.6;
color: rgba(255,255,255,0.8);
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
.rvw-card__text.is-expanded {
display: block;
-webkit-line-clamp: unset;
}
.rvw-card__read-more {
background: none;
border: none;
cursor: pointer;
font-size: 14px;
font-weight: 600;
color: #fff;
padding: 0;
text-decoration: underline;
text-underline-offset: 2px;
}
.rvw-card__read-more:hover {
color: rgba(255,255,255,0.7);
} .rvw-card__response {
border-left: 3px solid #333;
padding-left: 16px;
margin-top: 4px;
}
.rvw-card__response-header {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 6px;
font-size: 13px;
color: rgba(255,255,255,0.5);
}
.rvw-card__response-header strong {
font-weight: 600;
color: rgba(255,255,255,0.7);
}
.rvw-card__response-date {
color: rgba(255,255,255,0.4);
margin-left: auto;
}
.rvw-card__response-text {
font-size: 13px;
line-height: 1.6;
color: rgba(255,255,255,0.6);
} .rvw-card__actions {
display: flex;
align-items: center;
gap: 16px;
margin-top: 4px;
}
.rvw-card__helpful-btn,
.rvw-card__flag-btn,
.rvw-card__respond-btn {
display: inline-flex;
align-items: center;
gap: 5px;
background: none;
border: none;
cursor: pointer;
font-size: 13px;
color: rgba(255,255,255,0.4);
padding: 4px 0;
transition: color 0.2s;
}
.rvw-card__helpful-btn:hover,
.rvw-card__flag-btn:hover {
color: rgba(255,255,255,0.7);
}
.rvw-card__helpful-btn.is-voted {
color: #CF0000;
}
.rvw-card__respond-btn {
color: #CF0000;
font-weight: 500;
}
.rvw-card__respond-btn:hover {
color: #A60000;
}
.rvw-card__flag-btn {
margin-left: auto;
opacity: 0;
transition: opacity 0.2s, color 0.2s;
}
.rvw-card:hover .rvw-card__flag-btn,
.rvw-grid__item:hover .rvw-card__flag-btn {
opacity: 1;
} .rvw-card__sub-ratings {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px 16px;
}
.rvw-card__sub-rating {
display: flex;
align-items: center;
justify-content: space-between;
gap: 4px;
}
.rvw-card__sub-label {
font-size: 12px;
color: rgba(255,255,255,0.5);
} .rvw-card__respond-form {
margin-top: 8px;
}
.rvw-card__respond-textarea {
width: 100%;
padding: 10px;
border: 1px solid rgba(255,255,255,0.2);
border-radius: 8px;
font-size: 13px;
resize: vertical;
min-height: 60px;
font-family: inherit;
color: #fff;
background: rgba(255,255,255,0.05);
}
.rvw-card__respond-textarea:focus {
outline: none;
border-color: rgba(255,255,255,0.4);
}
.rvw-card__respond-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
margin-top: 8px;
}
.rvw-card__respond-cancel {
background: none;
border: 1px solid rgba(255,255,255,0.2);
padding: 6px 14px;
border-radius: 6px;
font-size: 12px;
cursor: pointer;
color: rgba(255,255,255,0.6);
}
.rvw-card__respond-cancel:hover {
border-color: rgba(255,255,255,0.4);
color: #fff;
}
.rvw-card__respond-submit {
background: #CF0000;
color: #fff;
border: none;
padding: 6px 14px;
border-radius: 6px;
font-size: 12px;
cursor: pointer;
font-weight: 500;
transition: background 0.2s;
}
.rvw-card__respond-submit:hover {
background: #A60000;
} .rvw-section__empty {
text-align: center;
padding: 48px 20px;
color: rgba(255,255,255,0.4);
}
.rvw-section__empty svg {
margin-bottom: 12px;
}
.rvw-section__empty p {
margin: 0;
font-size: 14px;
} .rvw-badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 13px;
line-height: 1;
}
.rvw-badge__avg {
font-weight: 600;
color: inherit;
}
.rvw-badge__count {
color: inherit;
opacity: 0.6;
font-size: 12px;
} .rvw-all-modal {
position: fixed;
inset: 0;
z-index: 100000;
display: flex;
align-items: center;
justify-content: center;
}
.rvw-all-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.7);
}
.rvw-all-modal__content {
position: relative;
background: #1a1a1a;
border-radius: 16px;
padding: 32px;
max-width: 800px;
width: 90%;
max-height: 85vh;
overflow-y: auto;
box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
}
.rvw-all-modal__content::-webkit-scrollbar {
width: 6px;
}
.rvw-all-modal__content::-webkit-scrollbar-track {
background: transparent;
}
.rvw-all-modal__content::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.15);
border-radius: 3px;
}
.rvw-all-modal__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 24px;
}
.rvw-all-modal__title {
display: flex;
align-items: center;
gap: 8px;
font-size: 22px;
font-weight: 600;
color: #fff;
margin: 0;
}
.rvw-all-modal__close {
background: none;
border: none;
cursor: pointer;
padding: 8px;
color: rgba(255,255,255,0.5);
border-radius: 50%;
transition: background 0.2s, color 0.2s;
flex-shrink: 0;
}
.rvw-all-modal__close:hover {
background: rgba(255,255,255,0.1);
color: #fff;
}
.rvw-all-modal__sort {
margin-bottom: 24px;
border-bottom: 1px solid rgba(255,255,255,0.08);
padding-bottom: 16px;
}
.rvw-all-modal__list {
display: flex;
flex-direction: column;
}
.rvw-all-modal__list .rvw-grid__item {
border-bottom: 1px solid rgba(255,255,255,0.08);
padding-bottom: 24px;
margin-bottom: 24px;
}
.rvw-all-modal__list .rvw-grid__item:last-child {
border-bottom: none;
margin-bottom: 0;
} .rvw-modal {
position: fixed;
inset: 0;
z-index: 100001;
display: flex;
align-items: center;
justify-content: center;
}
.rvw-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.7);
}
.rvw-modal__content {
position: relative;
background: #1a1a1a;
border-radius: 16px;
padding: 32px;
max-width: 520px;
width: 90%;
max-height: 90vh;
overflow-y: auto;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
.rvw-modal__close {
position: absolute;
top: 16px;
right: 16px;
background: none;
border: none;
cursor: pointer;
padding: 4px;
color: rgba(255,255,255,0.5);
border-radius: 50%;
transition: background 0.2s, color 0.2s;
}
.rvw-modal__close:hover {
background: rgba(255,255,255,0.1);
color: #fff;
}
.rvw-modal__title {
font-size: 20px;
font-weight: 600;
margin: 0 0 24px;
color: #fff;
}
.rvw-modal__field {
margin-bottom: 20px;
}
.rvw-modal__label {
display: block;
font-size: 14px;
font-weight: 600;
margin-bottom: 8px;
color: #fff;
}
.rvw-modal__label .required {
color: #CF0000;
}
.rvw-modal__label .optional {
font-weight: 400;
font-size: 12px;
color: rgba(255,255,255,0.4);
} .rvw-modal__star-input {
display: flex;
align-items: center;
gap: 4px;
}
.rvw-modal__star {
background: none;
border: none;
cursor: pointer;
padding: 2px;
transition: transform 0.15s;
}
.rvw-modal__star:hover {
transform: scale(1.15);
}
.rvw-modal__star svg {
transition: fill 0.15s;
}
.rvw-modal__star.is-active svg,
.rvw-modal__star.is-hover svg {
fill: #f5a623;
}
.rvw-modal__rating-label {
margin-left: 8px;
font-size: 14px;
color: rgba(255,255,255,0.5);
font-weight: 500;
} .rvw-modal__sub-ratings {
margin-bottom: 20px;
padding: 16px;
background: rgba(255,255,255,0.05);
border-radius: 10px;
}
.rvw-modal__sub-field {
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 0;
}
.rvw-modal__sub-label {
font-size: 13px;
color: rgba(255,255,255,0.6);
}
.rvw-modal__star-input--small .rvw-modal__star {
padding: 1px;
} .rvw-modal__textarea {
width: 100%;
padding: 12px;
border: 1px solid rgba(255,255,255,0.2);
border-radius: 10px;
font-size: 14px;
font-family: inherit;
resize: vertical;
min-height: 100px;
transition: border-color 0.2s;
color: #fff;
background: rgba(255,255,255,0.05);
}
.rvw-modal__textarea:focus {
outline: none;
border-color: rgba(255,255,255,0.4);
}
.rvw-modal__char-count {
display: flex;
align-items: center;
gap: 4px;
font-size: 12px;
color: rgba(255,255,255,0.4);
margin-top: 6px;
}
.rvw-modal__chars-current.is-over {
color: #CF0000;
font-weight: 600;
} .rvw-modal__actions {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 24px;
}
.rvw-modal__cancel {
background: none;
border: 1px solid rgba(255,255,255,0.2);
padding: 10px 20px;
border-radius: 8px;
font-size: 14px;
cursor: pointer;
color: rgba(255,255,255,0.6);
transition: border-color 0.2s, color 0.2s;
}
.rvw-modal__cancel:hover {
border-color: rgba(255,255,255,0.4);
color: #fff;
}
.rvw-modal__submit {
background: #CF0000;
color: #fff;
border: none;
padding: 10px 24px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
}
.rvw-modal__submit:hover {
background: #A60000;
}
.rvw-modal__submit:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.rvw-modal__submit-loading {
display: inline-flex;
align-items: center;
gap: 6px;
}
@keyframes rvw-spin {
to { transform: rotate(360deg); }
}
.rvw-spinner {
animation: rvw-spin 1s linear infinite;
} .rvw-modal__message {
margin-top: 16px;
padding: 12px;
border-radius: 8px;
font-size: 13px;
text-align: center;
}
.rvw-modal__message--success {
background: rgba(39,174,96,0.15);
color: #27ae60;
}
.rvw-modal__message--error {
background: rgba(207,0,0,0.15);
color: #CF0000;
} .rvw-flag-dialog {
position: fixed;
inset: 0;
z-index: 100002;
display: flex;
align-items: center;
justify-content: center;
}
.rvw-flag-dialog__backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.6);
}
.rvw-flag-dialog__content {
position: relative;
background: #1a1a1a;
border-radius: 12px;
padding: 24px;
max-width: 400px;
width: 90%;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}
.rvw-flag-dialog__title {
font-size: 16px;
font-weight: 600;
margin: 0 0 12px;
color: #fff;
}
.rvw-flag-dialog select {
width: 100%;
padding: 8px 12px;
border: 1px solid rgba(255,255,255,0.2);
border-radius: 6px;
font-size: 13px;
margin-bottom: 12px;
color: #fff;
background: rgba(255,255,255,0.05);
}
.rvw-flag-dialog__actions {
display: flex;
justify-content: flex-end;
gap: 8px;
}
.rvw-flag-dialog__cancel {
background: none;
border: 1px solid rgba(255,255,255,0.2);
padding: 8px 16px;
border-radius: 6px;
font-size: 13px;
cursor: pointer;
color: rgba(255,255,255,0.6);
}
.rvw-flag-dialog__submit {
background: #CF0000;
color: #fff;
border: none;
padding: 8px 16px;
border-radius: 6px;
font-size: 13px;
cursor: pointer;
font-weight: 500;
} .rvw-my-reviews__carousel {
display: flex;
gap: 16px;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
padding-bottom: 8px;
}
.rvw-my-card {
flex: 0 0 auto;
width: 280px;
background: #fff;
border: 1px solid #e8e8e8;
border-radius: 10px;
padding: 16px;
scroll-snap-align: start;
}
.rvw-my-card__studio {
font-size: 14px;
font-weight: 600;
color: #111;
margin-bottom: 6px;
}
.rvw-my-card__status {
display: inline-block;
font-size: 11px;
padding: 2px 8px;
border-radius: 4px;
font-weight: 500;
margin-bottom: 8px;
}
.rvw-my-card__status--published {
background: #e8f4ea;
color: #27ae60;
}
.rvw-my-card__status--hidden_blind {
background: #fef3c7;
color: #e67e22;
}
.rvw-my-card__status--pending {
background: #f0f0f0;
color: #666;
}
.rvw-my-card__text {
font-size: 13px;
color: #444;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.rvw-my-card__date {
font-size: 11px;
color: #888;
margin-top: 8px;
} .rvw-pending-card {
flex: 0 0 auto;
width: 280px;
background: #fff;
border: 1px solid #e8e8e8;
border-radius: 10px;
padding: 16px;
scroll-snap-align: start;
text-align: center;
}
.rvw-pending-card__studio {
font-size: 14px;
font-weight: 600;
color: #111;
margin-bottom: 4px;
}
.rvw-pending-card__date {
font-size: 12px;
color: #888;
margin-bottom: 12px;
}
.rvw-pending-card__cta {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
background: #CF0000;
color: #fff;
border-radius: 6px;
font-size: 13px;
text-decoration: none;
font-weight: 500;
} @media (max-width: 768px) {
.rvw-section__header {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.rvw-section__avg {
font-size: 36px;
}
.rvw-section__grid {
grid-template-columns: 1fr;
gap: 0;
}
.rvw-section__distribution {
max-width: 100%;
}
.rvw-section__write-btn {
width: 100%;
justify-content: center;
}
.rvw-section__sort,
.rvw-all-modal__sort {
gap: 12px;
flex-wrap: wrap;
}
.rvw-sort__tab {
font-size: 13px;
} .rvw-card__flag-btn {
opacity: 1;
}
.rvw-section__show-all {
width: 100%;
justify-content: center;
}
.rvw-all-modal__content {
width: 95%;
padding: 24px 16px;
max-height: 90vh;
}
.rvw-all-modal__title {
font-size: 18px;
}
.rvw-card__sub-ratings {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.rvw-section__avg {
font-size: 32px;
}
.rvw-modal__content {
width: 95%;
padding: 20px;
border-radius: 12px;
max-height: 95vh;
}
.rvw-modal__star-input .rvw-modal__star svg {
width: 28px;
height: 28px;
}
.rvw-section__sort,
.rvw-all-modal__sort {
gap: 12px;
flex-wrap: wrap;
}
.rvw-all-modal__content {
padding: 20px 12px;
border-radius: 12px;
}
}.ta-sticky-header {
position: sticky;
top: 0;
z-index: 9999;
} .turbo-header-template.ta-header-scroll-animation {
position: sticky;
top: 0;
z-index: 9999; } .ta-header-hide {
transform: translateY(-100%);
opacity: 0;
} .ta-header-show {
transform: translateY(0);
opacity: 1;
}
.ta-header-scroll-animation {
transition: transform 0.3s ease;
}
.ta-header-hidden {
transform: translateY(-100%);
opacity: 0;
}  .ta-sticky-header,
.turbo-header-template.ta-header-scroll-animation {
top: var(--ta-sticky-top, 0);
} #tahefobu-header.ta-sticky-active,
.turbo-header-template.ta-sticky-active {
position: fixed;
top: var(--ta-sticky-top, 0);
left: 0;
right: 0;
width: 100%;
z-index: 99999; } .ta-header-spacer {
display: none;
width: 100%;
} #tahefobu-header.ta-scroll-down,
.turbo-header-template.ta-scroll-down,
.ta-header-hidden, .ta-header-hide { transform: translateY(-100%);
opacity: 0;
}
#tahefobu-header.ta-scroll-up,
.turbo-header-template.ta-scroll-up,
.ta-header-show { transform: translateY(0);
opacity: 1;
} #tahefobu-header,
.turbo-header-template.ta-header-scroll-animation {
transition: transform .25s ease, opacity .25s ease;
will-change: transform;
}