/* =========================================================
   SHOPLINE CUSTOMER BASE
   MYSH V3
   + REGISTER MOBILE MINIMAL FIX
   ========================================================= */

.customer {
    display: block;
    width: 430px;
    margin-inline: auto;
}

@media (max-width: 959px) {
    .customer {
        width: 100%;
    }
}

.customer-container {
    background-color: rgb(var(--color-background));
}

.customer__title {
    margin-block-end: 20px;
    text-transform: uppercase;
}

@media (max-width: 959px) {
    .customer__title {
        margin-block-end: 10px;
    }
}

.customer__tab {
    display: flex;
    gap: 40px;
    align-items: center;
    justify-content: center;
    margin-block-end: 32px;
}

.customer__tab span {
    color: rgb(var(--color-light-text));
    white-space: nowrap;
    cursor: pointer;
}

.customer__tab span:first-child {
    position: relative;
    text-align: end;
}

.customer__tab span:first-child::after {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: -20px;
    width: 1px;
    height: 10px;
    content: " ";
    background-color: rgb(var(--color-entry-line));
    transform: translateY(-50%);
}

.customer__tab span.active {
    color: rgb(var(--color-text));
    text-decoration: underline;
    text-underline-offset: 6px;
}

.customer__submit {
    width: 100%;
    text-transform: capitalize;
}

.customer__extra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-block-start: 20px;
}

.customer__extra-label {
    display: flex;
    align-items: baseline;
}

.customer__extra .field-checkbox {
    margin-inline-end: 10px;
}

.customer__jump-link {
    display: flex;
    justify-content: center;
    margin-block-start: 40px;
}

.customer__jump-link--between {
    justify-content: space-between;
}


/* =========================================================
   MYSH REGISTER MOBILE FIX
   Only affects registration page
   ========================================================= */

@media (max-width: 959px) {

    /* =======================================================
     FIRST NAME / LAST NAME

     Keep one row / two equal columns.
     ======================================================= */

    .customer-register .field__group {
        display: flex;

        flex-direction: row;

        gap: 16px;

        width: 100%;

        min-width: 0;
    }

    .customer-register .field__group>.field {
        flex: 1 1 0;

        width: 0;

        min-width: 0;
    }

    .customer-register .field__group .field__input {
        box-sizing: border-box;

        width: 100%;

        min-width: 0;
    }


    /* =======================================================
     BIRTHDAY

     iPhone Safari can collapse native date inputs.
     Only fix the Birthday field itself.
     ======================================================= */

    .customer-register input[type="date"].field__input {
        box-sizing: border-box;

        display: block;

        width: 100% !important;

        height: 56px !important;

        min-height: 56px !important;

        padding:
            24px 16px 10px !important;

        margin: 0;

        color: rgb(var(--color-text));

        font: inherit;

        line-height:
            var(--sort-body-line-height);

        text-align: start;

        background: transparent;

        border: 0;

        border-radius: 0;

        color-scheme: dark;
    }


    /* iPhone / Safari internal date text */
    .customer-register input[type="date"].field__input::-webkit-date-and-time-value {
        width: 100%;

        min-height: 22px;

        padding: 0;

        margin: 0;

        line-height: 22px;

        text-align: start;
    }


    .customer-register input[type="date"].field__input::-webkit-datetime-edit {
        padding: 0;

        margin: 0;
    }


    .customer-register input[type="date"].field__input::-webkit-calendar-picker-indicator {
        margin: 0;

        cursor: pointer;

        opacity: 0.78;
    }

}


/* =========================================================
   SMALL MOBILE
   iPhone 13 / similar widths
   ========================================================= */

@media (max-width: 479px) {

    /* First / Last remain side by side */
    .customer-register .field__group {
        gap: 12px;
    }


    .customer-register .field__group>.field {
        flex: 1 1 0;

        width: 0;

        min-width: 0;
    }


    /* Birthday only */
    .customer-register input[type="date"].field__input {
        width: 100% !important;

        height: 56px !important;

        min-height: 56px !important;

        padding:
            24px 14px 10px !important;
    }

}