.casinolist-shortcode2 .review-container {
display: inline-flex;
flex-direction: column;
row-gap: 60px;
justify-content: center;
width: 100%;
margin-top: 20px;
}
.casinolist-shortcode2 .review-container .review-item {
background-color: white;
border-radius: 10px;
position: relative;
}
.casinolist-shortcode2 .review-container .review-item .review-item-wrapper {
display: flex;
flex-direction: row;
gap: 10px;
padding: 20px;
flex-wrap: wrap;
}
.casinolist-shortcode2 .row-image img {
width: auto;
max-height: 120px;
border-radius: 5px;
} .casinolist-shortcode2 .row-ratings .circle {
width: 70px;
height: 70px;
position: relative;
font-size: 1.6rem;
line-height: 70px;
font-weight: 700;
display: inline-block;
vertical-align: middle;
}
.casinolist-shortcode2 .row-ratings .circle.large {
width: 70px;
height: 70px;
font-size: 1.6rem;
line-height: 70px;
}
.casinolist-shortcode2 .row-ratings .circle.large img {
object-fit: cover;
padding: 7px;
border-radius: 50%;
width: 100%;
height: 100%;
}
.casinolist-shortcode2 .row-ratings .circle.multiple {
width: 100px;
height: 100px;
font-size: 1.6rem;
line-height: 60px;
}
.casinolist-shortcode2 .row-ratings .circle.multiple .base,
.casinolist-shortcode2 .row-ratings .circle.multiple .arc {
stroke: #60da2a;
stroke-width: 9;
}
.casinolist-shortcode2 .row-ratings .circle .gauge {
stroke-linecap: butt;
z-index: 3;
height: 100%;
width: 100%;
}
.casinolist-shortcode2 .row-ratings .circle .arc {
fill: none;
}
.casinolist-shortcode2 .row-ratings .circle .base {
opacity: 0.3 !important;
}
.casinolist-shortcode2 .row-ratings .circle .base,
.casinolist-shortcode2 .row-ratings .circle .arc {
stroke: #60da2a;
stroke-width: 12;
}
.casinolist-shortcode2 .row-ratings .circle span,
.casinolist-shortcode2 .row-ratings .circle svg,
.casinolist-shortcode2 .row-ratings .circle img,
.casinolist-shortcode2 .row-ratings .circle i,
.casinolist-shortcode2 .row-ratings .circle .circle-inner,
.casinolist-shortcode2 .row-ratings .circle [class^='circle'],
.casinolist-shortcode2 .row-ratings .circle .circle-inner-second {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.casinolist-shortcode2 .row-ratings .circle.circle-inner {
width: 76px;
height: 76px;
}
.casinolist-shortcode2 .row-ratings .circle.circle-inner .base,
.casinolist-shortcode2 .row-ratings .circle.circle-inner .arc {
stroke: #155b98;
stroke-width: 11;
}
.casinolist-shortcode2 .row-ratings .circle.circle-inner-second {
width: 54px;
height: 54px;
}
.casinolist-shortcode2 .row-ratings .circle.circle-inner-second .base,
.casinolist-shortcode2 .row-ratings .circle.circle-inner-second .arc {
stroke: #f00;
stroke-width: 15;
}
.casinolist-shortcode2 .row-ratings .circle.circle-lg {
width: 100px;
height: 100px;
}
.casinolist-shortcode2 .row-ratings .circle.circle-lg .base,
.casinolist-shortcode2 .row-ratings .circle.circle-lg .arc {
stroke-width: 9;
}
.casinolist-shortcode2 .row-ratings .circle.circle-md {
width: 76px;
height: 76px;
}
.casinolist-shortcode2 .row-ratings .circle.circle-md .base,
.casinolist-shortcode2 .row-ratings .circle.circle-md .arc {
stroke-width: 11;
}
.casinolist-shortcode2 .row-ratings .circle.circle-sm {
width: 54px;
height: 54px;
}
.casinolist-shortcode2 .row-ratings .circle.circle-sm .base,
.casinolist-shortcode2 .row-ratings .circle.circle-sm .arc {
stroke-width: 15;
}
.casinolist-shortcode2 .row-ratings .circle.circle-tertiary .base,
.casinolist-shortcode2 .row-ratings .circle.circle-tertiary .arc {
stroke: #f00;
}
.casinolist-shortcode2 .row-ratings .circle.circle-secondary .base,
.casinolist-shortcode2 .row-ratings .circle.circle-secondary .arc {
stroke: #155b98;
}
.casinolist-shortcode2 .row-ratings .circle.circle-primary .base,
.casinolist-shortcode2 .row-ratings .circle.circle-primary .arc {
stroke: #60da2a;
}
.casinolist-shortcode2 .review-item-average-score .custom-label {
font-size: 18px;
font-weight: 800;
} .casinolist-shortcode2 .custom-tooltip .tooltiptext {
visibility: hidden;
width: 220px;
background-color: #ffffff;
border: 1px solid #eeeeee;
text-align: center;
padding: 5px 0;
border-radius: 6px; position: absolute;
z-index: 1;
bottom: -90px;
margin-left: -60px; opacity: 0;
transition: opacity 0.3s;
padding: 10px;
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
display: flex;
flex-direction: column;
align-items: flex-start;
}
.casinolist-shortcode2 .custom-tooltip .tooltiptext::before {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -6px; border-width: 6px; border-style: solid;
border-color: transparent transparent rgba(0, 0, 0, 0.085) transparent; }
.casinolist-shortcode2 .custom-tooltip .tooltiptext::after {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent white transparent;
} .casinolist-shortcode2 .custom-tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
.casinolist-shortcode2 .tooltiptext p {
font-size: 14px;
margin: 0px;
line-height: 1.5;
text-align: left;
}
.casinolist-shortcode2 .tooltiptext p:first-child {
color: #30860a;
}
.casinolist-shortcode2 .tooltiptext p:nth-child(2) {
color: #155b98;
}
.casinolist-shortcode2 .tooltiptext p:last-child {
color: #ff0000;
}
.casinolist-shortcode2 .review-item-column.column-1 {
display: flex;
flex-direction: column;
align-items: center;
row-gap: 10px;
position: relative;
}
.casinolist-shortcode2 .row-ratings {
margin-top: -60px;
background-color: white;
padding: 10px;
border-radius: 100%;
}
.casinolist-shortcode2 .row-review-button a {
background-color: #ff9900;
border: 1px solid #ed8e00;
text-align: center;
padding: 10px 30px;
color: #3c3b3b;
text-decoration: none;
border-radius: 5px;
}
.casinolist-shortcode2 .row-review-button a:hover {
background-color: #ed8e00;
border: 1px solid #ff9900;
}
.casinolist-shortcode2 .row-title h3 {
margin-top: 0px;
margin-bottom: 10px;
}
.casinolist-shortcode2 .review-item-column.column-2 {
display: flex;
flex-direction: column;
row-gap: 10px;
align-items: center;
background-color: #F0F5F7;
padding: 20px;
border-radius: 5px;
justify-content: center;
text-align: center;
}
.casinolist-shortcode2 .row-highlight-1 {
display: flex;
flex-direction: column;
align-items: center;
font-size: 18px;
}
.casinolist-shortcode2 .row-highlight-1 .value {
color: #E00000;
font-weight: 600;
}
.casinolist-shortcode2 .row-highlight-2 {
font-size: 20px;
color: #3876C7;
font-weight: 700;
}
.casinolist-shortcode2 .review-item-column {
flex: 1 1 calc(25% - 10px);
box-sizing: border-box;
}
.casinolist-shortcode2 .review-item-column.column-2 p {
margin: 0px;
}
.casinolist-shortcode2 .review-item-column.column-2 .line,
.casinolist-shortcode2 .review-item-column.column-3 .line {
height: 1px;
border-top: 1px solid #d8d5d5;
width: 100%;
}
.casinolist-shortcode2 .review-item-column.column-3 ul li::marker,
.casinolist-shortcode2 .additional-info-container .additional-info ul li::marker {
content: '' !important;
display: none;
}
.casinolist-shortcode2 .review-item-column.column-3 ul li:before {
margin-right: 1rem;
display: flex;
height: 1rem;
width: 1rem;
flex-shrink: 0;
align-items: center;
justify-content: center;
border-radius: 9999px;
padding: 0;
line-height: 0rem !important;
}
.casinolist-shortcode2 .review-item-column.column-3 .pros-list li:before {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 32 32'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0H64V64H0z'/%3E%3Cpath fill='white' fill-rule='nonzero' d='M13.333 20.229L25.589 7.972 27.469 9.852 13.32 23.987 4.827 15.493 6.707 13.6z'/%3E%3C/g%3E%3C/svg%3E") !important;
background-color: rgba(92,184,92, 1);
box-shadow: 0 0 0 0px #fff, 0 0 0 calc(4px + 0px) rgba(92,184,92, 0.3), 0 0 #0000;
}
.casinolist-shortcode2 .review-item-column.column-3 .cons-list li:before {
content: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 32 32'><g fill='none' fillRule='evenodd'><path d='M0 0H64V64H0z'/><path fill='white' fillRule='nonzero' d='M16 14.115L22.6 7.515 24.48 9.395 17.88 15.995 24.48 22.595 22.587 24.475 15.987 17.875 9.387 24.475 7.493 22.581 14.093 15.981 7.493 9.381 9.373 7.488z'/></g></svg>") !important;
background-color: rgba(255,0,0, 1);
box-shadow: 0 0 0 0px #fff, 0 0 0 calc(4px + 0px) rgba(255,0,0, 0.3), 0 0 #0000;
}
.casinolist-shortcode2 .review-item-column.column-3 ul li {
display: flex;
align-items: center;
}
.casinolist-shortcode2 .review-item-column.column-3 {
display: flex;
flex-direction: column;
row-gap: 20px;
justify-content: center;
background-color: #F0F5F7;
padding: 20px;
border-radius: 5px;
}
.casinolist-shortcode2 .review-item-column.column-3 ul li {
margin: 0px !important;
}
.casinolist-shortcode2 .review-item-column.column-3 ul,
.casinolist-shortcode2 .additional-info-container .additional-info ul {
display: flex;
flex-direction: column;
row-gap: 10px;
padding-left: 10px;
}
.casinolist-shortcode2 .row-payment {
display: flex;
justify-content: center;
gap: 10px;
flex-wrap: wrap;
padding: 5px;
}
.casinolist-shortcode2 .row-payment .payment-icons {
display: flex;
gap: 10px;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.casinolist-shortcode2 .row-payment img {
background-color: #efefef;
padding: 5px;
height: 33px;
min-width: 60px;
border-radius: 3px;
box-shadow: rgba(0, 0, 0, 0.16) 0 1px 4px;
box-sizing: unset;
max-height: 33px;
max-width: 60px !important;
object-fit: contain;
}
.casinolist-shortcode2 .review-item-column.column-4 {
display: flex;
flex-direction: column;
row-gap: 30px;
align-items: center;
}
.casinolist-shortcode2 .row-affiliate {
width: 100%;
}
.casinolist-shortcode2 .row-affiliate a {
color: white;
background-color: #208620;
border-color: #208620;
padding: 10px;
width: 100%;
border-radius: 5px;
text-decoration: none;
font-size: 20px;
font-weight: 600;
justify-content: center;
display: flex;
}
.casinolist-shortcode2 .row-affiliate a:hover {
background-color: #449d44;
border-color: #449d44;
color: white !important;
}
.casinolist-shortcode2 .collapsible-trigger {
margin: auto;
display: flex;
border: 0px;
background-color: transparent;
cursor: pointer;
color: #208620;
align-items: center;
font-weight: 600;
justify-content: space-between;
column-gap: 5px;
padding: 0px;
height: 40px;
}
.casinolist-shortcode2 .collapsible-trigger .hidden {
display: none;
}
.casinolist-shortcode2 .collapsible-trigger .arrow-icon {
display: inline-block;
transition: transform 300ms;
}
.casinolist-shortcode2 .collapsible-content {
width: 100%;
border-radius: 12px;
max-height: 0;
overflow: hidden;
padding: 0px 20px;
transition: max-height 0.8s ease-out;
}
.casinolist-shortcode2 .collapsible-content.active {
max-height: 2000px;
padding: 5px 20px;
}
.casinolist-shortcode2 .review-item-additional-info {
display: flex;
width: 100%;
background-color: white;
padding: 5px 0px;
align-items: center;
flex-direction: column;
border-radius: 0px 0px 10px 10px;
}
.casinolist-shortcode2 .row-review-button {
display: flex;
}
.casinolist-shortcode2 .additional-info-container {
display: flex;
gap: 20px;
justify-content: space-around;
}
.casinolist-shortcode2 .additional-info {
background-color: #F0F5F7;
padding: 20px;
border-radius: 5px;
flex: 1 1 calc(50% - 10px);
}
.casinolist-shortcode2 .additional-info-bottom {
display: flex;
padding: 20px 0px;
gap: 20px;
max-width: 500px;
align-items: center;
margin: auto;
}
.casinolist-shortcode2 .additional-info-bottom a {
width: 300px !important;
flex: 1 1 calc(50% - 10px);
}
.casinolist-shortcode2 .additional-info-bottom a:last-child {
color: white;
background-color: #208620;
border-color: #208620;
padding: 10px;
border-radius: 5px;
text-decoration: none;
font-size: 20px;
font-weight: 600;
justify-content: center;
display: flex;
}
.casinolist-shortcode2 .additional-info-bottom a:last-child:hover {
background-color: #449d44;
border-color: #449d44;
color: white !important;
}
.casinolist-shortcode2 .additional-info-bottom a:first-child {
background-color: #ff9900;
border: 1px solid #ed8e00;
text-align: center;
padding: 10px 30px;
color: #3c3b3b;
text-decoration: none;
border-radius: 5px;
font-size: 20px;
font-weight: 600;
}
.casinolist-shortcode2 .additional-info-bottom a:first-child:hover {
background-color: #ed8e00;
border: 1px solid #ff9900;
}
.casinolist-shortcode2 .additional-info-container .additional-info ul li {
justify-content: space-between;
display: flex;
}
.casinolist-shortcode2 .additional-info-container .additional-info ul li span:last-child {
font-weight: 600;
}
.casinolist-shortcode2 .casino-loader {
border: 5px solid #f3f3f3;
border-top: 5px solid #208620;
border-radius: 50%;
width: 30px;
height: 30px;
animation: spin 2s linear infinite;
margin: 20px auto;
display: none;
}
.casinolist-shortcode2 span#load-more {
padding: 10px 30px;
background-color: #208620;
color: #fff;
border-radius: 5px;
}
.casinolist-shortcode2 span#load-more:hover {
background: #449d44;
}
.casinolist-shortcode2 a#table-load-more::after {
display: none;
}
.casinolist-shortcode2 a#table-load-more:hover {
-webkit-transform: none;
transform: none;
}
.casinolist-shortcode2 a#table-load-more {
display: flex;
justify-content: center;
margin: 20px;
text-transform: uppercase;
font-size: 18px;
}
.casinolist-shortcode2 .casino-loader {
border: 5px solid #f3f3f3;
border-top: 5px solid #208620;
border-radius: 50%;
width: 30px;
height: 30px;
animation: spin 2s linear infinite;
margin: 20px auto;
display: none;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.casinolist-shortcode2 .row-licenses {
background-color: #F0F5F7;
height: auto;
width: 100%;
border-radius: 5px;
display: flex;
gap: 10px;
align-items: center;
justify-content: center;
padding: 10px;
flex-wrap: wrap;
}
.casinolist-shortcode2 .row-licenses img {
border-radius: 0;
width: 30px;
box-shadow: rgba(0, 0, 0, .16) 0 1px 4px;
object-fit: contain;
}
.casinolist-shortcode2 .review-item-count {
top: 5px;
left: 5px;
font-size: 11px;
font-weight: 600;
text-align: center;
display: block;
height: 24px;
width: 24px;
line-height: 24px;
border-radius: 50%;
position: absolute;
background-color: #545454;
color: #fff;
z-index: 5;
}
.casinolist-shortcode2 .filter {
display: flex;
margin: 10px 0 30px 0;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 5px;
}
.casinolist-shortcode2 .filter a {
padding: 6px 14px;
background-color: white;
border-radius: 5px;
margin: 0 5px;
font-size: 16px;
color: black;
text-align: center;
text-decoration: none;
box-shadow: rgba(0, 0, 0, .16) 0 1px 4px;
}
.casinolist-shortcode2 .filter a:focus, 
.casinolist-shortcode2 .filter a:hover {
text-decoration: none;
background-color: whitesmoke;
}
.casinolist-shortcode2 .license-container {
display: flex;
gap: 10px;
align-items: center;
justify-content: center;
}
.casinolist-shortcode2 .review-item-column {
flex: 1 1 calc(24% - 10px);
}
@media (max-width: 1020px) {
.casinolist-shortcode2 .review-item-column {
flex: 1 1 calc(30% - 10px);
}
}
@media (max-width: 767px) {
.casinolist-shortcode2 .review-item-column.column-1,
.casinolist-shortcode2 .review-item-column.column-4 {
flex: 1 1 calc(100% - 10px);
}
.casinolist-shortcode2 .review-item-column.column-2,
.casinolist-shortcode2 .review-item-column.column-3 {
flex: 1 1 calc(50% - 10px);
}
.casinolist-shortcode2 .additional-info-container {
flex-direction: column;
}
}
@media (max-width: 600px) {
.casinolist-shortcode2 .review-item-column {
flex: 1 1 calc(100% - 10px) !important;
}
.casinolist-shortcode2 .additional-info-bottom {
gap: 10px;
}
.casinolist-shortcode2 .additional-info-container .additional-info ul {
text-align: left;
}
.casinolist-shortcode2 .additional-info-container .additional-info ul li {
display: inline;
}
}:root { --brfc-primary: #1baf56;
--brfc-primary-hover: #159a4a;
--brfc-primary-light: rgba(27, 175, 86, 0.1); --brfc-success: #10b981;
--brfc-success-bg: rgba(16, 185, 129, 0.08);
--brfc-danger: #ef4444;
--brfc-danger-bg: rgba(239, 68, 68, 0.08);
--brfc-neutral: #6b7280;
--brfc-neutral-bg: rgba(107, 114, 128, 0.08); --brfc-bg: inherit;
--brfc-surface: rgba(128, 128, 128, 0.05);
--brfc-surface-hover: rgba(128, 128, 128, 0.1);
--brfc-border: rgba(128, 128, 128, 0.2); --brfc-text: inherit;
--brfc-text-muted: rgba(128, 128, 128, 0.8);
--brfc-text-light: rgba(128, 128, 128, 0.6); --brfc-radius: 12px;
--brfc-radius-sm: 5px;
--brfc-spacing: 1rem;
--brfc-spacing-lg: 0; --brfc-transition: all 0.2s ease;
} .brfc-calculator {
margin: 2rem auto;
padding: var(--brfc-spacing-lg);
font-family: inherit;
font-size: 1rem;
line-height: 1.5;
color: var(--brfc-text);
background: var(--brfc-bg);
border-radius: var(--brfc-radius);
box-sizing: border-box;
}
.brfc-calculator *,
.brfc-calculator *::before,
.brfc-calculator *::after {
box-sizing: border-box;
} .brfc-calculator button,
.brfc-calculator [type="button"],
.brfc-calculator [type="submit"],
.brfc-calculator [type="reset"] {
-webkit-appearance: none;
appearance: none;
background-color: transparent;
border: none;
color: inherit;
font-family: inherit;
font-size: inherit;
line-height: inherit;
margin: 0;
padding: 0;
text-align: inherit;
text-decoration: none;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
white-space: normal;
width: auto;
} .brfc-header {
text-align: center;
margin-bottom: var(--brfc-spacing-lg);
}
.brfc-title {
margin: 0 0 0.25rem 0;
font-size: 1.5rem;
font-weight: 700;
color: inherit;
}
.brfc-subtitle {
margin: 0;
font-size: 0.875rem;
color: var(--brfc-text-muted);
} .brfc-form {
display: flex;
flex-direction: column;
gap: var(--brfc-spacing);
}
.brfc-input-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.brfc-label {
font-size: 0.875rem;
font-weight: 600;
color: inherit;
}
.brfc-required {
color: var(--brfc-danger);
margin-left: 2px;
}
.brfc-optional {
font-weight: 400;
color: var(--brfc-text-muted);
font-size: 0.8rem;
}
.brfc-input-wrapper {
position: relative;
}
.brfc-currency-prefix {
position: absolute;
left: 1rem;
top: 50%;
transform: translateY(-50%);
font-size: 0.875rem;
font-weight: 600;
color: var(--brfc-text-muted);
pointer-events: none;
z-index: 1;
line-height: 1;
}
.brfc-suffix {
position: absolute;
right: 1rem;
font-size: 0.875rem;
color: var(--brfc-text-muted);
pointer-events: none;
}
.brfc-input {
width: 100%;
padding: 0.875rem 1rem;
font-family: inherit;
font-size: 1rem;
color: inherit;
background: var(--brfc-surface);
border: 1px solid rgb(0 0 0 / 13%) !important;
border-radius: var(--brfc-radius-sm);
transition: var(--brfc-transition);
outline: none;
box-sizing: border-box;
}
.brfc-input:focus {
border-color: var(--brfc-primary);
box-shadow: 0 0 0 3px var(--brfc-primary-light);
}
.brfc-input::placeholder {
color: var(--brfc-text-light);
} .brfc-currency-prefix + .brfc-input {
padding-left: 2.5rem;
} #brfc-taxa-custom {
padding-left: 1rem;
padding-right: 4rem;
} .brfc-select-wrapper {
position: relative;
}
.brfc-select {
width: 100%;
padding: 0.875rem 2.5rem 0.875rem 1rem;
font-family: inherit;
font-size: 1rem;
color: inherit;
background: var(--brfc-surface);
border: 1px solid rgb(0 0 0 / 13%) !important;
border-radius: var(--brfc-radius-sm);
cursor: pointer;
transition: var(--brfc-transition);
outline: none;
appearance: none;
-webkit-appearance: none;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 1.25rem;
}
.brfc-select:focus {
border-color: var(--brfc-primary);
border-width: 1px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 0 0 3px var(--brfc-primary-light);
}
.brfc-hint {
font-size: 0.75rem;
color: var(--brfc-text-light);
} .brfc-hidden {
display: none !important;
} .brfc-calculator .brfc-btn,
.brfc-calculator button.brfc-btn,
.brfc-calculator [type="button"].brfc-btn,
.brfc-calculator [type="submit"].brfc-btn {
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 1rem 1.5rem !important;
font-family: inherit;
font-size: 1rem !important;
font-weight: 600 !important;
text-decoration: none;
border: 1px solid transparent !important;
border-radius: var(--brfc-radius-sm);
cursor: pointer;
transition: var(--brfc-transition);
outline: none;
background-color: transparent;
width: auto;
text-align: center;
white-space: nowrap;
}
.brfc-calculator .brfc-btn-primary,
.brfc-calculator button.brfc-btn-primary,
.brfc-calculator [type="button"].brfc-btn-primary,
.brfc-calculator [type="submit"].brfc-btn-primary {
color: #ffffff !important;
background: var(--brfc-primary) !important;
border: 1px solid rgb(0 0 0 / 13%) !important;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}
.brfc-calculator .brfc-btn-primary:hover,
.brfc-calculator button.brfc-btn-primary:hover,
.brfc-calculator [type="button"].brfc-btn-primary:hover,
.brfc-calculator [type="submit"].brfc-btn-primary:hover {
background: var(--brfc-primary-hover) !important;
border: 1px solid rgb(0 0 0 / 13%) !important;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15) !important;
transform: translateY(-1px);
}
.brfc-calculator .brfc-btn-primary:active,
.brfc-calculator button.brfc-btn-primary:active,
.brfc-calculator [type="button"].brfc-btn-primary:active,
.brfc-calculator [type="submit"].brfc-btn-primary:active {
transform: translateY(0);
}
.brfc-calculator .brfc-btn-secondary,
.brfc-calculator button.brfc-btn-secondary,
.brfc-calculator [type="button"].brfc-btn-secondary {
color: inherit !important;
background: var(--brfc-surface) !important;
border: 1px solid rgb(0 0 0 / 13%) !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}
.brfc-calculator .brfc-btn-secondary:hover,
.brfc-calculator button.brfc-btn-secondary:hover,
.brfc-calculator [type="button"].brfc-btn-secondary:hover {
background: var(--brfc-surface-hover) !important;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}
.brfc-btn-icon {
flex-shrink: 0;
} .brfc-results {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid var(--brfc-border);
animation: brfc-fade-in 0.4s ease;
}
@keyframes brfc-fade-in {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
} .brfc-result-card {
padding: 20px;
border-radius: 20px;
text-align: center;
margin-bottom: var(--brfc-spacing);
}
.brfc-result-card.brfc-superavit {
background: var(--brfc-success-bg);
}
.brfc-result-card.brfc-deficit {
background: var(--brfc-danger-bg);
}
.brfc-result-card.brfc-neutro {
background: var(--brfc-neutral-bg);
}
.brfc-result-header {
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
margin-bottom: 0.5rem;
}
.brfc-result-label {
font-size: 0.875rem;
color: var(--brfc-text-muted);
}
.brfc-badge {
display: inline-flex;
align-items: center;
padding: 0.25rem 0.75rem;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
border-radius: 999px;
}
.brfc-badge.brfc-superavit {
color: var(--brfc-success);
background: rgba(16, 185, 129, 0.15);
}
.brfc-badge.brfc-deficit {
color: var(--brfc-danger);
background: rgba(239, 68, 68, 0.15);
}
.brfc-badge.brfc-neutro {
color: var(--brfc-neutral);
background: rgba(107, 114, 128, 0.15);
}
.brfc-result-value {
font-size: 2.5rem;
font-weight: 800;
line-height: 1.2;
margin-bottom: 0.25rem;
}
.brfc-superavit .brfc-result-value {
color: var(--brfc-success);
}
.brfc-deficit .brfc-result-value {
color: var(--brfc-danger);
}
.brfc-neutro .brfc-result-value {
color: var(--brfc-neutral);
}
.brfc-result-status {
font-size: 0.875rem;
color: var(--brfc-text-muted);
} .brfc-result-details {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin-bottom: var(--brfc-spacing);
}
.brfc-detail-item {
padding: 1rem;
border-radius: var(--brfc-radius-sm);
background: var(--brfc-surface);
}
.brfc-detail-label {
display: block;
font-size: 0.75rem;
color: var(--brfc-text-muted);
margin-bottom: 0.25rem;
}
.brfc-detail-value {
display: block;
font-size: 1.125rem;
font-weight: 700;
}
.brfc-detail-receita .brfc-detail-value {
color: var(--brfc-success);
}
.brfc-detail-despesa .brfc-detail-value {
color: var(--brfc-danger);
} .brfc-projection {
padding: var(--brfc-spacing);
border-radius: var(--brfc-radius-sm);
background: var(--brfc-primary-light);
border: 1px solid rgba(27, 175, 86, 0.2);
margin-bottom: var(--brfc-spacing);
text-align: center;
}
.brfc-projection-header {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin-bottom: 0.5rem;
}
.brfc-projection-icon {
color: var(--brfc-primary);
}
.brfc-projection-title {
font-size: 0.875rem;
font-weight: 600;
color: var(--brfc-primary);
}
.brfc-projection-value {
font-size: 1.5rem;
font-weight: 800;
color: var(--brfc-primary);
margin-bottom: 0.25rem;
}
.brfc-projection-info {
font-size: 0.75rem;
color: var(--brfc-text-muted);
} @media (max-width: 480px) {
.brfc-calculator {
margin: 1rem;
padding: var(--brfc-spacing);
}
.brfc-title {
font-size: 1.25rem;
}
.brfc-result-value {
font-size: 2rem;
}
.brfc-result-details {
grid-template-columns: 1fr;
}
} @media (prefers-color-scheme: dark) {
.brfc-calculator {
--brfc-surface: rgba(255, 255, 255, 0.05);
--brfc-surface-hover: rgba(255, 255, 255, 0.1);
--brfc-border: rgba(255, 255, 255, 0.1);
}
} .dark .brfc-calculator,
.wp-dark-mode .brfc-calculator,
[data-theme="dark"] .brfc-calculator {
--brfc-surface: rgba(255, 255, 255, 0.05);
--brfc-surface-hover: rgba(255, 255, 255, 0.1);
--brfc-border: rgba(255, 255, 255, 0.1);
}  .brfc-input-row {
display: flex;
gap: 0.75rem;
align-items: center;
}
.brfc-input-flex {
flex: 1;
}
.brfc-select-small {
width: auto;
min-width: 100px;
}
.brfc-input-suffix {
font-size: 0.875rem;
color: var(--brfc-text-muted);
white-space: nowrap;
} .brfc-rate-suggestions {
margin-top: 0.5rem;
}
.brfc-rate-chips {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 0.25rem;
}
.brfc-chip {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.375rem 0.75rem;
font-family: inherit;
font-size: 0.75rem;
color: var(--brfc-primary);
background: var(--brfc-primary-light);
border: 1px solid rgba(27, 175, 86, 0.2);
border-radius: 999px;
cursor: pointer;
transition: var(--brfc-transition);
}
button#brfc-fin-toggle-table {
border: 1px solid var(--brfc-primary);
padding: 3px 10px 3px 10px;
}
button#brfc-fin-toggle-table:hover {
background-color: var(--brfc-primary);
}
button#brfc-fin-toggle-table:focus {
background-color: var(--brfc-primary);
}
button.brfc-chip {
padding: 0px 10px 0px 10px !important;
border: 1px solid var(--brfc-border) !important;
border-radius: 5px !important;
border-color: var(--brfc-primary) !important;
}
button.brfc-chip:hover {
background-color: var(--brfc-primary);
}
button.brfc-chip:focus {
background-color: var(--brfc-primary);
}
button.brfc-chip:active {
background-color: var(--brfc-primary);
}
.brfc-chip:hover {
background-color:  var(--brfc-primary);
border-color: var(--brfc-primary);
}
.brfc-chip-value {
font-weight: 600;
} .brfc-prazo-presets {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 0.5rem;
}
.brfc-calculator .brfc-preset-btn,
.brfc-calculator button.brfc-preset-btn,
.brfc-calculator [type="button"].brfc-preset-btn {
padding: 0.375rem 0.75rem !important;
font-family: inherit;
font-size: 0.75rem !important;
font-weight: 500 !important;
color: var(--brfc-text-muted) !important;
background: var(--brfc-surface) !important;
border: 1px solid rgb(0 0 0 / 13%) !important;
border-radius: var(--brfc-radius-sm);
cursor: pointer;
transition: var(--brfc-transition);
background-color: var(--brfc-surface) !important;
width: auto;
text-align: center;
white-space: nowrap;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}
.brfc-calculator .brfc-preset-btn:hover,
.brfc-calculator .brfc-preset-btn.active,
.brfc-calculator button.brfc-preset-btn:hover,
.brfc-calculator button.brfc-preset-btn.active,
.brfc-calculator [type="button"].brfc-preset-btn:hover,
.brfc-calculator [type="button"].brfc-preset-btn.active {
color: var(--brfc-primary) !important;
background: var(--brfc-primary-light) !important;
border-color: var(--brfc-primary) !important;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
} .brfc-system-toggle {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
width: 100%;
}
.brfc-system-toggle .brfc-toggle-btn {
flex: 1 1 auto;
min-width: 120px;
max-width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0.875rem 1rem;
font-family: inherit;
background: var(--brfc-surface);
border: 2px solid var(--brfc-border);
border-radius: var(--brfc-radius-sm);
cursor: pointer;
transition: var(--brfc-transition);
text-align: center;
box-sizing: border-box;
}
.brfc-system-toggle .brfc-toggle-btn:hover {
border-color: var(--brfc-primary);
background: var(--brfc-surface-hover, #f9fafb);
color: #000 !important;
}
.brfc-system-toggle .brfc-toggle-btn.active {
background: var(--brfc-primary-light);
border-color: var(--brfc-primary);
}
.brfc-system-toggle .brfc-toggle-title {
display: block;
font-size: 0.95rem;
font-weight: 700;
color: var(--brfc-text);
line-height: 1.3;
margin-bottom: 0.25rem;
}
.brfc-system-toggle .brfc-toggle-desc {
display: block;
font-size: 0.7rem;
color: var(--brfc-text-muted);
line-height: 1.2;
}
.brfc-system-toggle .brfc-toggle-btn.active .brfc-toggle-title {
color: var(--brfc-primary);
} @media (max-width: 320px) {
.brfc-system-toggle {
flex-direction: column;
}
.brfc-system-toggle .brfc-toggle-btn {
min-width: 100%;
}
} .brfc-result-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.75rem;
margin-bottom: var(--brfc-spacing);
}
@media (max-width: 600px) {
.brfc-result-cards {
grid-template-columns: 1fr;
}
}
.brfc-result-cards .brfc-result-card {
margin-bottom: 0;
padding: 1rem;
text-align: left;
}
.brfc-result-cards .brfc-card-label {
font-size: 0.75rem;
color: var(--brfc-text-muted);
margin-bottom: 0.25rem;
}
.brfc-result-cards .brfc-card-value {
font-size: 1.25rem;
font-weight: 700;
}
.brfc-result-cards .brfc-card-info {
font-size: 0.7rem;
color: var(--brfc-text-light);
margin-top: 0.25rem;
}
.brfc-card-parcela {
background: var(--brfc-primary-light);
}
.brfc-card-parcela .brfc-card-value {
color: var(--brfc-primary);
}
.brfc-card-total {
background: var(--brfc-neutral-bg);
}
.brfc-card-juros {
background: var(--brfc-danger-bg);
}
.brfc-card-juros .brfc-card-value {
color: var(--brfc-danger);
} .brfc-chart-container {
margin-bottom: var(--brfc-spacing);
padding: var(--brfc-spacing);
background: var(--brfc-surface);
border-radius: var(--brfc-radius-sm);
}
.brfc-section-title {
font-size: 0.875rem;
font-weight: 600;
margin: 0 0 0.75rem 0;
color: inherit;
}
.brfc-stacked-bar {
display: flex;
height: 32px;
border-radius: 4px;
overflow: hidden;
}
.brfc-bar-principal {
background: var(--brfc-primary);
display: flex;
align-items: center;
justify-content: center;
transition: width 0.5s ease;
}
.brfc-bar-juros {
background: var(--brfc-danger);
display: flex;
align-items: center;
justify-content: center;
transition: width 0.5s ease;
}
.brfc-bar-label {
font-size: 0.7rem;
font-weight: 600;
color: #fff;
}
.brfc-chart-legend {
display: flex;
justify-content: center;
gap: 1.5rem;
margin-top: 0.75rem;
font-size: 0.8rem;
}
.brfc-legend-item {
display: flex;
align-items: center;
gap: 0.5rem;
}
.brfc-legend-dot {
width: 12px;
height: 12px;
border-radius: 50%;
}
.brfc-legend-principal .brfc-legend-dot {
background: var(--brfc-primary);
}
.brfc-legend-juros .brfc-legend-dot {
background: var(--brfc-danger);
} .brfc-amortization-section {
margin-bottom: var(--brfc-spacing);
}
.brfc-section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.75rem;
}
.brfc-link-btn {
font-family: inherit;
font-size: 0.8rem;
color: var(--brfc-primary);
background: none;
border: none;
cursor: pointer;
text-decoration: underline;
}
.brfc-link-btn:hover {
text-decoration: none;
}
.brfc-table-container {
max-height: 400px;
overflow: auto;
border: 1px solid var(--brfc-border);
border-radius: var(--brfc-radius-sm);
}
.brfc-table-container.brfc-collapsed {
max-height: 0;
overflow: hidden;
border: none;
}
.brfc-amortization-table {
width: 100%;
border-collapse: collapse;
font-size: 0.8rem;
}
.brfc-amortization-table th,
.brfc-amortization-table td {
padding: 0.5rem 0.75rem;
text-align: right;
border-bottom: 1px solid var(--brfc-border);
}
.brfc-amortization-table th {
background: var(--brfc-surface);
font-weight: 600;
position: sticky;
top: 0;
}
.brfc-amortization-table th:first-child,
.brfc-amortization-table td:first-child {
text-align: center;
width: 50px;
}
.brfc-amortization-table tr:hover {
background: var(--brfc-surface-hover);
}
button#brfc-dollar-swap {
padding-left: 11.5px;
padding-right: 11.5px;
border-radius: 50px;
padding-top: 6px;
}
.brfc-result-details-dollar {
margin-top: 10px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
} .brfc-disclaimer {
display: flex;
gap: 0.75rem;
padding: 0.875rem;
background: rgba(245, 158, 11, 0.1);
border-left: 3px solid #f59e0b;
border-radius: var(--brfc-radius-sm);
margin-bottom: var(--brfc-spacing);
font-size: 0.75rem;
color: var(--brfc-text-muted);
margin-top: 10px;
}
.brfc-disclaimer svg {
flex-shrink: 0;
color: #f59e0b;
}
.brfc-disclaimer p {
margin: 0;
line-height: 1.5;
} .brfc-financing {
max-width: 100%;
} .brfc-compound {
max-width: 100%;
} .brfc-cards-4 {
grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 700px) {
.brfc-cards-4 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 400px) {
.brfc-cards-4 {
grid-template-columns: 1fr;
}
} .brfc-card-montante {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(16, 185, 129, 0.05));
border: 1px solid rgba(16, 185, 129, 0.2);
}
.brfc-card-montante .brfc-card-value {
color: var(--brfc-success);
font-size: 1.5rem;
} .brfc-card-investido {
background: var(--brfc-primary-light);
}
.brfc-card-investido .brfc-card-value {
color: var(--brfc-primary);
} .brfc-card-rentabilidade {
background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(139, 92, 246, 0.05));
}
.brfc-card-rentabilidade .brfc-card-value {
color: #8b5cf6;
font-size: 1.5rem;
} .brfc-bar-inicial {
background: var(--brfc-primary);
display: flex;
align-items: center;
justify-content: center;
transition: width 0.5s ease;
}
.brfc-bar-aportes {
background: #8b5cf6;
display: flex;
align-items: center;
justify-content: center;
transition: width 0.5s ease;
}
.brfc-bar-rendimento {
background: var(--brfc-success);
display: flex;
align-items: center;
justify-content: center;
transition: width 0.5s ease;
} .brfc-legend-3 {
justify-content: space-between;
flex-wrap: wrap;
}
.brfc-legend-inicial .brfc-legend-dot {
background: var(--brfc-primary);
}
.brfc-legend-aportes .brfc-legend-dot {
background: #8b5cf6;
}
.brfc-legend-rendimento .brfc-legend-dot {
background: var(--brfc-success);
} .brfc-formulas-section {
margin-bottom: var(--brfc-spacing);
}
.brfc-formula-details {
background: var(--brfc-surface);
border-radius: var(--brfc-radius-sm);
overflow: hidden;
}
.brfc-formula-details summary {
padding: 0.875rem 1rem;
cursor: pointer;
font-weight: 600;
color: var(--brfc-primary);
user-select: none;
}
.brfc-formula-details summary:hover {
background: var(--brfc-surface-hover);
}
.brfc-formula-content {
padding: 1rem;
border-top: 1px solid var(--brfc-border);
}
.brfc-formula-item {
margin-bottom: 1rem;
}
.brfc-formula-item h5 {
margin: 0 0 0.25rem 0;
font-size: 0.8rem;
color: var(--brfc-text-muted);
}
.brfc-formula-item code {
display: inline-block;
padding: 0.5rem 1rem;
background: rgba(27, 175, 86, 0.1);
border-radius: 4px;
font-family: 'Courier New', monospace;
font-size: 0.9rem;
color: var(--brfc-primary);
}
.brfc-formula-legend {
margin: 1rem 0 0 0;
font-size: 0.75rem;
color: var(--brfc-text-muted);
padding-top: 0.75rem;
border-top: 1px solid var(--brfc-border);
} .brfc-evolution-section {
margin-bottom: var(--brfc-spacing);
}
.brfc-evolution-table {
width: 100%;
border-collapse: collapse;
font-size: 0.8rem;
}
.brfc-evolution-table th,
.brfc-evolution-table td {
padding: 0.5rem 0.75rem;
text-align: right;
border-bottom: 1px solid var(--brfc-border);
}
.brfc-evolution-table th {
background: var(--brfc-surface);
font-weight: 600;
position: sticky;
top: 0;
}
.brfc-evolution-table th:first-child,
.brfc-evolution-table td:first-child {
text-align: center;
width: 60px;
}
.brfc-evolution-table tr:hover {
background: var(--brfc-surface-hover);
} .brfc-dollar {
max-width: 100%;
} .brfc-rate-display {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(16, 185, 129, 0.05));
border: 1px solid rgba(16, 185, 129, 0.2);
border-radius: var(--brfc-radius-sm);
padding: 1rem;
margin-bottom: var(--brfc-spacing);
text-align: center;
}
.brfc-rate-info {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
flex-wrap: wrap;
}
.brfc-rate-label {
font-size: 0.875rem;
color: var(--brfc-text-muted);
}
.brfc-rate-value {
font-size: 1.25rem;
font-weight: 700;
color: var(--brfc-success);
}
.brfc-rate-updated {
font-size: 0.75rem;
color: var(--brfc-text-light);
margin-top: 0.5rem;
} .brfc-currency-group {
position: relative;
}
.brfc-flag {
font-size: 1.25rem;
margin-right: 0.5rem;
} .brfc-swap-container {
display: flex;
justify-content: center;
margin: 0.5rem 0;
}
.brfc-swap-btn {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding-top: 7px;
padding-right: 11px;
padding-left: 11px;
background: var(--brfc-primary) !important;
border: 1px solid rgb(0 0 0 / 13%) !important;
border-radius: 50%;
cursor: pointer;
transition: var(--brfc-transition);
color: #ffffff !important;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.brfc-swap-btn:hover {
background: var(--brfc-primary-hover) !important;
border: 1px solid rgb(0 0 0 / 13%) !important;
transform: rotate(180deg);
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
color: #ffffff !important;
}
.brfc-swap-btn svg {
width: 20px;
height: 20px;
} .brfc-dollar-result {
background: var(--brfc-surface);
border-radius: var(--brfc-radius-sm);
padding: 1.25rem;
margin: var(--brfc-spacing) 0;
text-align: center;
}
.brfc-result-row {
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
flex-wrap: wrap;
}
.brfc-result-label {
font-size: 1rem;
color: var(--brfc-text-muted);
}
.brfc-result-value {
font-size: 1.5rem;
font-weight: 700;
color: var(--brfc-primary);
}
.brfc-result-details {
margin-top: 0.75rem;
font-size: 0.8rem;
color: var(--brfc-text-light);
font-family: monospace;
} .brfc-disclaimer-dollar {
background: rgba(27, 175, 86, 0.1);
border-left-color: var(--brfc-primary);
}
.brfc-disclaimer-dollar svg {
color: var(--brfc-primary);
}  .brfc-cards-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
@media (max-width: 480px) {
.brfc-cards-2 {
grid-template-columns: 1fr;
}
} .brfc-card-poupanca {
border-left-color: var(--brfc-success);
}
.brfc-card-poupanca .brfc-card-value {
color: var(--brfc-success);
}
.brfc-card-selic {
border-left-color: var(--brfc-primary);
}
.brfc-card-selic .brfc-card-value {
color: var(--brfc-primary);
} .brfc-rates-info {
display: flex;
gap: 1rem;
margin-bottom: var(--brfc-spacing);
flex-wrap: wrap;
}
.brfc-rate-chip {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
background: rgba(16, 185, 129, 0.1);
border-radius: 20px;
font-size: 0.875rem;
}
.brfc-rate-chip .brfc-rate-name {
font-weight: 500;
}
.brfc-rate-chip .brfc-rate-value {
font-weight: 700;
color: var(--brfc-success);
}
.brfc-rate-selic {
background: rgba(27, 175, 86, 0.1);
}
.brfc-rate-selic .brfc-rate-value {
color: var(--brfc-primary);
} .brfc-comparison-box {
background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
border-radius: var(--brfc-radius-sm);
padding: 1.25rem;
text-align: center;
margin: var(--brfc-spacing) 0;
}
.brfc-comparison-label {
font-size: 0.875rem;
color: var(--brfc-text-muted);
margin-bottom: 0.5rem;
}
.brfc-comparison-value {
font-size: 1.5rem;
font-weight: 700;
}
.brfc-comparison-value.brfc-positive {
color: var(--brfc-success);
}
.brfc-comparison-value.brfc-negative {
color: var(--brfc-danger);
}
.brfc-comparison-desc {
font-size: 0.8rem;
color: var(--brfc-text-light);
margin-top: 0.5rem;
} .brfc-chart-section {
margin: var(--brfc-spacing) 0;
}
.brfc-chart-wrapper {
height: 300px;
position: relative;
} .brfc-summary-section {
margin: var(--brfc-spacing) 0;
}
.brfc-summary-table {
width: 100%;
border-collapse: collapse;
}
.brfc-summary-table td {
padding: 0.75rem;
border-bottom: 1px solid var(--brfc-border);
}
.brfc-summary-table td:first-child {
color: var(--brfc-text-muted);
}
.brfc-summary-table td:last-child {
text-align: right;
font-weight: 600;
} .brfc-section-title {
font-size: 1rem;
font-weight: 600;
margin-bottom: 1rem;
color: var(--brfc-text);
} .brfc-percentage {
max-width: 600px;
width: 100%;
box-sizing: border-box;
} .brfc-percentage .brfc-tabs {
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
margin-bottom: var(--brfc-spacing);
border-bottom: 2px solid var(--brfc-border);
padding-bottom: 0;
width: 100%;
box-sizing: border-box;
}
.brfc-percentage .brfc-tab {
flex: 1 1 auto;
min-width: 80px;
padding: 0.5rem 0.75rem;
background: none;
border: none;
border-radius: var(--brfc-radius-sm) var(--brfc-radius-sm) 0 0;
cursor: pointer;
font-size: 0.75rem;
font-weight: 500;
color: var(--brfc-text-muted);
transition: var(--brfc-transition);
text-align: center;
white-space: nowrap;
box-sizing: border-box;
}
.brfc-percentage .brfc-tab:hover {
color: var(--brfc-primary);
background: var(--brfc-primary-light);
}
.brfc-percentage .brfc-tab.active {
color: var(--brfc-primary);
background: var(--brfc-primary-light);
border-bottom: 2px solid var(--brfc-primary);
margin-bottom: -2px;
} .brfc-percentage .brfc-tab-panel {
display: none;
width: 100%;
box-sizing: border-box;
}
.brfc-percentage .brfc-tab-panel.active {
display: block;
animation: brfc-fadeIn 0.2s ease;
} .brfc-percentage .brfc-operation-desc {
font-size: 0.85rem;
color: var(--brfc-text-muted);
margin-bottom: 1rem;
font-style: italic;
} .brfc-percentage .brfc-form-inline {
display: grid;
grid-template-columns: minmax(80px, 100px) auto minmax(120px, 1fr);
align-items: end;
gap: 0.75rem;
width: 100%;
box-sizing: border-box;
}
.brfc-percentage .brfc-form-inline.brfc-form-4cols {
grid-template-columns: minmax(120px, 1fr) auto minmax(80px, 100px);
}
.brfc-percentage .brfc-input-group {
display: flex;
flex-direction: column;
}
.brfc-percentage .brfc-input-group .brfc-label {
font-size: 0.75rem;
margin-bottom: 0.25rem;
color: var(--brfc-text-muted);
}
.brfc-percentage .brfc-operation-label {
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
font-weight: 500;
color: var(--brfc-text-muted);
padding: 0.5rem 0.25rem;
min-height: 38px;
} .brfc-percentage .brfc-input-wrapper {
position: relative;
width: 100%;
}
.brfc-percentage .brfc-input-wrapper .brfc-input {
width: 100%;
box-sizing: border-box;
padding-right: 28px;
}
.brfc-percentage .brfc-suffix {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
color: var(--brfc-text-muted);
font-weight: 500;
font-size: 0.9rem;
pointer-events: none;
} .brfc-percentage .brfc-result-inline {
display: flex;
align-items: center;
gap: 0.75rem;
margin-top: 1.25rem;
padding: 1rem;
background: var(--brfc-surface);
border-radius: var(--brfc-radius-sm);
flex-wrap: wrap;
}
.brfc-percentage .brfc-result-prefix {
font-size: 1.5rem;
font-weight: 300;
color: var(--brfc-text-muted);
}
.brfc-percentage .brfc-result-inline .brfc-result-value {
font-size: 1.5rem;
font-weight: 700;
color: var(--brfc-primary);
}
.brfc-percentage .brfc-result-inline .brfc-result-desc {
font-size: 0.8rem;
color: var(--brfc-text-light);
width: 100%;
} .brfc-percentage .brfc-toggle-group {
display: flex;
border-radius: var(--brfc-radius-sm);
overflow: hidden;
border: 1px solid var(--brfc-border);
height: 38px;
align-self: end;
flex-shrink: 0;
}
button#brfc-comp-toggle-table {
background-color: var(--brfc-primary);
padding: 10px;
}
button#brfc-comp-toggle-table:hover {
color: #000000;
}
.brfc-percentage .brfc-toggle-group .brfc-toggle-btn {
width: 38px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: var(--brfc-bg);
border: none;
cursor: pointer;
font-size: 1.1rem;
font-weight: 600;
transition: var(--brfc-transition);
padding: 0;
margin: 0;
}
.brfc-percentage .brfc-toggle-group .brfc-toggle-btn:first-child {
border-right: 1px solid var(--brfc-border);
}
.brfc-percentage .brfc-toggle-group .brfc-toggle-btn:hover {
background: var(--brfc-surface);
}
.brfc-percentage .brfc-toggle-group .brfc-toggle-btn.active {
background: var(--brfc-primary);
color: #fff;
} .brfc-percentage .brfc-examples-section {
margin-top: var(--brfc-spacing);
padding-top: var(--brfc-spacing);
border-top: 1px solid var(--brfc-border);
}
.brfc-percentage .brfc-examples-grid {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.brfc-percentage .brfc-example-btn {
padding: 0.4rem 0.75rem;
background: var(--brfc-surface);
border: 1px solid var(--brfc-border);
border-radius: 15px;
cursor: pointer;
font-size: 0.75rem;
color: var(--brfc-text);
transition: var(--brfc-transition);
white-space: nowrap;
}
.brfc-percentage .brfc-example-btn:hover {
background: var(--brfc-primary-light);
border-color: var(--brfc-primary);
color: var(--brfc-primary);
} @media (max-width: 480px) {
.brfc-percentage .brfc-tabs {
gap: 0.125rem;
}
.brfc-percentage .brfc-tab {
min-width: 60px;
padding: 0.4rem 0.5rem;
font-size: 0.65rem;
}
.brfc-percentage .brfc-form-inline {
grid-template-columns: 1fr;
gap: 0.5rem;
}
.brfc-percentage .brfc-operation-label {
padding: 0.25rem 0;
min-height: auto;
}
.brfc-percentage .brfc-toggle-group {
align-self: center;
margin: 0.25rem 0;
}
} .brfc-positive {
color: var(--brfc-success) !important;
}
.brfc-negative {
color: var(--brfc-danger) !important;
} .brfc-salary {
max-width: 100%;
width: 100%;
} .brfc-wizard-progress {
display: flex;
justify-content: space-between;
margin-bottom: 2rem;
position: relative;
}
.brfc-wizard-progress::before {
content: '';
position: absolute;
top: 16px;
left: 10%;
right: 10%;
height: 2px;
background: var(--brfc-border);
z-index: 0;
}
.brfc-step {
display: flex;
flex-direction: column;
align-items: center;
z-index: 1;
flex: 1;
}
.brfc-step-number {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--brfc-surface);
border: 2px solid var(--brfc-border);
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 0.875rem;
color: var(--brfc-text-muted);
transition: var(--brfc-transition);
}
.brfc-step-label {
font-size: 0.75rem;
color: var(--brfc-text-muted);
margin-top: 0.5rem;
text-align: center;
}
.brfc-step.active .brfc-step-number {
background: var(--brfc-primary);
border-color: var(--brfc-primary);
color: #fff;
}
.brfc-step.active .brfc-step-label {
color: var(--brfc-primary);
font-weight: 600;
}
.brfc-step.completed .brfc-step-number {
background: var(--brfc-success);
border-color: var(--brfc-success);
color: #fff;
} .brfc-wizard-panel {
display: none;
}
.brfc-wizard-panel.active {
display: block;
animation: brfc-fadeIn 0.3s ease;
} .brfc-wizard-nav {
margin-top: 1.5rem;
display: flex;
justify-content: flex-end;
}
.brfc-wizard-nav.brfc-nav-dual {
justify-content: space-between;
} .brfc-checkbox-label,
.brfc-radio-label {
display: flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
font-size: 0.9rem;
}
.brfc-radio-group {
display: flex;
flex-wrap: wrap;
gap: 1rem;
} .brfc-conditional-field {
margin-top: 1rem;
padding: 1rem;
background: var(--brfc-surface);
border-radius: var(--brfc-radius-sm);
border-left: 3px solid var(--brfc-primary);
} .brfc-input-row {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.brfc-input-half {
flex: 1 1 45%;
min-width: 120px;
} .brfc-label-sm {
font-size: 0.8rem;
} .brfc-optional-section {
padding: 1rem;
background: var(--brfc-bg);
border-radius: var(--brfc-radius-sm);
margin-bottom: var(--brfc-spacing);
} .brfc-result-hero {
text-align: center;
padding: 2rem;
background: linear-gradient(135deg, var(--brfc-primary) 0%, #159a4a 100%);
border-radius: var(--brfc-radius);
color: #fff;
margin-bottom: 1.5rem;
}
.brfc-hero-label {
font-size: 0.9rem;
opacity: 0.9;
text-transform: uppercase;
letter-spacing: 1px;
}
.brfc-hero-value {
font-size: 2.5rem;
font-weight: 700;
margin: 0.5rem 0;
}
.brfc-hero-aliquota {
font-size: 0.85rem;
opacity: 0.85;
} .brfc-cards-3 {
grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 600px) {
.brfc-cards-3 {
grid-template-columns: 1fr;
}
} .brfc-card-header {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.5rem;
}
.brfc-card-icon {
font-size: 1.25rem;
}
.brfc-card-title {
font-size: 0.8rem;
color: var(--brfc-text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
} .brfc-chart-section {
margin: 1.5rem 0;
padding: 1rem;
background: var(--brfc-surface);
border-radius: var(--brfc-radius-sm);
}
.brfc-chart-wrapper {
position: relative;
} .brfc-memory-section {
margin-top: 1.5rem;
}
.brfc-memory-block {
margin-bottom: 1.5rem;
padding: 1rem;
background: var(--brfc-surface);
border-radius: var(--brfc-radius-sm);
}
.brfc-memory-block h5 {
margin: 0 0 1rem 0;
font-size: 0.9rem;
color: var(--brfc-text);
} .brfc-memory-table {
width: 100%;
border-collapse: collapse;
font-size: 0.85rem;
}
.brfc-memory-table th,
.brfc-memory-table td {
padding: 0.5rem;
text-align: left;
border-bottom: 1px solid var(--brfc-border);
}
.brfc-memory-table th {
font-weight: 600;
color: var(--brfc-text-muted);
font-size: 0.75rem;
text-transform: uppercase;
}
.brfc-memory-table td:last-child {
text-align: right;
}
.brfc-row-selected {
background: var(--brfc-primary-light);
}
.brfc-row-selected td:last-child {
color: var(--brfc-success);
font-weight: 600;
} .brfc-deduction td:last-child {
color: var(--brfc-danger);
}
.brfc-addition td:last-child {
color: var(--brfc-success);
}
.brfc-total td {
border-top: 2px solid var(--brfc-border);
padding-top: 0.75rem;
}
.brfc-total td:last-child {
color: var(--brfc-primary);
font-size: 1.1rem;
} @media (max-width: 480px) {
.brfc-wizard-progress::before {
display: none;
}
.brfc-step-label {
font-size: 0.65rem;
}
.brfc-step-number {
width: 28px;
height: 28px;
font-size: 0.75rem;
}
.brfc-hero-value {
font-size: 2rem;
}
.brfc-wizard-nav.brfc-nav-dual {
flex-direction: column;
gap: 0.75rem;
}
.brfc-wizard-nav.brfc-nav-dual button {
width: 100%;
}
} .brfc-percentage-calc {
max-width: 100%;
width: 100%;
box-sizing: border-box;
} .brfc-percentage-calc .brfc-tabs-container {
margin-bottom: 1.5rem;
}
.brfc-percentage-calc .brfc-tabs {
display: flex;
gap: 0.25rem;
border-bottom: 2px solid var(--brfc-border);
padding-bottom: 0;
flex-wrap: wrap;
}
.brfc-percentage-calc .brfc-tab {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
padding: 0.75rem 1rem;
background: transparent;
border: none;
border-radius: var(--brfc-radius-sm) var(--brfc-radius-sm) 0 0;
cursor: pointer;
color: var(--brfc-text-muted);
transition: var(--brfc-transition);
flex: 1;
min-width: 100px;
}
.brfc-percentage-calc .brfc-tab-icon {
font-size: 1.25rem;
font-weight: 700;
}
.brfc-percentage-calc .brfc-tab-label {
font-size: 0.7rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.brfc-percentage-calc .brfc-tab:hover {
background: var(--brfc-primary-light);
color: var(--brfc-primary);
}
.brfc-percentage-calc .brfc-tab.active {
background: var(--brfc-primary-light);
color: var(--brfc-primary);
border-bottom: 3px solid var(--brfc-primary);
margin-bottom: -2px;
} .brfc-percentage-calc .brfc-tab-panels {
min-height: 180px;
}
.brfc-percentage-calc .brfc-tab-panel {
display: none;
animation: brfc-fadeIn 0.3s ease;
}
.brfc-percentage-calc .brfc-tab-panel.active {
display: block;
}
.brfc-percentage-calc .brfc-panel-desc {
font-size: 0.875rem;
color: var(--brfc-text-muted);
margin-bottom: 1.25rem;
font-style: italic;
} .brfc-percentage-calc .brfc-input-row-inline {
display: flex;
align-items: flex-end;
gap: 0.75rem;
flex-wrap: wrap;
margin-bottom: 1.25rem;
}
.brfc-percentage-calc .brfc-input-sm {
flex: 0 0 120px;
min-width: 100px;
}
.brfc-percentage-calc .brfc-input-lg {
flex: 1;
min-width: 140px;
}
.brfc-percentage-calc .brfc-operator {
display: flex;
align-items: center;
justify-content: center;
align-self: center;
font-size: 1rem;
font-weight: 500;
color: var(--brfc-text-muted);
padding: 0.5rem 0.25rem;
padding-bottom: 0.5rem;
} .brfc-percentage-calc .brfc-input-wrapper {
position: relative;
width: 100%;
}
.brfc-percentage-calc .brfc-input-wrapper .brfc-input {
width: 100%;
box-sizing: border-box;
}
.brfc-percentage-calc .brfc-input-wrapper .brfc-suffix {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
color: var(--brfc-text-muted);
font-weight: 500;
pointer-events: none;
}
.brfc-percentage-calc .brfc-input-wrapper .brfc-currency-prefix {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: var(--brfc-text-muted);
font-weight: 500;
pointer-events: none;
z-index: 1;
}
.brfc-percentage-calc .brfc-input-wrapper .brfc-currency-prefix + .brfc-input {
padding-left: 40px;
} .brfc-percentage-calc .brfc-toggle-group {
display: flex;
border-radius: var(--brfc-radius-sm);
overflow: hidden;
border: 1px solid var(--brfc-border);
height: 42px;
margin-bottom: 1.5rem;
}
.brfc-percentage-calc .brfc-toggle-btn {
width: 44px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: var(--brfc-bg);
border: none;
cursor: pointer;
font-size: 1.25rem;
font-weight: 700;
transition: var(--brfc-transition);
color: var(--brfc-text-muted);
}
.brfc-percentage-calc .brfc-toggle-btn:first-child {
border-right: 1px solid var(--brfc-border);
}
.brfc-percentage-calc .brfc-toggle-btn:hover {
background: var(--brfc-surface);
}
.brfc-percentage-calc .brfc-toggle-btn.active {
background: var(--brfc-primary);
color: #fff;
} .brfc-percentage-calc .brfc-result-desc {
font-size: 0.875rem;
color: var(--brfc-text-light);
margin-top: 0.5rem;
} @media (max-width: 520px) {
.brfc-percentage-calc .brfc-tabs {
gap: 0.125rem;
}
.brfc-percentage-calc .brfc-tab {
padding: 0.5rem 0.5rem;
min-width: 70px;
}
.brfc-percentage-calc .brfc-tab-icon {
font-size: 1rem;
}
.brfc-percentage-calc .brfc-tab-label {
font-size: 0.6rem;
}
.brfc-percentage-calc .brfc-input-row-inline {
flex-direction: column;
align-items: stretch;
}
.brfc-percentage-calc .brfc-input-sm,
.brfc-percentage-calc .brfc-input-lg {
flex: 1 1 100%;
min-width: 100%;
}
.brfc-percentage-calc .brfc-operator {
padding: 0.25rem 0;
}
.brfc-percentage-calc .brfc-toggle-group {
align-self: center;
margin: 0.5rem 0;
}
}  .brfc-input.brfc-error,
.brfc-input.brfc-error:focus {
border-color: var(--brfc-danger) !important;
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
} .brfc-error-message {
display: flex;
align-items: center;
gap: 0.375rem;
margin-top: 0.375rem;
padding: 0.375rem 0.5rem;
font-size: 0.8rem;
font-weight: 500;
color: var(--brfc-danger);
background: var(--brfc-danger-bg);
border-radius: var(--brfc-radius-sm);
animation: brfc-fade-in 0.3s ease;
}
.brfc-error-message svg {
flex-shrink: 0;
width: 14px;
height: 14px;
} @keyframes brfc-shake {
0%, 100% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
20%, 40%, 60%, 80% { transform: translateX(4px); }
}
.brfc-shake {
animation: brfc-shake 0.5s ease;
}  .brfc-cashflow {
max-width: 800px;
} .brfc-cf-section {
margin-bottom: 1.5rem !important;
}
.brfc-cf-section.brfc-cf-entradas {
border-left: 3px solid var(--brfc-success);
}
.brfc-cf-section.brfc-cf-saidas {
border-left: 3px solid var(--brfc-danger);
}
.brfc-cf-section .brfc-label {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
} .brfc-cf-section-total-inline {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.875rem;
}
.brfc-cf-section-total {
display: flex;
align-items: center;
gap: 0.5rem;
}
.brfc-cf-total-label {
font-size: 0.8rem;
color: var(--brfc-text-muted);
}
.brfc-cf-total-value {
font-weight: 700;
font-size: 1rem;
}
.brfc-cf-positive {
color: var(--brfc-success);
}
.brfc-cf-negative {
color: var(--brfc-danger);
} .brfc-cf-table {
width: 100%;
border-collapse: collapse;
}
.brfc-cf-table thead {
display: none;
}
.brfc-cf-table tbody tr {
border-bottom: 1px solid var(--brfc-border);
}
.brfc-cf-table tbody tr:last-child {
border-bottom: none;
}
.brfc-cf-table td {
padding: 0.5rem;
vertical-align: middle;
}
.brfc-cf-desc-cell {
width: 55%;
}
.brfc-cf-valor-cell {
width: 35%;
}
.brfc-cf-action-cell {
width: 10%;
text-align: center;
}
.brfc-cf-desc-input,
.brfc-cf-valor-input {
width: 100%;
padding: 0.625rem 0.75rem;
font-size: 0.875rem;
}
.brfc-cf-valor-cell .brfc-input-wrapper {
position: relative;
}
.brfc-cf-valor-cell .brfc-currency-prefix {
left: 0.75rem;
font-size: 0.8rem;
}
.brfc-cf-valor-cell .brfc-input {
padding-left: 2rem;
} .brfc-cf-remove-btn {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
background: transparent;
border: none;
border-radius: 50%;
color: var(--brfc-text-muted);
cursor: pointer;
transition: var(--brfc-transition);
}
.brfc-cf-remove-btn:hover {
background: var(--brfc-danger-bg);
color: var(--brfc-danger);
} .brfc-cf-rate-card {
margin-bottom: 1.5rem;
padding: 1.25rem;
background: linear-gradient(135deg, var(--brfc-primary-light) 0%, rgba(27, 175, 86, 0.05) 100%);
border: 2px solid var(--brfc-primary);
border-radius: var(--brfc-radius);
}
.brfc-cf-rate-header {
display: flex;
align-items: flex-start;
gap: 1rem;
margin-bottom: 1rem;
}
.brfc-cf-rate-icon {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
background: var(--brfc-primary);
border-radius: 12px;
color: white;
flex-shrink: 0;
}
.brfc-cf-rate-title h4 {
margin: 0 0 0.25rem 0;
font-size: 1.1rem;
font-weight: 700;
color: var(--brfc-primary);
}
.brfc-cf-rate-title p {
margin: 0;
font-size: 0.8rem;
color: var(--brfc-text-muted);
}
.brfc-cf-rate-body {
margin-bottom: 0.75rem;
}
.brfc-cf-rate-select {
border-color: var(--brfc-primary);
}
.brfc-cf-rate-select:focus {
box-shadow: 0 0 0 3px var(--brfc-primary-light);
}
.brfc-cf-rate-hint {
display: flex;
align-items: flex-start;
gap: 0.5rem;
font-size: 0.75rem;
color: var(--brfc-text-muted);
line-height: 1.4;
}
.brfc-cf-rate-hint svg {
flex-shrink: 0;
margin-top: 2px;
color: var(--brfc-primary);
} .brfc-cf-actions {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
}
.brfc-cf-actions .brfc-btn-primary {
flex: 1;
min-width: 200px;
}
.brfc-btn-sm {
padding: 0.625rem 1rem !important;
font-size: 0.875rem !important;
} @media (max-width: 600px) {
.brfc-cf-section-header {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
.brfc-cf-table td {
padding: 0.375rem;
}
.brfc-cf-desc-cell {
width: 50%;
}
.brfc-cf-valor-cell {
width: 40%;
}
.brfc-cf-action-cell {
width: 10%;
}
.brfc-cf-desc-input,
.brfc-cf-valor-input {
padding: 0.5rem;
font-size: 0.8rem;
}
.brfc-cf-rate-header {
flex-direction: column;
align-items: center;
text-align: center;
}
.brfc-cf-actions {
flex-direction: column;
}
.brfc-cf-actions .brfc-btn {
width: 100%;
}
}