/* =========================================================
   LOGIN
========================================================= */

.login-page {

    width: 100%;

    min-height: 520px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 40px 20px;

    box-sizing: border-box;

}


/* =========================================================
   CARD
========================================================= */

.login-card {

    width: 100%;

    max-width: 430px;

    background: #fff;

    border: 1px solid #eee;

    border-radius: 20px;

    padding: 35px;

    box-sizing: border-box;

    box-shadow:
        0 10px 35px rgba(0, 0, 0, .10);

}


/* =========================================================
   CABEÇALHO
========================================================= */

.login-header {

    text-align: center;

    margin-bottom: 30px;

}


.login-icon {

    width: 60px;

    height: 60px;

    margin: 0 auto 15px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #ffebee;

    font-size: 28px;

}


.login-header h1 {

    margin: 0 0 8px;

    font-size: 30px;

    color: #222;

}


.login-header p {

    margin: 0;

    color: #777;

    font-size: 14px;

}


/* =========================================================
   FORMULÁRIO
========================================================= */

.login-form {

    width: 100%;

}


.login-field {

    margin-bottom: 20px;

}


.login-field label {

    display: block;

    margin-bottom: 8px;

    font-size: 14px;

    font-weight: 600;

    color: #333;

}


.login-field input {

    width: 100%;

    height: 48px;

    padding: 0 14px;

    box-sizing: border-box;

    border: 1px solid #ddd;

    border-radius: 10px;

    background: #fafafa;

    color: #222;

    font-size: 15px;

    outline: none;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;

}


.login-field input::placeholder {

    color: #aaa;

}


.login-field input:focus {

    background: #fff;

    border-color: #e53935;

    box-shadow:
        0 0 0 3px rgba(229,57,53,.12);

}


.register-section-title h2 {
    margin: 0 0 6px;
    color: #333;
    font-size: 19px;
    text-align: center;
}

.register-section-title p {
    margin: 0 0 16px;
    color: #888;
    font-size: 13px;
    text-align: center;
}

/* =========================================================
   BOTÃO
========================================================= */

.login-button {

    width: 100%;

    height: 50px;

    margin-top: 5px;

    border: none;

    border-radius: 10px;

    background: #e53935;

    color: #fff;

    font-size: 16px;

    font-weight: 700;

    cursor: pointer;

    transition:
        background .2s ease,
        transform .2s ease,
        box-shadow .2s ease;

}


.login-button:hover {

    background: #c62828;

    transform: translateY(-1px);

    box-shadow:
        0 5px 15px rgba(229,57,53,.25);

}


.login-button:active {

    transform: translateY(0);

}


/* =========================================================
   RODAPÉ DO CARD
========================================================= */

.login-footer {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 5px;

    flex-wrap: wrap;

    margin-top: 25px;

    padding-top: 20px;

    border-top: 1px solid #eee;

    font-size: 14px;

    color: #777;

}


.login-footer a {

    color: #e53935;

    font-weight: 600;

    text-decoration: none;

}


.login-footer a:hover {

    text-decoration: underline;

}


/* =========================================================
   MOBILE
========================================================= */

@media screen and (max-width: 600px) {

    .login-page {

        min-height: auto;

        padding:
            30px 12px 45px;

    }


    .login-card {

        padding: 28px 20px;

        border-radius: 16px;

    }


    .login-header h1 {

        font-size: 26px;

    }

}


/* =========================================================
   CADASTRO
========================================================= */

.register-page {

    width: 100%;

    min-height: 600px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 40px 20px;

    box-sizing: border-box;

}


/* =========================================================
   CARD
========================================================= */

.register-card {

    width: 100%;

    max-width: 470px;

    background: #fff;

    border: 1px solid #eee;

    border-radius: 20px;

    padding: 35px;

    box-sizing: border-box;

    box-shadow:
        0 10px 35px rgba(0,0,0,.10);

}


/* =========================================================
   CABEÇALHO
========================================================= */

.register-header {

    text-align: center;

    margin-bottom: 30px;

}


.register-icon {

    width: 60px;

    height: 60px;

    margin: 0 auto 15px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #ffebee;

    font-size: 28px;

}


.register-header h1 {

    margin: 0 0 8px;

    font-size: 30px;

    color: #222;

}


.register-header p {

    margin: 0;

    color: #777;

    font-size: 14px;

}


/* =========================================================
   FORMULÁRIO
========================================================= */

.register-form {

    width: 100%;

}


.register-field {

    margin-bottom: 18px;

}


.register-field label {

    display: block;

    margin-bottom: 8px;

    font-size: 14px;

    font-weight: 600;

    color: #333;

}


.register-field input {

    width: 100%;

    height: 48px;

    padding: 0 14px;

    box-sizing: border-box;

    border: 1px solid #ddd;

    border-radius: 10px;

    background: #fafafa;

    color: #222;

    font-size: 15px;

    outline: none;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;

}


.register-field input::placeholder {

    color: #aaa;

}


.register-field input:focus {

    background: #fff;

    border-color: #e53935;

    box-shadow:
        0 0 0 3px rgba(229,57,53,.12);

}


/* =========================================================
   BOTÃO
========================================================= */

.register-button {

    width: 100%;

    height: 50px;

    margin-top: 5px;

    border: none;

    border-radius: 10px;

    background: #e53935;

    color: #fff;

    font-size: 16px;

    font-weight: 700;

    cursor: pointer;

    transition:
        background .2s ease,
        transform .2s ease,
        box-shadow .2s ease;

}


.register-button:hover {

    background: #c62828;

    transform: translateY(-1px);

    box-shadow:
        0 5px 15px rgba(229,57,53,.25);

}


.register-button:active {

    transform: translateY(0);

}


/* =========================================================
   OPÇÕES
========================================================= */

.register-options {

    margin-top: 25px;

    padding-top: 20px;

    border-top: 1px solid #eee;

}


.register-option {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 5px;

    text-align: center;

    font-size: 14px;

    color: #777;

}


.register-option a {

    color: #e53935;

    font-weight: 600;

    text-decoration: none;

}


.register-option a:hover {

    text-decoration: underline;

}


.register-divider {

    width: 100%;

    height: 1px;

    margin: 18px 0;

    background: #f0f0f0;

}


/* =========================================================
   MOBILE
========================================================= */

@media screen and (max-width: 600px) {

    .register-page {

        min-height: auto;

        padding:
            30px 12px 45px;

    }


    .register-card {

        padding: 28px 20px;

        border-radius: 16px;

    }


    .register-header h1 {

        font-size: 26px;

    }


    .register-option {

        font-size: 13px;

    }

}



/* =========================================================
   CADASTRO COMPLETO DE RESTAURANTE
========================================================= */

.restaurant-register-page {

    width: 100%;

    min-height: 100vh;

    display: flex;

    justify-content: center;

    align-items: flex-start;

    box-sizing: border-box;

    padding: 20px 20px 60px;


}


.restaurant-register-card {

    width: 100%;

    max-width: 760px;

    background: #fff;

    border: 1px solid #eee;

    border-radius: 20px;

    padding: 38px;

    margin: 0 auto;

    box-sizing: border-box;

    box-shadow:
        0 12px 40px rgba(0,0,0,.10);

}


/* =========================================================
   CABEÇALHO
========================================================= */

.restaurant-register-header {

    text-align: center;

    margin-bottom: 35px;

}


.restaurant-register-icon {

    width: 68px;

    height: 68px;

    margin: 0 auto 16px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #ffebee;

    font-size: 32px;

}


.restaurant-register-header h1 {

    margin: 0 0 8px;

    color: #222;

    font-size: 30px;

}


.restaurant-register-header p {

    margin: 0;

    color: #777;

    font-size: 14px;

}


/* =========================================================
   SEÇÕES
========================================================= */

.restaurant-form-section {

    margin-bottom: 25px;

    padding-bottom: 15px;

    border-bottom: 1px solid #eee;

}


.restaurant-form-section h2 {

    margin: 0 0 6px;

    color: #333;

    font-size: 19px;

}


.restaurant-form-section p {

    margin: 0;

    color: #888;

    font-size: 13px;

}


.restaurant-section-spacing {

    margin-top: 38px;

}


/* =========================================================
   CAMPOS
========================================================= */

.restaurant-form-field {

    margin-bottom: 20px;

}


.restaurant-form-field label,
.restaurant-upload-section > label {

    display: block;

    margin-bottom: 8px;

    color: #333;

    font-size: 14px;

    font-weight: 600;

}


.restaurant-form-field input,
.restaurant-form-field select,
.restaurant-form-field textarea {

    width: 100%;

    box-sizing: border-box;

    border: 1px solid #ddd;

    border-radius: 10px;

    background: #fafafa;

    color: #222;

    font-family: inherit;

    font-size: 15px;

    outline: none;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;

}


.restaurant-form-field input,
.restaurant-form-field select {

    height: 48px;

    padding: 0 14px;

}


.restaurant-form-field textarea {

    min-height: 110px;

    padding: 13px 14px;

    resize: vertical;

    line-height: 1.5;

}


.restaurant-form-field input::placeholder,
.restaurant-form-field textarea::placeholder {

    color: #aaa;

}


.restaurant-form-field input:focus,
.restaurant-form-field select:focus,
.restaurant-form-field textarea:focus {

    background: #fff;

    border-color: #e53935;

    box-shadow:
        0 0 0 3px rgba(229,57,53,.12);

}


/* =========================================================
   DUAS COLUNAS
========================================================= */

.restaurant-form-row {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;

}


/* =========================================================
   UPLOAD DA LOGO
========================================================= */

.restaurant-logo-section {

    margin-top: 30px;

    margin-bottom: 25px;

}


.restaurant-logo-section h2 {

    margin: 0 0 6px;

    color: #333;

    font-size: 19px;

}


.restaurant-logo-section p {

    margin: 0 0 16px;

    color: #888;

    font-size: 13px;

}


/* =========================================================
   ÁREA DE UPLOAD
========================================================= */

.restaurant-logo-upload {

    min-height: 125px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

    padding: 20px;

    border: 2px dashed #ddd;

    border-radius: 12px;

    background: #fafafa;

    cursor: pointer;

    text-align: center;

    transition:
        border-color .2s ease,
        background .2s ease,
        transform .2s ease;

}


.restaurant-logo-upload:hover {

    border-color: #e53935;

    background: #fff8f8;

}


.restaurant-logo-upload:active {

    transform: scale(.99);

}


/* =========================================================
   ÍCONE
========================================================= */

.restaurant-logo-upload-icon {

    margin-bottom: 8px;

    font-size: 30px;

    line-height: 1;

}


/* =========================================================
   TÍTULO
========================================================= */

.restaurant-logo-upload-title {

    color: #333;

    font-size: 15px;

    font-weight: 700;

}


/* =========================================================
   DESCRIÇÃO
========================================================= */

.restaurant-logo-upload-text {

    margin-top: 5px;

    color: #999;

    font-size: 12px;

}


/* =========================================================
   INPUT REAL
========================================================= */

.restaurant-logo-input {

    display: none;

}


/* =========================================================
   BOTÃO
========================================================= */

.restaurant-register-button {

    width: 100%;

    height: 54px;

    margin-top: 15px;

    border: none;

    border-radius: 10px;

    background: #e53935;

    color: #fff;

    font-family: inherit;

    font-size: 16px;

    font-weight: 700;

    cursor: pointer;

    transition:
        background .2s ease,
        transform .2s ease,
        box-shadow .2s ease;

}


.restaurant-register-button:hover {

    background: #c62828;

    transform: translateY(-1px);

    box-shadow:
        0 6px 18px rgba(229,57,53,.25);

}


.restaurant-register-button:active {

    transform: translateY(0);

}


/* =========================================================
   RODAPÉ DO CARD
========================================================= */

.restaurant-register-footer {

    margin-top: 22px;

    padding-top: 18px;

    border-top: 1px solid #eee;

    text-align: center;

    color: #888;

    font-size: 13px;

    line-height: 1.5;

}


/* =========================================================
   TABLET
========================================================= */

@media screen and (max-width: 700px) {

    .restaurant-register-page {

        padding:
            15px 10px 45px;

    }


    .restaurant-register-card {

        padding: 28px 20px;

        border-radius: 16px;

    }


    .restaurant-register-header h1 {

        font-size: 25px;

    }


    .restaurant-form-row {

        grid-template-columns: 1fr;

        gap: 0;

    }

}


/* =========================================================
   CELULAR
========================================================= */

@media screen and (max-width: 480px) {

    .restaurant-register-page {

        padding:
            10px 5px 35px;

    }


    .restaurant-register-card {

        padding: 24px 15px;

        border-radius: 14px;

        box-shadow:
            0 6px 25px rgba(0,0,0,.08);

    }


    .restaurant-register-header {

        margin-bottom: 28px;

    }


    .restaurant-register-header h1 {

        font-size: 23px;

    }


    .restaurant-form-section h2 {

        font-size: 17px;

    }


    .restaurant-form-field {

        margin-bottom: 17px;

    }


    .restaurant-upload-box {

        min-height: 110px;

    }

}

/* =========================================================
   SELETOR DE CATEGORIA DO RESTAURANTE
========================================================= */

.restaurant-category-select {

    position: relative;

    width: 100%;

}


/* =========================================================
   BOTÃO PRINCIPAL
========================================================= */

.restaurant-category-selected {

    width: 100%;

    min-height: 48px;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 0 14px;

    box-sizing: border-box;

    border: 1px solid #ddd;

    border-radius: 10px;

    background: #fafafa;

    color: #222;

    font-family: inherit;

    font-size: 15px;

    cursor: pointer;

    text-align: left;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;

}


.restaurant-category-selected:hover {

    background: #fff;

    border-color: #ccc;

}


.restaurant-category-selected.is-open {

    background: #fff;

    border-color: #e53935;

    box-shadow:
        0 0 0 3px rgba(229,57,53,.12);

}


/* =========================================================
   ÍCONE SELECIONADO
========================================================= */

.restaurant-category-selected-icon {

    width: 28px;

    height: 28px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    font-size: 21px;

}


/* =========================================================
   TEXTO
========================================================= */

.restaurant-category-selected-text {

    flex: 1;

    color: #555;

}


.restaurant-category-selected-text.has-value {

    color: #222;

    font-weight: 500;

}


/* =========================================================
   SETA
========================================================= */

.restaurant-category-arrow {

    flex-shrink: 0;

    color: #888;

    font-size: 18px;

    transition:
        transform .2s ease;

}


.restaurant-category-selected.is-open
.restaurant-category-arrow {

    transform: rotate(180deg);

}


/* =========================================================
   LISTA
========================================================= */

.restaurant-category-options {

    position: absolute;

    top: calc(100% + 7px);

    left: 0;

    right: 0;

    z-index: 100;

    max-height: 320px;

    overflow-y: auto;

    padding: 6px;

    box-sizing: border-box;

    background: #fff;

    border: 1px solid #eee;

    border-radius: 12px;

    box-shadow:
        0 12px 30px rgba(0,0,0,.12);

    opacity: 0;

    visibility: hidden;

    transform: translateY(-5px);

    transition:
        opacity .15s ease,
        transform .15s ease,
        visibility .15s ease;

}


.restaurant-category-options.is-open {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}


/* =========================================================
   OPÇÃO
========================================================= */

.restaurant-category-option {

    width: 100%;

    min-height: 44px;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 8px 10px;

    border: none;

    border-radius: 8px;

    background: transparent;

    color: #333;

    font-family: inherit;

    font-size: 14px;

    cursor: pointer;

    text-align: left;

    transition:
        background .15s ease;

}


.restaurant-category-option:hover {

    background: #fff3f3;

}


.restaurant-category-option.is-selected {

    background: #ffebee;

}


/* =========================================================
   ÍCONE DA OPÇÃO
========================================================= */

.restaurant-category-option-icon {

    width: 30px;

    height: 30px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    font-size: 21px;

}


/* =========================================================
   NOME DA CATEGORIA
========================================================= */

.restaurant-category-option-name {

    flex: 1;

}


/* =========================================================
   SCROLL
========================================================= */

.restaurant-category-options::-webkit-scrollbar {

    width: 7px;

}


.restaurant-category-options::-webkit-scrollbar-track {

    background: transparent;

}


.restaurant-category-options::-webkit-scrollbar-thumb {

    background: #ddd;

    border-radius: 10px;

}


.restaurant-category-options::-webkit-scrollbar-thumb:hover {

    background: #ccc;

}


/* =========================================================
   MOBILE
========================================================= */

@media screen and (max-width: 600px) {

    .restaurant-category-options {

        max-height: 280px;

    }

}