/* ===== HERO SECTION ===== */
.prijzen-hero{
	overflow: hidden;
	position: relative;
	border-bottom: var(--primary-border);
}

.prijzen-hero h1{
  margin: var(--small-bottom-spng) 0;
}

.prijzen-hero p:nth-child(3){
  width: clamp(10rem, 45%, 45rem);
  line-height: var(--text-lh-spng)
}

.global__glow {
	position: absolute;
	width: 1200px;
	height: 900px;
	background: radial-gradient(
		ellipse at center,
		rgba(30, 79, 255, 0.075),
		transparent 70%
	);
	filter: blur(50px);
	pointer-events: none;
	left: -450px;
	top: -450px;
	z-index: 0;
}

/* ===== Prijzen Sections ===== */
/* ----- Pricing Aritcle ----- */
.article__spacing{
  height: 1px;
  width: 100%;
  background: #232328;
  margin: clamp(2rem, 4vw, 7rem) 0;
}

/* Scroll Gedrag */
.pricing__article{
  scroll-margin-top: 110px;
}

/* ----- Pricing Intro ----- */
.pricing-section__header{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: end;
	margin-bottom: var(--mid-bottom-spng);
}

.pricing-section__action{
	border: var(--tertiary-border);
	font-size: var(--secondary-btn-fontsize);
	gap: var(--list-gap-small);
	color: var(--primary-text-color);
	font-weight: 600;
}

.pricing-section__action svg{
  color: var(--primary-text-color);
  height: var(--svg__width-small);
}

/* ----- Pricing Table ----- */
/* --- Table --- */
.pricing-table{
	width: 100%;
  min-width: 700px;
  border-collapse: collapse;
	table-layout: fixed;
}

/* Wrapper */
.pricing-table-wrapper {
  width: 100%;
  overflow-x: auto;
  border: var(--tertiary-border);
  -webkit-overflow-scrolling: touch;
}

.pricing-table th,
.pricing-table td {
  padding: 1.25rem;
  text-align: left;
}

/* --- Table Header --- */
.pricing-table__head{
	background: var(--secondary-color);
	color: var(--secondary-text-color);
	text-transform: uppercase;
	border-bottom: var(--tertiary-border);
  font-size: clamp(.9rem, 1vw, 1.1rem);
}

/* --- Table Row --- */
/* Global */
.pricing-table__cell p{
	color: var(--secondary-text-color);
	font-size: var(--container-SubText);
}

.pricing-table__row{
  border-bottom: var(--tertiary-border);
  transition: all 150ms;
}

.pricing-table__row:hover{
  background: var(--secondary-color);
}

.pricing-table__row--featured{
  background: var(--primary-accent-color-trps);
}

.pricing-table__row--featured:hover{
  background: var(--secondary-accent-color-trps);
}

.pricing-table__row:last-of-type{
  border-bottom: none;
}

.pricing-table th:nth-child(1),
.pricing-table td:nth-child(1) {
  width: 50%;
}

.pricing-table th:nth-child(2),
.pricing-table td:nth-child(2) {
  width: 30%;
}

.pricing-table th:nth-child(3),
.pricing-table td:nth-child(3) {
  width: 20%;
}

/* Left & Badge */
.pricing-table__service{
	display: flex;
	align-items: center;
  gap: clamp(.25rem, .75vw, 1rem);
}

.pricing-table__service--badge{
	color: var(--primary-text-color) !important;
	background: var(--primary-accent-color);
	border-radius: var(--main-br);
	font-size: clamp(.6rem, .8vw, .95rem) !important;
	padding: .4rem .6rem;
	text-transform: uppercase;
  white-space: nowrap;
	font-weight: 700;
}

/* Middle */
.pricing-table__feature {
  display: inline-block;
  vertical-align: middle;
  gap: 2rem;
}

.pricing-table__feature svg {
  vertical-align: middle;
  width: var(--svg__width-small);
  color: var(--primary-accent-color);
}

.pricing-table__feature:nth-child(2){
  margin-left: .5rem;
}

.pricing-table__feature p {
  display: inline;
}

/* Right */
.pricing-table__cell:last-child span{
	color: var(--primary-text-color);
	font-size: var(--title-SubText);
	font-weight: 900;
  margin: 0;
}

/* ----- Global Hovers ----- */
/* Transparant */
.pricing-section__action{
  transition: var(--transition__mid);
}

/* Hover Transparant */
.pricing-section__action:hover{
  border: var(--quaternary-border);
}

/* ----- Media Query ----- */
/* Ipad */
/* Phone */
@media (max-width: 767px) {
  /* Global */
  .pricing-table th,
  .pricing-table td {
    padding: 1rem;
  }

  /* Intro (Hero)*/
  .prijzen-hero p{
    width: 100% !important;
  }

  /* Intro (Article) */
  .pricing-section__header{
    flex-direction: column;
    align-items: start;
  }

  /* Featured row (badge) */
  /* .pricing-table__row--featured .pricing-table__cell:nth-child(2),
  .pricing-table__row--featured .pricing-table__cell:nth-child(3) {
    padding-top: 1.35rem;
  } */

  /* Dienst (Left)*/
  .pricing-table__service {
    flex-direction: column;
    align-items: flex-start;
  }

  .pricing-table__service--badge {
    order: -1;
  }

  /* Inclusief (Middle) */
  .pricing-table__feature {
    margin: 0;
  }

  .pricing-table__feature svg {
    flex-shrink: 0;
  }
}