/* =========================================================
   CUBE AROMA — RESET PASSWORD
   ========================================================= */

.cube-reset-page {

    --cube-bg: #FFFDFB;
    --cube-card: #F8F1E8;
    --cube-field: #FFFDFB;

    --cube-dark: #4D4C50;
    --cube-grey: #5C5D60;
    --cube-muted: #7D7774;

    --cube-line:
        rgba(77, 76, 80, 0.15);

    min-height: 70vh;

    padding:
        70px 20px;

    background:
        var(--cube-bg);

    color:
        var(--cube-dark);

    font-family:
        "Cairo",
        Arial,
        sans-serif;
}


.cube-reset-page *,
.cube-reset-page *::before,
.cube-reset-page *::after {
    box-sizing: border-box;
}


/* =========================================================
   SHELL
   ========================================================= */

.cube-reset-shell {

    width:
        min(
            500px,
            100%
        );

    margin:
        0 auto;
}


.cube-reset-card {

    width:
        100%;

    padding:
        38px 34px;

    border:
        1px solid
        var(--cube-line);

    border-radius:
        16px;

    background:
        var(--cube-card);
}


/* =========================================================
   LOGO
   ========================================================= */

.cube-reset-brand {

    display:
        flex;

    justify-content:
        center;

    margin-bottom:
        30px;
}


.cube-reset-logo {

    display:
        block;

    width:
        155px;

    max-width:
        100%;

    height:
        auto;
}


/* =========================================================
   HEADER
   ========================================================= */

.cube-reset-header {

    margin-bottom:
        28px;

    text-align:
        right;
}


.cube-reset-eyebrow {

    display:
        block;

    margin-bottom:
        5px;

    color:
        var(--cube-muted);

    font-size:
        10px;
}


.cube-reset-header h1,
.cube-reset-success h1,
.cube-reset-invalid h1 {

    margin:
        0
        0
        8px;

    color:
        var(--cube-dark);

    font-size:
        22px;

    font-weight:
        600;

    line-height:
        1.5;
}


.cube-reset-header p,
.cube-reset-success p,
.cube-reset-invalid p {

    margin:
        0;

    color:
        var(--cube-muted);

    font-size:
        11px;

    line-height:
        1.9;
}


/* =========================================================
   FORM
   ========================================================= */

.cube-reset-form {

    width:
        100%;
}


.cube-reset-field {

    margin-bottom:
        18px;
}


.cube-reset-field label {

    display:
        block;

    margin-bottom:
        7px;

    color:
        var(--cube-dark);

    font-size:
        10px;

    font-weight:
        500;
}


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

.cube-reset-input-wrap {

    position:
        relative;

    display:
        flex;

    width:
        100%;

    height:
        50px;

    align-items:
        center;

    border:
        1px solid
        var(--cube-line);

    border-radius:
        11px;

    background:
        var(--cube-field);

    overflow:
        hidden;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


.cube-reset-input-wrap:focus-within {

    border-color:
        var(--cube-dark);

    box-shadow:
        0 0 0 3px
        rgba(77, 76, 80, 0.05);
}


.cube-reset-input-wrap input {

    width:
        100%;

    height:
        48px;

    margin:
        0;

  padding:
    0
    48px
    0
    54px;
	
    border:
        0 !important;

    background:
        transparent !important;

    color:
        var(--cube-dark);

    font-family:
        "Cairo",
        Arial,
        sans-serif;

    font-size:
        12px;

    outline:
        none !important;

    box-shadow:
        none !important;
}
.cube-reset-input-wrap input[type="password"],
.cube-reset-input-wrap input[type="text"] {
    padding-right: 54px !important;
    padding-left: 48px !important;

    box-sizing: border-box !important;
}

/* =========================================================
   LOCK ICON
   ========================================================= */

.cube-reset-field-icon {

    position:
        absolute;

    right:
        14px;

    top:
        50%;

    transform:
        translateY(-50%);

    display:
        flex;

    width:
        19px;

    height:
        19px;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--cube-grey);

    pointer-events:
        none;

    z-index:
        2;
}


.cube-reset-field-icon svg {

    width:
        19px;

    height:
        19px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.5;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


/* =========================================================
   PASSWORD EYE
   ========================================================= */

.cube-reset-password-toggle {

    position:
        absolute !important;

    left:
        10px !important;

    right:
        auto !important;

    top:
        50% !important;

    transform:
        translateY(-50%) !important;

    display:
        flex !important;

    width:
        34px !important;

    height:
        34px !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    margin:
        0 !important;

    padding:
        0 !important;

    border:
        0 !important;

    border-radius:
        50% !important;

    background:
        transparent !important;

    color:
        var(--cube-grey) !important;

    box-shadow:
        none !important;

    outline:
        none !important;

    cursor:
        pointer !important;

    appearance:
        none !important;

    -webkit-appearance:
        none !important;
}


.cube-reset-password-toggle:hover,
.cube-reset-password-toggle:focus,
.cube-reset-password-toggle:active {

    border:
        0 !important;

    background:
        transparent !important;

    color:
        var(--cube-dark) !important;

    box-shadow:
        none !important;

    outline:
        none !important;
}


.cube-reset-password-toggle svg {

    width:
        19px !important;

    height:
        19px !important;

    fill:
        none !important;

    stroke:
        currentColor !important;

    stroke-width:
        1.5 !important;

    stroke-linecap:
        round !important;

    stroke-linejoin:
        round !important;

    pointer-events:
        none !important;
}


/* =========================================================
   BUTTON
   ========================================================= */

.cube-reset-submit,
.cube-reset-login-button,
.cube-reset-secondary-button {

    display:
        flex;

    width:
        100%;

    min-height:
        48px;

    align-items:
        center;

    justify-content:
        center;

    margin-top:
        22px;

    padding:
        8px 20px;

    border:
        1px solid
        var(--cube-dark) !important;

    border-radius:
        11px !important;

    background:
        var(--cube-dark) !important;

    color:
        var(--cube-field) !important;

    font-family:
        "Cairo",
        Arial,
        sans-serif;

    font-size:
        11px;

    font-weight:
        500;

    text-decoration:
        none !important;

    cursor:
        pointer;

    box-shadow:
        none !important;

    outline:
        none !important;

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}


.cube-reset-submit:hover,
.cube-reset-login-button:hover,
.cube-reset-secondary-button:hover {

    background:
        var(--cube-field) !important;

    color:
        var(--cube-dark) !important;
}


/* =========================================================
   MESSAGES
   ========================================================= */

.cube-reset-messages {

    margin-bottom:
        18px;
}


.cube-reset-message {

    margin-bottom:
        10px;

    padding:
        11px 13px;

    border:
        1px solid
        var(--cube-line);

    border-radius:
        10px;

    background:
        var(--cube-field);

    color:
        var(--cube-dark);

    font-size:
        10px;

    line-height:
        1.8;
}


/* =========================================================
   SUCCESS / INVALID
   ========================================================= */

.cube-reset-success,
.cube-reset-invalid {

    text-align:
        center;
}


.cube-reset-success-icon {

    display:
        flex;

    width:
        54px;

    height:
        54px;

    align-items:
        center;

    justify-content:
        center;

    margin:
        0 auto
        20px;

    border:
        1px solid
        var(--cube-line);

    border-radius:
        50%;

    background:
        var(--cube-field);

    color:
        var(--cube-dark);
}


.cube-reset-success-icon svg {

    width:
        25px;

    height:
        25px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.6;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


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

@media (max-width: 600px) {

    .cube-reset-page {

        padding:
            35px
            14px
            55px;
    }


    .cube-reset-card {

        padding:
            28px
            20px;

        border-radius:
            14px;
    }


    .cube-reset-logo {

        width:
            140px;
    }


    .cube-reset-header h1,
    .cube-reset-success h1,
    .cube-reset-invalid h1 {

        font-size:
            20px;
    }

}