.nc-search-form {
    display: flex;
    max-width: 650px;
    margin-top: 30px;
}

.nc-search-form input {
    flex: 1;
    padding: 16px 20px;
    border: 1px solid #dbe4ee;
    border-radius: 12px 0 0 12px;
    font-size: 16px;
}

.nc-search-form button {
    padding: 16px 28px;
    border: none;
    background: #2563eb;
    color: #fff;
    border-radius: 0 12px 12px 0;
    cursor: pointer;
}

/*==============================================================
#
# NovaCore Forms
#
==============================================================*/

/*--------------------------------------------------------------
# Labels
--------------------------------------------------------------*/

label{

    display:block;

    margin-bottom:8px;

    font-size:15px;

    font-weight:600;

    color:var(--nc-text);

}

/*--------------------------------------------------------------
# Base Fields
--------------------------------------------------------------*/

.nc-input,
.nc-select,
.nc-textarea,
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
select,
textarea{

    width:100%;

    padding:14px 18px;

    font-size:16px;

    font-family:inherit;

    color:var(--nc-text);

    background:var(--nc-bg);

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

    border-radius:18px;

    outline:none;

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

}

/*--------------------------------------------------------------
# Focus
--------------------------------------------------------------*/

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

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

    box-shadow:0 0 0 4px rgba(37,99,235,.15);

}

/*--------------------------------------------------------------
# Placeholder
--------------------------------------------------------------*/

::placeholder{

    color:var(--nc-text-light);

    opacity:1;

}

/*--------------------------------------------------------------
# Textarea
--------------------------------------------------------------*/

textarea,
.nc-textarea{

    min-height:140px;

    resize:vertical;

}

/*--------------------------------------------------------------
# Select
--------------------------------------------------------------*/

select,
.nc-select{

    cursor:pointer;

}

/*--------------------------------------------------------------
# Checkbox
--------------------------------------------------------------*/

input[type="checkbox"]{

    width:18px;

    height:18px;

    accent-color:var(--nc-primary);

    cursor:pointer;

}

/*--------------------------------------------------------------
# Radio
--------------------------------------------------------------*/

input[type="radio"]{

    width:18px;

    height:18px;

    accent-color:var(--nc-primary);

    cursor:pointer;

}

/*--------------------------------------------------------------
# Field Group
--------------------------------------------------------------*/

.nc-field{

    margin-bottom:24px;

}

.nc-field:last-child{

    margin-bottom:0;

}

/*--------------------------------------------------------------
# Help Text
--------------------------------------------------------------*/

.nc-help{

    margin-top:8px;

    font-size:14px;

    color:var(--nc-text-light);

    line-height:1.6;

}

/*--------------------------------------------------------------
# Validation
--------------------------------------------------------------*/

.nc-input--error{

    border-color:#ef4444;

}

.nc-input--success{

    border-color:#10b981;

}

/*--------------------------------------------------------------
# Disabled
--------------------------------------------------------------*/

input:disabled,
select:disabled,
textarea:disabled{

    opacity:.65;

    cursor:not-allowed;

    background:#f8fafc;

}

/*==============================================================
# Search Panel
==============================================================*/

.nc-search-panel{

    margin-block:8px 12px;

}

.nc-search-form__wrapper{

    display:flex;
    align-items:center;
    gap:16px;

    padding:10px;

    background:var(--nc-surface);

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

    border-radius:var(--nc-radius-xl);

    box-shadow:var(--nc-shadow-sm);

    transition:
        border-color var(--nc-transition),
        box-shadow var(--nc-transition);

}

.nc-search-form__input{

    flex:1;

    min-width:0;

    height:56px;

    font-size:17px;

    color:var(--nc-text);

}

.nc-search-form__submit{

    height:56px;

    padding:0 28px;

    border-radius:16px;

    font-weight:700;

    flex-shrink:0;

}

.nc-search-form__wrapper:focus-within{

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

    box-shadow:

    0 0 0 4px rgba(37,99,235,.12),

    0 16px 45px rgba(15,23,42,.10);

}

.nc-search-form__icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:48px;

    height:48px;

    color:var(--nc-primary);

    flex-shrink:0;

}

/*.nc-search-form__input{

    flex:1;

    border:none;

    outline:none;

    background:transparent;

    font-size:18px;

}*/

.nc-search-form__input::placeholder{

    color:#94a3b8;

}

.nc-search-form .nc-button{

    padding:

    14px

    28px;

    border-radius:999px;

    flex-shrink:0;

}

@media (max-width:768px){

    .nc-search-form__wrapper{

        flex-direction:column;

        border-radius:24px;

        padding:20px;

    }

    .nc-search-form__icon{

        display:none;

    }

    .nc-search-form__input{

        width:100%;

    }

    .nc-search-form .nc-button{

        width:100%;

    }

}