/**
 * Block Name: acf/pricing-table
 * Description: A 3 column pricing table with features
 *
 */

.wp-block.wp-block-acf-pricing-table {
	max-width: 100% !important;
	padding: 0 !important;
}

.block__acf-pricing-table {
	background: var(--wp--preset--color--gray-01);
}

.block__acf-pricing-table .table-row__tooltip {
	position: relative;
	display: inline-block;
}

.block__acf-pricing-table .table-row__tooltip .svg {
	transform: translateY(12.5%) scale(1.225);
    opacity: 0.4;
    margin-inline-start: 0.5rem;
}

.block__acf-pricing-table .table-row__tooltip span {
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	opacity: 0;
	pointer-events: none;
	background: white;
	padding: 0.25rem 0.5rem;
	font-size: 0.875rem;
	width: 150px;
	box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1);
}

.block__acf-pricing-table .table-row__tooltip:focus span,
.block__acf-pricing-table .table-row__tooltip:focus-within span,
.block__acf-pricing-table .table-row__tooltip:hover span {
	opacity: 1;
}

.block__acf-pricing-table .table-head h3,
.block__acf-pricing-table .table-head p {
	margin: 0;
}

.block__acf-pricing-table .table-row {
	display: grid;
}

.block__acf-pricing-table .table-row:nth-child(even) {
	background: white;
	border-radius: 0.5rem;
}

.block__acf-pricing-table .table-col {
	padding: 1rem;
	font-size: 1.75rem;
	color: #4a28c3;
}

.block__acf-pricing-table .table-col .svg {
	display: block;
	margin: 0 auto;
	width: 1em;
}

.block__acf-pricing-table .table-col--standard {
	color: #ffd3ad;
}

.block__acf-pricing-table .table-col--premium {
	color: #8552cc;
}

@media (max-width: 767px) {

	.block__acf-pricing-table__header {
		display: flex;
		padding-block-start: 0.25rem;
		border-bottom: 2px solid var(--wp--preset--color--gray-02);
	}

	.block__acf-pricing-table .table-head {
		width: calc(100% / 3);
	}

	.block__acf-pricing-table .table-head h3 {
		padding: 1rem;
		font-size: 1rem !important;
		text-align: center;
		border-bottom: 2px solid var(--wp--preset--color--gray-02);
		cursor: pointer;
	}

	.block__acf-pricing-table .table-head p {
		position: relative;
		padding: 0.9rem 0.5rem 0.75rem;
        width: 300%;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.3s ease;
	}

	.block__acf-pricing-table .table-head--standard p {
		left: calc(-1 * 100%);
	}

	.block__acf-pricing-table .table-head--premium p {
		left: calc(-2 * 100%);
	}

	.block__acf-pricing-table--starter .table-head--starter h3,
	.block__acf-pricing-table--standard .table-head--standard h3,
	.block__acf-pricing-table--premium .table-head--premium h3 {
		border-color: var(--wp--preset--color--seclore-red);
	}

	.block__acf-pricing-table--starter .table-head--starter p,
	.block__acf-pricing-table--standard .table-head--standard p,
	.block__acf-pricing-table--premium .table-head--premium p {
		opacity: 1;
		pointer-events: auto;
	}

	.block__acf-pricing-table .table-row {
		position: relative;
		grid-template-columns: auto 3.5rem;
	}

	.block__acf-pricing-table .table-col-main {
		padding: 1rem;
	}

	.block__acf-pricing-table .table-col {
		position: absolute;
		top: 0;
		inset-inline-start: 0;
		opacity: 0;
		pointer-events: none;
		padding: 0.75rem 0.85rem;
	}

	.block__acf-pricing-table--starter .table-col--starter,
	.block__acf-pricing-table--standard .table-col--standard,
	.block__acf-pricing-table--premium .table-col--premium {
		position: static;
		opacity: 1;
		pointer-events: auto;
	}
}

@media (min-width: 768px) {

	.block__acf-pricing-table__header {
		display: grid;
		grid-template-columns: repeat(3, minmax(10px, 1fr));
		padding-left: 32%;
		border-bottom: 1px solid var(--wp--preset--color--gray-02);
	}

	.block__acf-pricing-table .table-head {
		padding: 2rem;
		border-inline-start: 1px solid var(--wp--preset--color--gray-02);
		text-align: center;
	}

	.block__acf-pricing-table .table-head h3 {
		font-size: 2rem !important;
		font-weight: 500;
	}

	.block__acf-pricing-table .table-head p {
		margin-top: 1rem;
    	line-height: 1.5;
	}

	.block__acf-pricing-table .table-row {
		grid-template-columns: 32% 1fr 1fr 1fr;
	}

	.block__acf-pricing-table .table-col-main {
		padding: 1rem 2.75rem;
	}

	.block__acf-pricing-table .table-col {
		border-inline-start: 1px solid var(--wp--preset--color--gray-02);
	}
}