@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');


/* ----- Variables ----- */
:root {
    --clr-primary: #55B030;
    --clr-primary-dark: #4A9B2A;
    --clr-text: #2E2D2C;
    --clr-text-invert: #fff;
    --clr-bg-light: #fff;
    --clr-bg: #f5f5f5;
    --clr-bg-dark: #f0f0f0;

    --timing: .3s ease-in-out;
}



/* ----- General styling ----- */
* { box-sizing: border-box; margin: 0; padding: 0; scroll-behavior: smooth; }
body { font-family: 'Poppins', sans-serif; margin: 0; padding: 0; background-color: var(--clr-bg); color: #333; min-height: 100vh; }
main { min-height: calc(100vh - 80px - 32px); }
.container { max-width: 1600px; width: 100%; margin: 0 auto; padding: 0 16px; }


.mtc-header { margin-bottom: 32px; }
.mtc-nav { display: flex; justify-content: space-between; align-items: center; background-color: var(--clr-primary); color: var(--clr-text-invert); min-height: 80px; }
.mtc-nav .container { display: flex; justify-content: space-between; align-items: center; }
.mtc-nav--sub { display: flex; justify-content: space-between; align-items: center; background-color: var(--clr-primary-dark); color: var(--clr-text-invert); min-height: 60px; }
.mtc-nav--sub .container { display: flex; justify-content: space-between; align-items: center; }

.mtc-nav .mtc-nav__menu { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.mtc-nav .mtc-nav__link { background-color: var(--clr-bg-light); color: var(--clr-text); padding: 8px 16px; border-radius: 8px; text-decoration: none; transition: background-color var(--timing), color var(--timing); }
.mtc-nav .mtc-nav__link:hover { background-color: var(--clr-bg-dark); }
.mtc-nav--sub .mtc-nav__link { padding: 4px 8px; }



.mtc-footer { background-color: var(--clr-primary); }
.mtc-footer .container { padding: 30px 20px; }
.mtc-footer p { color: var(--clr-text-invert); }

section .inner { display: flex; flex-direction: column; gap: 16px; padding-bottom: 64px; padding-top: 16px; }
.mtc-section .section__title { display: flex; justify-content: space-between; align-items: center; }

h2 { font-size: 40px; }
h2 { font-size: 32px; }
h3 { font-size: 24px; margin: 8px 0; }
p { font-size: 16px; line-height: 1.2; }
a { color: var(--clr-primary); text-decoration: none; transition: color var(--timing); }
ul { list-style: none; padding: 0; }

.strong,.bold { font-weight: bold; }
.italic { font-style: italic; }

hr { border: none; border-top: 1px solid var(--clr-text); margin: 8px 0; opacity: .6; }



/* ----- Inputs ----- */
.mct-input-group { display: flex; flex-direction: column; gap: 4px; position: relative; }
.mct-input-group input { background-color: var(--clr-bg-dark); border: 1px solid var(--clr-bg-dark); padding: 0; padding-left: 4px; border-radius: 4px; outline: none; transition: border-color var(--timing); appearance: textfield; -webkit-appearance: textfield; }

.mct-output-group { display: flex; flex-direction: column; gap: 4px; position: relative; }

@media (min-width: 568px) {
    .mct-input-group { display: flex; justify-content: space-between; align-items: center; flex-direction: row; gap: 16px; }
    .mct-input-group::after { content: ""; position: relative; width: 100%; height: 1px; position: absolute; bottom: 4px; left: 0; z-index: 1; border-bottom: 1px dotted var(--clr-text); }
    .mct-input-group > * { background-color: var(--clr-bg-light); position: relative; z-index: 2; }

    .mct-output-group { display: flex; justify-content: space-between; align-items: center; flex-direction: row; gap: 16px; }
    .mct-output-group::after { content: ""; position: relative; width: 100%; height: 1px; position: absolute; bottom: 4px; left: 0; z-index: 1; border-bottom: 1px dotted var(--clr-text); }
    .mct-output-group > * { background-color: var(--clr-bg-light); position: relative; z-index: 2; }
}


/* The switch - the box around the slider */
.mtc-switch { flex-grow: 0; flex-shrink: 0; display: flex; align-items: center; gap: 8px; }
.switch { position: relative; display: inline-block; width: 48px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }

/* The slider */
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: all .3s; }
.slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 4px; bottom: 4px; background-color: white; transition: all .3s; }

input:checked + .slider { background-color: var(--clr-primary); }
input:checked + .slider:before { -webkit-transform: translateX(24px); -ms-transform: translateX(24px); transform: translateX(24px); }

/* Rounded sliders */
.slider.round { border-radius: 32px; }
.slider.round:before { border-radius: 50%; } 



/* ----- Dropdowns ----- */
.mtc-dropdown { cursor: pointer; padding: 16px; background-color: var(--clr-bg-light); border-radius: 8px; border: 1px solid var(--clr-bg-light); transition: border var(--timing); }
.mtc-dropdown.--active { border: 1px solid var(--clr-primary); }
.mtc-dropdown__btn { font-weight: bold; display: flex; justify-content: space-between; align-items: center; }
.mtc-dropdown__description { margin-top: 8px; }
.mtc-dropdown__items { margin-top: 8px; display: grid; gap: 16px; grid-template-columns: repeat( auto-fit, minmax(calc(100% / 5), 1fr) ); }
.mtc-dropdown__icon { display: grid; place-items: center; width: 16px; height: 16px; transform: rotate(0deg); transition: transform var(--timing); }

.mtc-dropdown .mtc-dropdown__content { max-height: 0; opacity: 0; overflow: hidden; transition: max-height var(--timing), opacity var(--timing); }
.mtc-dropdown.--active .mtc-dropdown__content { max-height: 2000px; opacity: 1; display: block; }
.mtc-dropdown.--active .mtc-dropdown__icon { transform: rotate(180deg); }



/* ----- Main ----- */
.mtc-main--selection .inner { --gc: 3; display: grid; gap: 64px; grid-template-columns: repeat(var(--gc), 1fr); margin: 16px 0; }
.mtc-main--calculator > .container { display: grid; gap: 64px; grid-template-columns: 1fr 400px; }
.mtc-main--ad-calculator { padding-bottom: 32px; }
.mtc-main--ad-calculator .container > .inner { --gc: 1; display: grid; grid-template-columns: repeat(var(--gc), 1fr); gap: 32px; }

@media (min-width: 1200px) {
    .mtc-main--ad-calculator .container > .inner { --gc: 2; gap: 64px; }
}



/* ----- Sidebar ----- */
/** Comment out to disable sticky sidebar */
.mtc-sidebar--sticky .inner { position: sticky; top: calc(32px); max-height: calc(100vh - 32px - 32px); overflow-y: auto; padding-right: 8px; }



/* ----- Overviews ----- */
.mtc-overview + .mtc-overview { margin-top: 64px; }
.mtc-overview__items { display: flex; flex-direction: column; gap: 16px; }
.mtc-overview__item { display: flex; justify-content: space-between; gap: 16px; }
.mtc-overview__value { flex-shrink: 0; }
.mtc-overview__total { display: flex; flex-direction: column; gap: 16px; margin-top: 16px;}
.mtc-overview__header { margin-top: 16px; }
.mtc-overview__description { font-style: italic; }



/* ----- Overviews ----- */
.mtc-main--ad-calculator section { display: none; background-color: var(--clr-bg-light); border-radius: 8px; padding: 16px; border: 1px solid var(--clr-bg-light); transition: border-color var(--timing); height: fit-content; }
.mtc-main--ad-calculator section.--active { display: block; }
.mtc-main--ad-calculator section .group { display: flex; flex-direction: column; gap: 16px; margin-top: 32px; }
.mtc-main--ad-calculator .container .section__header { gap: 8px; }

@media (min-width: 568px) {
    .mtc-main--ad-calculator section .group { display: block; margin-top: 16px; }
    .mtc-main--ad-calculator section .group + .group { margin-top: 32px; }
    .mtc-main--ad-calculator .container .section__header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
}



/* ----- Cards ----- */
.mtc-card { background-color: var(--clr-bg-light); padding: 16px; border-radius: 8px; display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--clr-bg-light); transition: border-color var(--timing); }
.mtc-card :is(h1,h2,h3,h4,h5,h6,p,a,span,strong,em,label,input) { color: var(--clr-text); margin: 0; }
.mtc-card:hover { border-color: var(--clr-primary); }

/* Item card */
.mtc-card--item { background-color: var(--clr-bg); padding: 16px; border-radius: 8px; display: flex; flex-direction: column; gap: 8px; transition: color var(--timing), background var(--timing); }
.mtc-card--item:has(input:checked) { background-color: var(--clr-primary); }
.mtc-card--item:has(input:checked) :is(h1,h2,h3,h4,h5,h6,p,a,span,strong,em,label) { color: var(--clr-text-invert) !important; }
.mtc-card--item input { background-color: var(--clr-bg-light); border: unset; padding: 4px 8px; border-radius: 8px; outline: unset !important; box-shadow: unset !important; }
.mtc-card--item input:is([type="checkbox"],[type="radio"]) { display: none; }
.mtc-card--item .mtc-card__title { font-weight: bold; }
.mtc-card--item :is(.mtc-card__variable, .mtc-card__custom) { display: flex; align-items: center; gap: 8px; padding: 8px 0; }