:root {
    /* --zb-font: Sans-Serif; */

    --zb-color: var(--zb-color-1);
    --zb-color-1: #DC908E;
    --zb-color-2: #C1819D;
    --zb-color-3: #d4af37;
     --zb-dark: #666;
    /* --zb-black: #262626; */
    /*--zb-gray: #e1e1e1; */
    --zb-light: #f6e9e9;
    /* --zb-info: #2f99c3; */
    /* --zb-success: #64c733; */
    /* --zb-warning: #fba500; */
    /* --zb-alert: #da0b0b; */

    /* --zb-light-dark: #969696; */
    /* --zb-light-hover: #ebebeb; */
    /* --zb-border-color: #d7d7d7; */
    /* --zb-box-shadow: #c8c8c8; */
    /* --zb-filter: rgba(0, 0, 0, .45); */

    /* --zb-contain-lg: 94; */
    /* --zb-contain: 80; */
    /* --zb-contain-md: 62; */
    --zb-contain-sm: 30;

    /* --zb-flex-space: 2.5%; */

    --zb-p-1: 2.5rem;
    --zb-p-2: 3.5rem;
    /* --zb-p-3: 5rem; */
    --zb-m-1: 2.5rem;
    --zb-m-2: 3.5rem;
    /* --zb-m-3: 5rem */

    --zb-header-height: 4.5rem
}


/* trash */

/* * {
    color: transparent !important;
} */

/* Tags */

body {
    font-family: "poppins";
    color: var(--zb-dark);
}
h1, h2, h3, h4 {
    font-size: 1.8rem;
    color: var(--zb-dark);
    letter-spacing: -1px;
}
h2 {
    font-size: 1.6rem;
    /* text-transform: capitalize; */
}
h2.s5, h4 {
    font-size: 1rem;
    font-weight: 500;
}
h3 {
    font-size: 1.32rem;
}
hr {
    border-top: .0625rem solid var(--zb-light)
}

/* header */

body > header:first-of-type {
  height: var(--zb-header-height);
}
body > header:first-of-type > nav {
    border-radius: 1rem;
    padding: .3rem;
    background-color: white;
}
/* body > header:first-of-type > nav:hover {
    box-shadow: 0px 0px 5px var(--zb-color);
} */

body > header:first-of-type {
  height: var(--zb-header-height);
}

body > header:first-of-type .zb-logo {
  max-height: var(--zb-header-height);
}
body > header:first-of-type.fixed + main:not(:has(.app-banner)) {
  padding-top: var(--zb-header-height);
}

/* list */

ul:not(.naked) li,
ol:not(.naked) li {
    margin: .8rem 0;
}

ol {
   counter-reset: count;
   list-style: none;
}
ol li {
   counter-increment: count;
   /* position: relative; */
}
ol li:before{
   content: counter(count)  ".";
   color: var(--zb-color);
   margin-right: .3rem;
} 

/* General */

.btn {
    background: var(--zb-color);
    color: #fff;
    padding-top: 1.1rem;
    padding-bottom: 1.1rem;
    font-weight: bold;
    border: none;
    font-size: 1.2rem;
    border-radius: 1.6rem;
}
.cta {
    border-radius: 1.6rem;
    padding: .5rem
}
body:has(.fixed-ctas) {
    padding-bottom: 8rem
}
.fixed-ctas {
    position: fixed;
    bottom: 0;
    width: 100%;
    left:0;
    background: linear-gradient(0deg, white, transparent);
}
.radius {
    border-radius: 1.6rem;
}
.app-banner:has(img) {
    position: relative;
    min-height: 70vh;
    overflow: hidden;
}
.app-banner:has(img):before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top:0;
    left: 0; 
    background-color: rgba(0,0,0,.6);
    z-index: 1;
}
.app-banner img {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.app-banner:has(img) h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    z-index: 1; 
}
.app-banner:has(img) p {
    color: #fff;
    z-index: 1;
    font-weight: 500;
}

/*  */

/* Form */

label {
    display: inline-block;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Inputs */

zb-input,
zb-textarea {
    width: 100%;
}
textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"] {
    border: 1px solid var(--zb-border-color);
    border-radius: 1.6rem;
    font-size: 1rem;
    height: 3.5rem;
    padding-left: 1rem !important;
    cursor: text;
    outline: none
}
textarea {
    min-height: 11rem;
    padding: .8rem;
    min-width: 100%;
    max-width: 100%;
}

/* Checkbox inputs  */

input[type="checkbox"] {
    -webkit-appearance: none;
    margin-top: 3px;
    position: relative;
    height: 1.1rem;
    width: 1.1rem;
    border: 1px solid var(--zb-border-color);
    border-radius: .2rem;
    outline: 0;
    cursor: pointer;
    overflow: hidden;
}
input[type="checkbox"]:checked {
    border-radius: 100%;
    border: 1px solid var(--zb-color);
}
input[type="checkbox"]:checked:before {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%23ffffff" viewBox="0 0 640 640"><path d="M530.8 134.1C545.1 144.5 548.3 164.5 537.9 178.8L281.9 530.8C276.4 538.4 267.9 543.1 258.5 543.9C249.1 544.7 240 541.2 233.4 534.6L105.4 406.6C92.9 394.1 92.9 373.8 105.4 361.3C117.9 348.8 138.2 348.8 150.7 361.3L252.2 462.8L486.2 141.1C496.6 126.8 516.6 123.6 530.9 134z"/></svg>');
    position: absolute;
    width: 100%;
    background: var(--zb-color);
}

/* Radio inputs  */

input[type="radio"] {
   -webkit-appearance: none;
   height: 1.3rem;
   width: 1.3rem;
   border: solid 1px #aaa;
   border-radius: 50%;
   outline: 0;
   cursor: pointer;
}
input[type="radio"]:checked {
   content: "";
   display: block;
   background: #fff;
   background: radial-gradient(circle, var(--zb-color) 35%, #fff 45%);
}

/* - Checkbox/Radio Card */

.sl-radio-card {
    display: flex;
    align-items: center;
    cursor: pointer;
    border-radius: 10rem;
    outline: 3px var(--zb-light) solid;
    padding: 3px;
}
.sl-radio-card > input[type="radio"],
.sl-radio-card > input[type="radio"]:checked,
.sl-radio-tag > input[type="radio"],
.sl-radio-tag > input[type="radio"]:checked,
.sl-checkbox-tag > input[type="checkbox"] {
   -webkit-appearance: none;
    background: transparent;
    border: none;
    box-shadow: none;
    outline: none;
    position: absolute;
    z-index: -1;
}
.sl-radio-card:has(input[type="radio"]:checked) {
   outline: 3px solid var(--zb-color);
}
.sl-radio-card > span {
   margin-left: .8rem;
}

/* - Checkbox/radio Tag */

.sl-checkbox-tag,
.sl-radio-tag {
    border: solid 1px var(--zb-color-2);
    color: var(--zb-color-2);
    padding: .3rem; 
    border-radius: 3rem;
}
.sl-checkbox-tag:has(input[type="checkbox"]:checked),
.sl-radio-tag:has(input[type="radio"]:checked) {
    background: var(--zb-color-1);
    color: #fff
}

/* Checkbox switch */

label.sl-switch {
    position: relative;
    display: inline-block;
    height: 1.9rem;
    min-width: 3.5rem;
    max-width: 3.5rem;
    color: transparent;
    background: var(--zb-light);
    border: solid 1px var(--zb-color);
    border-radius: 1rem;
    cursor: pointer;
    vertical-align: middle;
    margin-bottom: 0;
    overflow: hidden;
}
label.sl-switch:has(input[type="checkbox"]:checked) {
    background: var(--zb-color);
}
label.sl-switch input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    box-shadow: none;
    position: absolute;
    left: 0;
    border: solid 2px var(--zb-light);
    border-radius: 1rem;
    height: 1.8rem;
    width: 1.8rem;
    background: var(--zb-color);
    transition: left .1s;
    margin: 0;
}
label.sl-switch input[type="checkbox"]:checked {
    left: calc(100% - 1.8rem);
    border: solid 2px var(--zb-color);
    background: var(--zb-light);
}
label.sl-switch input[type="checkbox"]:checked:before {
    content: '';
}

/* Pwd input switcher */

zb-input .e\:show-pwd {
   position: absolute;
   display: flex;
   justify-content: center;
   align-items: center;
   right: 0;
   width: 3rem;
   height: 100%;
   cursor: pointer;
}
zb-input .e\:show-pwd > img:last-of-type {
   display: none;
}
zb-input .e\:show-pwd.pdl-visible > img:first-of-type {
   display: none;
}
zb-input .e\:show-pwd.pdl-visible > img:last-of-type {
   display: inline;
}

/* Popup */

[zb-notification] > :first-child {
    /* box-shadow: 0px 3px 13px rgba(0, 0, 0, .5); */
    box-shadow: 0px 1px 5px #ccc;
    border-radius: .7rem;
    max-width: 22rem;
}