/* Optimum WooCommerce Pincode Checker - Muraad Decorations responsive UI */
.optimum-pincode-box{
    width:100%;
    max-width:100%;
    margin:20px 0 16px;
    padding:18px;
    background:#f8f8f8;
    border:1px solid #e4e4e4;
    border-radius:10px;
    box-sizing:border-box;
    overflow:hidden;
}

.optimum-pincode-title{
    margin:0 0 10px;
    color:#222;
    font-family:inherit;
    font-size:15px;
    font-weight:600;
    line-height:1.4;
}

.optimum-pincode-input-wrap{
    display:flex;
    align-items:stretch;
    width:100%;
    max-width:100%;
    box-sizing:border-box;
}

.optimum-pincode-input-wrap input{
    display:block;
    flex:1 1 auto;
    width:1%;
    min-width:0;
    height:46px;
    min-height:46px;
    margin:0!important;
    padding:0 13px!important;
    border:1px solid #cfcfcf!important;
    border-right:0!important;
    border-radius:7px 0 0 7px!important;
    background:#fff!important;
    box-shadow:none!important;
    color:#222!important;
    font-family:inherit!important;
    font-size:14px!important;
    line-height:46px!important;
    outline:none!important;
    box-sizing:border-box!important;
    -webkit-appearance:none!important;
    appearance:none!important;
}

.optimum-pincode-input-wrap input:focus{
    border-color:#222!important;
}

.optimum-pincode-input-wrap button,
#optimum_check_pincode{
    display:inline-flex!important;
    flex:0 0 auto!important;
    align-items:center!important;
    justify-content:center!important;
    min-width:90px!important;
    height:46px!important;
    min-height:46px!important;
    margin:0!important;
    padding:0 20px!important;
    border:1px solid #222!important;
    border-radius:0 7px 7px 0!important;
    background:#222!important;
    color:#fff!important;
    font-family:inherit!important;
    font-size:14px!important;
    font-weight:600!important;
    line-height:1!important;
    text-align:center!important;
    text-decoration:none!important;
    text-transform:none!important;
    white-space:nowrap!important;
    cursor:pointer!important;
    box-shadow:none!important;
    -webkit-appearance:none!important;
    appearance:none!important;
    box-sizing:border-box!important;
    position:relative;
    z-index:2;
}

.optimum-pincode-input-wrap button:hover,
#optimum_check_pincode:hover{
    opacity:.92;
}

.optimum-pincode-input-wrap button:focus,
#optimum_check_pincode:focus{
    outline:2px solid rgba(34,34,34,.18)!important;
    outline-offset:2px!important;
}

.optimum-pincode-input-wrap button:disabled,
#optimum_check_pincode:disabled{
    opacity:.58!important;
    cursor:not-allowed!important;
}

#optimum_pincode_result{
    min-height:20px;
    margin-top:10px;
    font-size:13px;
    font-weight:500;
    line-height:1.45;
    word-break:break-word;
}

.optimum-pincode-success{color:#14833b;}
.optimum-pincode-error{color:#c92a2a;}

.optimum-pincode-lock-note{
    margin-top:8px;
    padding:8px 10px;
    border-radius:6px;
    background:#fff4f4;
    color:#9f2424;
    font-size:12px;
    line-height:1.45;
    transition:.2s ease;
}

.optimum-pincode-lock-note.is-unlocked{
    display:none;
}

/* Purchase lock: visually disabled but still clickable so a helpful message can be shown. */
.single-product .optimum-pincode-locked{
    opacity:.48!important;
    cursor:not-allowed!important;
    filter:grayscale(.12);
}

.single-product .optimum-pincode-locked:hover{
    opacity:.48!important;
}

/* Tablet */
@media (max-width:768px){
    .optimum-pincode-box{
        margin:16px 0 14px;
        padding:15px;
        border-radius:9px;
    }

    .optimum-pincode-title{
        font-size:14px;
        margin-bottom:9px;
    }

    .optimum-pincode-input-wrap input,
    .optimum-pincode-input-wrap button,
    #optimum_check_pincode{
        height:44px!important;
        min-height:44px!important;
    }

    .optimum-pincode-input-wrap input{
        line-height:44px!important;
        font-size:14px!important;
    }
}

/* Mobile */
@media (max-width:480px){
    .optimum-pincode-box{
        width:100%;
        max-width:100%;
        margin:14px 0 12px;
        padding:13px;
    }

    .optimum-pincode-input-wrap{
        display:grid;
        grid-template-columns:minmax(0,1fr) auto;
        width:100%;
    }

    .optimum-pincode-input-wrap input{
        width:100%!important;
        min-width:0!important;
        padding:0 11px!important;
        font-size:13px!important;
    }

    .optimum-pincode-input-wrap button,
    #optimum_check_pincode{
        min-width:78px!important;
        padding:0 14px!important;
        font-size:13px!important;
    }

    #optimum_pincode_result{
        font-size:12.5px;
    }

    .optimum-pincode-lock-note{
        font-size:11.5px;
        padding:7px 9px;
    }
}

/* Very small phones */
@media (max-width:340px){
    .optimum-pincode-input-wrap{
        display:flex;
        flex-direction:column;
        gap:8px;
    }

    .optimum-pincode-input-wrap input{
        width:100%!important;
        border:1px solid #cfcfcf!important;
        border-radius:7px!important;
    }

    .optimum-pincode-input-wrap button,
    #optimum_check_pincode{
        width:100%!important;
        border-radius:7px!important;
    }
}