/*//////////////////////  login_hosorscope.css  ////////////////////////////*/
/* ---------- Base ---------- */
body{
margin: 0;
padding: 0;
background: transparent  !important;
height: 100vh;
width: 100%;
overflow: hidden !important;
touch-action: manipulation;
overscroll-behavior: none !important;
font-family: 'Manrope', sans-serif;
}
html {
background-color:#1e66a7b8  !important;
}
/* ---------- Splash background ---------- */
#splash {
position: fixed;
top: 0; left: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
background-size: cover;
background-position: center;
z-index: 1000;
/* not a flex container — we'll use a dedicated center overlay for centering the clock */
}
/*
#splash {
background: url('/dailyLoginImageFolder/tree-4316994_1920_zakyimedia.jpg') no-repeat center center fixed;
}
*/
/* dedicated full-screen centering layer for the clock so it's always perfectly centered */
#centerArea {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
pointer-events: auto; /* keep this if you want #centerArea to be interactive */
}
/*Remember Me Button Styles */
.btn-outline-primary {
color: #fff !important;
}
.btn-outline-primary:hover {
color: blue !important;
}
.btn-check:checked+.btn {
background-color: #0d6efd7a !important;
color: #fff !important;
}
/* ---------- Splash overlay (modal) ---------- */
#splash_overlay {
position: fixed;
top: -100vh;
left: 0;
color: #fff;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.2);
z-index: 9999;
display: none;
transition: top 1s ease, opacity 1s ease;
}
#splash_overlay a {
color: #fff;	
}
#splash_overlay input {
background: transparent;
border: 1px solid #fff;
color: white;
}
/* Applies only to inputs inside #splash_overlay */
#splash_overlay ::placeholder {
color: white !important;
opacity: 1;
}
#splash_overlay.active { display: block; top: 0; }
#splash_overlay.exiting { top: -100vh; }
/* small UI elements */
#badge { background: rgb(37 37 37 / 90%); border-radius: 50%; padding: 0.5rem; cursor: pointer; border: solid 1px #80808066; }
#likeTag { position: absolute; right: 48px; width: 140px; top: 7px; font-weight: 600;}
/* ---------- Fixed-position small elements ---------- */
#horoscopeBtnWrapper, #cambox, #tickWrapper, #dayCount, #toggleBtn {
position: fixed;
opacity: 0;
animation-fill-mode: forwards;
}
/* positions */
#messageCenter {
display: none;
opacity: 0;
position: absolute;
top: 80px;
left: 50%;
transform: translateX(-50%);
font-size: 1.1rem;
font-weight: 600;
color: #fff;
transition: opacity 1.2s ease;
z-index: 1100;
}
/* Horoscope CSS Style*/
#horoscopeBtnWrapper {
top: 47px;
left: 30px;
position: absolute;
z-index: 1100; /* above centerArea */
opacity: 0;
animation-name: glideUpToTopLeft;
animation-duration: 1.2s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
}
#cambox {
top: 40px;
right: 30px;
animation-name: glideUpToTopRight;
animation-duration: 1.2s;
animation-timing-function: ease-out;
color: #fff;
position: absolute;
z-index: 1100; /* above centerArea */
}
#toggleBtn {
bottom: 40px;
left: 30px;
animation-name: glideDownFromTop;
animation-duration: 1.2s;
animation-timing-function: ease-out;
z-index: 1000;
}
#authorCard {
position: absolute;
top: 43px;
right: 74px;
background: rgba(255, 255, 255, 0.2);
display: none;
color: #fff;
border: solid 1px #5353534f;
z-index: 1101;
}
#authorCard a {
color: #fff;	
}
#dayCount {
bottom: 40px;
right: 30px;
animation-name: glideDownFromTop;
animation-duration: 1.2s;
animation-timing-function: ease-out;
z-index: 1000;
color: #fff;
font-weight: 600;
}
#tickWrapper {
bottom: 55px;
right: 30px;
animation-name: glideDownFromTop;
animation-duration: 1.2s;
animation-timing-function: ease-out;
z-index: 1000;
}
/* ---------- Animations for fixed items ---------- */
@keyframes glideUpToTopLeft {
0% { transform: translateY(calc(150vh + 80px)); opacity: 0; }
100% { transform: translateY(0); opacity: 1; }
}
@keyframes glideUpToTopRight {
0% { transform: translateY(calc(150vh + 80px)); opacity: 0; }
100% { transform: translateY(0); opacity: 1; }
}
@keyframes glideDownFromTop {
0% { transform: translateY(calc(-150vh - 100px)); opacity: 0; }
100% { transform: translateY(0); opacity: 1; }
}
/* ---------- Clock (center) ---------- */
#clockWrap {
color: #fff;
font-weight: 700;
font-size: 2rem;
text-align: center;
user-select: none;
z-index: 1000;
opacity: 0;
animation-name: glideClockUpFromBottom;
animation-duration: 1.2s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
/* optional delay to make it feel a beat after other elements: */
/* animation-delay: 0.05s; */
}
/* large upward glide from below the viewport to center */
@keyframes glideClockUpFromBottom {
0% { transform: translateY(150vh); opacity: 0; }
100% { transform: translateY(0); opacity: 1; }
}
/* ---------- Message: 40px from top and slides in from right ---------- */
#message {
position: absolute;
top: 80px;
left: 50%;
transform: translateX(-50%);
background-color: rgba(255, 255, 255, 0.3);
padding: 12px 20px;
border-radius: 8px;
opacity: 0;
text-align: center;
color: #fff;
z-index: 1100; /* above the clock */
font-weight: 600;
}
/* Message animation: start off-screen to the right, land at centered translateX(-50%) */
@keyframes glideMessageFromRight {
0% {
transform: translateX(50vw);
opacity: 0;
}
10% {
transform: translateX(-50%);
opacity: 1;
}
85% {
transform: translateX(-50%);
opacity: 1;
}
100% {
transform: translateX(-50%);
opacity: 0;
}
}
/* use the variables you had previously (keeps fade timings intact) */
:root {
--glide-duration: 1.2s;
--fade-delay: 10s;
--fade-duration: 3s;
}
#message.animate {
animation: glideMessageFromRight calc(var(--glide-duration) + var(--fade-delay) + var(--fade-duration)) ease-in-out forwards;
}
/* close button */
#closeSplashBtn {
position: absolute;
bottom: 75px;
left: 55px;
transform: translateX(-50%);
z-index: 1001;
padding: 0.6em 1.2em;
font-size: 1rem;
background-color: rgba(255, 255, 255, 0.1);
color: white;
border: 1px solid white;
border-radius: 50px;
cursor: pointer;
transition: background-color 0.3s ease;
}
#closeSplashBtn:hover { background-color: rgba(255, 255, 255, 0.25); }
/* tick toggles */
#tickToggleOverlay {
position: absolute;
bottom: 85px;
right: 30px;
z-index: 10000;
border: none;
border-radius: 20px;
padding: 6px 12px;
font-size: 1rem;
backdrop-filter: blur(4px);
background: rgba(255, 255, 255, 0.2);
display: inline-flex;
align-items: center;
width: 160px;
justify-content: center;
color: white;
}
#tickToggleBtn {
position: absolute;
bottom: 15px;
right: 0px;
z-index: 999;
background-color: rgba(255,255,255,0.2);
width: 160px;
color: white;
border: none;
border-radius: 20px;
padding: 6px 12px;
font-size: 1rem;
cursor: pointer;
backdrop-filter: blur(4px);
animation: tickFadeIn 1.5s ease 1s forwards;
pointer-events: auto;
}
#tickToggleBtn:hover { background: rgba(229,229,229,0.2); }
/* date styling */
#date { font-family: 'Manrope', sans-serif; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; font-weight: bold; font-size: 1.2rem; }
/* responsive small-screen tweaks */
@media (max-width: 576px) {
#cambox {
top: 95px;
left: 30px;
right: auto;
flex-direction: column-reverse;
align-items: flex-start;
}
#message {
top: 200px;
width: 58%;
}
#authorCard { position: absolute; top: 96px; left: 74px; }
#likeTag { position: absolute; left: 48px; top: 9px; width: 160px; }

#horoscopeBtnWrapper {
top: 30px !important;
position: fixed !important;
}
#messageCenter {
width: 100% !important;
text-align: center !important;
top: 65px;
}
.transparent-round-btn {
margin-top:9px !important;
}
}




}
/* small visual helper styles kept from original file (eye-toggle, toggles, slider, etc.) - unchanged */
.eye-toggle { width: 67px; height: 42px; border-radius: 50%; overflow: hidden; cursor: pointer; transition: all 0.3s ease-in-out; }
.eye-toggle img { width: 30px; height: auto; object-fit: cover; transition: opacity 0.3s ease-in-out; }
.eye-toggle.open img { opacity: 0; }
.input-group-text { color: #555; background-color: transparent !important; border: 1px solid #fff; }
.toggle-switch { position: relative; display: inline-block; width: 48px; height: 26px; touch-action: manipulation; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-switch .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #2196F3; transition: 0.3s; border-radius: 26px; }
.toggle-switch .slider::before { position: absolute; content: ""; height: 20px; width: 20px; left: 3px; bottom: 3px; background-color: white; transition: 0.3s; border-radius: 50%; }
.toggle-switch input:checked + .slider { background-color: #a1c1db; }
.toggle-switch input:checked + .slider::before { transform: translateX(22px); }
.email, .password { font-family: Arial, sans-serif; font-size: 12px; }
/* device-specific rules left as-is in your original file if you need them */
#clock {
font-family: 'Manrope', sans-serif;
font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;
font-size: clamp(4.5rem, 8vw, 7.589rem);
font-weight: bold;
}
/*//////////////////////////////////////////////////*/
.square-box {
max-width: 600px;
min-height: 600px;
}
#formContainer {
width: 100%; 
max-width: 400px; 
margin: 0 auto; 
padding: 0 15px; 
text-align: center;	
}
@media screen and (orientation: landscape) and (max-width: 850px) {
.square-box {
min-height: 375px;
padding-bottom: 1rem !important;
}
#formContainer {
position: relative; /* needed for absolute positioning of the toggle */
}
#toggleBtn2 {
position: fixed;  /* stick to viewport, not container */
left: 20px;       /* 10px from left edge */
bottom: 30px;         /* vertically centered */
transform: translateY(-50%);
z-index: 1000;    /* ensure it sits above other elements */
}
#horoscopeBtnWrapper {
top: 30px !important;
position: fixed !important;
}
}
@media screen and (max-height: 740px) and (orientation: portrait) {
#closeSplashBtn {
bottom: 150px !important;
}
#tickToggleOverlay {
bottom: 150px !important;
}
#likeTag {width: 160px; }
}
h2 {
margin-bottom: 1rem;
}
.form-slider-wrapper {
position: relative;
height: 160px; /* fixed height to prevent jump */
overflow: hidden;
}
.form-slider {
position: relative;
width: 100%;
height: 100%;
}
.form-step {
position: absolute;
top: 0;
left: 0;
width: 100%;
opacity: 0;
transform: translateX(100%);
transition: transform 0.45s cubic-bezier(0.77, 0, 0.175, 1),
opacity 0.45s ease;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.form-step.active {
opacity: 1;
transform: translateX(0);
z-index: 2;
}
.form-step.animate-out-left {
transform: translateX(-40%);
opacity: 0;
z-index: 1;
}
.form-step.animate-out-right {
transform: translateX(40%);
opacity: 0;
z-index: 1;
}
input {
padding: 0.65rem;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 0.95rem;
}
button {
background: #0067b8;
color: white;
padding: 0.65rem;
border: none;
border-radius: 4px;
cursor: pointer;
font-weight: 600;
}
button:hover {
background: #005499;
}
/* Back link staged fade-in */
.back {
color: #0067b8;
cursor: pointer;
font-size: 0.9rem;
opacity: 0;
transform: translateY(5px);
transition: opacity 0.3s ease, transform 0.3s ease;
margin-bottom: 0.75rem;
align-self: flex-start;
}
.form-step.active .back {
opacity: 1;
transform: translateY(0);
transition-delay: 0.15s;
}
/* Buttons staged fade-in */
.form-btn {
opacity: 0;
transform: translateY(5px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.form-step.active .form-btn {
opacity: 1;
transform: translateY(0);
transition-delay: 0.25s;
}
/* Shake animation for errors */
@keyframes shake {
0%, 100% { transform: translateX(0); }
20%, 60% { transform: translateX(-8px); }
40%, 80% { transform: translateX(8px); }
}
.shake {
animation: shake 0.4s ease;
border-color: red !important;
}
/* Error message */
.error {
color: red;
font-size: 0.85rem;
margin-bottom: 0.5rem;
display: none;
}
/* Toggle button placement */
#toggleBtn2 {
margin-top: 15px;
text-align: center;
}
/* Link styling */
.link {
margin-top: 1rem;
font-size: 0.9rem;
}
.link a {
color: #0067b8;
text-decoration: none;
}
.link a:hover {
text-decoration: underline;
}
/*//////////////////////////////////////////////////*/
/* --------------------------------------
🍏 iPhones (Portrait & Landscape)
----------------------------------------- */
/* iPhone SE / 5 / 5S / 5C */
@media screen and (device-width: 320px) and (-webkit-min-device-pixel-ratio: 2) {
#clock {
font-size: 4rem;
}
}
/* iPhone 6/7/8/X/11/12/13/14 (375px) */
@media screen and (device-width: 375px) and (-webkit-min-device-pixel-ratio: 2) {
#clock {
font-size: 4.5rem;
}
}
/* iPhone Plus / Max models (414px) */
@media screen and (device-width: 414px) and (-webkit-min-device-pixel-ratio: 3) {
#clock {
font-size: 5rem;
}
}
/* iPhone 14/15 Pro Max (430px) */
@media screen and (device-width: 430px) and (-webkit-min-device-pixel-ratio: 3) {
#clock {
font-size: 5.2rem;
}
}
/* --------------------------------------
🍏 iPads (Mini, Air, Pro)
----------------------------------------- */
/* iPad Mini, Standard iPad, iPad Air (768–834px) */
@media screen and (min-device-width: 768px) and (max-device-width: 834px) and (-webkit-min-device-pixel-ratio: 2) {
#clock {
font-size: 6.5rem;
}
}
/* iPad Pro 12.9″ (1024px) */
@media screen and (device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
#clock {
font-size: 7rem;
}
}
/* iPad Pro 12.9″ Portrait */
@media screen and (device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
#clock {
font-size: 7.5rem;
}
}
/* iPad Pro 12.9″ Landscape */
@media screen and (device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
#clock {
font-size: 6.5rem;
}
}
/*//////////////////////////////////////////////////*/
/* Non-iOS touch devices (Android tablets/phones) 
@media screen and (hover: none) and (pointer: coarse) and not (-webkit-min-device-pixel-ratio: 2) {
#clock {
font-size: 6.5rem;
}
}
*/
/* Android specific font sizes */
body.android-device.portrait #clock {
font-size: 3rem;
}
body.android-device.landscape #clock {
font-size: 4rem;
}
.noscript-warning {
position: absolute;
top: 1rem;
left: 1rem;
background: rgba(255, 255, 255, 0.8);
padding: 0.5rem 1rem;
border-radius: 0.25rem;
font-weight: bold;
color: #333;
}
/* Horoscope Button */
#horoscopeBtnWrapper {
top: 47px;
left: 30px;
position: absolute;
z-index: 1100; /* same layer as #cambox and #badge */
opacity: 0;
animation-name: glideUpToTopLeft;
animation-duration: 1.2s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
}
.transparent-round-btn {
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.45);
backdrop-filter: blur(4px);
width: 42px;
height: 42px;
border-radius: 50%;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.3s ease, border-color 0.3s ease;
}

.transparent-round-btn:hover {
background: rgba(255, 255, 255, 0.25);
border-color: rgba(255, 255, 255, 0.75);
cursor: pointer;
}
/* Horoscope Modal */
#horoscopeModal {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0,0,0,0.45);
backdrop-filter: blur(4px);
display: none;
justify-content: center;
align-items: center;
z-index: 12000; /* above splash overlay */
}
#horoscopeModalContent {
background: rgba(255,255,255,0.15);
border: 1px solid rgba(255,255,255,0.45);
backdrop-filter: blur(6px);
padding: 25px 30px;
border-radius: 10px;
width: 90%;
max-width: 380px;
text-align: center;
color: white;
position: relative;
}
#horoscopeModalClose {
position: absolute;
top: 8px;
right: 12px;
background: transparent;
border: none;
color: white;
font-size: 1.6rem;
cursor: pointer;
}
#horoscopeEmailForm input {
width: 100%;
padding: 10px;
margin-top: 15px;
background: transparent;
border: 1px solid white;
color: white;
border-radius: 5px;
}
#horoscopeSubmitBtn {
width: 100%;
margin-top: 15px;
padding: 10px;
background: rgba(255,255,255,0.25);
border: 1px solid rgba(255,255,255,0.45);
color: white;
border-radius: 5px;
cursor: pointer;
}
#horoscopeSubmitBtn:hover {
background: rgba(255,255,255,0.35);
}
#horoscopeEmailError {
margin-top: 10px;
color: #ffcccc;
font-size: 0.9rem;
}
/* Horoscope Result Modal */
#horoscopeResultModal {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0,0,0,0.45);
backdrop-filter: blur(4px);
display: none;
justify-content: center;
align-items: center;
z-index: 12000;
}
#horoscopeResultContent {
background: rgba(255,255,255,0.15);
border: 1px solid rgba(255,255,255,0.45);
backdrop-filter: blur(6px);
padding: 25px 30px;
border-radius: 10px;
width: 90%;
max-width: 420px;
text-align: center;
color: white;
position: relative;
}
#horoscopeResultClose {
position: absolute;
top: 8px;
right: 12px;
background: transparent;
border: none;
color: white;
font-size: 1.6rem;
cursor: pointer;
}
.horoscope-text {
margin-top: 15px;
font-size: 1.1rem;
line-height: 1.5;
}
/* Device trust toggle */
#horoscopeDeviceSettings {
margin-top: 20px;
padding-top: 15px;
border-top: 1px solid rgba(255,255,255,0.25);
text-align: left;
font-size: 0.9rem;
color: rgba(255,255,255,0.9);
}
.device-toggle {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
}
.device-toggle input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: white;
cursor: pointer;
}
/**/
.horoscope-header {
text-align: center;
margin-bottom: 1rem;
}
.horoscope-sign {
font-size: 1rem;
letter-spacing: 0.04em;
opacity: 0.9;
margin-bottom: 0.35rem;
font-weight: 500;
}
.horoscope-sign .glyph {
margin-right: 0.35em;
opacity: 0.85;
}
.horoscope-title {
font-size: 1.4rem;
font-weight: 600;
margin: 0;
}
.horoscope-sign-label {
text-align: center;
font-size: 1rem;
font-weight: 500;
letter-spacing: 0.04em;
opacity: 0.9;
margin-bottom: 0.35rem;
}
.horoscope-sign-label .glyph {
margin-right: 0.35em;
opacity: 0.85;
}
/*BRUTE FORCE ATTACK MODAL MESSAGE*/
.horoscope-lockout-modal {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0,0,0,0.45);
backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
z-index: 99999;
}
.horoscope-lockout-content {
background: rgba(255,255,255,0.15);
border: 1px solid rgba(255,255,255,0.45);
backdrop-filter: blur(6px);
padding: 25px 30px;
border-radius: 10px;
width: 90%;
max-width: 380px;
text-align: center;
color: white;
position: relative;
}
.horoscope-lockout-content h2 {
margin-top: 0;
font-size: 1.4rem;
font-weight: 600;
letter-spacing: 0.02em;
}
.horoscope-lockout-content button {
margin-top: 20px;
padding: 10px 20px;
background: rgba(255,255,255,0.25);
border: 1px solid rgba(255,255,255,0.45);
color: white;
border-radius: 5px;
cursor: pointer;
transition: background 0.25s ease;
}
.horoscope-lockout-content button:hover {
background: rgba(255,255,255,0.35);
}
/* Strong selector to override loginForm.css */
#horoscopeEmailModal .glass-btn,
#horoscopePinModal .glass-btn {
padding: 12px 16px;
width: 100%;
border: 1px solid rgba(255,255,255,0.35) !important;
border-radius: 10px !important;
background: rgba(255,255,255,0.22) !important;
backdrop-filter: blur(10px) saturate(180%) !important;
-webkit-backdrop-filter: blur(10px) saturate(180%) !important;
color: white !important;
font-size: 1rem !important;
font-weight: 500 !important;
cursor: pointer;
transition: all 0.25s ease !important;
box-shadow: 0 4px 18px rgba(0,0,0,0.25) !important;
text-shadow: 0 1px 2px rgba(0,0,0,0.35) !important;
}
/* Hover */
#horoscopeEmailModal .glass-btn:hover,
#horoscopePinModal .glass-btn:hover {
background: rgba(255,255,255,0.32) !important;
border-color: rgba(255,255,255,0.55) !important;
box-shadow: 0 6px 22px rgba(0,0,0,0.35) !important;
}
/* Active */
#horoscopeEmailModal .glass-btn:active,
#horoscopePinModal .glass-btn:active {
transform: scale(0.97) !important;
background: rgba(255,255,255,0.18) !important;
}
/* Back button tint */
#horoscopeBackBtn.glass-btn {
background: rgba(255,255,255,0.15) !important;
color: #f0f0f0 !important;
margin-top: 13px !important;
}
/* Back hover */
#horoscopeBackBtn.glass-btn:hover {
background: rgba(255,255,255,0.25) !important;
}
/* Submit + Next tint */
#horoscopeSubmitBtn.glass-btn,
#horoscopeNextBtn.glass-btn {
background: rgba(0,123,255,0.25) !important;
border-color: rgba(0,123,255,0.45) !important;
margin-top: 13px !important;
}
/* Submit + Next hover */
#horoscopeSubmitBtn.glass-btn:hover,
#horoscopeNextBtn.glass-btn:hover {
background: rgba(0,123,255,0.35) !important;
border-color: rgba(0,123,255,0.65) !important;
}




















/* ======================================
SECONDARY LOGIN LAYOUT
====================================== */

#secondary-login{
position:fixed;
inset:0;
display:flex;
justify-content:center;
align-items:center;
padding:20px;
box-sizing:border-box;
z-index:1;
margin-top: auto;
overflow:hidden;
}



/* form width wrapper */

#formContainer{
width:100%;
max-width:420px;
}

/* login card */

#secondaryForm{
background:white;
border-radius:10px;
padding:2rem;
box-shadow:0 10px 40px rgba(0,0,0,0.2);
width:100%;
max-width:420px;
min-height:40vh;
max-height:90dvh;
overflow:hidden;
}
/* header */

.header{
display:flex;
align-items:center;
gap:10px;
margin-bottom:1.5rem;
}

.header h1{
font-size:1.4rem;
margin:0;
flex:1;
text-align:center;
}

.back-btn{
background:none;
border:none;
font-size:1rem;
cursor:pointer;
color:#0067b8;
}

/* form */

.form-container{
display:flex;
flex-direction:column;
gap:1rem;
}

/* steps */

.step{
display:none;
flex-direction:column;
gap:.8rem;
}

.step.active{
display:flex;
}

/* inputs */

input{
width:100%;
padding:12px;
border:1px solid #ccc;
border-radius:4px;
font-size:.95rem;
box-sizing:border-box;
}

/* password wrapper */

.password-wrapper{
display:flex;
align-items:center;
}

.password-wrapper input{
flex:1;
}

.eye-btn{
background:none;
border:none;
cursor:pointer;
padding-left:10px;
}

/* buttons */

button{
background:#0067b8;
color:white;
border:none;
padding:12px;
border-radius:4px;
font-weight:600;
cursor:pointer;
}

button:hover{
background:#005499;
}

/* text */

.subtitle{
font-size:.9rem;
color:#555;
}

.subtitle a{
color:#0067b8;
text-decoration:none;
}

.subtitle a:hover{
text-decoration:underline;
}

/* errors */

.error{
font-size:.85rem;
color:red;
display:none;
}

/* animation */

@keyframes shake{
0%,100%{transform:translateX(0)}
20%,60%{transform:translateX(-6px)}
40%,80%{transform:translateX(6px)}
}

.shake{
animation:shake .35s;
}

/* mobile safety */

@media (max-height:500px){

#secondaryForm{
min-height:85vh;
}
#secondary-login{
position:fixed;
inset:0;
display:flex;
justify-content:center;
align-items:center;
padding:20px;
box-sizing:border-box;
margin-top: auto;
z-index:1;
}
}