:root {
    --wtm-primary: #4a5568;
    --wtm-primary-dark: #2d3748;
    --wtm-primary-light: #718096;
    --wtm-secondary: #a0aec0;
    --wtm-accent: #cbd5e0;
    --wtm-success: #718096;
    --wtm-warning: #ecc94b;
    --wtm-danger: #e53e3e;
    --wtm-surface: #ffffff;
    --wtm-surface-alt: #f7fafc;
    --wtm-border: #e2e8f0;
    --wtm-text: #2d3748;
    --wtm-text-muted: #718096;
    --wtm-shadow-sm: 0 1px 2px 0 rgb(74 85 104 / 0.05);
    --wtm-shadow-md: 0 4px 6px -1px rgb(74 85 104 / 0.1), 0 2px 4px -2px rgb(74 85 104 / 0.1);
    --wtm-shadow-lg: 0 10px 15px -3px rgb(74 85 104 / 0.1), 0 4px 6px -4px rgb(74 85 104 / 0.1);
    --wtm-radius: 12px;
    --wtm-radius-sm: 8px;
    --wtm-spacing: 1.5rem;
}

/* Modern Metabox Styling */
#wptm_cm2_metabox_general,
#wptm_cm2_metabox_social,
#wptm_cm2_image_gallery_metabox,
#wptm_cm2_member_skills_pro {
    border: 1px solid var(--wtm-border);
    border-radius: var(--wtm-radius);
    box-shadow: var(--wtm-shadow-sm);
    background: var(--wtm-surface);
    margin: 0 80px;
    margin-bottom: 30px;
    overflow: hidden;
}

/* Enhanced Metabox Headers */
#wptm_cm2_member_skills_pro .postbox-header,
#wptm_cm2_metabox_general .postbox-header,
#wptm_cm2_metabox_social .postbox-header,
#wptm_cm2_image_gallery_metabox .postbox-header,
#dwl_team_layout .postbox-header,
#dwl_team_metabox .postbox-header,
#dwl_team_help .postbox-header {
    /* background: linear-gradient(135deg, var(--wtm-primary) 0%, var(--wtm-primary-light) 100%); */
    /* color: white; */
    border-bottom: 1px solid var(--wtm-border);
    padding: 10px;
}

#wptm_cm2_metabox_general .cmb-row,
#wptm_cm2_metabox_social .cmb-row,
#wptm_cm2_image_gallery_metabox .cmb-row,
#wptm_cm2_member_skills_pro .cmb-row {
    padding: 10px !important;
}

#wptm_cm2_metabox_general .postbox-header .hndle,
#wptm_cm2_metabox_social .postbox-header .hndle,
#wptm_cm2_image_gallery_metabox .postbox-header .hndle {
    color: white;
    font-weight: 600;
    font-size: 1.1rem;
}

/* Enhanced Form Fields */
#wptm_cm2_metabox_general .cmb2-wrap input[type="email"],
#wptm_cm2_metabox_general .cmb2-wrap input[type="text"],
#wptm_cm2_metabox_general .cmb2-wrap input[type="url"],
#wptm_cm2_metabox_general .cmb2-wrap input[type="number"],
#wptm_cm2_metabox_general .cmb2-wrap textarea,
#wptm_cm2_metabox_social .cmb2-wrap input[type="text"],
#wptm_cm2_metabox_social .cmb2-wrap input[type="url"] {
    width: 100%;
    padding: 4px 10px !important;
    border: 2px solid var(--wtm-border);
    border-radius: var(--wtm-radius-sm);
    font-size: 0.95rem;
    transition: all 0.3s ease;
    background: var(--wtm-surface);
    box-shadow: var(--wtm-shadow-sm);
}

#wptm_cm2_metabox_general .cmb2-wrap input:focus,
#wptm_cm2_metabox_social .cmb2-wrap input:focus,
#wptm_cm2_metabox_general .cmb2-wrap textarea:focus {
    border-color: var(--wtm-primary);
    box-shadow: 0 0 0 3px rgba(45, 80, 22, 0.1);
    outline: none;
    background: var(--wtm-surface-alt);
}

#wptm_cm2_metabox_general .cmb2-wrap select {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid var(--wtm-border);
    border-radius: var(--wtm-radius-sm);
    background: var(--wtm-surface);
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

#wptm_cm2_metabox_general .cmb2-wrap select:focus {
    border-color: var(--wtm-primary);
    box-shadow: 0 0 0 3px rgba(45, 80, 22, 0.1);
    outline: none;
}


#wptm_cm2_metabox_general .cmb2-wrap input[type="button"],
#wptm_cm2_image_gallery_metabox .cmb2-wrap input[type="button"],
#wptm_cm2_image_gallery_metabox .cmb2-wrap button[type="button"],
#wptm_cm2_metabox_social .cmb2-wrap button[type="button"]:not(.dashicons-before) {
    background: linear-gradient(135deg, var(--wtm-primary) 0%, var(--wtm-primary-light) 100%) !important;
    color: white !important;
    border: none !important;
    padding: 8px 20px !important;
    border-radius: var(--wtm-radius-sm) !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    box-shadow: var(--wtm-shadow-sm) !important;
    margin-top: 10px;
    margin-left: 0px;
}

/* Remove button specific style */
.cmb-remove-group-row {
    background: none !important;
    color: #fff !important;
    border: none !important;
    padding: 0px !important;
    border-radius: 4px !important;
    font-weight: normal !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

/* Optional: hover effect */
.cmb-remove-group-row:hover {
    background: none !important;
}

#wptm_cm2_metabox_general .cmb2-wrap input[type="button"]:hover,
#wptm_cm2_image_gallery_metabox .cmb2-wrap input[type="button"]:hover,
#wptm_cm2_image_gallery_metabox .cmb2-wrap button[type="button"]:hover:not(.dashicons-before),
#wptm_cm2_metabox_social .cmb2-wrap button[type="button"]:hover:not(.dashicons-before) {
    background: linear-gradient(135deg, var(--wtm-primary-dark) 0%, var(--wtm-primary) 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--wtm-shadow-md) !important;
}

/* Field Layout */
.cmb2-id-tm-email,
.cmb2-id-tm-jtitle,
.cmb2-id-tm-telephone,
.cmb2-id-tm-mobile,
.cmb2-id-tm-location,
.cmb2-id-tm-year-experience,
.cmb2-id-tm-web-url,
.cmb2-id-tm-vcard,
.cmb2-id-tm-resume-url,
.cmb2-id-tm-custom-detail-url,
.cmb2-id-tm-hire-me-url {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    padding: 1rem;
    background: var(--wtm-surface-alt);
    border-radius: var(--wtm-radius-sm);
    border: 1px solid var(--wtm-border);
    transition: all 0.3s ease;
}

.cmb2-id-tm-email:hover,
.cmb2-id-tm-jtitle:hover,
.cmb2-id-tm-telephone:hover,
.cmb2-id-tm-mobile:hover,
.cmb2-id-tm-location:hover,
.cmb2-id-tm-year-experience:hover,
.cmb2-id-tm-web-url:hover,
.cmb2-id-tm-vcard:hover {
    border-color: var(--wtm-secondary);
    box-shadow: var(--wtm-shadow-sm);
}

/* Position/Job Title Layout - Override for col-md-4 */
.cmb-row.cmb2-id-tm-jtitle.col-md-4 {
    display: block !important;
}

.cmb-row.cmb2-id-tm-jtitle.col-md-4 .cmb-th {
    width: 100% !important;
    padding-right: 0;
    margin-bottom: 0.5rem;
}

.cmb-row.cmb2-id-tm-jtitle.col-md-4 .cmb-td {
    width: 100% !important;
}

#cmb2-metabox-wptm_cm2_metabox_general .cmb-th,
#wptm_cm2_metabox_social .cmb-td,
#wptm_cm2_image_gallery_metabox .cmb-td,
#wptm_cm2_member_skills_pro .cmb-td {
    margin: 0 !important;
    padding: 0 !important;
}

#wptm_cm2_metabox_social .cmb-group-title,
#wptm_cm2_member_skills_pro .cmb-group-title {
    background: #a0aec0 !important;
    color: #333;
}

#wptm_cm2_metabox_social .cmb-remove-group-row.dashicons-before,
#wptm_cm2_member_skills_pro .cmb-remove-group-row.dashicons-before {
    top: 15px !important;
}

#wptm_cm2_metabox_social .cmb2-wrap button[type="button"],
#wptm_cm2_member_skills_pro .cmb2-wrap button[type="button"] {
    margin-top: 0 !important;
}

#wptm_cm2_metabox_social .inside.cmb-td.cmb-nested.cmb-field-list,
#wptm_cm2_member_skills_pro .inside.cmb-td.cmb-nested.cmb-field-list {
    display: flex;
    flex-direction: row;
}

#wptm_cm2_metabox_social .cmb-repeat-group-field,
#wptm_cm2_member_skills_pro .cmb-repeat-group-field {
    flex: 1;
    min-width: 0;
}

/* Position/Job Title 50% Layout for non-grid */
.cmb2-id-tm-jtitle:not(.col-md-4) .cmb-th {
    width: 50% !important;
    padding-right: 1rem;
    box-sizing: border-box;
    float: none;
}

.cmb2-id-tm-jtitle:not(.col-md-4) .cmb-td {
    width: 50% !important;
    box-sizing: border-box;
    float: none;
}

/* Grid fields layout */
.cmb-row.col-md-4 .cmb-th {
    width: 100% !important;
    margin-bottom: 8px;
    padding-bottom: 4px;
}

.cmb-row.col-md-4 .cmb-td {
    width: 100% !important;
    margin-bottom: 12px;
}

/* Other fields full width for non-grid */
.cmb2-id-tm-email:not(.col-md-4) .cmb-th,
.cmb2-id-tm-email:not(.col-md-4) .cmb-td,
.cmb2-id-tm-telephone:not(.col-md-4) .cmb-th,
.cmb2-id-tm-telephone:not(.col-md-4) .cmb-td,
.cmb2-id-tm-mobile:not(.col-md-4) .cmb-th,
.cmb2-id-tm-mobile:not(.col-md-4) .cmb-td,
.cmb2-id-tm-location:not(.col-md-4) .cmb-th,
.cmb2-id-tm-location:not(.col-md-4) .cmb-td,
.cmb2-id-tm-year-experience:not(.col-md-4) .cmb-th,
.cmb2-id-tm-year-experience:not(.col-md-4) .cmb-td,
.cmb2-id-tm-web-url:not(.col-md-4) .cmb-th,
.cmb2-id-tm-web-url:not(.col-md-4) .cmb-td,
.cmb2-id-tm-vcard:not(.col-md-4) .cmb-th,
.cmb2-id-tm-vcard:not(.col-md-4) .cmb-td,
.cmb2-id-tm-custom-detail-url .cmb-th,
.cmb2-id-tm-custom-detail-url .cmb-td,
.cmb2-id-tm-resume-url .cmb-th,
.cmb2-id-tm-resume-url .cmb-td,
.cmb2-id-tm-hire-me-url .cmb-th,
.cmb2-id-tm-hire-me-url .cmb-td {
    width: 100% !important;
}

/* Textarea Styling */
#tm_short_bio {
    height: 100px !important;
    resize: vertical;
}

#tm_long_bio_ifr {
    height: 250px !important;
}

/* Toggle Switch */
.cmb-type-checkbox .cmb-td input[type=checkbox] {
    height: 0;
    width: 0;
    visibility: hidden;
}

.cmb-type-checkbox .cmb-td label {
    cursor: pointer;
    text-indent: -9999px;
    width: 60px;
    height: 30px;
    background: var(--wtm-border);
    display: block;
    border-radius: 100px;
    position: relative;
    transition: all 0.3s ease;
}

.cmb-type-checkbox .cmb-td label:after {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 90px;
    transition: 0.3s;
    box-shadow: var(--wtm-shadow-sm);
}

.cmb-type-checkbox .cmb-td input:checked+label {
    background: linear-gradient(135deg, var(--wtm-primary) 0%, var(--wtm-primary-light) 100%);
}

.cmb-type-checkbox .cmb-td input:checked+label:after {
    left: calc(100% - 5px);
    transform: translateX(-100%);
}

.cmb-type-checkbox .cmb-td label:active:after {
    width: 130px;
}

/* Grid Layout */
.dwl-metabox-grid .cmb2-metabox {
    display: flex;
    flex-wrap: wrap;
}

.col-12,
.dwl-metabox-grid .cmb2-metabox .dwl-meta-item .cmb-td .cmb2_select {
    width: 96%;
}

.col-md-4 {
    width: 33.33%;
    display: inline-block;
    vertical-align: top;
    padding-right: 15px;
    box-sizing: border-box;
}

.postbox .handle-order-higher,
.postbox .handle-order-lower {
    color: #fff;
    width: 1.62rem;
}

.col-md-3 {
    width: 25%;
    display: inline-block;
    vertical-align: top;
    padding-right: 15px;
    box-sizing: border-box;
}

.col-md-2 {
    width: 20%;
    display: inline-block;
    vertical-align: top;
    padding-right: 15px;
    box-sizing: border-box;
}

.dwl-metabox-grid .cmb2-metabox .dwl-meta-item {
    display: inline-block;
    vertical-align: top;
}

.dwl-metabox-grid .cmb2-metabox .dwl-meta-item.col-md-3 {
    padding-right: 15px !important;
    box-sizing: border-box;
    border-bottom: 1px solid #e9e9e9;
}

/* CMB2 field grid layout */
.cmb-row.col-md-4 {
    width: 32.5%;
    display: inline-block;
    vertical-align: top;
    padding-right: 20px;
    padding-bottom: 30px;
    box-sizing: border-box;
    margin-bottom: 0;
}

/* Field spacing improvements */
.cmb-row {
    margin-bottom: 1.5rem;
}

/* Additional spacing for grid fields */
#wptm_cm2_metabox_general .cmb-row.col-md-4 {
    min-height: 120px;
    padding: 10px;
    margin: .4%;
}

/* Ensure proper spacing between rows */
.cmb2-metabox .cmb-row:nth-child(3n+1) {
    clear: left;
}

/* Modern Tooltip System */
.wtm-tooltip {
    position: relative;
    display: inline-block;
    margin-left: 8px;
    cursor: help;
}

.wtm-tooltip-icon {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--wtm-secondary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    transition: all 0.3s ease;
}

.wtm-tooltip:hover .wtm-tooltip-icon {
    background: var(--wtm-primary);
    transform: scale(1.1);
}

.wtm-tooltip-content {
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--wtm-text);
    color: white;
    padding: 8px 12px;
    border-radius: var(--wtm-radius-sm);
    font-size: 13px;
    line-height: 1.4;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
    box-shadow: var(--wtm-shadow-md);
    max-width: 250px;
    white-space: normal;
}

.wtm-tooltip-content::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--wtm-text);
}

.wtm-tooltip:hover .wtm-tooltip-content {
    opacity: 1;
    visibility: visible;
}

/* Field label with tooltip */
.cmb-th label {
    display: flex;
    align-items: center;
    font-weight: 600;
    color: var(--wtm-text);
    font-size: 14px;
    margin-bottom: 0.5rem;
}

/* Help text styling */
.cmb2-metabox-description,
.cmb-field-description {
    color: var(--wtm-text-muted);
    font-size: 12px;
    line-height: 1.4;
    margin-top: 4px;
    font-style: italic;
}

.dwl-metabox-grid .cmb2-metabox .dwl-meta-item .cmb-th {
    float: none;
    width: auto;
    margin-right: 5px;
}

.dwl-metabox-grid .cmb2-metabox .dwl-meta-item .cmb-td {
    float: none;
    width: 90%;
}

.cmb2-wrap.form-table select {
    width: 98%;
}

input#dwl_team_date_from,
input#dwl_team_date_to {
    width: 100%;
}

#side-sortables .cmb2-metabox-description {
    padding-bottom: 0 !important;
}

#side-sortables .wtm-help .dashicons {
    line-height: 20px;
}

/* Single team */
#cmb2-metabox-wptm_cm2_metabox_general,
#cmb2-metabox-dwl_team_metabox {
    display: flex;
    flex-wrap: wrap;
}

#wptm_cm2_metabox_general .handlediv .toggle-indicator::before,
#wptm_cm2_metabox_social .toggle-indicator,
#wptm_cm2_image_gallery_metabox .handlediv .toggle-indicator::before {
    color: #fff;
}

#cmb2-metabox-dwl_team_metabox .cmb-row .cmb-th,
#cmb2-metabox-dwl_team_metabox .cmb-row .cmb-td {
    width: 100%;
}

#dwl_team_layout .handlediv .toggle-indicator::before,
#dwl_team_metabox .handlediv .toggle-indicator::before {
    color: #ffffff;
}

#cmb2-metabox-dwl_team_metabox .cmb-row {
    width: 23%;
    margin: 0 1%;
}

#cmb2-metabox-dwl_team_metabox .cmb-row.col-md-4 {
    width: 32.5%;
    margin: 0;
    padding-right: 15px;
}

#cmb2-metabox-dwl_team_metabox span.cmb2-metabox-description {
    color: #666;
    letter-spacing: .01em;
    display: inline-block;
    width: 100%;
    margin-top: 10px;
}

#cmb2-metabox-dwl_team_metabox .cmb2-id-dwl-team-theme-custom-css.cmb-row {
    width: 100%;
    margin: 0;
}

/* Tab style */
#dwl_team_metabox .cmb-tabs-wrap .cmb-tabs .cmb-tab.active .dashicons,
#dwl_team_metabox .cmb-tabs-wrap .cmb-tabs .cmb-tab.active .cmb-tab-title {
    color: var(--wtm-primary);
}

#dwl_team_metabox .cmb-tabs-wrap .cmb-tabs .cmb-tab {
    border-radius: var(--wtm-radius-sm) var(--wtm-radius-sm) 0 0;
    transition: all 0.3s ease;
}

#dwl_team_metabox .cmb-tabs-wrap .cmb-tabs .cmb-tab:hover {
    background: var(--wtm-surface-alt);
}

#cmb2-metabox-dwl_team_help code {
    background-color: var(--wtm-primary);
    padding: 10px;
    color: #fff;
    font-weight: 600;
    border: 1px solid var(--wtm-border);
    border-radius: var(--wtm-radius-sm);
}

#wptm_cm2_member_skills_pro .postbox-header .hndle {
    flex-grow: 1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

#wptm_cm2_member_skills_pro .postbox-header .hndle .wptm-pro-text {
    color: var(--wtm-danger);
    margin: 0 7px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
}

/* Member Skills Styling */
#wptm_cm2_member_skills_pro {
    border: 1px solid var(--wtm-border);
    border-radius: var(--wtm-radius);
    box-shadow: var(--wtm-shadow-sm);
    background: var(--wtm-surface);
    overflow: hidden;
}

#wptm_cm2_member_skills_pro .cmb2-wrap {
    padding: 1.5rem;
}

/* Skills field styling */
.cmb2-id-tm-skills .cmb-repeatable-group {
    background: var(--wtm-surface-alt);
    border: 1px solid var(--wtm-border);
    border-radius: var(--wtm-radius-sm);
    padding: 0;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
    overflow: hidden;
}

/* Skill group title styling */
.cmb2-id-tm-skills .cmb-group-title {
    background: linear-gradient(135deg, var(--wtm-primary) 0%, var(--wtm-primary-light) 100%);
    color: white;
    margin: 0;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    cursor: move;
    position: relative;
}

.cmb2-id-tm-skills .cmb-group-title span {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cmb2-id-tm-skills .cmb-group-title:before {
    content: '⋮⋮';
    font-size: 16px;
    opacity: 0.7;
    margin-right: 8px;
    line-height: 1;
}

.cmb2-id-tm-skills .cmb-group-title:hover {
    background: linear-gradient(135deg, var(--wtm-primary-light) 0%, var(--wtm-secondary) 100%);
}

/* Skill group content */
.cmb2-id-tm-skills .cmb-repeatable-group .cmb-nested {
    padding: 1rem;
}

.cmb2-id-tm-skills .cmb-repeatable-group:hover {
    border-color: var(--wtm-secondary);
    box-shadow: var(--wtm-shadow-sm);
}

.cmb2-id-tm-skills .cmb-nested .cmb-row {
    margin-bottom: 1rem;
}

.cmb2-id-tm-skills .cmb-th label {
    font-weight: 600;
    color: var(--wtm-text);
    font-size: 13px;
}

.cmb2-id-tm-skills input[type="text"],
.cmb2-id-tm-skills input[type="number"] {
    width: 100%;
    padding: 8px 12px;
    border: 2px solid var(--wtm-border);
    border-radius: var(--wtm-radius-sm);
    font-size: 14px;
    transition: all 0.3s ease;
}

.cmb2-id-tm-skills input:focus {
    border-color: var(--wtm-primary);
    box-shadow: 0 0 0 3px rgba(45, 80, 22, 0.1);
    outline: none;
}

/* Skill percentage styling */
.cmb2-id-tm-skills input[type="number"] {
    background: linear-gradient(90deg, var(--wtm-accent) 0%, var(--wtm-surface) 0%);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/* Add/Remove buttons */
.cmb2-id-tm-skills .cmb-add-group-row,
.cmb2-id-tm-skills .cmb-remove-group-row,
button[data-selector="wptm_skills_group_repeat"] {
    padding: 8px 16px !important;
    border-radius: var(--wtm-radius-sm) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    border: none !important;
    cursor: pointer !important;
}

.cmb2-id-tm-skills .cmb-add-group-row,
button[data-selector="wptm_skills_group_repeat"] {
    background: linear-gradient(135deg, var(--wtm-primary-dark) 0%, var(--wtm-primary) 100%) !important;
    color: white !important;
}

.cmb2-id-tm-skills .cmb-remove-group-row {
    background: linear-gradient(135deg, var(--wtm-primary-dark) 0%, var(--wtm-primary) 100%) !important;
    color: white !important;
}

.cmb2-id-tm-skills .cmb-add-group-row:hover,
button[data-selector="wptm_skills_group_repeat"]:hover {
    transform: translateY(-1px) !important;
    box-shadow: var(--wtm-shadow-sm) !important;
}

.cmb2-id-tm-skills .cmb-remove-group-row:hover {
    transform: translateY(-1px) !important;
    box-shadow: var(--wtm-shadow-sm) !important;
}

/* Skill group control buttons */
.cmb-remove-field-row {
    background: var(--wtm-surface);
    border-top: 1px solid var(--wtm-border);
    padding: 12px 16px;
    margin: 0;
}

.cmb-remove-row {

    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.edit-post-meta-boxes-area .postbox .handle-order-higher,
.edit-post-meta-boxes-area .postbox .handle-order-lower {
    width: 44px;
    height: 44px;
    color: #fff;
}

/* Move buttons container */
.cmb-remove-row .alignleft {
    display: flex;
    gap: 2px;
    background: var(--wtm-surface-alt);
    border-radius: var(--wtm-radius-sm);
    padding: 2px;
    border: 1px solid var(--wtm-border);
}

.cmb-shift-rows {
    padding: 8px 10px !important;
    border: none !important;
    border-radius: 4px !important;
    background: transparent !important;
    color: var(--wtm-text) !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    font-size: 12px !important;
    margin: 0 !important;
}

.cmb-shift-rows:hover {
    background: var(--wtm-primary) !important;
    color: white !important;
}

.cmb-shift-rows .dashicons {
    font-size: 16px;
    line-height: 1;
}

.cmb-remove-group-row-button {
    padding: 8px 16px !important;
    border: 2px solid var(--wtm-danger) !important;
    border-radius: var(--wtm-radius-sm) !important;
    background: var(--wtm-surface) !important;
    color: var(--wtm-danger) !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

.cmb-remove-group-row-button:hover {
    background: var(--wtm-danger) !important;
    color: white !important;
    transform: translateY(-1px) !important;
}

.wptm-pro-text {
    color: var(--wtm-danger);
    font-weight: 600;
}

/* Skills repeatable group */
.cmb-repeatable-grouping {
    background: var(--wtm-surface-alt);
    border: 1px solid var(--wtm-border);
    border-radius: var(--wtm-radius-sm);
    margin-bottom: 1rem;
    transition: all 0.3s ease;
    overflow: hidden;
    position: relative;
}

.cmb-repeatable-grouping:hover {
    border-color: var(--wtm-secondary);
    box-shadow: var(--wtm-shadow-sm);
}

/* Skill group title */
.cmb-group-title {
    background: linear-gradient(135deg, var(--wtm-primary) 0%, var(--wtm-primary-light) 100%);
    color: white;
    margin: 0;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    cursor: move;
    margin-left: -5px !important;
}

.cmb-group-title:before {
    content: '\22ee\22ee';
    font-size: 16px;
    opacity: 0.7;
    margin-right: 8px;
    line-height: 1;
}

.cmb-group-title:hover {
    background: linear-gradient(135deg, var(--wtm-primary-light) 0%, var(--wtm-secondary) 100%);
}

/* Remove group button (top right) */
.cmb-remove-group-row.dashicons-before {
    position: absolute;
    top: 5px !important;
    right: 8px;
    background: var(--wtm-danger);
    color: white;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    left: 15px !important;
    border: none;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
}

#wptm_skills_group_repeat .cmb-remove-group-row.dashicons-before {
    padding: 0 !important;
}

#wptm_skills_group_repeat p.cmb2-metabox-description {
    margin: 0 !important;
    padding: 0 !important;
}

.cmb-remove-group-row.dashicons-before:hover {
    background: #c0392b;
    transform: scale(1.1);
}

/* Skill group content */
.cmb-repeatable-grouping .inside {
    padding: 1rem;
}

.cmb-repeatable-grouping .cmb-row {
    margin-bottom: 1rem;
}

.cmb-repeatable-grouping .cmb-th label {
    font-weight: 600;
    color: var(--wtm-text);
    font-size: 13px;
}

.cmb-repeatable-grouping input[type="text"],
.cmb-repeatable-grouping input[type="number"] {
    width: 100%;
    padding: 4px 10px;
    border: 2px solid var(--wtm-border);
    border-radius: var(--wtm-radius-sm);
    font-size: 14px;
    transition: all 0.3s ease;
}

.cmb-repeatable-grouping input:focus {
    border-color: var(--wtm-primary);
    box-shadow: 0 0 0 3px rgba(45, 80, 22, 0.1);
    outline: none;
}

/* Group description */
.cmb-group-description .cmb2-metabox-description {
    color: var(--wtm-text-muted);
    font-style: italic;
    margin-bottom: 1rem;
}

/* Add Another Skill button */
.cmb-add-group-row {
    background: linear-gradient(135deg, var(--wtm-success) 0%, var(--wtm-primary) 100%) !important;
    color: white !important;
    padding: 10px 20px !important;
    border-radius: var(--wtm-radius-sm) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    border: none !important;
    cursor: pointer !important;
}

.cmb-add-group-row:hover {
    transform: translateY(-1px) !important;
    box-shadow: var(--wtm-shadow-md) !important;
}

/* Pro Style Locks */
.cmb2-id-dwl-team-grid-style-option.pro-locked input[value="style-4"][name*="grid_style_option"],
.cmb2-id-dwl-team-grid-style-option.pro-locked input[value="style-5"][name*="grid_style_option"],
.cmb2-id-dwl-team-list-style-option.pro-locked input[value="style-3"][name*="list_style_option"],
.cmb2-id-dwl-team-slider-style-option.pro-locked input[value="style-3"][name*="slider_style_option"],
.cmb2-id-dwl-team-slider-style-option.pro-locked input[value="style-4"][name*="slider_style_option"],
.cmb2-id-dwl-team-slider-style-option.pro-locked input[value="style-5"][name*="slider_style_option"],
.cmb2-id-dwl-team-slider-style-option.pro-locked input[value="style-6"][name*="slider_style_option"] {
    pointer-events: none !important;
    opacity: 0.5;
    cursor: not-allowed;
}

.cmb2-id-dwl-team-grid-style-option.pro-locked input[value="style-4"][name*="grid_style_option"]+label:after,
.cmb2-id-dwl-team-grid-style-option.pro-locked input[value="style-5"][name*="grid_style_option"]+label:after,
.cmb2-id-dwl-team-list-style-option.pro-locked input[value="style-3"][name*="list_style_option"]+label:after,
.cmb2-id-dwl-team-slider-style-option.pro-locked input[value="style-3"][name*="slider_style_option"]+label:after,
.cmb2-id-dwl-team-slider-style-option.pro-locked input[value="style-4"][name*="slider_style_option"]+label:after,
.cmb2-id-dwl-team-slider-style-option.pro-locked input[value="style-5"][name*="slider_style_option"]+label:after,
.cmb2-id-dwl-team-slider-style-option.pro-locked input[value="style-6"][name*="slider_style_option"]+label:after {
    content: "PRO";
    display: inline-block;
    background: linear-gradient(135deg, var(--wtm-danger) 0%, #e74c3c 100%);
    color: #fff;
    font-weight: bold;
    font-size: 10px;
    padding: 3px 8px;
    border-radius: var(--wtm-radius-sm);
    margin-left: 8px;
    margin-bottom: 2px;
    vertical-align: middle;
    line-height: 1;
    box-shadow: var(--wtm-shadow-sm);
}

#tm_vcard-status {
    display: none;
}

/* Help Section */
.wtm-help {
    margin-top: 8px;
    padding: 1rem;
    background: var(--wtm-surface-alt);
    border-radius: var(--wtm-radius-sm);
    border: 1px solid var(--wtm-border);
}

.wtm-help .wtm-help-desc {
    color: var(--wtm-text-muted);
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.5;
}

.wtm-help .wtm-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 8px 16px;
    border-radius: var(--wtm-radius-sm);
    border: 2px solid var(--wtm-primary);
    background: var(--wtm-surface);
    color: var(--wtm-primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    transition: all 0.3s ease;
}

.wtm-help .wtm-btn:hover {
    background: var(--wtm-primary);
    color: white;
    transform: translateY(-1px);
    box-shadow: var(--wtm-shadow-sm);
}

.wtm-help .dashicons {
    font-size: 16px;
    line-height: 1;
}

/* Shortcode Wrapper */
.wtm-sc-wrap {
    margin-top: 12px;
    padding: 1rem;
    background: var(--wtm-surface-alt);
    border-radius: var(--wtm-radius-sm);
    border: 1px solid var(--wtm-border);
}

.wtm-sc-help {
    margin: 0 0 12px;
    color: var(--wtm-text-muted);
    font-size: 13px;
    line-height: 1.5;
}

.wtm-sc-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.wtm-sc-input {
    flex: 1;
}

.wtm-sc-input input {
    width: 100%;
    font-family: 'Courier New', monospace;
    background: var(--wtm-surface);
    border: 2px solid var(--wtm-border);
    border-radius: var(--wtm-radius-sm);
    padding: 8px 12px;
    font-size: 13px;
    color: var(--wtm-text);
}

.wtm-sc-input input:focus {
    border-color: var(--wtm-primary);
    box-shadow: 0 0 0 3px rgba(45, 80, 22, 0.1);
    outline: none;
}

.wtm-sc-note {
    margin-top: 8px;
    color: var(--wtm-text-muted);
    font-size: 12px;
    font-style: italic;
}

/* Responsive Design */
@media (max-width: 768px) {

    .col-md-4,
    .col-md-3,
    .col-md-2 {
        width: 100%;
        margin-bottom: 1rem;
        padding-right: 0;
    }

    #cmb2-metabox-dwl_team_metabox .cmb-row {
        width: 100%;
        margin: 0 0 1rem 0;
    }

    .wtm-sc-row {
        flex-direction: column;
        gap: 12px;
    }

    .dwl-metabox-grid .cmb2-metabox .dwl-meta-item.col-md-3 {
        padding-right: 0 !important;
        width: 100%;
    }

    .cmb2-id-tm-jtitle:not(.col-md-4) .cmb-th,
    .cmb2-id-tm-jtitle:not(.col-md-4) .cmb-td {
        width: 100% !important;
        padding-right: 0;
    }

    .wtm-tooltip-content {
        position: fixed;
        bottom: auto;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-width: 90vw;
    }
}

/* Error States */
.cmb2-wrap .cmb2-field-error {
    border-color: var(--wtm-danger) !important;
    box-shadow: 0 0 0 3px rgba(200, 92, 92, 0.1) !important;
}

.cmb2-wrap .cmb2-error {
    color: var(--wtm-danger);
    font-size: 12px;
    margin-top: 4px;
}

.wl-team-list-style-option.pro-locked input[value="style-3"][name*="list_style_option"]+label:after,
.cmb2-id-dwl-team-slider-style-option.pro-locked input[value="style-3"][name*="slider_style_option"]+label:after,
.cmb2-id-dwl-team-slider-style-option.pro-locked input[value="style-4"][name*="slider_style_option"]+label:after,
.cmb2-id-dwl-team-slider-style-option.pro-locked input[value="style-5"][name*="slider_style_option"]+label:after,
.cmb2-id-dwl-team-slider-style-option.pro-locked input[value="style-6"][name*="slider_style_option"]+label:after {
    content: "PRO";
    display: inline-block;
    background: linear-gradient(135deg, var(--wtm-danger) 0%, #e74c3c 100%);
    color: #fff;
    font-weight: bold;
    font-size: 10px;
    padding: 3px 8px;
    border-radius: var(--wtm-radius-sm);
    margin-left: 8px;
    margin-bottom: 2px;
    vertical-align: middle;
    line-height: 1;
    box-shadow: var(--wtm-shadow-sm);
}

#tm_vcard-status {
    display: none;
}

/* Help Section */
.wtm-help {
    margin-top: 8px;
    padding: 1rem;
    background: var(--wtm-surface-alt);
    border-radius: var(--wtm-radius-sm);
    border: 1px solid var(--wtm-border);
}

.wtm-help .wtm-help-desc {
    color: var(--wtm-text-muted);
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.5;
}

.wtm-help .wtm-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 8px 16px;
    border-radius: var(--wtm-radius-sm);
    border: 2px solid var(--wtm-primary);
    background: var(--wtm-surface);
    color: var(--wtm-primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    transition: all 0.3s ease;
}

.wtm-help .wtm-btn:hover {
    background: var(--wtm-primary);
    color: white;
    transform: translateY(-1px);
    box-shadow: var(--wtm-shadow-sm);
}

.wtm-help .dashicons {
    font-size: 16px;
    line-height: 1;
}

/* Shortcode Wrapper */
.wtm-sc-wrap {
    margin-top: 12px;
    padding: 1rem;
    background: var(--wtm-surface-alt);
    border-radius: var(--wtm-radius-sm);
    border: 1px solid var(--wtm-border);
}

.wtm-sc-help {
    margin: 0 0 12px;
    color: var(--wtm-text-muted);
    font-size: 13px;
    line-height: 1.5;
}

.wtm-sc-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.wtm-sc-input {
    flex: 1;
}

.wtm-sc-input input {
    width: 100%;
    font-family: 'Courier New', monospace;
    background: var(--wtm-surface);
    border: 2px solid var(--wtm-border);
    border-radius: var(--wtm-radius-sm);
    padding: 8px 12px;
    font-size: 13px;
    color: var(--wtm-text);
}

.wtm-sc-input input:focus {
    border-color: var(--wtm-primary);
    box-shadow: 0 0 0 3px rgba(45, 80, 22, 0.1);
    outline: none;
}

.wtm-sc-note {
    margin-top: 8px;
    color: var(--wtm-text-muted);
    font-size: 12px;
    font-style: italic;
}

/* Responsive Design */
@media (max-width: 768px) {

    .col-md-4,
    .col-md-3,
    .col-md-2 {
        width: 100%;
        margin-bottom: 1rem;
    }

    #cmb2-metabox-dwl_team_metabox .cmb-row {
        width: 100%;
        margin: 0 0 1rem 0;
    }

    .wtm-sc-row {
        flex-direction: column;
        gap: 12px;
    }

    .dwl-metabox-grid .cmb2-metabox .dwl-meta-item.col-md-3 {
        padding-right: 0 !important;
        width: 100%;
    }
}

/* Field Label Improvements */
.cmb-th label {
    font-weight: 600;
    color: var(--wtm-text);
    font-size: 14px;
}

.cmb2-metabox-description {
    color: var(--wtm-text-muted);
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 1rem;
}

/* Error States */
.cmb2-wrap .cmb2-field-error {
    border-color: var(--wtm-danger) !important;
    box-shadow: 0 0 0 3px rgba(200, 92, 92, 0.1) !important;
}

.cmb2-wrap .cmb2-error {
    color: var(--wtm-danger);
    font-size: 12px;
    margin-top: 4px;
}

/* Mobile responsive */
@media (max-width: 768px) {

    .cmb2-id-tm-jtitle .cmb-th,
    .cmb2-id-tm-jtitle .cmb-td {
        width: 100% !important;
        padding-right: 0;
    }

    .cmb2-id-tm-skills .cmb-repeatable-group {
        padding: 0;
    }

    .cmb2-id-tm-skills .cmb-nested {
        padding: 0.75rem;
    }

    .cmb-remove-field-row {
        padding: 8px 12px;
    }

    .cmb-remove-row {
        flex-direction: column;
        gap: 12px;
    }

    .cmb-remove-row .alignleft {
        width: 100%;
        justify-content: center;
    }

    .cmb-remove-group-row-button {
        width: 100%;
    }

    .cmb-repeatable-grouping .inside {
        padding: 0.75rem;
    }

    .cmb-group-title {
        padding: 8px 12px;
        font-size: 13px;
    }

    .cmb-remove-group-row.dashicons-before {
        top: 6px;
        right: 6px;
        width: 20px;
        height: 20px;
    }

    #wptm_cm2_member_skills_pro .cmb2-wrap {
        padding: 1rem;
    }
}

/* CMB2 Tooltip Styles */
.cmb2-tooltip {
    display: inline-block;
    width: 18px;
    height: 18px;
    background: #0073aa;
    color: white;
    border-radius: 50%;
    text-align: center;
    line-height: 18px;
    font-size: 12px;
    font-weight: bold;
    cursor: help;
    margin-left: 8px;
    position: relative;
    vertical-align: middle;
}

.cmb2-tooltip:hover::after {
    content: attr(title);
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    white-space: nowrap;
    font-size: 13px;
    font-weight: normal;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    max-width: 250px;
    white-space: normal;
    width: max-content;
}

.cmb2-tooltip:hover::before {
    content: '';
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1001;
}