:root {
    --bulma-body-background-color: hsl(0, 0%, 100%);
    --bulma-body-color: hsl(0, 0%, 70.2%);
    --bulma-dark-h: 0;
    --bulma-dark-s: 9%;
    --bulma-dark-l: 15%;
    --bulma-darker-h: 0;
    --bulma-darker-s: 8.2%;
    --bulma-darker-l: 11.96%;
    --bulma-primary-90-l: 96%;
    --bulma-text-h: 0;
    --bulma-text-s: 0%;
    --bulma-text-l: 35%;
    --bulma-primary-h: 13;
    --bulma-primary-s: 100%;
    --bulma-primary-l: 58%;
    --bulma-light-l: 97%;
    /* button */
    --bulma-button-h: 0;
    --bulma-button-s: 0%;
    --bulma-button-color-l: 100%;
    /* navbar */
    --bulma-background: hsl(var(--bulma-dark-h), var(--bulma-dark-s), calc(var(--bulma-dark-l) - 5%));
    /* hero */
    --bulma-hero-h: 0;
    --bulma-hero-s: 0%;
    --bulma-hero-l: 69%;
    /* section */
    /* typography */
    --bulma-text-strong: hsl(0, 9%, 15%);
    --bulma-subtitle-color: hsl(0, 0, 35%);
    /* Custom variables */
    --navbar-height: 4.5rem;
    --window-border-radius: 5px;
    --bulma-hr-background-color: hsl(0, 0%, 85.1%);
    --bulma-hr-height: 0.1rem;
}

/* Billing Toggle */

.billing-toggle-container {
    background-color: hsla(0, 0%, 0%, 20%);
    padding: 0.3rem;
    border-radius: 8px;
    border: 1px solid hsl(0, 0%, 34.9%);
    display: flex;
    gap: 0.3rem;
    width: fit-content;
}

.billing-toggle-container .toggle {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1rem;
    font-weight: 800;
    color: var(--bulma-body-color);
    border: none;
    border-radius: 4px;
    padding: 0.5rem 1rem;
    transition: background-color 0.2s ease;
}

.billing-toggle-container .toggle:not(.is-active):hover {
    background-color: hsla(1, 100%, 100%, 0.03);
    transition: background-color 0.3s ease;
}

.billing-toggle-container .toggle.is-active {
    color: white;
    background-color: hsl(0, 8.7%, 18.04%);
    border: 1px solid hsl(0, 0%, 34.9%);
    padding: 0.5rem 1.5rem;
}

.toggle .toggle-tag {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 0.75rem;
    font-weight: 800;
    background-color: hsla(12.9, 100%, 58.04%, 15%);
    color: hsl(12.9, 100%, 58.04%);
    border-radius: 2px;
    padding: 0.2rem 0.3rem;
}

/* Plans */

.plan-box {
    background-color: hsl(0, 8.7%, 18.04%);
    border: 1px solid hsl(0, 0%, 34.9%);
    border-radius: 6px;
    padding: 1.3rem;
}

.plan-box:not(.is-active):hover {
    background-color: hsl(0, 8.7%, 20%);
    bottom: 2px;
    position: relative;
    transition: background-color 0.4s ease, bottom 0.4s ease;
}

.plan-box.is-active {
    background-color: hsla(12.9, 100%, 58.04%, 5%);
    border: 1px solid hsl(12.9, 100%, 58.04%)
}

.is-jetbrains-mono-extrabold {
    font-family: "JetBrains Mono ExtraBold", monospace;
    font-weight: 700;
}

.plan-box .tag {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 0.75rem;
    font-weight: 800;
    background-color: hsl(0, 8.66%, 24.9%);
    color: var(--bulma-body-color);
    border-radius: 2px;
    padding: 0.2rem 0.3rem;
}

/* Plan details */

.plan-detail-box {
    background-color: hsl(0, 8.7%, 18.04%);
    border: 1px solid hsl(0, 0%, 34.9%);
    border-radius: 6px;
    padding: 2rem;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

/* Bulma add-ons */

.is-galano-grotesque-bold {
    font-family: "GalanoGrotesqueBold", sans-serif;
    font-weight: 700;
}

.is-galano-grotesque-medium {
    font-family: "GalanoGrotesqueMedium", sans-serif;
    font-weight: 500;
}

.is-galano-grotesque-regular {
    font-family: "GalanoGrotesqueRegular", sans-serif;
    font-weight: 400;
}

.is-plus-jakarta-sans {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 400;
}

.is-plus-jakarta-sans-bold {
    font-family: "Plus Jakarta Sans Bold", sans-serif;
    font-weight: 700;
}

hr.is-dark {
    background-color: hsla(0, 0%, 85%, 0.1);
}

.has-background-dark .title {
    font-family: "Plus Jakarta Sans Bold", sans-serif;
    color:hsl(0, 0%, 100%);
}

.has-background-dark .subtitle {
    font-family: "Plus Jakarta Sans", sans-serif;
    color: var(--bulma-body-color);
}

.button.is-outlined:hover {
    --bulma-button-border-width: 1px;
    background-color: hsla(var(--bulma-primary-h), var(--bulma-primary-s), calc(var(--bulma-primary-l), 0.01));
}

.has-background-dark .label {
    color: white;
    font-family: "Plus Jakarta Sans", sans-serif;
}

.has-text-body {
    color: var(--bulma-body-color)
}

.is-striked {
    text-decoration: line-through;
}

/* form */

.has-background-dark .input, .has-background-dark .select select, .has-background-dark .textarea {
    background-color: hsl(var(--bulma-darker-h), var(--bulma-darker-s), var(--bulma-darker-l));
    border-color: hsl(0, 0%, 34.9%);
    border-radius: 4px;
    color: white;
}

.has-background-dark .input::placeholder, .has-background-dark .select select::placeholder, .has-background-dark .textarea::placeholder {
    color: hsl(0, 0%, 34.9%);
}

.control.has-icons-left .icon, .control.has-icons-right .icon.password-toggle {
    pointer-events: auto;
    cursor: pointer;
    z-index: 10;
}

.select, .select select { 
    width: 100%;
}

/* radio plugin */

.b-radio.radio input[type="radio"] + .check {
    border: 3px solid hsl(0, 0%, 34.9%);
}

.b-radio.radio input[type="radio"]:checked + .check.is-primary {
    border-color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l));
}

.b-radio.radio input[type="radio"] + .check.is-primary::before {
    background: hsl(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l));
}

.b-radio.radio:hover input[type="radio"]:not(:disabled) + .check.is-primary {
    border-color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l));
}

.b-radio.radio input[type="radio"]:focus:checked + .check.is-primary {
    box-shadow: unset;
}

/* checkbox plugin */

.b-checkbox label::before {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    left: 0;
    top: 1px;
    border: 2px solid hsl(0, 0%, 34.9%);

    border-radius: 3px;

    background-color: hsl(var(--bulma-darker-h), var(--bulma-darker-s), var(--bulma-darker-l));
    transition: background .1s ease-in-out;
}

.is-dark input[type="checkbox"]:checked + label::after {
    color: var(--bulma-body-color);
}

.b-checkbox label::after {
    position: absolute;
    width: 20px;
    height: 20px;
    font-size: 16px;
    color: hsl(0, 0%, 34.9%);
}

.b-checkbox label {
    padding-left: 10px;
    font-size: 1rem;
    color: var(--bulma-body-color);
}

.is-dark input[type="checkbox"]:checked + label::before {
    background-color: hsl(var(--bulma-darker-h), var(--bulma-darker-s), var(--bulma-darker-l));
    border-width: 2px;
    border-color: hsl(0, 0%, 34.9%);
}

/* divider plugin */

.is-divider-vertical[data-content]::after, .is-divider[data-content]::after {
    background-color: hsl(var(--bulma-dark-h), var(--bulma-dark-s), var(--bulma-dark-l));
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--bulma-body-color);
}

@media screen and (min-width: 769px), print {
    .is-divider-vertical::before {
        border-left: .1rem solid hsl(0, 0%, 34.9%);
    }
}