/* This stylesheet is used for the public-facing components of the plugin. */

/* Ensure all signer input fields use Open Sans font consistently */
input[class*="esig-sif"], 
input[class*="wpesign__sif"],
textarea[class*="esig-sif"],
textarea[class*="wpesign__sif"],
select[class*="esig-sif"],
select[class*="wpesign__sif"] {
    font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
}

/* Hide resize handles in published documents (frontend only) */
.esig-resize-handle {
    display: none !important;
}

input.esig-sif-textfield
{
    background-color: #FFFFFF;
    height: 2.5em !important;
    border: 1px solid #CDCDCD;
    margin: 4px 0;
    display: inline-block!important;
    padding: 0 7px;
    font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
}

/* Match datepicker input styling to textbox */
input.esig-sif-datepicker
{
    background-color: #FFFFFF;
    height: 2.5em !important;
    border: 1px solid #CDCDCD;
    margin: 4px 0;
    display: inline-block!important;
    padding: 0 7px;
    font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
}

/* Calendar container styling - matches textbox exactly */
.wpesign__sif-calendar-container {
    display: inline-block !important; /* Match textbox wrapper display */
    vertical-align: baseline !important; /* Match textbox vertical-align */
    background-color: transparent !important; /* Container should be transparent, input has the background */
    border: none !important; /* No border on container, input has the border */
    border-radius: 0;
    padding: 0;
    margin: 0;
    font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    min-width: auto;
    position: relative;
}

/* Remove border and min-width from container when signed (value span will have its own border) */
.wpesign__sif-calendar-container.signed {
    border: none !important;
    background-color: transparent !important;
    min-width: auto !important;
    padding: 0 !important;
}

/* When container has a span with border style (signed value), remove container border */
.wpesign__sif-calendar-container > span[style*="border"],
.wpesign__sif-calendar-container.signed > span {
    display: inline-block;
    min-width: auto !important;
    width: auto !important;
}

/* Modern browsers: remove border when container doesn't have input (signed state) */
@supports selector(:has(*)) {
    .wpesign__sif-calendar-container:not(:has(input.wpesign__sif-calendar-input)) {
        border: none !important;
        background-color: transparent !important;
        min-width: auto !important;
        padding: 0 !important;
    }
}

/* Hide old placeholder span elements - placeholder should be in input attribute, not a separate span */
.wpesign__sif-calendar-container .wpesign__sif-calendar-placeholder {
    display: none !important;
}

/* Fix layout for old documents - ensure placeholder and input are inline */
.wpesign__sif-calendar-container > * {
    display: inline-block;
    vertical-align: middle;
}

/* If placeholder appears as a label above, hide it and use input placeholder instead */
.wpesign__sif-calendar-container label {
    display: none !important;
}

/* Ensure calendar container and its contents are inline */
.wpesign__sif-calendar-container {
    white-space: nowrap;
}

/* Hide placeholder text when document is signed */
.wpesign__sif-calendar-container.signed .wpesign__sif-calendar-placeholder,
.wpesign__sif-calendar-container.signed input.wpesign__sif-calendar-input::placeholder,
.wpesign__sif-calendar-container.signed input.wpesign__sif-calendar-input::-webkit-input-placeholder,
.wpesign__sif-calendar-container.signed input.wpesign__sif-calendar-input::-moz-placeholder,
.wpesign__sif-calendar-container.signed input.wpesign__sif-calendar-input:-ms-input-placeholder {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    color: transparent !important;
}

/* Also hide placeholder when input has value */
input.wpesign__sif-calendar-input:not(:placeholder-shown)::placeholder,
input.wpesign__sif-calendar-input[value]:not([value=""])::placeholder {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Match new calendar input styling to textbox - exact same background and text color */
input.wpesign__sif-calendar-input
{
    background-color: #eaf8ff !important; /* rgb(234, 248, 255) - same as textbox */
    border: 1px solid #00a9ff !important; /* Match textbox border exactly */
    border-radius: 0.2rem !important; /* Match textbox border-radius */
    margin: 0;
    display: inline-block!important;
    padding: 6px 20px 6px 10px !important; /* Match textbox padding */
    font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    font-size: 14px !important;
    outline: none;
    min-width: 150px;
    width: auto;
    box-sizing: border-box;
    height: 2.5em !important;
    flex: 0 0 auto;
    color: #00a9ff !important; /* Match textbox text color exactly - blue */
    vertical-align: baseline !important;
    position: relative;
}

/* Placeholder text should match textbox placeholder color */
input.wpesign__sif-calendar-input::placeholder,
input.wpesign__sif-calendar-input::-webkit-input-placeholder,
input.wpesign__sif-calendar-input::-moz-placeholder,
input.wpesign__sif-calendar-input:-ms-input-placeholder {
    color: #00a9ff !important; /* Match textbox placeholder color - blue */
    opacity: 0.6; /* Standard placeholder opacity */
}

input.esig-sif-textfield.esig-error
{
    border-color:#c00;
}

input.esig-sif-datepicker.esig-error
{
    border-color:#c00;
}

input.wpesign__sif-calendar-input.esig-error
{
    border-color:#c00;
}

.esig-sif-textfield.signed
{

    background-color: transparent;
    border: 1px solid #ccc;
    padding:10px;

}

/*input.esig-sif-todaydate
{
    height:2.5em !important;

} */
input.esig-sif-todaydate.signed
{
    border-width: 0 0 1px 0 !important;
}
.document-sign-page .radio
{
    display:block;	
    margin-left:25px;
    height:1em;	

}
.esig-sif-radio input[type="radio"]
{
    height:1em !important;
    float:none;
    margin-left:0px;
    width:1.5em !important;	
}
.document-sign-page .radio .esig-sif-radio
{
    margin-left: 10px;

}
.document-sign-page .radio-horizental
{
    display:inline-block;
    padding-right:1em;
    height:1em;	
}

.document-sign-page .radio-horizental .esig-sif-radio
{
    margin-left: 10px;
}

/*checkbox style start here */



.sifreadonly
{
    opacity: 0.5!important;
    border: 1px solid #E7DEDE!important;
    background: #e9f4ff!important;
}
.esig-sif-none 
{
    opacity:0.4;
    padding-right:5px;
}
.sif-file-container{
    border: 2px solid #DFDFDF;
    padding: 18px;
    -webkit-border-radius: 7px;
    border-radius: 7px;
    background: #F6F6F6;
}

.sif-file-container label{
    font-weight: 400;
}

.wpesign__sif-file-container {
    display: inline-flex;
    gap: 8px;
}

/* Hide empty p tags that wpautop may add between checkbox/radio elements */
.wpesign__sif-checkbox-container > p:empty,
.wpesign__sif-radio-container > p:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
}

@media only screen and (max-width: 450px) {

    .sif-file-container label
    {
        display: flex;
        flex-direction: column;
    }

    .esig-datepicker-display
    {
            display: flex;
            flex-direction: column;
    }
    
}
    .esig-datepicker-display
    {
        font-weight: normal !important;
    }
/* error msg start hree */

.sif-icon-size
{
    padding-left: 10px; 
    font-size: 1em;
    cursor: pointer;
}

.sif-textarea-border {
    border:1px solid #ccc;
    display:block;

    text-align:left;
    padding:3px;
    font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
}

#ui-datepicker-div {display: none;}

#ui-datepicker-div .ui-state-disabled .ui-state-default {
    opacity: 0.3 !important;   
}

.document-sign-page label 
{
    display:inline-flex; 
}

.document-sign-page label.radio-inline, .document-sign-page label.checkbox-inline {
    display: inline !important;
    padding-right: 1.5%;
}

.document-sign-page label span
{
    display:inline-flex;
    margin:0 5px ;
}

.document-sign-page .radio-inline , .checkbox-inline
{
    vertical-align: unset !important;
}

.esig-sif-email, .esig-sif-email:hover
{
    text-decoration: none;
    color:inherit !important;
}

.esig-sif-url, .esig-sif-url:hover
{
    text-decoration: none;
    color:inherit !important;
}


.checkbox input[type=radio] 
{
    margin-right: 7px;
    margin-top: 2px;
}
.checkbox input[type=checkbox] 
{
    margin-top: 5px;
}


.checkbox-inline+.checkbox-inline, .radio-inline+.radio-inline{
    margin-top: 0;
}

@media only screen and (max-width: 600px) {
.checkbox-inline+.checkbox-inline,
    .radio-inline+.radio-inline {
        margin-top: 0;
        margin-left: 0;
    }
}

.button-inline {
    padding-right: 10px;
}  
.checkbox-inline, .radio-inline {
    padding-left: 20px;
    display:inline-flex !important;
}

.checkbox-inline input[type=checkbox], .radio-inline input[type=radio]
{
    margin-right:10px;
}

.glyphicon-trash:before {
    content: "\e020";
} 

select {
    max-width: 100%;
    font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
}

textarea.wpesign__sif-paragraph-container {
    font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    resize: none !important;
}

.document-sign-page label {
    font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
}

/* Align SVG with text in checkbox and radio labels for webview */
/* Override general label styles for checkbox/radio groups */
.document-sign-page .wpesign__sif-checkbox-group label,
.document-sign-page .wpesign__sif-radio-group label {
    display: inline-block !important;
    vertical-align: middle !important;
    line-height: 1.5em !important;
    align-items: unset !important; /* Override inline-flex from general label rule */
}

/* Override general label span styles for checkbox/radio spans */
.document-sign-page .wpesign__sif-checkbox-group label .wpesign__sif-checkbox,
.document-sign-page .wpesign__sif-radio-group label .wpesign__sif-radio,
.document-sign-page .wpesign__sif-checkbox-group label span.wpesign__sif-checkbox,
.document-sign-page .wpesign__sif-radio-group label span.wpesign__sif-radio {
    display: inline-block !important; /* Override inline-flex from general label span rule */
    margin: 0 0.3em 0 0 !important; /* Override margin:0 5px from general rule */
}

/* Vertical display - block layout so long text stays on same line as icon */
.document-sign-page .wpesign__sif-checkbox-group label[data-display-type="column"],
.document-sign-page .wpesign__sif-radio-group label[data-display-type="column"],
.document-sign-page .wpesign__sif-radio-item-wrapper label,
.document-sign-page .wpesign__sif-checkbox-item-wrapper label {
    display: block !important;
    width: 100% !important;
    margin-bottom: 2px !important;
    line-height: 1.5em !important;
}

/* Div wrappers for webview - maintain flex display */
.document-sign-page .wpesign__sif-radio-item-wrapper,
.document-sign-page .wpesign__sif-checkbox-item-wrapper {
    display: block !important;
    width: 100% !important;
    margin-bottom: 2px !important;
}

/* Horizontal display - inline layout */
.document-sign-page .wpesign__sif-checkbox-group label[data-display-type="row"],
.document-sign-page .wpesign__sif-radio-group label[data-display-type="row"] {
    display: inline-block !important;
    vertical-align: middle !important;
    margin-right: 15px !important;
    margin-bottom: 0 !important;
}

.document-sign-page .wpesign__sif-checkbox,
.document-sign-page .wpesign__sif-radio {
    display: inline-block !important;
    vertical-align: middle !important;
    margin-right: 0.3em !important;
    line-height: 1.5em !important;
    height: auto !important;
}

.document-sign-page .wpesign__sif-checkbox svg,
.document-sign-page .wpesign__sif-radio svg {
    vertical-align: middle !important;
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    top: auto !important;
}

/* Unified alignment for checkbox and text - works for both web and PDF */
/* Override general label rule (display:inline-flex) for checkbox/radio labels */
.document-sign-page .wpesign__sif-checkbox-group label,
.document-sign-page .wpesign__sif-radio-group label,
.document-sign-page .wpesign__sif-radio-item-wrapper label,
.document-sign-page .wpesign__sif-checkbox-item-wrapper label {
    line-height: 1.5em !important;
    display: block !important; /* Block so long text stays on same line as icon */
    align-items: unset !important; /* Remove flexbox alignment */
    flex-direction: unset !important;
}

/* Long-text checkbox: keep text on same line as icon, then wrap inside span */
.document-sign-page .wpesign__sif-checkbox-group label .wpesign__sif-checkbox + span,
.document-sign-page .wpesign__sif-checkbox-item-wrapper label .wpesign__sif-checkbox + span {
    max-width: calc(100% - 28px) !important;
    display: inline-block !important;
    vertical-align: top !important;
}

/* Add spacing between horizontal checkbox items - use margin-right */
.document-sign-page .wpesign__sif-checkbox-group.row label[data-display-type="row"],
.document-sign-page .wpesign__sif-radio-group.row label[data-display-type="row"],
.document-sign-page .wpesign__sif-checkbox-group.row > span > label[data-display-type="row"],
.document-sign-page .wpesign__sif-radio-group.row > span > label[data-display-type="row"] {
    margin-right: 15px !important;
    margin-left: 0 !important;
}

.document-sign-page .wpesign__sif-checkbox-group.row > span,
.document-sign-page .wpesign__sif-radio-group.row > span {
    margin-right: 15px !important;
    margin-left: 0 !important;
    display: inline-block !important;
}

/* Spacer element for horizontal checkboxes and radio buttons */
.document-sign-page .wpesign__sif-checkbox-spacer,
.document-sign-page .wpesign__sif-radio-spacer {
    display: inline-block !important;
    width: 15px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Last item should not have right margin */
.document-sign-page .wpesign__sif-checkbox-group.row label[data-display-type="row"]:last-child,
.document-sign-page .wpesign__sif-radio-group.row label[data-display-type="row"]:last-child,
.document-sign-page .wpesign__sif-checkbox-group.row > span:last-child,
.document-sign-page .wpesign__sif-radio-group.row > span:last-child,
.document-sign-page .wpesign__sif-checkbox-group.row > span:last-child > label[data-display-type="row"],
.document-sign-page .wpesign__sif-radio-group.row > span:last-child > label[data-display-type="row"] {
    margin-right: 0 !important;
}

/* Checkbox span - middle alignment to match text baseline */
/* Override general label span rule (display:inline-flex; margin:0 5px) for checkbox/radio */
.document-sign-page .wpesign__sif-checkbox-group label .wpesign__sif-checkbox,
.document-sign-page .wpesign__sif-radio-group label .wpesign__sif-radio,
.document-sign-page .wpesign__sif-radio-item-wrapper label .wpesign__sif-radio,
.document-sign-page .wpesign__sif-checkbox-item-wrapper label .wpesign__sif-checkbox,
.document-sign-page .wpesign__sif-checkbox-group label span.wpesign__sif-checkbox,
.document-sign-page .wpesign__sif-radio-group label span.wpesign__sif-radio {
    display: inline-block !important; /* Override inline-flex from .document-sign-page label span */
    vertical-align: middle !important;
    margin: 0 0.3em 0 0 !important; /* Override margin:0 5px from .document-sign-page label span */
    line-height: 1.5em !important;
    align-items: unset !important;
}

/* Checkbox and radio container spans - ensure proper sizing and display */
.document-sign-page .wpesign__sif-checkbox,
.document-sign-page .wpesign__sif-radio {
    display: inline-block !important; /* Ensure inline-block, not inline-flex */
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    overflow: hidden !important;
    vertical-align: middle !important;
    line-height: 1.5em !important;
    margin-right: 0.3em !important;
}

.document-sign-page .wpesign__sif-checkbox svg,
.document-sign-page .wpesign__sif-radio svg {
    vertical-align: middle !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    box-sizing: border-box !important;
}

/* Ensure checkbox input elements maintain 20px size after signing */
.document-sign-page .wpesign__sif-checkbox input[type="checkbox"],
.document-sign-page .wpesign__sif-radio input[type="radio"] {
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    box-sizing: border-box !important;
}

.ui-datepicker {
    max-width: auto !important;
    min-width: 200px !important;
    padding: 0 !important;
    font-size: 14px !important;
}