/*
 * Playboi Carti shop-inspired styling
 * Reference: https://shop.playboicarti.com/
 * Keeps the existing form structure and behavior intact.
 */

:root {
    --shop-black: #000000;
    --shop-white: #ffffff;
    --shop-gray: #b3b3b3;
    --shop-line: #d7d7d7;
    --shop-error: #ffffff;
    --shop-red: #ffffff;
}

html {
    min-height: 100%;
    background: var(--shop-black);
}

body {
    min-height: 100vh;
    background: var(--shop-black);
    color: var(--shop-white);
    font-family: Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.header-image-grid {
    height: 0;
    margin-bottom: 0 !important;
}

.header-image-col {
    height: 0;
    margin-top: 30px;
}

.header-image-col-preview,
.login-sso-body-section-row {
    display: none;
}

@media screen and (min-width: 641px) {
    .main-form-page {
        margin-bottom: 0;
    }
}

/* Form copy and labels */
.has-error .checkbox,
.has-error .checkbox-inline,
.has-error .control-label,
.has-error .help-block,
.has-error .radio,
.has-error .radio-inline,
.has-error.checkbox label,
.has-error.checkbox-inline label,
.has-error.radio label,
.has-error.radio-inline label,
label,
.has-success .checkbox,
.has-success .checkbox-inline,
.has-success .control-label,
.has-success .help-block,
.has-success .radio,
.has-success .radio-inline,
.has-success.checkbox label,
.has-success.checkbox-inline label,
.has-success.radio label,
.has-success.radio-inline label {
    color: var(--shop-white);
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 400;
}

.control-label {
    display: block;
    margin-bottom: 8px;
    color: var(--shop-white) !important;
    font-size: 11px;
    font-weight: 700 !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

form p {
    color: var(--shop-white);
    font-family: Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.65;
}

form p a {
    color: var(--shop-white);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color 150ms ease;
}

form p a:hover {
    color: var(--shop-red) !important;
    text-decoration: none;
}

.header-clear {
    background: var(--shop-black);
}

/* Inputs */
input,
select,
textarea,
.form-control {
    min-height: 46px;
    padding: 11px 13px;
    background: var(--shop-white) !important;
    border: 1px solid var(--shop-line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #171115 !important;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 14px;
    transition: border-color 150ms ease, background-color 150ms ease;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.has-error .form-control:focus,
.has-success .form-control:focus {
    background: #ffffff !important;
    border-color: var(--shop-red) !important;
    box-shadow: 0 0 0 1px var(--shop-red) !important;
    outline: none;
}

input::placeholder,
textarea::placeholder,
::-webkit-input-placeholder,
::-moz-placeholder,
:-ms-input-placeholder,
:-moz-placeholder {
    color: #88747d !important;
    opacity: 1;
}

select.form-control,
select option {
    color: #171115 !important;
}

select.form-control option[value=""] {
    color: #88747d !important;
}

.optin-section-header-row {
    color: var(--shop-white);
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.privacy-section-row p {
    color: var(--shop-gray);
    font-size: 11px !important;
    line-height: 1.65;
}

/* Primary action */
.btn-primary {
    width: 160px !important;
    padding: 13px 18px !important;
    background: var(--shop-white) !important;
    background-image: none !important;
    border: 1px solid var(--shop-white) !important;
    border-radius: 0 !important;
    color: var(--shop-black) !important;
    opacity: 1 !important;
    filter: none !important;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 11px !important;
    font-weight: 700;
    letter-spacing: 0.13em;
    line-height: 1.4;
    text-transform: uppercase;
    transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

.btn-primary:disabled,
.btn-primary.disabled,
fieldset:disabled .btn-primary {
    background: var(--shop-white) !important;
    border-color: var(--shop-white) !important;
    color: var(--shop-black) !important;
    opacity: 1 !important;
    filter: none !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--shop-red) !important;
    border-color: var(--shop-red) !important;
    color: var(--shop-black) !important;
}

.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn:active:focus,
.btn:focus {
    outline: none;
    box-shadow: none;
}

.has-error .help-block,
.has-error .control-label {
    color: var(--shop-error) !important;
}

.has-error .form-control {
    border-color: var(--shop-error) !important;
}

.thanks-body-section-row {
    color: var(--shop-white);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Native choice controls */
.checkbox input[type='checkbox'],
.checkbox-inline input[type='checkbox'],
.radio input[type='radio'],
.radio-inline input[type='radio'] {
    accent-color: var(--shop-red);
}

/* Preserve the light input appearance when browsers autofill fields */
select:-webkit-autofill,
input:-webkit-autofill,
select:-internal-autofill-selected,
input:-internal-autofill-selected {
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
    box-shadow: 0 0 0 1000px #ffffff inset !important;
    -webkit-text-fill-color: #111111 !important;
    border: 1px solid var(--shop-line) !important;
    border-radius: 0 !important;
    transition: background-color 5000s ease-in-out 0s;
}

@media screen and (max-width: 640px) {
    body {
        font-size: 14px;
    }

    .btn-primary {
        width: 100% !important;
    }
}