.social-login-editorial {
background-color: var(--fnv-surface);
color: var(--fnv-ink);
border: 2px solid var(--fnv-border);
border-radius: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 12px 16px;
font-family: var(--fnv-font-heading);
font-weight: 700;
font-size: 1rem;
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
position: relative;
}
.social-login-editorial img {
position: absolute;
inset-inline-start: 20px;
}
.social-login-editorial:hover {
border-color: var(--fnv-ink);
box-shadow: none;
transform: translateY(-2px);
background-color: var(--fnv-surface);
color: var(--fnv-ink);
}
.editorial-page { background-color: var(--fnv-grid); }
.editorial-card {
background-color: var(--fnv-surface);
border: 2px solid var(--fnv-ink);
border-radius: 0;
box-shadow: none;
}
.border-bottom-editorial { border-bottom: 2px solid var(--fnv-ink) !important; }
.form-control-editorial {
border: 2px solid var(--fnv-border); border-radius: 0; padding: 12px 15px;
background: var(--fnv-surface); color: var(--fnv-ink); transition: background-color 0.3s, color 0.3s, border-color 0.3s, transform 0.3s;
}
.form-control-editorial:focus {
border-color: var(--fnv-ink); box-shadow: none; outline: none;
}
.btn-editorial-black {
background-color: var(--fnv-ink); color: var(--fnv-bg); border: 2px solid var(--fnv-ink); border-radius: 0;
font-family: var(--fnv-font-heading, 'Readex Pro', sans-serif); font-weight: 800; transition: background-color 0.3s, color 0.3s, border-color 0.3s, transform 0.3s;
}
.btn-editorial-black:hover {
background-color: var(--fnv-surface); color: var(--fnv-ink); box-shadow: none; transform: translateY(-2px);
}
.verification-area label, .mb-3 label {
color: var(--fnv-ink) !important; font-family: 'Readex Pro', sans-serif !important; font-weight: bold !important; font-size: 1.1rem !important; display: block; text-align: center; margin-bottom: 15px;
}
.verification-code {
direction: ltr !important;
}
.verification-code::after {
background-color: var(--fnv-surface) !important;
}
.verification-code input {
color: var(--fnv-ink) !important;
caret-color: var(--fnv-ink) !important;
direction: ltr !important;
text-align: left !important;
}
.verification-code span {
background: var(--fnv-surface) !important;
border: 2px solid var(--fnv-border) !important;
color: var(--fnv-ink) !important;
font-weight: bold !important;
border-radius: 0 !important;
transition: background-color 0.3s, color 0.3s, border-color 0.3s, transform 0.3s;
}
.verification-code input:focus ~ .boxes span {
border-color: var(--fnv-ink) !important;
box-shadow: none !important;
}