/**  Form Grid Layout **/
.gk-form-grid{
    display: grid !important;
    column-gap: 24px;
}

.grid-2{grid-template-columns: repeat(2, 1fr);}
.grid-3{grid-template-columns: repeat(3, 1fr);}
.grid-4{grid-template-columns: repeat(4, 1fr);}

@media(max-width: 767px){
    .grid-2, .grid-3{grid-template-columns: repeat(1, 1fr);}
}


/** Input focus state **/
.gk-register-form .jet-form-builder__field:focus,
.gk-login-form .elementor-field-textual:focus {
  box-shadow: none;
  border-color: var(--e-global-color-accent) !important;
    outline: none;
}

/** Input - NO edit field Grey out **/
.no-edit-field {
  background-color: #f7f7f7 !important;
  color: #909090 !important;
  pointer-events: none;
}

/** Input error message **/
.jet-form-builder-row{
    position: relative;
}

.field-has-error .error-message {
  position: absolute;
  bottom: -24px;
  background-color: var(--e-global-color-text);
  color: white !important;
  padding: 6px 12px;
  border-radius: 8px;
  z-index: 99;
}


/** Form after submit message **/
.jet-form-builder-message{
    margin: 16px 0 0 0 !important;
    padding: 10px !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
        line-height: 1.375rem !important;
    border-radius: 6px !important;
}

/** 
通過將 Input 的位置調整至最後實現 desciption 前移的效果，
此法不需要逐個為 label, input 和 description設置order值.
field-wrap 為一般 form field
fields-group 為 checkboxes and radio 等欄位
**/

.jet-form-builder__desc {
    margin-top: -2px;
    margin-bottom: 8px;
}

.wp-block-jet-forms-switcher input,
.jet-form-builder__field-wrap, 
.jet-form-builder__fields-group,
input.date-field {
    order: 3;
}

.error-message{
    order: 5;
}

/**  Switcher Field **/
.field-type-switcher .jet-form-builder__field{
    background-color: var(--e-global-color-b7f3ca7, red) !important;
    border-color: var(--grey-200. blue) !important;
}

.field-type-switcher input.jet-form-builder__field:checked{
    background: var(--e-global-color-primary, green) !important;
}

.field-type-switcher input.jet-form-builder__field{
    border-radius: 64px !important;
}


/** Select Field **/
/* Set field min-height to 40px */
.jet-form-builder__field.select-field {
    min-height: 40px;
}

/** Time Field **/
.jet-form-builder__field.time-field {
    padding: 0 1rem;
    min-height: 40px;
}

/** Radio Field **/
selector .jet-form-builder__field{
    outline: none;
}

selector .reset-password a{
    font-size: 0.85rem;
    transition: all .2s ease;
}

selector .reset-password:hover a{
    text-decoration: underline;
    text-underline-offset: 4px;
    color: var(--e-global-color-accent);
}


/* Radio */
.jet-form-builder__fields-group.checkradio-wrap{
    margin-block: 8px 8px;
    display: grid;
    grid-template-columns: repeat(5,minmax(0,1fr));
    grid-column-gap: 16px;
    grid-row-gap: 16px;
}

.jet-form-builder__field-wrap.checkradio-wrap{
    margin-bottom: 0;
}

.jet-form-builder-row.field-type-checkbox-field,
.jet-form-builder__field-label.for-checkbox,
.jet-form-builder__field-label.for-radio{
    width: 100%;
}


.jet-form-builder__field-label > span::before{
    width: 14px;
    height: 14px;
}

.jet-form-builder__field-label.for-checkbox{
    width: 100%;
}

.jet-form-builder__field-label.for-checkbox span,
.jet-form-builder__field-label.for-radio span{
    width: 100%;
    padding: 10px 8px;
    display: flex;
    row-gap: 6px;
    justify-content: flex-start;
    align-items: center;
    color: var(--e-global-color-text);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.25rem;
    text-align: left;
    border: 1px solid var(--e-global-color-416fcc4);
    border-radius: 8px;
}

/* Radio Checked */
.jet-form-builder__field-wrap label :checked + span{
    background-color: var(--e-global-color-9499a48) !important;
  	color: var(--e-global-color-text);
  	border-color: var(--e-global-color-2a313b4)!important;
  	border-radius: 6px;
  	outline: 1px solid var(--e-global-color-2a313b4);
}


@media(max-width: 767px){
    .jet-form-builder__fields-group.checkradio-wrap{
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-row-gap: 12px;
}
}


/* Media Upload Field */
:root{
    --action-button-color: #266df0;
    --action-button-color-hover: #1c62e3;
    --button-border-radius: 8px;
}

.jet-form-builder__field-wrap.jet-form-builder-file-upload {
    background: var(--e-global-color-b7f3ca7, white) !important;
    border: 1px dashed var(--e-global-color-416fcc4, green) !important;
    padding: 20px !important;
    text-align: center;
    position: relative;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
	border-radius: var(--button-border-radius) !important;
}

/* Styles for the image upload */
.jet-form-builder-file-upload__file img {
    display: block;
    width: 100%;
    height: 100% !important;
    padding: 0;
    margin: 0;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center center;
    object-position: center center;
    border-radius: var(--button-border-radius) !important;
    box-shadow: 0 0 30px -8px rgba(0, 0, 0, 0.24) !important; 
}

/* Styles for image content */
.jet-form-builder-file-upload__content {
    min-height: auto !important;
}
	
/* Styles for the custom "Choose File" button */
.addfile {
    padding: 10px 20px;
    background-color: var(--e-global-color-primary) !important;
    color: white !important;
    border: none !important;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid var(--e-global-color-primary);
    border-radius: 8px !important;
    margin-top: 8px; /* Space between button and label */
}

.addfile:hover {
    background-color: var(--e-global-color-7b23263) !important;
    color: white !important;
    border-color: var(--e-global-color-7b23263);
}

/* Styles for the label that shows file upload status */
.labeladdfile {
    padding: 6px 12px;
    background-color: transparent; /* Default background is transparent */
    color: var(--e-global-color-3555daf, pink) !important;
    font-size: 0.875rem;
    font-weight: 400;
    display: block;
    margin-top: 8px;
	border-radius: 6px;
    letter-spacing: -0.2px;
}

/* Class added when files are uploaded */
.files-uploaded {
    background-color: transparent !important; 
    font-size: 0.875rem;
	color: var(--primary-800, blue) !important;
}

/* Hide the default file input visually */
.jet-form-builder-file-upload__input {
    display: none;
}

/* File size limit */
.jet-form-builder-file-upload__message {
    margin-top: -4px;
}

.jet-form-builder-file-upload__message small {
    color: var(--e-global-color-text, olive);
    font-size: 0.875rem;
}


/* Notification Message */
/* Validation Error */
.gk-form .jet-form-builder-row.field-has-error .error-message {
    color: #ff023e;
    font-weight: 500;
    margin-top: 0.25rem;
}

/* 
Use this CSS to style the form notification messages collectively, 
instead of styling them individually. 
*/
.gk-form .jet-form-builder-message {
    margin: 16px 0 0 0;
    padding: 6px !important;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
    border-radius: 8px;
}


/* Submit Successful */
.gk-form .jet-form-builder-message--success {
    background-color: rgba(236,253,245,.5);
    color: rgba(6, 78, 59, 1);
    border: 1px solid rgba(16,185,129,.2);
}


/* Submit failed */
.gk-form .jet-form-builder-message--error {
    background-color: rgba(255,226,233,.5);
    color: #ff023e;
    border: 1px solid rgb(185 16 30 / 20%)
    
}