#loginModal.public-login {
    --login-gold: #ffcf4c;
    --login-edge: #fff2a1;
    --login-blue: #062b55;
    --login-navy: #04162d;
    --login-gutter: clamp(15px, 4.1vw, 55px);
    --login-accent: linear-gradient(#fff094, #ffce50 45%, #e69a0f);
    padding: 0;
    color: #f7f9ff;
    font: 1rem/1.25 Arial, sans-serif;
}
body:has(#loginModal.show) .modal-backdrop.show { opacity: .73; }
#loginModal.public-login [hidden] { display: none !important; }
#loginModal.public-login .modal-dialog {
    --bs-modal-margin: 15px;
    width: min(92%, 1080px);
    max-width: none;
    margin-inline: auto;
}
#loginModal.public-login .public-login-content {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    max-width: none;
    border: 3px solid var(--login-gold);
    border-radius: clamp(25px, 4.9vw, 55px) !important;
    background:
        radial-gradient(ellipse at 50% 72%, #275582, transparent 66%),
        radial-gradient(ellipse at 55% 12%, #064677, transparent 54%),
        linear-gradient(150deg, var(--login-blue), var(--login-navy) 60%, #0b2b4e);
    color: #f7f9ff;
    font-family: Arial, sans-serif;
    box-shadow: inset 0 0 0 1px #fff2ab, 0 0 26px #ecad3759, 0 20px 45px #020b1980;
}
.public-login-content::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    z-index: -1;
    width: 155px;
    height: 135px;
    background: url("../img/natal-login-referencia.png") no-repeat -55px -54px / 1049.6px 959.2px;
    mask-image: radial-gradient(ellipse at top left, #000 57%, transparent 88%);
    clip-path: polygon(0 0, 100% 0, 95% 24%, 78% 56%, 69% 100%, 0 100%);
    pointer-events: none;
}
#loginModal.public-login .public-login-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(10px, 2.5vw, 28px);
    margin-inline: clamp(14px, 5%, 54px);
    padding: clamp(21px, 4vw, 46px) 0 clamp(12px, 2.1vw, 25px) clamp(30px, 8vw, 109px);
    border: 0;
    border-bottom: 1px solid #50b3efa8;
    background: transparent;
    box-shadow: 0 8px 13px -12px #64c8ff;
}
.public-login-person {
    flex: none;
    color: var(--login-gold);
    font-size: clamp(2.3rem, 6vw, 4.7rem);
    line-height: 1;
}
.public-login-heading { min-width: 0; padding-inline-start: clamp(10px, 2vw, 25px); border-inline-start: 1px solid #f9f4ddc7; }
.public-login-heading h2 {
    margin: 0 0 5px;
    color: #fff;
    font-size: clamp(1.36rem, 4.05vw, 2.9rem);
    line-height: 1.06;
    font-weight: 800;
    letter-spacing: -.035em;
}
.public-login-heading p { margin: 0; color: #f2f6fd; font-size: clamp(.88rem, 2.4vw, 1.57rem); }
#loginModal.public-login .public-login-close {
    display: grid;
    place-items: center;
    flex: none;
    align-self: flex-start;
    width: clamp(40px, 6.15vw, 67px);
    height: clamp(40px, 6.15vw, 67px);
    margin: 0 0 0 auto;
    padding: 0;
    opacity: 1;
    color: #f7f9ff;
    background: linear-gradient(#092848, #03162e 62%);
    border: 2px solid var(--login-gold);
    border-radius: clamp(10px, 1.45vw, 17px);
    box-shadow: inset 0 1px #fff6bd, 0 3px 8px #010b1c80;
}
.public-login-close svg { width: 58%; height: 58%; }
.public-login-close:hover { filter: brightness(1.25); }
#loginModal.public-login .public-login-body {
    padding: clamp(13px, 2.25vw, 28px) var(--login-gutter) 0;
    background: transparent;
}
.public-login-summary {
    position: relative;
    display: flex;
    align-items: center;
    gap: clamp(10px, 3vw, 30px);
    min-height: clamp(63px, 10vw, 127px);
    padding: clamp(8px, 1.8vw, 19px) clamp(11px, 3vw, 35px);
    background: radial-gradient(ellipse at 48% -8%, #2a6590, transparent 60%), linear-gradient(110deg, #04162c, #062b53 65%, #04172a);
    border: 2px solid var(--login-edge);
    border-radius: clamp(16px, 2.6vw, 32px);
    box-shadow: inset 0 0 0 1px #e9aa3a, 0 0 16px #f6c45658;
    font-size: clamp(1rem, 3.05vw, 2.2rem);
}
.public-login-summary::after {
    content: "";
    position: absolute;
    inset: 8px 8px auto auto;
    width: min(16%, 108px);
    height: min(86%, 91px);
    background: url("../img/natal-login-referencia.png") no-repeat -818px -244px / 1049.6px 959.2px;
    mask-image: radial-gradient(ellipse, #000 47%, transparent 77%);
    pointer-events: none;
}
.public-login-summary .bi {
    display: grid;
    place-items: center;
    flex: none;
    width: clamp(42px, 8vw, 97px);
    aspect-ratio: 1.15;
    color: var(--login-gold);
    background: linear-gradient(#335670, #091929);
    border-radius: 21%;
    box-shadow: inset 0 0 0 1px #e3eff321;
    font-size: clamp(1.4rem, 5.4vw, 4rem);
    line-height: 1;
}
#loginModal.public-login .public-login-summary p { position: relative; z-index: 1; margin: 0; color: #f7f9ff; overflow-wrap: anywhere; }
.public-login-summary strong { color: var(--login-gold); font-weight: 850; }

.public-login-methods {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    width: min(100%, 500px);
    margin: clamp(11px, 1.5vw, 17px) auto clamp(20px, 3vw, 39px);
    padding: 4px;
    border: 1px solid #abcaee7a;
    border-radius: 40px;
    background: #041d38c4;
}
.public-login-methods label {
    display: grid;
    place-items: center;
    min-height: clamp(31px, 3.6vw, 40px);
    padding: 4px;
    border-radius: 40px;
    color: #fff;
    font-size: clamp(.81rem, 1.4vw, 1rem);
    font-weight: 700;
    cursor: pointer;
}
.public-login-methods input:checked + label { color: #201300; background: var(--login-accent); box-shadow: inset 0 0 0 1px #ffed8c; }
.public-login-methods input:focus-visible + label { outline: 2px solid #fff; outline-offset: 2px; }
.public-login-methods label:hover { box-shadow: inset 0 0 0 1px #fff1a6; }

.public-login-field {
    --login-flag: clamp(67px, 15vw, 164px);
    position: relative;
    min-height: clamp(68px, 10.6vw, 136px);
    margin: 0 0 clamp(12px, 2.2vw, 23px);
    padding: 1px;
    border: 2px solid var(--login-edge);
    border-radius: clamp(19px, 2.8vw, 34px);
    background: linear-gradient(#fff, #f8f3e9 74%, #f3e8d6);
    box-shadow: inset 0 0 0 2px #f1b740, 0 0 17px #ffce6359;
    color: #172137;
}
.public-login-field + .public-login-field:not([hidden]) { margin-top: clamp(24px, 3.6vw, 43px); }
.public-login-field > label {
    position: absolute;
    z-index: 2;
    inset: 0 auto auto 50%;
    transform: translate(-50%, -52%);
    display: flex;
    align-items: center;
    gap: clamp(5px, 1vw, 13px);
    padding: 5px clamp(13px, 3vw, 32px);
    white-space: nowrap;
    color: #f8f9ff;
    background: linear-gradient(108deg, #041a35, #073f79);
    border: 2px solid var(--login-edge);
    border-radius: 40px;
    box-shadow: inset 0 -2px #dfa61d, 0 3px 4px #020f2752;
    font-size: clamp(.95rem, 2.45vw, 1.84rem);
    font-weight: 650;
}
.public-login-field > label .bi { color: var(--login-gold); font-size: 1.15em; line-height: 1; }
#loginModal.public-login .public-login-field input {
    display: block;
    width: 100%;
    min-height: clamp(62px, 10vw, 128px);
    padding: 10px clamp(15px, 4vw, 44px) 0;
    border: 0;
    border-radius: inherit;
    outline-offset: -5px;
    background: transparent;
    color: #152036;
    font: 500 clamp(1.17rem, 4.65vw, 3.35rem)/1.1 Arial, sans-serif;
}
#loginModal.public-login .public-login-field input::placeholder { color: #77797d; opacity: 1; }
.public-login-field:focus-within { box-shadow: inset 0 0 0 2px #f1b740, 0 0 0 2px #f3db7d, 0 0 20px #ffcc56a3; }
.public-login-phone .iti { display: block; border-radius: inherit; }
#loginModal.public-login .public-login-phone input { padding-inline-start: calc(var(--login-flag) + clamp(10px, 3.2vw, 43px)); }
.public-login-phone .iti__flag-container { inset: 24% auto 16% 0; width: var(--login-flag); padding: 0; border-inline-end: 1px solid #8a909b; }
.public-login-phone .iti__selected-flag { justify-content: center; padding: 0; }
.public-login-phone .iti__selected-flag .iti__flag { transform: scale(2.55); margin-inline: 13px; }
.public-login-phone .iti__arrow { border-width: 5px 5px 0; }
.public-login-phone .iti__country-list { max-width: min(320px, 73vw); color: #152036; font-size: .9rem; }
.public-login-phone:not(:has(.iti))::after {
    content: "🇧🇷";
    position: absolute;
    inset: 23% auto 16% 0;
    width: var(--login-flag);
    display: grid;
    place-items: center;
    border-inline-end: 1px solid #8a909b;
    font-size: clamp(1.45rem, 4vw, 3rem);
    pointer-events: none;
}

.public-login-feedback {
    display: flex;
    align-items: center;
    gap: clamp(7px, 2.1vw, 22px);
    min-height: clamp(39px, 6.65vw, 77px);
    margin-bottom: clamp(12px, 2.2vw, 25px);
    padding: 7px clamp(10px, 2.6vw, 29px);
    border: 2px solid #fff0f2;
    border-radius: clamp(13px, 1.9vw, 22px);
    background: linear-gradient(104deg, #ffe0e5, #fac6cb 48%, #deb2bf);
    box-shadow: 0 0 16px #ffd5e246;
    color: #a90f12;
    font-size: clamp(.84rem, 2.55vw, 1.83rem);
}
.public-login-feedback .bi { flex: none; font-size: 1.48em; line-height: 1; }
#loginModal.public-login .public-login-submit {
    display: grid;
    place-items: center;
    width: 100%;
    min-height: clamp(54px, 9vw, 106px);
    margin: 0;
    border: 2px solid var(--login-edge);
    border-radius: clamp(19px, 3vw, 37px);
    background: var(--login-accent);
    color: #161000;
    box-shadow: inset 0 0 0 2px #fff2a4a8, 0 0 17px #f1ba4c8a, 0 5px 12px #020e217a;
    font-size: clamp(1.22rem, 4.05vw, 2.95rem);
    font-weight: 850;
    letter-spacing: -.035em;
}
#loginModal.public-login .public-login-submit:hover { filter: brightness(1.06); }
.public-login-submit .btn-content { gap: clamp(9px, 2vw, 23px); }
.public-login-submit .btn-content > .bi:first-child { padding-inline-end: clamp(8px, 2.3vw, 31px); border-inline-end: 1px solid #7e55067d; }
.public-login-submit .progress-fill { background: #b17b255c; }
.public-login :is(button, input):focus-visible { outline: 2px solid var(--login-gold); }

.public-login-art {
    position: relative;
    height: clamp(94px, 14vw, 158px);
    margin-inline: calc(-1 * var(--login-gutter));
    pointer-events: none;
}
.public-login-art span, .public-login-art::before, .public-login-art::after { position: absolute; bottom: 0; pointer-events: none; }
.public-login-art span {
    inset-inline: 0;
    width: min(340px, 75%);
    height: min(100%, 147px);
    margin-inline: auto;
    background: url("../img/natal-login-referencia.png") no-repeat center -823px / 1154.56px 1055.12px;
    mask-image: radial-gradient(ellipse at 50% 78%, #000 43%, transparent 82%);
}
.public-login-art::before, .public-login-art::after {
    content: "";
    width: clamp(86px, 17vw, 190px);
    height: min(100%, 141px);
    background: url("../img/natal-login-referencia.png") no-repeat -65px -830px / 1154.56px 1055.12px;
}
.public-login-art::before {
    left: 0;
    mask-image: radial-gradient(ellipse at bottom left, #000 51%, transparent 85%), linear-gradient(transparent, #000 22%);
    mask-composite: intersect;
}
.public-login-art::after {
    right: 0;
    background-position: -900px -830px;
    mask-image: radial-gradient(ellipse at bottom right, #000 51%, transparent 85%), linear-gradient(transparent, #000 22%);
    mask-composite: intersect;
}
@media (max-width: 600px) {
    #loginModal.public-login .modal-dialog { width: calc(100% - 22px); }
    #loginModal.public-login .public-login-header { padding-inline-start: 19px; }
    .public-login-content::before { width: 93px; height: 96px; background-position: -37px -35px; background-size: 682.24px 623.48px; opacity: .72; }
    .public-login-phone .iti__selected-flag .iti__flag { transform: scale(1.25); margin-inline: 7px; }
    .public-login-art span { background-size: 721.6px 659.45px; background-position: center -511px; }
    .public-login-art::before, .public-login-art::after { background-size: 721.6px 659.45px; }
    .public-login-art::before { background-position: -40px -514px; }
    .public-login-art::after { background-position: -597px -514px; }
}
@media (max-width: 360px) {
    #loginModal.public-login .public-login-header { padding-inline-start: 7px; }
    .public-login-person { font-size: 1.85rem; }
}