/*
 * Login, sign-up and password-reset pages and the checkout login popup.
 * Loaded from includes/head.tpl only on those pages. The box carries class
 * "authbox" (login.tpl, clientregister.tpl and orderforms/clouder-default/
 * loginpopup.tpl); rules are scoped to it, so
 * they override the older "Login Popup" rules in newclientarea.css and the
 * popup's own styles without touching the rest of the client area.
 *
 * Look: matches www.ipburger.com (30 Sep 2026) — Open Sans, heavy tight
 * headings in near-black, brand red #c8202c, warm-grey borders, 20px cards on
 * white with a faint pink tint, pill buttons (solid red, or white with a light
 * border like "Sign up with Google").
 */

.authbox,
.authreviews,
body.tmpl-password-reset-container {
    --auth-ink: #1a1715;          /* headings */
    --auth-text: #000f23;         /* body text */
    --auth-muted: #5d5d5d;
    --auth-line: #e5dfd5;         /* warm grey borders */
    --auth-panel: #f7f6f2;        /* tinted inner panels */
    --auth-red: #c8202c;
    --auth-red-dark: #a91a25;
    --auth-red-tint: rgba(200, 32, 44, 0.06);
    --auth-red-ring: rgba(200, 32, 44, 0.16);
    --auth-radius-card: 20px;
    --auth-radius-field: 12px;
    --auth-pill: 999px;
    --auth-font: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ---- Backdrop: white with the homepage's faint pink tint at the top ---- */
body.tmpl-login:before,
body.tmpl-clientregister:before {
    background: linear-gradient(180deg, #fdf3f3 0%, #ffffff 55%);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    position: fixed;
}

/* ---- The box ---- */
.loginwrap.authbox {
    display: block;
    max-width: 440px;
    width: calc(100% - 32px);
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    border: 1px solid var(--auth-line);
    border-radius: var(--auth-radius-card);
    box-shadow: 0 18px 50px rgba(26, 23, 21, 0.07);
    font-family: var(--auth-font);
    color: var(--auth-text);
}
.authbox .loginleft {
    width: 100%;
    float: none;
    padding: 0;
}

/* Header: logo + one heavy heading, no grey band */
.authbox .loginhead {
    background: none;
    padding: 36px 36px 0;
    margin: 0 0 24px;
    border-radius: 0;
}
.authbox .loginhead img {
    max-width: 140px;
    margin: 0 auto 20px;
}
.authbox .loginhighlight p {
    font: 800 26px/32px var(--auth-font);
    letter-spacing: -0.6px;
    color: var(--auth-ink);
    margin: 0;
}

/* Form */
.authbox .logincontent {
    padding: 0 36px;
    text-align: left;
}
.authbox .logincontent .form-group {
    margin: 0 0 16px;
}
.authbox .logincontent .form-group div[class*="col-"],
.authbox .logincontent .row div[class*="col-"] {
    padding-left: 0;
    padding-right: 0;
}
.authbox .logincontent .form-group div.col-xs-4 {
    padding: 0 4px;
}
.authbox .logincontent .form-horizontal .form-group,
.authbox .logincontent .row {
    margin-left: 0;
    margin-right: 0;
}
.authbox .logincontent label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--auth-text);
    margin: 0 0 6px;
    padding: 0;
    text-align: left;
}
.authbox .logincontent input[type="email"],
.authbox .logincontent input[type="password"],
.authbox .logincontent input[type="text"],
.authbox .logincontent select {
    display: block;
    width: 100%;
    height: 48px;
    padding: 0 16px;
    border: 1px solid var(--auth-line);
    border-radius: var(--auth-radius-field);
    background: #fff;
    font: 400 15px var(--auth-font);
    color: var(--auth-text);
    box-shadow: none;
    transition: border-color .15s, box-shadow .15s;
}
.authbox .logincontent input::placeholder {
    color: #9a948c;
    font-weight: 400;
    font-size: 15px;
}
.authbox .logincontent input:focus,
.authbox .logincontent select:focus {
    border-color: var(--auth-red);
    box-shadow: 0 0 0 3px var(--auth-red-ring);
    outline: none;
}
.authbox .loginoptions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
}
.authbox .loginoptions label {
    margin: 0;
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
}
/* "Remember Me": the browser's own checkbox. The theme (style.css) hides input.tc and
   draws a box on the label's ::before with a Font Awesome tick; that rendered as blue
   stripes in some browsers. */
.authbox .loginoptions input[type="checkbox"].tc {
    position: static;
    opacity: 1;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--auth-red);
    cursor: pointer;
}
.authbox .loginoptions input[type="checkbox"].tc + .labels {
    min-width: 0;
    min-height: 0;
    font-size: 14px;
    line-height: 20px;
}
.authbox .loginoptions input[type="checkbox"].tc + .labels::before,
.authbox .loginoptions input[type="checkbox"].tc:checked + .labels::before {
    content: none;
}
.authbox .logincontent a {
    margin: 0;
    color: var(--auth-red);
    font-weight: 600;
}

/* Buttons: the site's pill, solid red */
.authbox .loginbuttons {
    display: block;
    width: 100%;
    padding: 14px 30px;
    margin: 8px 0 0;
    border: 1px solid var(--auth-red);
    border-radius: var(--auth-pill);
    background: var(--auth-red);
    color: #fff;
    font: 700 16px/24px var(--auth-font);
    box-shadow: none;
    text-shadow: none;
    transition: background-color .15s, border-color .15s;
}
.authbox .loginbuttons:hover,
.authbox .loginbuttons:focus {
    background: var(--auth-red-dark);
    border-color: var(--auth-red-dark);
    color: #fff;
}
/* the checkout sits in .TM-pricing-container, whose CSS restyles every .btn with !important */
.loginwrap.authbox #login.loginbuttons {
    display: block;
    width: 100%;
    border-radius: var(--auth-pill) !important;
    padding: 14px 30px;
}
.authbox .loginbuttons:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--auth-red-ring);
}

/* Sign-up specifics */
.authbox .registerstep1 small,
.authbox .registerstep2 small {
    display: block;
    margin-top: 14px;
    margin-bottom: 4px;
    font-size: 12px;
    line-height: 18px;
    color: var(--auth-muted);
    text-align: center;
}
.authbox .registerstep1 small a,
.authbox .registerstep2 small a {
    color: var(--auth-muted);
    text-decoration: underline;
}
.authbox .teamsize {
    border: 1px solid var(--auth-line);
    border-radius: var(--auth-radius-field);
    padding: 12px 6px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--auth-text);
}
.authbox .teamsize:hover,
.authbox .teamsize.active {
    border-color: var(--auth-red);
    background: var(--auth-red-tint);
    color: var(--auth-red);
}
/* step 2 hides the footer, so the box ends under the privacy line: give it room */
.authbox .registerstep2 {
    padding-bottom: 16px;
}
.authbox a.registerstepback {
    display: block;
    margin: 14px 0 0;
    text-align: center;
    color: var(--auth-muted);
    font-weight: 400;
}
.authbox .stepwrap {
    margin-bottom: 8px;
}
.authbox .closeregisterpopup {
    right: 14px;
    top: 10px;
    color: var(--auth-muted);
    font-size: 26px;
}

/* Footer: social logins, the other page, reviews */
.authbox .loginfooter {
    padding: 22px 36px 26px;
    border-radius: 0;
}
.authbox .loginfooter p {
    font-size: 14px;
    line-height: 22px;
    color: var(--auth-muted);
    margin: 0;
}
.authbox .loginfooter p a {
    color: var(--auth-red);
    font-weight: 600;
}
.authbox .sociallinks p.signinwith {
    margin-bottom: 4px;
    font-size: 13px;
}
.authbox .sociallinks p.signinwith:before,
.authbox .sociallinks p.signinwith:after {
    background: var(--auth-line);
}
/* Google / Facebook: the site's white pill with a light border */
.authbox .sociallinks button {
    margin: 10px 5px;
    padding: 10px 20px;
    border: 1px solid var(--auth-line);
    border-radius: var(--auth-pill);
    background: #fff;
    color: var(--auth-ink);
    font: 600 14px/20px var(--auth-font);
}
.authbox .sociallinks button:hover {
    background: var(--auth-panel);
    border-color: var(--auth-line);
}

/* ---- Review line (includes/auth-reviews.tpl): one small row, like the
   homepage's "Excellent on Trustpilot" line ---- */
.authreviews {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 8px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--auth-line);
    font-family: var(--auth-font);
    font-size: 12px;
    line-height: 16px;
    color: var(--auth-muted);
}
/* five green Trustpilot-style boxes with white stars (star shape: Font Awesome Free 5.15.4, CC BY 4.0) */
.authreview-stars {
    display: inline-block;
    width: 76px;
    height: 14px;
    margin-right: 4px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2800 512'%3E%3Cg transform='translate(0 0)'%3E%3Crect width='512' height='512' rx='56' fill='%2300b67a'/%3E%3Cpath transform='translate(52 70) scale(0.71)' fill='%23fff' d='M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z'/%3E%3C/g%3E%3Cg transform='translate(572 0)'%3E%3Crect width='512' height='512' rx='56' fill='%2300b67a'/%3E%3Cpath transform='translate(52 70) scale(0.71)' fill='%23fff' d='M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z'/%3E%3C/g%3E%3Cg transform='translate(1144 0)'%3E%3Crect width='512' height='512' rx='56' fill='%2300b67a'/%3E%3Cpath transform='translate(52 70) scale(0.71)' fill='%23fff' d='M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z'/%3E%3C/g%3E%3Cg transform='translate(1716 0)'%3E%3Crect width='512' height='512' rx='56' fill='%2300b67a'/%3E%3Cpath transform='translate(52 70) scale(0.71)' fill='%23fff' d='M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z'/%3E%3C/g%3E%3Cg transform='translate(2288 0)'%3E%3Crect width='512' height='512' rx='56' fill='%2300b67a'/%3E%3Cpath transform='translate(52 70) scale(0.71)' fill='%23fff' d='M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
}
.authreview {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--auth-muted);
    text-decoration: none;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.authreview + .authreview::before {
    content: "·";
    margin-right: 4px;
    color: var(--auth-line);
}
a.authreview:hover,
a.authreview:focus {
    color: var(--auth-ink);
    text-decoration: none;
}
.authreview b {
    color: var(--auth-ink);
    font-weight: 700;
}
.authreview-logo {
    display: inline-block;
    height: 12px;
    width: auto;
    vertical-align: -2px;
}

/* ---- Password reset (pwreset.php): the same box as login / sign-up, over the
   normal page. newclientarea.css (which positions .loginwrap on the login and
   sign-up pages) is not loaded here, so the overlay and box position come
   from this file. ---- */
body.tmpl-password-reset-container {
    overflow: hidden;
}
body.tmpl-password-reset-container:before {
    content: " ";
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1041;
    background: linear-gradient(180deg, #fdf3f3 0%, #ffffff 55%);
}
body.tmpl-password-reset-container .loginwrap.authbox {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: fit-content;
    height: -moz-max-content;
    z-index: 5000;
    background: #fff;
    text-align: center;
}
.authbox .authnote {
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 22px;
    color: var(--auth-muted);
    text-align: left;
}
.authbox .logincontent .alert {
    margin: 0 0 16px;
    border-radius: var(--auth-radius-field);
    font-size: 14px;
}
.authbox .logincontent .form-control {
    display: block;
    width: 100%;
    height: 48px;
    padding: 0 16px;
    border: 1px solid var(--auth-line);
    border-radius: var(--auth-radius-field);
    background: #fff;
    font: 400 15px var(--auth-font);
    color: var(--auth-text);
    box-shadow: none;
}
.authbox .logincontent .form-control:focus {
    border-color: var(--auth-red);
    box-shadow: 0 0 0 3px var(--auth-red-ring);
    outline: none;
}
.authbox .logincontent .has-feedback .form-control-feedback {
    display: none; /* the theme's key icon inside the password fields */
}
.authbox .logincontent .has-feedback .form-control {
    padding-right: 16px;
}
.authbox .logincontent .progress {
    height: 8px;
    margin: 6px 0 0;
    border-radius: 999px;
    box-shadow: none;
    background: var(--auth-panel);
}
.authbox .logincontent .progress-bar {
    border-radius: 999px;
}
.authbox .logincontent .margin-bottom {
    margin-bottom: 16px;
}

/* ---- Phones ---- */
@media (max-width: 480px) {
    .authbox .loginhead {
        padding: 26px 20px 0;
        margin-bottom: 20px;
    }
    .authbox .loginhighlight p {
        font-size: 23px;
        line-height: 29px;
    }
    .authbox .logincontent {
        padding: 0 20px;
    }
    .authbox .loginfooter {
        padding: 18px 20px 22px;
    }
}