/* ==========================================================
   ROCK YOUR TIME®
   FORMS
========================================================== */

/* ----------------------------------------------------------
   FORM LAYOUT
---------------------------------------------------------- */

.ryt-form{

    display:flex;

    flex-direction:column;

    gap:24px;

}

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

.ryt-label,
label{

    display:block;

    margin-bottom:8px;

    color:var(--ryt-text);

    font-size:.95rem;

    font-weight:600;

}

/* ----------------------------------------------------------
   INPUTS
---------------------------------------------------------- */

.ryt-input,
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="search"],
textarea,
select{

    width:100%;

    padding:14px 16px;

    background:white;

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

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

    color:var(--ryt-text);

    font-family:var(--ryt-font-body);

    font-size:var(--ryt-font-md);

    transition:
        border-color var(--ryt-speed-fast),
        box-shadow var(--ryt-speed-fast);

}

/* ----------------------------------------------------------
   FOCUS
---------------------------------------------------------- */

.ryt-input:focus,
.form-control:focus,
input:focus,
textarea:focus,
select:focus{

    outline:none;

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

    box-shadow:0 0 0 4px rgba(11,79,108,.15);

}

/* ----------------------------------------------------------
   PLACEHOLDERS
---------------------------------------------------------- */

::placeholder{

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

    opacity:.8;

}

/* ----------------------------------------------------------
   TEXTAREA
---------------------------------------------------------- */

textarea{

    min-height:140px;

    resize:vertical;

}

/* ----------------------------------------------------------
   SELECT
---------------------------------------------------------- */

select{

    cursor:pointer;

}

/* ----------------------------------------------------------
   CHECKBOXES
---------------------------------------------------------- */

input[type="checkbox"]{

    width:18px;

    height:18px;

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

}

/* ----------------------------------------------------------
   RADIO BUTTONS
---------------------------------------------------------- */

input[type="radio"]{

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

}

/* ----------------------------------------------------------
   HELP TEXT
---------------------------------------------------------- */

.form-text{

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

    font-size:.85rem;

}

/* ----------------------------------------------------------
   VALIDATION
---------------------------------------------------------- */

.is-valid{

    border-color:var(--ryt-success) !important;

}

.is-invalid{

    border-color:var(--ryt-danger) !important;

}

.invalid-feedback{

    display:block;

    color:var(--ryt-danger);

    margin-top:6px;

    font-size:.85rem;

}

.valid-feedback{

    display:block;

    color:var(--ryt-success);

    margin-top:6px;

    font-size:.85rem;

}

/* ----------------------------------------------------------
   FIELDSETS
---------------------------------------------------------- */

fieldset{

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

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

    padding:24px;

}

legend{

    padding:0 10px;

    font-weight:700;

    color:var(--ryt-primary);

}

/* ----------------------------------------------------------
   SEARCH
---------------------------------------------------------- */

.ryt-search{

    position:relative;

}

.ryt-search input{

    padding-left:48px;

}

.ryt-search-icon{

    position:absolute;

    left:16px;

    top:50%;

    transform:translateY(-50%);

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

}

/* ----------------------------------------------------------
   FORM ACTIONS
---------------------------------------------------------- */

.ryt-form-actions{

    display:flex;

    justify-content:flex-end;

    gap:16px;

    margin-top:24px;

}

/* ----------------------------------------------------------
   READ ONLY
---------------------------------------------------------- */

input[readonly],
textarea[readonly]{

    background:#f8fafc;

}