@charset "utf-8";

/* =========================================================
   Register Complete / Thank You Page
   White Admin Style
========================================================= */

:root {
    --rc-bg: #f6f9fc;
    --rc-card: #ffffff;
    --rc-text: #102033;
    --rc-muted: #64748b;
    --rc-soft: #8da0b8;
    --rc-line: #dfe7f0;
    --rc-line-soft: #edf2f7;
    --rc-primary: #0b4f8a;
    --rc-primary-dark: #0f1f35;
    --rc-teal: #0891a5;
    --rc-success: #0f9f6e;
    --rc-success-soft: #e8faf3;
    --rc-shadow: 0 14px 34px rgba(15, 35, 60, 0.08);
}

html,
body {
    background: var(--rc-bg);
    color: var(--rc-text);
    font-family: inherit;
}

.jumbotron {
    position: relative;
    width: calc(100% - 88px);
    max-width: 1180px;
    min-height: 520px;
    margin: 42px auto;
    padding: 0;
    background: transparent;
    border-radius: 0;
    text-align: left !important;
}

.jumbotron::before {
    content: "ACCOUNT";
    display: block;
    margin-bottom: 8px;
    color: var(--rc-primary);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.35em;
}

.jumbotron::after {
    content: "";
    position: absolute;
    top: 132px;
    left: 0;
    right: 0;
    min-height: 350px;
    border: 1px solid var(--rc-line);
    border-radius: 8px;
    background: var(--rc-card);
    box-shadow: var(--rc-shadow);
    z-index: 0;
}

.jumbotron .display-3 {
    position: relative;
    z-index: 2;
    margin: 0 0 10px;
    color: var(--rc-text);
    font-size: 38px;
    font-weight: 900;
    line-height: 1.12;
    letter-spacing: -0.045em;
}

.jumbotron .lead {
    position: relative;
    z-index: 2;
    max-width: 780px;
    margin: 0;
    color: var(--rc-muted);
    font-size: 17px;
    font-weight: 500;
    line-height: 1.7;
}

.jumbotron hr {
    position: relative;
    z-index: 2;
    height: 1px;
    margin: 52px 0 0;
    border: 0;
    background: transparent;
}

.jumbotron p:not(.lead) {
    position: relative;
    z-index: 2;
    margin: 0;
    padding: 54px 42px 0;
    color: var(--rc-muted);
    font-size: 15px;
    line-height: 1.7;
}

.jumbotron p:not(.lead)::before {
    content: "\f05a";
    width: 44px;
    height: 44px;
    margin-right: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: #eef6ff;
    color: var(--rc-primary);
    font-family: "Font Awesome 5 Free", "FontAwesome";
    font-size: 17px;
    font-weight: 900;
    vertical-align: middle;
}

.jumbotron p:not(.lead) a {
    color: var(--rc-primary);
    font-weight: 900;
    text-decoration: none;
    transition: color 0.16s ease;
}

.jumbotron p:not(.lead) a:hover {
    color: var(--rc-teal);
    text-decoration: none;
}

.jumbotron .lead:last-child {
    position: relative;
    z-index: 2;
    margin-top: 28px;
    padding: 0 42px 44px;
}

.jumbotron .btn {
    min-width: 220px;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 22px;
    border: 0;
    border-radius: 5px;
    background: var(--rc-primary-dark) !important;
    color: #ffffff !important;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: -0.01em;
    box-shadow: 0 12px 24px rgba(15, 31, 53, 0.18);
    text-decoration: none;
    transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

.jumbotron .btn::before {
    content: "\f061";
    margin-right: 9px;
    font-family: "Font Awesome 5 Free", "FontAwesome";
    font-weight: 900;
    font-size: 13px;
}

.jumbotron .btn:hover {
    transform: translateY(-1px);
    background: var(--rc-teal) !important;
    color: #ffffff !important;
    box-shadow: 0 16px 30px rgba(8, 145, 165, 0.22);
}

/* Inner success card effect */
.jumbotron .display-3 + .lead {
    margin-bottom: 0;
}

.jumbotron .display-3,
.jumbotron .display-3 + .lead {
    padding-left: 0;
}

/* Card content block */
.jumbotron > p:not(.lead),
.jumbotron > .lead:last-child {
    background: transparent;
}

/* Success icon */
.jumbotron .display-3::before {
    content: "\f00c";
    width: 56px;
    height: 56px;
    margin-right: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--rc-success-soft);
    color: var(--rc-success);
    font-family: "Font Awesome 5 Free", "FontAwesome";
    font-size: 22px;
    font-weight: 900;
    vertical-align: middle;
}

/* Bootstrap override */
.text-center {
    text-align: left !important;
}

.btn-sm {
    padding: 0 22px !important;
    font-size: 15px !important;
}

/* Responsive */
@media (max-width: 992px) {
    .jumbotron {
        width: calc(100% - 40px);
        margin: 28px auto;
    }

    .jumbotron .display-3 {
        font-size: 34px;
    }

    .jumbotron::after {
        top: 126px;
    }
}

@media (max-width: 768px) {
    .jumbotron {
        width: calc(100% - 24px);
        min-height: auto;
        margin: 20px auto;
        padding: 0;
    }

    .jumbotron::before {
        margin-left: 2px;
    }

    .jumbotron::after {
        position: static;
        display: block;
        min-height: 0;
        margin-top: 22px;
        padding: 0;
    }

    .jumbotron .display-3 {
        font-size: 30px;
    }

    .jumbotron .display-3::before {
        width: 48px;
        height: 48px;
        margin-right: 12px;
        font-size: 19px;
    }

    .jumbotron .lead {
        font-size: 15px;
    }

    .jumbotron p:not(.lead) {
        margin-top: -310px;
        padding: 54px 24px 0;
    }

    .jumbotron .lead:last-child {
        padding: 0 24px 34px;
    }

    .jumbotron .btn {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 520px) {
    .jumbotron {
        width: calc(100% - 20px);
    }

    .jumbotron::before {
        font-size: 12px;
        letter-spacing: 0.26em;
    }

    .jumbotron .display-3 {
        font-size: 26px;
        display: flex;
        align-items: center;
    }

    .jumbotron .display-3::before {
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        font-size: 17px;
    }

    .jumbotron p:not(.lead) {
        padding-left: 18px;
        padding-right: 18px;
    }

    .jumbotron p:not(.lead)::before {
        width: 38px;
        height: 38px;
        margin-right: 10px;
        font-size: 15px;
    }

    .jumbotron .lead:last-child {
        padding-left: 18px;
        padding-right: 18px;
    }
}