@import url('/css/fonts.css?v=20260925-login-fonts');
@import url('/css/footer.css');

*, *::before, *::after { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { display: flex; flex-direction: column; padding-top: 3.8rem; color: #1a1c1e; font-family: 'Oswald', Arial, sans-serif; }
button, input { font: inherit; }
[hidden] { display: none !important; }

/* The login page is standalone, so carry the site-wide link treatment here too. */
a {
    color: #2677aa;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.2s ease;
}
a:hover, a:focus-visible { color: #64b5f6; text-decoration: none; }

.login-background { position: fixed; z-index: -2; inset: 0; overflow: hidden; background: #38434a url('https://tungstentech.io/pages/home/images/live-instructor-led-training.jpg') center / cover no-repeat; }
.login-background video { position: absolute; top: 50%; left: 50%; width: auto; min-width: 100%; height: auto; min-height: 100%; transform: translate(-50%, -50%); object-fit: cover; }
.login-overlay { position: fixed; z-index: -1; inset: 0; background: linear-gradient(135deg, rgba(245,245,245,0.78), rgba(245,245,245,0.66)); }

.login-header { position: fixed; top: 0; right: 0; left: 0; z-index: 10; display: flex; align-items: center; padding: 12px 30px; border-bottom: 1px solid rgba(255,255,255,0.65); background: rgba(0,0,0,0.85); box-shadow: 0 5px 16px rgba(0,0,0,0.1); backdrop-filter: blur(10px); }
.login-header-brand { display: inline-flex; align-items: center; color: #fff; text-decoration: none; line-height: 1; }
.login-breadcrumb { opacity: 0.72; padding-top: 0.18rem; font-size: 1.1rem; font-weight: 700; letter-spacing: 0.1rem; }

.login-section { min-height: calc(100vh - 3.8rem); display: flex; flex: 1; align-items: center; justify-content: center; padding: 3rem 0; }
.sales-login-page .site-footer { margin-top: 0 !important; }
.login-container { width: 100%; max-width: 30rem; padding: 0 1.5rem; transform: translateY(-4rem); }
.login-form-card { position: relative; padding: 3rem; border: 1px solid rgba(0,0,0,0.08); border-radius: 1rem; background: rgba(254,251,255,0.72); box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 2px 6px 2px rgba(0,0,0,0.15); backdrop-filter: blur(20px); }
.login-instruction, .code-sent-message { margin-bottom: 1.5rem; text-align: center; }
.login-instruction p, .code-sent-message p { margin: 0; color: #44474f; font-size: 0.875rem; font-weight: 500; letter-spacing: 0.03rem; text-transform: uppercase; }
.login-instruction p { font-size: 1rem; }
.code-sent-message .email-display { margin-top: 0.5rem; color: #1a1c1e; font-size: 1rem; font-weight: 700; overflow-wrap: anywhere; }
.form-group { margin-bottom: 1rem; }
.input-with-icon { position: relative; }
.login-border-label { position: absolute; z-index: 2; top: 0; left: 1rem; padding: 0 0.4rem; background: #fff; color: #4d5863; font: 700 0.75rem/1.25 Arial, sans-serif; pointer-events: none; transform: translateY(-50%); }
.input-with-icon:focus-within .login-border-label { color: #2677aa; }
.input-icon { position: absolute; left: 1.4rem; top: 50%; width: 1.5rem; height: 1.5rem; transform: translateY(-50%); fill: #626971; pointer-events: none; }
.form-group input { width: 100%; min-height: 3.55rem; padding: 1rem 1rem 1rem 4.25rem; border: 2px solid #e1e5e8; border-radius: 0.5rem; background: #fff; color: #333; font-size: 0.9rem; font-weight: 700; letter-spacing: 0.03rem; text-transform: uppercase; }
.form-group input:focus { outline: 3px solid rgba(52,152,219,0.2); border-color: #3498db; }
.form-group input::placeholder { color: rgba(51,51,51,0.58); }
.form-actions { margin-top: 1.5rem; }
.form-actions-row { display: flex; gap: 1rem; }
.login-btn { width: 100%; min-height: 3.5rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.9rem 1.5rem; border-radius: 0.5rem; cursor: pointer; font-size: 1.1rem; font-weight: 500; letter-spacing: 0.06rem; text-transform: uppercase; transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; }
.login-btn-primary { border: 0; background: #3498db; color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.15); }
.login-btn-primary:hover { background: #64b5f6; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.2); }
.login-btn-secondary { border: 2px solid #e1e5e8; background: #fff; color: #333; }
.login-btn-secondary:hover { background: #f8f9fa; transform: translateY(-2px); }
.login-btn:disabled { cursor: wait; opacity: 0.65; transform: none; }
/* Material arrow icons inside buttons - same 24px sizing as tungstentech.io. */
.login-btn .icon { width: 24px; height: 24px; display: inline-block; vertical-align: middle; flex-shrink: 0; }
.login-error { margin-bottom: 1rem; padding: 0.75rem 1rem; border: 1px solid #fecaca; border-radius: 0.5rem; background: #fef2f2; color: #a92525; font-family: Arial, sans-serif; font-size: 0.875rem; font-weight: 600; }
.code-help-text { margin: 0 0 1rem; color: #65717b; font: 0.82rem/1.45 Arial, sans-serif; text-align: center; }
.login-loading { min-height: 16rem; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem; border-radius: 1rem; background: rgba(254,251,255,0.85); backdrop-filter: blur(20px); }
.login-loading p { color: #44474f; font-size: 1rem; font-weight: 700; letter-spacing: 0.04rem; text-transform: uppercase; }
.login-audience-divider { height: 1px; margin: 1.5rem 0 1.25rem; background: rgba(68,71,79,0.22); }
.login-audience-note { margin: 0; color: #44474f; font: 0.85rem/1.45 Arial, sans-serif; text-align: center; }
.login-audience-note a { color: #2677aa; font-weight: 700; }
.login-audience-note a:hover, .login-audience-note a:focus-visible { color: #64b5f6; }
.login-spinner { width: 3rem; height: 3rem; border: 4px solid #e1e5e8; border-top-color: #3498db; border-radius: 50%; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.hp-field, .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
:focus-visible { outline: 3px solid #fcb200; outline-offset: 3px; }

@media (max-width: 37.5rem) {
    .login-header { padding: 12px 15px; }
    .login-breadcrumb { font-size: 0.9rem; letter-spacing: 0.06rem; }
    .login-section { padding: 2rem 0; }
    .login-container { padding: 0 1rem; }
    .login-form-card { padding: 2rem 1.5rem; }
    .form-actions-row { gap: 0.7rem; }
    .login-btn { padding: 0.8rem 1rem; font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .login-background video { display: none; }
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}