/*
==========================================
PM UI Framework
Forms
Version: 0.1.0
==========================================
*/


/* ==========================================
   FORM VARIABLES
========================================== */

:root {

    --pm-input-bg: #ffffff;
    --pm-input-border: #d9d9d9;
    --pm-input-border-hover: #bdbdbd;

    --pm-input-focus: var(--pm-secondary);

    --pm-input-radius: 10px;

    --pm-input-padding-y: 12px;
    --pm-input-padding-x: 16px;

    --pm-input-font-size: 16px;

    --pm-input-shadow-focus:
        0 0 0 3px rgba(25,118,210,.15);

}


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

.pm-form-group {

    margin-bottom: 1.25rem;

}


/* ==========================================
   LABELS
========================================== */

.pm-label {

    display:block;

    margin-bottom:.5rem;

    font-size:.95rem;

    font-weight:600;

    color:var(--pm-text);

}


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

.pm-input,
.pm-textarea,
.pm-select {


    width:100%;

    background:var(--pm-input-bg);

    border:1px solid var(--pm-input-border);

    border-radius:var(--pm-input-radius);

    padding:
    var(--pm-input-padding-y)
    var(--pm-input-padding-x);

    font-size:var(--pm-input-font-size);

    font-family:inherit;

    color:var(--pm-text);

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


    outline:none;

}


/* ==========================================
   HOVER
========================================== */

.pm-input:hover,
.pm-textarea:hover,
.pm-select:hover {


    border-color:
    var(--pm-input-border-hover);

}

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

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


    border-color:
    var(--pm-input-focus);


    box-shadow:
    var(--pm-input-shadow-focus);


}


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

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


    color:#9e9e9e;

    opacity:1;

}



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

.pm-textarea {


    min-height:140px;

    resize:vertical;

    line-height:1.6;

}



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

.pm-select {


    cursor:pointer;

}



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

.pm-input.is-success,
.pm-textarea.is-success,
.pm-select.is-success {


    border-color:#2e7d32;


    box-shadow:
    0 0 0 3px rgba(46,125,50,.12);


}



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

.pm-input.is-error,
.pm-textarea.is-error,
.pm-select.is-error {


    border-color:#d32f2f;


    box-shadow:
    0 0 0 3px rgba(211,47,47,.12);


}



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

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


    background:#f5f5f5;


    cursor:not-allowed;


    opacity:.7;


}

/* ==========================================
   CHECKBOX & RADIO BASE
========================================== */


.pm-check,
.pm-radio {


    display:flex;

    align-items:center;

    gap:.6rem;

    cursor:pointer;

    user-select:none;

    font-size:.95rem;

    color:var(--pm-text);


}


/* ==========================================
   INPUT ORIGINAL OCULTO
========================================== */

.pm-check input,
.pm-radio input {


    position:absolute;

    opacity:0;

    pointer-events:none;


}



/* ==========================================
   CUSTOM BOX
========================================== */

.pm-check-box,
.pm-radio-box {


    width:20px;

    height:20px;

    border:2px solid var(--pm-input-border);

    background:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:
    all .25s ease;


}



/* ==========================================
   CHECKBOX SHAPE
========================================== */

.pm-check-box {


    border-radius:5px;


}



/* ==========================================
   RADIO SHAPE
========================================== */

.pm-radio-box {


    border-radius:50%;


}



/* ==========================================
   CHECKED STATE
========================================== */


.pm-check input:checked + .pm-check-box {


    background:
    var(--pm-primary);


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


}


.pm-radio input:checked + .pm-radio-box {


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


}



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


.pm-check input:checked + .pm-check-box::after {


    content:"";


    width:8px;

    height:13px;


    border-right:2px solid #fff;

    border-bottom:2px solid #fff;


    transform:
    rotate(45deg)
    translate(-1px,-2px);


}



/* ==========================================
   RADIO DOT
========================================== */


.pm-radio input:checked + .pm-radio-box::after {


    content:"";


    width:10px;

    height:10px;


    background:
    var(--pm-primary);


    border-radius:50%;


}



/* ==========================================
   HOVER
========================================== */


.pm-check:hover .pm-check-box,
.pm-radio:hover .pm-radio-box {


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


}



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


.pm-check input:focus-visible + .pm-check-box,
.pm-radio input:focus-visible + .pm-radio-box {


    box-shadow:

    0 0 0 3px rgba(46,125,50,.15);


}

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


.pm-input-group {


    display:flex;

    align-items:stretch;

    width:100%;


}



/* ==========================================
   GROUP ELEMENTS
========================================== */


.pm-input-group .pm-input {


    border-radius:0;


}



/* ==========================================
   FIRST ELEMENT
========================================== */


.pm-input-group > *:first-child {


    border-top-left-radius:
    var(--pm-input-radius);


    border-bottom-left-radius:
    var(--pm-input-radius);


}



/* ==========================================
   LAST ELEMENT
========================================== */


.pm-input-group > *:last-child {


    border-top-right-radius:
    var(--pm-input-radius);


    border-bottom-right-radius:
    var(--pm-input-radius);


}



/* ==========================================
   INPUT PREFIX / SUFFIX
========================================== */


.pm-input-addon {


    display:flex;

    align-items:center;

    justify-content:center;


    padding:
    var(--pm-input-padding-y)
    14px;


    background:#f5f5f5;


    border:1px solid var(--pm-input-border);


    color:#666;


    font-size:.95rem;


}



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


.pm-input-icon {


    position:relative;


}



/* ICON POSITION */


.pm-input-icon svg,
.pm-input-icon i {


    position:absolute;


    top:50%;


    transform:
    translateY(-50%);


    color:#888;


    pointer-events:none;


}



/* LEFT ICON */


.pm-input-icon.icon-left svg,
.pm-input-icon.icon-left i {


    left:15px;


}



.pm-input-icon.icon-left .pm-input {


    padding-left:45px;


}



/* RIGHT ICON */


.pm-input-icon.icon-right svg,
.pm-input-icon.icon-right i {


    right:15px;


}



.pm-input-icon.icon-right .pm-input {


    padding-right:45px;


}



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


.pm-input-sm {


    padding:

    8px 12px;


    font-size:.9rem;


}



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


.pm-input-lg {


    padding:

    16px 20px;


    font-size:1.1rem;


}



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


.pm-help-text {


    display:block;


    margin-top:.4rem;


    font-size:.85rem;


    color:#757575;


}



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


.pm-error-text {


    display:block;


    margin-top:.4rem;


    font-size:.85rem;


    color:#d32f2f;


}



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


.pm-success-text {


    display:block;


    margin-top:.4rem;


    font-size:.85rem;


    color:#2e7d32;


}

/* ==========================================
   WORDPRESS FORM COMPATIBILITY
========================================== */


/* Inputs nativos WordPress */

.wp-form input[type="text"],
.wp-form input[type="email"],
.wp-form input[type="tel"],
.wp-form input[type="number"],
.wp-form input[type="password"],
.wp-form textarea,
.wp-form select {


    width:100%;


    background:var(--pm-input-bg);


    border:1px solid var(--pm-input-border);


    border-radius:
    var(--pm-input-radius);


    padding:

    var(--pm-input-padding-y)
    var(--pm-input-padding-x);


    font-family:inherit;


}



/* ==========================================
   CONTACT FORM 7
========================================== */


.wpcf7-form input,
.wpcf7-form textarea,
.wpcf7-form select {


    width:100%;


    border:1px solid var(--pm-input-border);


    border-radius:
    var(--pm-input-radius);


    padding:

    var(--pm-input-padding-y)
    var(--pm-input-padding-x);


}



.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {


    border-color:
    var(--pm-secondary);


    box-shadow:
    var(--pm-input-shadow-focus);


}



/* ==========================================
   SEARCH FORM
========================================== */


.pm-search-form {


    display:flex;


    width:100%;


    gap:.5rem;


}



.pm-search-form .pm-input {


    flex:1;


}



/* ==========================================
   WOOCOMMERCE COMPATIBILITY
========================================== */


.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {


    width:100%;


    padding:

    var(--pm-input-padding-y)
    var(--pm-input-padding-x);


    border:

    1px solid var(--pm-input-border);


    border-radius:

    var(--pm-input-radius);


}



/* ==========================================
   FORM INLINE
========================================== */


.pm-form-inline {


    display:flex;


    align-items:center;


    gap:1rem;


}



.pm-form-inline .pm-form-group {


    margin-bottom:0;


}



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


@media(max-width:768px){


    .pm-form-inline {


        flex-direction:column;


        align-items:stretch;


    }



    .pm-input-lg {


        padding:

        14px 16px;


    }



    .pm-search-form {


        flex-direction:column;


    }



}

/* ==========================================
   FORM BUTTON AREA
========================================== */


.pm-form-actions {


    display:flex;


    align-items:center;


    gap:1rem;


    margin-top:1.5rem;


}



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


.pm-required {


    color:#d32f2f;


    margin-left:3px;


}



/* ==========================================
   FORM DIVIDER
========================================== */


.pm-form-divider {


    width:100%;


    height:1px;


    background:#eeeeee;


    margin:

    1.5rem 0;


}



/* ==========================================
   FORM CARD
========================================== */


.pm-form-card {


    background:#ffffff;


    border-radius:

    var(--pm-radius-lg);


    padding:2rem;


    box-shadow:

    var(--pm-shadow-sm);


}



/* ==========================================
   LOADING STATE
========================================== */


.pm-form-loading {


    position:relative;


    pointer-events:none;


    opacity:.65;


}



/* ==========================================
   LOADING OVERLAY
========================================== */


.pm-form-loading::after {


    content:"";


    position:absolute;


    inset:0;


    background:

    rgba(255,255,255,.65);


    border-radius:

    inherit;


}



/* ==========================================
   DISABLED BUTTON INSIDE FORM
========================================== */


.pm-form-actions .pm-btn:disabled {


    opacity:.6;


    cursor:not-allowed;


}



/* ==========================================
   FULL WIDTH FORM ELEMENT
========================================== */


.pm-form-full {


    width:100%;


}



/* ==========================================
   COMPACT FORM
========================================== */


.pm-form-compact .pm-form-group {


    margin-bottom:.75rem;


}



/* ==========================================
   END PM FORMS
========================================== */