/* =========================================================
   BRILL VAULT
   PROFESSIONAL FINANCIAL FORMS V1
   ========================================================= */


/* ---------------------------------------------------------
   FINANCIAL FORM CONTAINER
   --------------------------------------------------------- */

#bv-final .bvff-form-panel {
    width: min(760px, 100%) !important;
    margin-left: auto !important;
    margin-right: auto !important;

    padding: 28px !important;

    background:
        radial-gradient(
            circle at 90% 0%,
            rgba(93, 167, 255, 0.05),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #0E1D2E,
            #091624
        ) !important;

    border:
        1px solid #1B3048 !important;

    border-radius:
        18px !important;

    box-shadow:
        0 24px 60px
        rgba(0, 0, 0, 0.18) !important;
}


#bv-final .bvff-form {
    width: 100% !important;
    max-width: 620px !important;

    margin-left: auto !important;
    margin-right: auto !important;
}


/* ---------------------------------------------------------
   FIELD SPACING
   --------------------------------------------------------- */

#bv-final .bvff-form input,
#bv-final .bvff-form select,
#bv-final .bvff-form textarea {
    box-sizing: border-box;
}


#bv-final .bvff-field {
    margin-bottom: 20px !important;
}


/* ---------------------------------------------------------
   LABELS
   --------------------------------------------------------- */

#bv-final .bvff-form label,
#bv-final .bvff-field-label {
    display: block;

    margin: 0 0 8px 2px !important;

    color:
        #A9BAD0 !important;

    font-size:
        12px !important;

    line-height:
        1.25 !important;

    font-weight:
        700 !important;

    letter-spacing:
        0.01em !important;
}


/* ---------------------------------------------------------
   NORMAL INPUT
   --------------------------------------------------------- */

#bv-final .bvff-form input:not(.bvff-money-input),
#bv-final .bvff-form select,
#bv-final .bvff-form textarea {

    width: 100% !important;

    min-height:
        52px !important;

    padding:
        0 16px !important;

    background:
        #081726 !important;

    color:
        #F4F7FB !important;

    border:
        1px solid #1B3048 !important;

    border-radius:
        12px !important;

    font-size:
        15px !important;

    font-weight:
        600 !important;

    outline:
        none !important;

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease !important;
}


#bv-final .bvff-form textarea {
    padding:
        14px 16px !important;

    min-height:
        100px !important;
}


#bv-final .bvff-form input:not(.bvff-money-input):hover,
#bv-final .bvff-form select:hover,
#bv-final .bvff-form textarea:hover {

    border-color:
        rgba(93, 167, 255, 0.30) !important;
}


#bv-final .bvff-form input:not(.bvff-money-input):focus,
#bv-final .bvff-form select:focus,
#bv-final .bvff-form textarea:focus {

    background:
        #091A2C !important;

    border-color:
        #5DA7FF !important;

    box-shadow:
        0 0 0 3px
        rgba(93, 167, 255, 0.08) !important;
}


#bv-final .bvff-form input::placeholder,
#bv-final .bvff-form textarea::placeholder {

    color:
        #607A98 !important;

    opacity:
        1 !important;

    font-weight:
        500 !important;
}


/* ---------------------------------------------------------
   VAULT ID
   --------------------------------------------------------- */

#bv-final .bvff-recipient-input {

    font-family:
        Inter,
        system-ui,
        sans-serif !important;

    letter-spacing:
        0.04em !important;

    text-transform:
        uppercase;
}


/* ---------------------------------------------------------
   MONEY INPUT
   --------------------------------------------------------- */

#bv-final .bvff-money-wrapper {

    display:
        flex !important;

    align-items:
        center !important;

    width:
        100% !important;

    min-height:
        54px !important;

    padding:
        0 15px !important;

    background:
        #081726 !important;

    border:
        1px solid #1B3048 !important;

    border-radius:
        12px !important;

    box-sizing:
        border-box !important;

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease !important;
}


#bv-final .bvff-money-wrapper:hover {

    border-color:
        rgba(93, 167, 255, 0.30) !important;
}


#bv-final .bvff-money-wrapper:focus-within {

    background:
        #091A2C !important;

    border-color:
        #5DA7FF !important;

    box-shadow:
        0 0 0 3px
        rgba(93, 167, 255, 0.08) !important;
}


#bv-final .bvff-currency-prefix {

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    min-width:
        42px !important;

    height:
        30px !important;

    margin-right:
        12px !important;

    padding-right:
        12px !important;

    border-right:
        1px solid #1B3048 !important;

    color:
        #5DA7FF !important;

    font-size:
        13px !important;

    font-weight:
        800 !important;

    letter-spacing:
        .03em !important;
}


#bv-final .bvff-money-input {

    flex:
        1 !important;

    width:
        auto !important;

    height:
        52px !important;

    min-height:
        52px !important;

    padding:
        0 !important;

    margin:
        0 !important;

    background:
        transparent !important;

    border:
        0 !important;

    border-radius:
        0 !important;

    box-shadow:
        none !important;

    outline:
        none !important;

    color:
        #F4F7FB !important;

    font-size:
        18px !important;

    line-height:
        52px !important;

    font-weight:
        700 !important;

    font-variant-numeric:
        tabular-nums !important;
}


/* ---------------------------------------------------------
   AMOUNT INFORMATION
   --------------------------------------------------------- */

#bv-final .bvff-money-meta {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        14px;

    margin-top:
        8px;

    padding:
        0 2px;

    color:
        #69829E;

    font-size:
        11px;
}


#bv-final .bvff-money-meta strong {

    color:
        #AFC6E2 !important;

    font-weight:
        700 !important;
}


/* ---------------------------------------------------------
   PRESET AMOUNT BUTTONS
   --------------------------------------------------------- */

#bv-final .bvff-preset {

    min-width:
        72px !important;

    height:
        40px !important;

    padding:
        0 16px !important;

    background:
        #0A1A2C !important;

    border:
        1px solid #1B3048 !important;

    border-radius:
        10px !important;

    color:
        #A8BAD0 !important;

    font-size:
        12px !important;

    font-weight:
        700 !important;

    transition:
        .17s ease !important;
}


#bv-final .bvff-preset:hover {

    color:
        #FFFFFF !important;

    border-color:
        #5DA7FF !important;

    background:
        rgba(93, 167, 255, 0.10) !important;

    transform:
        translateY(-1px);
}


/* ---------------------------------------------------------
   PRIMARY ACTION
   --------------------------------------------------------- */

#bv-final .bvff-primary-action {

    width:
        100% !important;

    min-height:
        48px !important;

    margin-top:
        10px !important;

    border:
        1px solid
        rgba(93, 167, 255, 0.42) !important;

    border-radius:
        11px !important;

    background:
        linear-gradient(
            180deg,
            #347DDF,
            #2867BA
        ) !important;

    color:
        #FFFFFF !important;

    font-size:
        13px !important;

    font-weight:
        800 !important;

    box-shadow:
        0 12px 28px
        rgba(52, 125, 223, 0.18) !important;

    transition:
        transform .17s ease,
        box-shadow .17s ease,
        background .17s ease !important;
}


#bv-final .bvff-primary-action:hover {

    transform:
        translateY(-1px);

    background:
        linear-gradient(
            180deg,
            #5DA7FF,
            #347DDF
        ) !important;

    box-shadow:
        0 15px 34px
        rgba(52, 125, 223, 0.25) !important;
}


/* ---------------------------------------------------------
   SECURITY / INFORMATION MESSAGE
   --------------------------------------------------------- */

#bv-final .bvff-security-note {

    position:
        relative;

    margin-top:
        16px !important;

    padding:
        13px 15px 13px 43px !important;

    background:
        rgba(93, 167, 255, 0.055) !important;

    border:
        1px solid
        rgba(93, 167, 255, 0.14) !important;

    border-radius:
        11px !important;

    color:
        #8299B4 !important;

    font-size:
        11px !important;

    line-height:
        1.5 !important;
}


#bv-final .bvff-security-note::before {

    content:
        "✓";

    position:
        absolute;

    left:
        14px;

    top:
        50%;

    transform:
        translateY(-50%);

    display:
        grid;

    place-items:
        center;

    width:
        19px;

    height:
        19px;

    border-radius:
        50%;

    background:
        rgba(85, 214, 166, 0.12);

    color:
        #55D6A6;

    font-size:
        10px;

    font-weight:
        900;
}


/* ---------------------------------------------------------
   SECTION TITLE
   --------------------------------------------------------- */

#bv-final .bvff-form-panel h2 {

    font-size:
        20px !important;

    letter-spacing:
        -0.025em !important;

    color:
        #F4F7FB !important;
}


#bv-final .bvff-form-panel h2 + p {

    margin-top:
        4px !important;

    margin-bottom:
        22px !important;

    color:
        #7188A2 !important;

    font-size:
        12px !important;

    line-height:
        1.5 !important;
}


/* ---------------------------------------------------------
   REMOVE CHEAP NUMBER SPINNER
   --------------------------------------------------------- */

#bv-final .bvff-money-input::-webkit-outer-spin-button,
#bv-final .bvff-money-input::-webkit-inner-spin-button {

    -webkit-appearance:
        none;

    margin:
        0;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media(max-width: 760px) {

    #bv-final .bvff-form-panel {

        width:
            100% !important;

        padding:
            20px !important;

        border-radius:
            14px !important;
    }


    #bv-final .bvff-form {

        max-width:
            100% !important;
    }


    #bv-final .bvff-money-input {

        font-size:
            17px !important;
    }


    #bv-final .bvff-money-meta {

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            4px;
    }
}