/*======================================================================

CTM PATH™ Guided Journey v6.0

Purpose
Premium Input System

Responsibility
• Text Inputs
• Email Inputs
• Telephone Inputs
• Textarea
• Labels
• Validation States
• Input Groups

======================================================================*/


/*==================================================
Field
==================================================*/

.field{

    width:100%;

    max-width:560px;

    margin:0 auto 36px;

}


/*==================================================
Field Label
==================================================*/

.field-label{

    display:block;

    margin-bottom:14px;

    text-align:center;

    font-family:var(--font-ui);

    font-size:1rem;

    font-weight:var(--font-weight-medium);

    letter-spacing:.05em;

    color:var(--text-secondary);

}


/*==================================================
Input Group
==================================================*/

.input-group{

    width:100%;

    max-width:560px;

    margin:0 auto;

    display:flex;

    justify-content:center;

    align-items:center;

}


/*==================================================
Base Input
==================================================*/

.input,

.input-field{

    width:100%;

    height:72px;

    padding:0 32px;

    background:#112742;

    border:2px solid #D8B36A;

    border-radius:var(--radius-round);

    outline:none;

    color:#FFFFFF;

    font-family:var(--font-ui);

    font-size:1.12rem;

    font-weight:var(--font-weight-regular);

    text-align:center;

    letter-spacing:.03em;

    box-shadow:

        0 0 0 1px rgba(255,255,255,.05),

        0 12px 28px rgba(0,0,0,.35);

    transition:

        background var(--speed-normal) var(--ease),

        border-color var(--speed-normal) var(--ease),

        box-shadow var(--speed-normal) var(--ease),

        transform var(--speed-normal) var(--ease);

}


/*==================================================
Hover
==================================================*/

.input:hover,

.input-field:hover{

    background:#163152;

    border-color:#F0CC86;

}


/*==================================================
Focus
==================================================*/

.input:focus,

.input-field:focus{

    background:#1B3B61;

    border-color:#FFD78A;

    transform:translateY(-1px);

    box-shadow:

        0 0 0 4px rgba(216,179,106,.18),

        0 0 36px rgba(216,179,106,.20);

}


/*==================================================
Placeholder
==================================================*/

.input::placeholder,

.input-field::placeholder{

    color:#CDD6E3;

    opacity:1;

}


/*==================================================
Textarea
==================================================*/

.textarea{

    width:100%;

    min-height:180px;

    padding:24px 28px;

    background:#112742;

    border:2px solid #D8B36A;

    border-radius:28px;

    outline:none;

    resize:vertical;

    color:#FFFFFF;

    font-family:var(--font-ui);

    font-size:1rem;

    line-height:1.8;

    box-shadow:

        0 0 0 1px rgba(255,255,255,.05),

        0 12px 28px rgba(0,0,0,.35);

    transition:

        background var(--speed-normal) var(--ease),

        border-color var(--speed-normal) var(--ease),

        box-shadow var(--speed-normal) var(--ease);

}


/*==================================================
Textarea Focus
==================================================*/

.textarea:focus{

    background:#1B3B61;

    border-color:#FFD78A;

    box-shadow:

        0 0 0 4px rgba(216,179,106,.18),

        0 0 36px rgba(216,179,106,.20);

}


/*==================================================
Validation
==================================================*/

.input-success{

    border-color:#2ECC71;

}

.input-error{

    border-color:#E74C3C;

}

.input-warning{

    border-color:#F4B942;

}


/*==================================================
Helper Text
==================================================*/

.field-help{

    margin-top:12px;

    text-align:center;

    color:var(--text-muted);

    font-size:.90rem;

    line-height:1.7;

}

.field-error{

    margin-top:12px;

    text-align:center;

    color:#E74C3C;

    font-size:.90rem;

}

.field-success{

    margin-top:12px;

    text-align:center;

    color:#2ECC71;

    font-size:.90rem;

}


/*==================================================
Disabled
==================================================*/

.input:disabled,

.input-field:disabled,

.textarea:disabled{

    opacity:.50;

    cursor:not-allowed;

}


/*==================================================
Read Only
==================================================*/

.input[readonly],

.input-field[readonly]{

    background:#0E1F36;

    opacity:.80;

}


/*==================================================
Tablet
==================================================*/

@media (max-width:768px){

    .field{

        margin-bottom:30px;

    }

    .input,

    .input-field{

        height:66px;

        padding:0 24px;

        font-size:1.02rem;

    }

    .textarea{

        min-height:160px;

    }

}


/*==================================================
Small Mobile
==================================================*/

@media (max-width:480px){

    .input,

    .input-field{

        height:60px;

        padding:0 20px;

        font-size:1rem;

    }

    .textarea{

        min-height:140px;

        padding:20px;

    }

}