/* Rebrand Base Layout Styles
   Shared across all redesigned pages (sign-in, trouble-signing-in, forgot-password, etc.)
   Each page imports this base and adds its own page-specific styles. */

/* ===== Design Tokens ===== */
:root {
    /* Colors — Brand */
    --color-primary: #2B0BF9;
    --color-primary-hover: #4639F4;
    --color-primary-active: #6A68F4;
    --color-bg: #1014BE;
    --color-accent: #1DF9FD;

    /* Colors — Neutral */
    --color-white: #FFFFFF;
    --color-black: #000;
    --color-text-dark: #010063;
    --color-text-secondary: #10005B;
    --color-border: #C2C5E6;
    --color-border-hover: #EBECFD;
    --color-footer-text: #F0F5F7;

    /* Colors — Feedback */
    --color-error: #A8011E;
    --color-error-bg: #F1E1E8;
    --color-warning-bg: #fff3cd;
    --color-warning-text: #664d03;

    /* Typography */
    --font-family: 'Manrope', 'Roboto', sans-serif;

    /* Spacing — Page Gutters */
    --gutter-desktop: 180px;
    --gutter-small-desktop: 120px;
    --gutter-tablet: 32px;
    --gutter-mobile: 24px;

    /* Radii */
    --radius-card: 16px;
    --radius-btn: 8px;
    --radius-input: 8px;

    /* Sizes */
    --btn-height: 48px;
    --input-height: 36px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body.rebrand-page {
    font-family: var(--font-family);
    background-color: var(--color-bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow-y: auto;
}

/* ===== Background (image or video) ===== */
.rebrand-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    background-color: #1014BE;
}

.rebrand-bg img,
.rebrand-bg video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===== Header ===== */
.rebrand-header {
    padding: 46px 0 0 var(--gutter-desktop);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
}

.rebrand-header img {
    width: 150px;
    height: auto;
}

/* ===== Main Content ===== */
.rebrand-main {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    padding: 0 var(--gutter-desktop);
    gap: 64px;
    z-index: 1;
}

/* When viewport is too short on desktop, ensure page is scrollable */
@media (min-width: 1024px) and (max-height: 700px) {
    body.rebrand-page {
        min-height: 1000px;
    }
}

/* When viewport height is medium, adjust centering to account for header */
@media (min-width: 1024px) and (min-height: 701px) and (max-height: 900px) {
    .rebrand-main {
        top: calc(50% + 30px);
        transform: translateY(-50%);
    }
}

/* ===== Card (white container) ===== */
.rebrand-card {
    background: var(--color-white);
    border-radius: var(--radius-card);
    padding: 32px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-shrink: 0;
}

.rebrand-card h1 {
    font-family: var(--font-family);
    font-size: 36px;
    font-weight: 700;
    line-height: 46px;
    color: var(--color-black);
    margin: 0 0 24px 0;
}

/* ===== Primary Button (shared) ===== */
.rebrand-btn-primary {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 12px 16px;
    height: var(--btn-height);
    border: none;
    border-radius: var(--radius-btn);
    background: var(--color-primary);
    font-family: var(--font-family);
    font-size: 16px;
    font-weight: 600;
    line-height: 26px;
    color: var(--color-white);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
    box-sizing: border-box;
}

.rebrand-btn-primary:hover {
    background: var(--color-primary-hover);
}

.rebrand-btn-primary:focus-visible {
    outline: 2px solid var(--color-white);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--color-primary);
}

.rebrand-btn-primary:active {
    background: var(--color-primary-active);
}

/* ===== Registration Section (shared across pages) ===== */
.rebrand-register {
    color: var(--color-white);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: center;
}

.rebrand-register p {
    font-family: var(--font-family);
    font-size: 24px;
    font-weight: 400;
    line-height: 32px;
    margin: 0;
    color: var(--color-white);
}

.rebrand-register a {
    font-family: var(--font-family);
    font-size: 36px;
    font-weight: 600;
    line-height: 46px;
    color: var(--color-accent);
    text-decoration: none;
}

.rebrand-register a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
}

.rebrand-register a:focus {
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
    outline: 1px solid var(--color-white);
    outline-offset: 4px;
}

/* ===== Footer ===== */
.rebrand-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24px var(--gutter-desktop);
    height: 72px;
    display: flex;
    justify-content: space-between;
    z-index: 1;
    align-items: center;
    box-sizing: border-box;
}

.rebrand-footer div {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
}

.rebrand-footer a {
    font-family: var(--font-family);
    color: var(--color-footer-text);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
}

.rebrand-footer a:hover {
    color: var(--color-footer-text);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
}

.rebrand-footer a:focus {
    color: var(--color-footer-text);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
    outline: 1px solid var(--color-white);
    outline-offset: 2px;
}

.rebrand-footer .copyright {
    font-family: var(--font-family);
    color: var(--color-white);
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
}

/* ===== Responsive: Small Desktop (1024px - 1439px) ===== */
@media (max-width: 1439px) {
    .rebrand-header {
        padding-left: var(--gutter-small-desktop);
    }

    .rebrand-main {
        padding: 0 var(--gutter-small-desktop);
    }

    .rebrand-footer {
        padding: 24px var(--gutter-small-desktop);
    }
}

/* ===== Responsive: Tablet (768px - 1023px) ===== */
@media (max-width: 1023px) {
    .rebrand-bg img,
    .rebrand-bg video {
        object-position: top right;
    }

    .rebrand-header {
        padding-left: var(--gutter-tablet);
        padding-top: 32px;
    }

    .rebrand-main {
        position: relative;
        top: auto;
        transform: none;
        padding: 100px var(--gutter-tablet) var(--gutter-tablet) var(--gutter-tablet);
        gap: 32px;
        flex: 1;
    }

    .rebrand-card {
        padding: 32px;
    }

    .rebrand-footer {
        position: relative;
        padding: 24px var(--gutter-tablet);
        height: auto;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
}

/* ===== Responsive: Mobile (< 768px) ===== */
@media (max-width: 767px) {
    .rebrand-header {
        padding-left: var(--gutter-mobile);
        padding-top: var(--gutter-mobile);
    }

    .rebrand-main {
        position: relative;
        top: auto;
        transform: none;
        padding: 100px var(--gutter-mobile) 80px var(--gutter-mobile);
        flex-direction: column;
        gap: var(--gutter-mobile);
        align-items: flex-start;
    }

    .rebrand-card {
        width: 345px;
        max-width: 100%;
        padding: var(--gutter-mobile);
    }

    .rebrand-register {
        text-align: left;
        padding: 0;
        align-self: flex-start;
    }

    .rebrand-footer {
        position: relative;
        padding: var(--gutter-mobile);
        height: auto;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--gutter-mobile);
    }

    .rebrand-footer div {
        flex-direction: column;
        gap: var(--gutter-mobile);
    }

    .rebrand-footer a {
        margin-right: 0;
    }
}

/* ===== Shared Form Styles ===== */
.rebrand-form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
}

.rebrand-form .form-group {
    width: 100%;
}

.rebrand-form label {
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
    color: var(--color-black);
    display: block;
    margin-bottom: 4px;
}

.rebrand-form input[type="email"],
.rebrand-form input[type="text"],
.rebrand-form input[type="password"] {
    box-sizing: border-box;
    width: 100%;
    height: var(--input-height);
    padding: 8px 18px;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-input);
    background: var(--color-white);
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
    color: var(--color-black);
    transition: border-color 0.2s ease;
}

.rebrand-form input[type="email"]:hover,
.rebrand-form input[type="text"]:hover,
.rebrand-form input[type="password"]:hover {
    border-color: var(--color-border-hover);
}

.rebrand-form input[type="email"]:focus,
.rebrand-form input[type="text"]:focus,
.rebrand-form input[type="password"]:focus {
    border-color: var(--color-primary);
    outline: none;
}

.rebrand-form .divider {
    width: 100%;
    height: 0;
    border: none;
    border-top: 2px solid var(--color-border);
}

/* ===== Error Message ===== */
.rebrand-error {
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
    color: var(--color-error);
    margin: 0;
}

/* ===== Secondary Button ===== */
.rebrand-btn-secondary {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 12px 16px;
    height: var(--btn-height);
    border: none;
    border-radius: var(--radius-btn);
    background: var(--color-white);
    font-family: var(--font-family);
    font-size: 16px;
    font-weight: 600;
    line-height: 26px;
    color: var(--color-text-secondary);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
    box-sizing: border-box;
}

.rebrand-btn-secondary:hover {
    background: var(--color-border-hover);
}

.rebrand-btn-secondary:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ===== Description Text ===== */
.rebrand-card .description {
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    color: var(--color-text-dark);
    margin: 0;
}

/* ===== Custom Bullet List ===== */
.rebrand-list {
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    color: var(--color-text-dark);
    margin: 0;
    padding-left: 16px;
    list-style: none;
}

.rebrand-list li {
    position: relative;
    padding-left: 12px;
    margin-bottom: 4px;
}

.rebrand-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    font-size: 12px;
    line-height: 22px;
}