/*
==================================================
SPI UI Framework
Component : Form
Version   : 1.0.0
Author    : StudioProjectID
==================================================
*/


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

.spi-form-group{

    display:flex;

    flex-direction:column;

    gap:8px;

    margin-bottom:20px;

}


/*==================================================
LABEL
==================================================*/

.spi-label{

    font-size:14px;

    font-weight:600;

    color:var(--spi-text);

}


/*==================================================
REQUIRED
==================================================*/

.spi-required{

    color:var(--spi-danger);

    margin-left:4px;

}


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

.spi-input{

    width:100%;

    height:46px;

    padding:0 16px;

    border:1px solid var(--spi-border);

    border-radius:var(--spi-radius-md);

    background:var(--spi-card);

    color:var(--spi-text);

    transition:var(--spi-transition);

}


/*==================================================
TEXTAREA
==================================================*/

.spi-textarea{

    width:100%;

    min-height:120px;

    padding:14px 16px;

    resize:vertical;

    border:1px solid var(--spi-border);

    border-radius:var(--spi-radius-md);

    background:var(--spi-card);

    color:var(--spi-text);

    transition:var(--spi-transition);

}


/*==================================================
SELECT
==================================================*/

.spi-select{

    width:100%;

    height:46px;

    padding:0 16px;

    border:1px solid var(--spi-border);

    border-radius:var(--spi-radius-md);

    background:var(--spi-card);

    cursor:pointer;

}


/*==================================================
FOCUS
==================================================*/

.spi-input:focus,
.spi-textarea:focus,
.spi-select:focus{

    border-color:var(--spi-primary);

    box-shadow:0 0 0 4px rgba(34,197,94,.15);

}


/*==================================================
PLACEHOLDER
==================================================*/

.spi-input::placeholder,
.spi-textarea::placeholder{

    color:var(--spi-text-muted);

}


/*==================================================
DISABLED
==================================================*/

.spi-input:disabled,
.spi-textarea:disabled,
.spi-select:disabled{

    background:#f8fafc;

    cursor:not-allowed;

    opacity:.7;

}


/*==================================================
READONLY
==================================================*/

.spi-input[readonly]{

    background:#f9fafb;

}


/*==================================================
ERROR
==================================================*/

.spi-input-error,
.spi-textarea-error,
.spi-select-error{

    border-color:var(--spi-danger);

}

.spi-input-error:focus,
.spi-textarea-error:focus,
.spi-select-error:focus{

    box-shadow:0 0 0 4px rgba(239,68,68,.15);

}


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

.spi-input-success,
.spi-textarea-success,
.spi-select-success{

    border-color:var(--spi-success);

}

.spi-input-success:focus,
.spi-textarea-success:focus,
.spi-select-success:focus{

    box-shadow:0 0 0 4px rgba(34,197,94,.15);

}


/*==================================================
HELP TEXT
==================================================*/

.spi-help{

    font-size:13px;

    color:var(--spi-text-muted);

}


/*==================================================
ERROR TEXT
==================================================*/

.spi-error{

    font-size:13px;

    color:var(--spi-danger);

}


/*==================================================
SUCCESS TEXT
==================================================*/

.spi-success{

    font-size:13px;

    color:var(--spi-success);

}


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

.spi-input-group{

    display:flex;

    align-items:center;

    border:1px solid var(--spi-border);

    border-radius:var(--spi-radius-md);

    overflow:hidden;

    background:var(--spi-card);

}

.spi-input-group .spi-input{

    border:none;

    box-shadow:none;

    flex:1;

}


/*==================================================
PREFIX
==================================================*/

.spi-prefix{

    padding:0 16px;

    color:var(--spi-text-muted);

    border-right:1px solid var(--spi-border);

}


/*==================================================
SUFFIX
==================================================*/

.spi-suffix{

    padding:0 16px;

    color:var(--spi-text-muted);

    border-left:1px solid var(--spi-border);

}


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

.spi-input-icon{

    padding:0 16px;

    display:flex;

    align-items:center;

    color:var(--spi-text-muted);

}

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

.spi-currency-input{

    position:relative;

    width:100%;

}


.spi-currency-prefix{

    position:absolute;

    left:16px;

    top:50%;

    transform:translateY(-50%);

    z-index:2;

    display:flex;

    align-items:center;

    color:#64748b;

    font-size:14px;

    font-weight:600;

    pointer-events:none;

}


.spi-currency-display{

    padding-left:50px !important;

    font-variant-numeric:tabular-nums;

}


.spi-currency-display:focus{

    border-color:#22b573;

    box-shadow:
        0 0 0 3px rgba(34,181,115,.10);

}

/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:768px){

    .spi-form-group{

        margin-bottom:16px;

    }
    
    .spi-currency-prefix{

        left:14px;

    }


    .spi-currency-display{

        padding-left:46px !important;

    }

}