.wpzb-settings-panel {
	.components-panel__body.wpzb-sub-panel {
		background-color: rgba(0, 0, 0, 0.015);
		border: 1px solid rgba(0, 0, 0, 0.1);
		margin: 0 0 16px;

		&.no-padding .components-tools-panel {
			padding-left: 0;
			padding-right: 0px;
		}

		&:last-child {
			margin-bottom: 0;
		}
	}

    select[multiple] {
        height: 100px !important;
    }
}

.wpzb-button-select {
	margin-bottom: 1em;

	.components-radio-control__group-wrapper {
		display: flex;
		flex-direction: row;
		gap: 0;

		.components-base-control__label {
			flex: 0 0 100%;
		}

        .components-h-stack {
            flex-direction: row;
            gap: 0;
        }

		.components-radio-control__option {
			position: relative;
			flex-basis: 24%;
			flex-grow: 1;
			text-align: center;
			padding: 6px;
			margin: 0;
			display: flex;
			justify-content: center;

			.components-radio-control__input {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				height: 100%;
				width: 100%;
				padding: 0;
				border-radius: 0;
				margin: 0;

				&::before {
					display: none;
				}

				&:checked {
					// z-index: 1;
				}

				&:checked + label,
                &:checked + label::before {
					color: #fff;
				}
			}

			&:nth-child(1) .components-radio-control__input {
				border-top-left-radius: 5px;
				border-bottom-left-radius: 5px;
				border-right: 0;
			}

			&:last-child .components-radio-control__input {
				border-top-right-radius: 5px;
				border-bottom-right-radius: 5px;
			}

			&:nth-child(3):last-child .components-radio-control__input {
				border-left: 0;
			}

			label {
				position: relative;
				z-index: 2;
			}
		}
	}

	&.wpzb-button-select-nolabel {
		.components-radio-control__group-wrapper {
			.components-base-control__label {
				display: none;
			}
		}
	}

	&.wpzb-button-select-icons {
		.components-radio-control__group-wrapper {
			.components-radio-control__option {
				input {
					max-width:100%;
				}
				&:nth-child(4) input {
					//pointer-events: none;
					&::after {
						content: 'PRO';
						color: #fff;
						display: flex;
						align-items: center;
						justify-content: center;
						background: #0BB4AA;
						border-radius: 0;
						font-size: 12px;
						font-weight: 400;
						text-transform: uppercase;
						letter-spacing: 0.05em;
						padding: 8px 6px;
						position: absolute;
						top: -10px;
    					right: -8px;
					}
				}
				label::before {
					display: block;
					font-family: 'dashicons';
					font-size: 30px;
					line-height: 1;
				}
	
				&:nth-child(1) label::before {
					content: '\f13c';
				}
	
				&:nth-child(2) label::before {
					content: '\f509';
				}
	
				&:nth-child(3) label::before {
					content: '\f489';
				}
				&:nth-child(4) label.components-radio-control__label {
					//pointer-events: none;
					opacity: 0.5;
				}
				&:nth-child(4) label::before {
					content: '\f228';
                    margin-top: -15px;
				}
				&:nth-child(4) {
					position: relative;

					input {
						opacity: 0.5;
					}
					
					.wpzb-layout-option-eccentric {
						position: absolute;
						display: flex;
						align-items: center;
						justify-content: center;
						width: 100%;
						height: 100%;
						top: 0;
						left: 0;

						span {
							display: block;
							margin-top: 30px;
						}
					}

					label {
						cursor: default;
						position: relative;
						opacity: 0.5;
					}
				}
			}
		}
	}
}

.wpzb-portfolio-video-panel .wpzb-button-select {
	margin: 0 0 0.5em;
}

.wpzb-cover-video {
	position: relative;

	&.nopad {
		padding: 0;
	}

	&.editor-post-featured-image__preview {
		border: 1px solid #a2aab2;
	}

	.components-spinner {
		position: absolute;
		top: 10px !important;
		left: auto !important;
		right: 10px !important;
		z-index: 2;
		margin: 0 !important;
	}

	.wpzb-cover-video-url-input {
		padding: 0;
		margin: 0;

		.components-base-control__field {
			padding: 0;
			margin: 0;

			.components-text-control__input {
				text-align: center;
				line-height: 20px;
				background: transparent;
				padding: 8px 10px;
				border: 0;
				border-radius: 0;
				margin: 0;
			}
		}
	}

	&.editor-post-featured-image__toggle .wpzb-cover-video-url-input .components-base-control__field .components-text-control__input {
		min-height: 90px;
	}
}

.wpzb-settings-panel {
	.components-panel__body-toggle {
		&.components-button {
			display:flex;
			flex-direction:row-reverse;
			justify-content:flex-end;
		}
		svg.components-panel__icon {
			width:20px;
			height:20px;
			margin:0 10px 0 0;
		}
	}	
}

.wpzoom-blocks.wpzoom-blocks_portfolio-block_view-all,
.wpzoom-blocks_portfolio-block .wpzoom-blocks_portfolio-block_filter ul a,
.wpzoom-blocks_portfolio-block .portfolio_item a,
.wpzoom-blocks_portfolio-block.layout-grid .wpzoom-blocks_portfolio-block_items-list .wpzoom-blocks_portfolio-block_item.has-cover:not(.lightbox) .wpzoom-blocks_portfolio-block_item-details .wpzoom-blocks_portfolio-block_item-title a {
    pointer-events: none;
    cursor: pointer;
}


.wpzoom-blocks_portfolio-block .wpzoom-blocks_portfolio-block_filter ul a:hover,
.wpzoom-blocks_portfolio-block .portfolio_item a:hover,
.wpzoom-blocks_portfolio-block.layout-grid .wpzoom-blocks_portfolio-block_items-list .wpzoom-blocks_portfolio-block_item .wpzoom-blocks_portfolio-block_item-details .wpzoom-blocks_portfolio-block_item-title:hover {
    cursor: pointer;
}

.components-popover.wpzoom-preview-tooltip {
    z-index: 1000000;
    
    .components-popover__content {
        padding: 0;
        min-width: 400px;
        max-width: 400px;
        background: #fff;
        border-radius: 4px;
        box-shadow: 0 2px 15px rgba(0, 0, 0, 0.15);
    }

	.components-popover__arrow {
		display: none;
	}

    &.is-from-left {
        margin-left: 0 !important;
    }

    &.is-from-right {
        margin-right: 0 !important;
    }

    &.is-from-top {
        margin-bottom: 0 !important;
    }

    &.is-from-bottom {
        margin-top: 0 !important;
    }

    img {
        display: block;
        box-shadow: none;
        background: #f5f5f5;
        margin-bottom: 0;
        width: 100%;
        height: auto;
        border-radius: 0;
    }

    .wpzoom-preview-link {
        display: inline-block;
        background: #0073aa;
        color: #fff;
        padding: 8px 16px;
        border-radius: 4px;
        text-decoration: none;
        font-size: 14px;
        font-weight: 500;
        transition: all 0.2s ease;
        margin-bottom: 0;

        &:hover {
            background: #006291;
            color: #fff;
        }
    }
}

.wpzb-layout-option-eccentric {
    position: relative;
    display: inline-block;
    width: 100%;
    text-align: center;
}