.intb_flex {
    display: flex;
    gap: 10px; 
}

.intb_tour_meta_field_group .intb_flex p:nth-child(1) {
    width: 50%;
}

.intb_tour_meta_field_group .intb_flex p:nth-child(2) {
    width: 25%;
}

.intb_tour_meta_field_group .intb_flex p:nth-child(3),
.intb_tour_meta_field_group .intb_flex p:nth-child(4) {
    width: 12.5%;
}

a.intb_move_meta {
    text-decoration: none;
    color: #909090;
    cursor: move;
}

.intb_tour_meta_field_group .intb_move_meta {
    position: absolute;
    top: 10px;
    font-size: 18px;
    color: #b6b6b6;
    text-decoration: none;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    font-weight: normal;
    display: inline-block;
    transition: font-weight 0.2s ease;
}

.intb_tour_meta_field_group {
    background: #ffffff;
    border: 1px solid #e4e4e4;
    border-radius: 8px;
    padding: 20px;
    transition: box-shadow 0.3s ease, transform 0.2s ease;
    position: relative;
    margin-bottom: 10px;
}

.intb_tour_meta_field_group:hover {
    transform: translateY(-2px);
}

#intb_tour_meta_fields_wrapper p {
    margin: 0;
}

.intb_tour_meta_field_group label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #333333;
    font-size: 14px;
}

.intb_tour_meta_field_group input.widefat,
.intb_tour_meta_field_group textarea.widefat,
#intb_tour_meta_fields_wrapper select {
    width: 100%;
    padding: 10px;
    border: 1px solid #d1d1d1;
    border-radius: 6px;
    font-size: 14px;
    background-color: #ffffff;
    transition: border-color 0.3s ease;
}

.intb_tour_meta_field_group input.widefat:focus,
.intb_tour_meta_field_group textarea.widefat:focus,
#intb_tour_meta_fields_wrapper select:focus {
    border-color: #0073aa;
    box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.2);
    outline: none;
}

.intb_tour_meta_field_group .intb_remove_meta {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 18px;
    color: #000;
    text-decoration: none;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    font-weight: normal;
    display: inline-block;
    transition: font-weight 0.2s ease; /* Smooth transition for bold effect */
}

.intb_tour_meta_field_group .intb_remove_meta:hover {
    font-weight: bold; /* Simple bold effect on hover */
    color: #000; /* Ensure it remains black */
}

#intb_add_meta_field {
    background-color: #0073aa;
    color: #ffffff;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    display: inline-block;
    transition: background-color 0.3s ease;
}

#intb_add_meta_field:hover {
    background-color: #005177;
}

#intb_tour_meta_fields_wrapper .intb_flex {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

/* #intb_tour_meta_fields_wrapper .intb_flex p {
    width: 50%;
} */

#intb_tour_meta_fields_wrapper .intb_flex p label {
    padding-left: 5px;
}

.intb_tour_meta_field_group textarea.widefat {
    resize: vertical;
    min-height: 100px;
    margin-bottom: 0;
}

.intb_tour_meta_field_group select {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    outline: none;
    position: relative;
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z" fill="%23333"/></svg>');
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 20px 20px;
}

.intb_tour_meta_field_group select:hover {
    border-color: #0073aa;
}


/*--------------------------- Switch Field Design -------------------------------*/
.intb-switch-field {
    display: flex;
    align-items: center;
}

/* Hide the default checkbox input */
.intb-switch-field input {
    display: none;
}

/* Label for the switch (styled background) */
.intb-switch-field label {
    position: relative;
    display: inline-block;
    width: 44px; /* Set the same width as YITH */
    height: 24px; /* Set the same height as YITH */
    background-color: #e2e8f0; /* Light gray background */
    border-radius: 12px; /* Rounded corners */
    cursor: pointer;
    transition: background-color 0.3s ease; /* Smooth transition for background color */
}

/* When the switch is checked (active state) */
.intb-switch-field input:checked + label {
    background-color: #697861;
}

/* Switch handle (white circle) */
.intb-switch-field label::before {
    content: "";
    position: absolute;
    top: 1px;
    left: 1px;
    width: 22px; /* Same size as YITH's handle */
    height: 22px;
    background-color: #fff;
    border-radius: 50%;
    transition: transform 0.3s ease; /* Smooth transition for handle movement */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Soft shadow */
}

/* When switch is checked, move handle to the right */
.intb-switch-field input:checked + label::before {
    transform: translateX(20px); /* Move handle to the right */
}

/* Switch icon container */
.intb-switch-field .intb-switch-icon {
    position: relative;
    top: 50%; /* Position icons vertically centered */
    left: 72%; /* Position icons horizontally centered */
    transform: translate(-50%, -50%); /* Ensure perfect centering */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%; /* Occupy full width */
    height: 100%; /* Occupy full height */
}

/* Icon size adjustment */
.intb-switch-field .intb-icon-on,
.intb-switch-field .intb-icon-off {
    width: 14px; /* Set the desired icon width */
    height: 15px; /* Set the desired icon height */
}

/* Show the "ON" icon when checked */
.intb-switch-field input:checked + label .intb-icon-on {
    display: block;
}

/* Show the "OFF" icon when not checked */
.intb-switch-field input:not(:checked) + label .intb-icon-off {
    display: block;
}

/* Hide the "ON" icon when not checked */
.intb-switch-field input:not(:checked) + label .intb-icon-on {
    display: none;
}

/* Hide the "OFF" icon when checked */
.intb-switch-field input:checked + label .intb-icon-off {
    display: none;
}


.intb-switch-field svg.intb-icon-off {
    position: absolute;
    left: -11%;
}

.intb-switch-field .intb-switch-icon svg {
    stroke: #94a3b8;
    stroke-width: 2;
}

.intb-switch-field .intb-switch-icon .intb-icon-on {
    stroke: #697861;
}

/*--------------------------- End Switch Field ------------------------------*/

.intb_option_wrap .intb-text-field input,
.intb_option_wrap .intb-number-field input,
.intb_option_wrap .intb-select-field select{
    max-width: 280px;
    width: 100%;
    padding: 8px 12px;
    font-size: 14px;
    color: #333;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    outline: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.intb-text-field input[type="text"]:focus,
.intb-text-field input[type="text"]:hover {
    border-color: #0073aa;
}

.intb-color-field button.button.wp-color-result {
    font-size: 13px;
}

.intb_option_wrap .form-table th {
    width: 270px;
}

/* -----------------------------------------------*/


/*---------------------Select 2 start ---------------------------  */

#intb_tour_pages_meta_box .select2-container .select2-selection--multiple .select2-selection__rendered{
    display: block;
}

#intb_tour_pages_meta_box .select2-container .select2-selection--multiple {
    margin: 5px 0;
    border: 1px solid #cccccc !important;
}

#intb_tour_pages_meta_box .select2-container--default .select2-selection--multiple .select2-selection__choice {
    font-size: 14px;
    padding: 4px 10px;
}

#intb_tour_pages_meta_box .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    font-size: 14px;
}

label.intb_selected_pages{
    font-size: 14px;
    color: #1d2327;
}

/* ----------------------Select 2 End ------------------------- */


.intb-shortcode-column{
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    padding: 8px;
    font-family: monospace;
    font-size: 14px;
    border-radius: 4px;
    display: inline-block;
    width: fit-content;
}

.intb-shortcode-title {
    font-size: 14.5px;
    margin-bottom: 8px;
    color: #333;
}

.intb-shortcode-field {
    width: 100%;
    font-family: monospace;
    font-size: 14px;
    padding: 8px !important;
}

/*  Buy Pro Button Start  */

.intb-pro-btn {
    position: relative;
    padding: 14px 30px;
    line-height: 1;
    font-size: 18px !important;
    color: white;
    background: linear-gradient(45deg, #2563eb, #4f46e5) !important;
    border: none;
    cursor: pointer;
    overflow: hidden;
    text-decoration: none; /* Ensure it's styled as a button */
    display: inline-block;
    text-align: center; /* Center text */
}

.intb-pro-btn .shine-content {
    position: relative;
    z-index: 1;
}

.intb-pro-btn::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    transform: rotate(45deg) translateY(-100%);
    transition: transform 0.5s ease;
}

.intb-pro-btn:hover::before {
    transform: rotate(45deg) translateY(100%);
}

.intb-pro-btn:hover .shine-content,
.intb-pro-btn:active .shine-content,
.intb-pro-btn:focus .shine-content {
    color: white;
    box-shadow: none;
}

/*  Buy Pro Button End  */

#intb_tour_pages_meta_box .inside {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

#intb_tour_pages_meta_box .inside .intb-select-pages,
#intb_tour_pages_meta_box .intb-select-post-types,
#intb_tour_pages_meta_box .inside .intb-select-taxonomies{
    width: calc(33% - 11px);
}

.intb-select-field select option:disabled {
    background-color: #f0f0f0;
    color: #ccc;
    cursor: not-allowed;
}

.intb-select-field  select[disabled] {
    background-color: #e9e9e9;
    color: #aaa;
    cursor: not-allowed;
}