/* Views */
.csc-view {
  display: none;
}

.csc-view.active {
	display: block;
}

.csc-container {
  max-width: 100%;
}

.csc-view {
  margin-block-start: 24px;
  font-family: var(--wp--preset--font-family--inter, 'Inter');
  color: #222;

  @media only screen and (min-width: 851px) {
    margin-block-start: 32px;
	}

  @media only screen and (min-width: 1241px) {
    margin-block-start: 56px;
	}
}

.csc-section-heading {
	margin-block: 0;
  font-size: 24px;
  line-height: 1.2;
	font-weight: 800;
	letter-spacing: -0.72px;
  color: #1E1E1E;
  text-align: center;

	@media only screen and (min-width: 851px) {
    font-size: 32px;
		letter-spacing: -1.28px;
	}

  @media only screen and (min-width: 1241px) {
    font-size: 40px;
		letter-spacing: -2px;
	}
}

.csc-columns {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
  align-items: start;
	gap: 24px;
  margin-inline: auto;
  width: fit-content;
  max-width: 100%;

	@media (min-width: 768px) {
		gap: 48px;
	}

	@media (min-width: 1280px) {
		grid-template-columns: minmax(0, 560px) minmax(0, 510px);
		gap: 56px;
	}
}

.csc-preview {
	border: 1px solid #DDD;
	border-radius: 16px;
	background-color: #fff;
	overflow: hidden;

	@media only screen and (min-width: 851px) {
		border-radius: 20px;
	}

	@media only screen and (min-width: 1241px) {
		border-radius: 24px;
	}
}

/* Shirt Preview Container */
.csc-shirt-preview {
	position: relative;
	width: 100%;
	max-width: 560px;
	margin: 0 auto;
}

.csc-shirt-image {
	display: block;
	width: 100%;
	height: auto;
}

/* Text Overlay */
.csc-text-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	color: #ffffff;
	text-align: center;
}

.csc-preview.color-white .csc-text-overlay {
  color: #8f9f5f;
}

/* Front View Text Styles */

.csc-text-front .csc-business-name {
  position: absolute;
  top: 24%;
  right: 31%;
  z-index: 1;
	font-size: 18px;
	font-weight: 700;
	line-height: 21.6px;
	max-width: 85px;
}

/* Back View Text Styles */
.csc-text-back {
	display: flex;
	flex-direction: column;
	align-items: center;
  padding-block-start: 20%;
  padding-inline-end: 4%;
}

.csc-text-back .csc-year-text {
	font-size: 14px;
  line-height: 15.4px;
	font-weight: 400;
}

.csc-text-back .csc-city-text {
  margin-block-start: 4px;
	font-size: 14px;
  line-height: 15.4px;
	font-weight: 400;
	max-width: 150px;
}

.csc-text-back .csc-business-name-back {
  margin-block-start: 8px;
	font-size: 42px;
	font-weight: 700;
	line-height: 1.2;
	max-width: 190px;
}

.csc-text-back .csc-partner-text {
	margin-top: 12px;
	font-size: 14px;
  line-height: 15.4px;
	font-weight: 400;
	max-width: 220px;
}

.csc-note {
  margin-block-start: 24px;

  @media only screen and (min-width: 851px) {
    margin-block-start: 32px;
  }

  @media only screen and (min-width: 1241px) {
    margin-block-start: 56px;
  }

	p {
		margin: 0;
    font-size: 18px;
    line-height: 24px;
    text-align: center;
    color: #555;
	}
}

.csc-details {
	max-width: 600px;
}

.csc-title {
	margin-block: 0;
	font-style: 20px;
  line-height: 1.2;
	font-weight: 800;
	letter-spacing: -0.64px;
  text-wrap: balance;

  @media only screen and (min-width: 851px) {
		font-size:24px;
		letter-spacing: -1px;
	}

	@media only screen and (min-width: 1241px) {
		font-size: 32px;
		letter-spacing: -1.28px;
	}
}

.csc-sub-title {
	margin-block: 4px 0;
	font-size: 16px;
  line-height: 21px;
	font-weight: 400;

  strong {
    font-weight: 700;
  }
}

.csc-info-box {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 11px;
  margin-block-start: 16px;
  border: 1px solid #0C85AC;
  border-radius: 16px;
  padding: 16px;
  background-color: rgba(64, 197, 243, 0.15);
}

.csc-info-box-content h3 {
	margin-block: 0;
	font-size: 18px;
  line-height: 24px;
	font-weight: 700;
}

.csc-info-box-content p {
	margin-block: 10px 0;
	font-size: 16px;
  line-height: 21px;
	font-weight: 400;
}

.csc-input {
  margin-block-start: 32px;
}

.csc-input label,
.csc-variation-label {
  margin: 0;
	font-size: 21px;
  line-height: 27px;
	font-weight: 700;
}

#csc-name-error {
  display: none;
}

.csc-input small {
  display: block;
  margin-block: 16px 0;
	font-size: 16px;
  line-height: 21px;
}

#csc-name-error {
  margin-block: 16px 0;
	font-size: 16px;
  line-height: 21px;
  color: #d2193f;
}

.csc-input {
	input[type="text"] {
    margin-block-start: 16px;
		border-radius: 32px;
		min-height: 56px;
    padding: 12px 24px;
		border: 2px solid #999;
		background-color: #fff;
		font-size: 21px;
		line-height: 27px;
		color: #555;

	}

  input[readonly],
  input[readonly]:focus,
  input[readonly]:focus-visible {
    border-color: #ccc;
    background-color: #f6f6f6;
    color: #999;
  }
}

.csc-input-dual {
	display: flex;
	flex-direction: column;
	gap: 16px;

	@media (min-width: 560px) {
		flex-direction: row;
		align-items: center;
	}
}

.csc-input-body-text {
  color: #555;
}

#csc-remove-logo {
  display: grid;
  place-content: center;
  border: 1px solid #999;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  background-color: transparent;
	font-size: 16px;
	line-height: 1;
	font-weight: 600;
	color: #555;
	cursor: pointer;
}

.csc-gradient-navy {
	display: inline-block;
	width: fit-content;
  padding-inline-end: 2px;
	background: linear-gradient(90deg, #19395A 0%, #0D94BF 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.csc-variations {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
	font-size: 16px;
	font-weight: 600;
	line-height: 21px;

  label {
    display: flex;
		align-items: center;
		gap: 10px;
		border: 2px solid #999;
		border-radius: 32px;
		min-height: 48px;
		padding: 10px 16px;
		background-color: #fff;
		color: #555;
		cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    line-height: 21px;

    &::before {
      content: '';
      width: 10px;
      min-width: 10px;
      height: 10px;
      background-image: url('../images/check-gray-mid.svg');
      background-repeat: no-repeat;
      background-size: 100% auto;
      background-position: center;
    }

    input {
      display: none;
    }

		&:hover,
    &:has(input:checked) {
			border-color: transparent;
			background-color: #0D94BF;
			color: #fff;

      &::before {
        content: '';
        background-image: url('../images/check-white.svg');
      }
		}
  }
}

.csc-color-note {
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 18px;
  color: #555;
}

.csc-variation-size-guide {
  display: flex;
  align-items: center;
  gap: 8px;
	margin: 16px 0 0;
  border: 0;
  width: fit-content;
	padding: 0;
  background: none;
  font-size: 16px;
	line-height: 1;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
  color: #0C85AC;
  cursor: pointer;

  svg {
    width: 12px;
    min-width: 12px;
    height: auto;
  }
}

.csc-input button.csc-add-to-cart,
.csc-btn-primary {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-block-start: 32px;
	border: 0;
	border-radius: 32px;
	width: 100%;
	min-height: 64px;
	padding: 12px 18px;
	background: linear-gradient(90deg, #19395A 0%, #0D94BF 100%);
  font-family: var(--wp--preset--font-family--inter, 'Inter');
	font-size: 21px;
	font-weight: 700;
	line-height: 27px;
	color: #fff;
	cursor: pointer;
}

.csc-btn-secondary {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border: 0;
	border-radius: 32px;
	width: 100%;
	min-height: 64px;
	padding: 12px 18px;
  font-family: var(--wp--preset--font-family--inter, 'Inter');
	font-size: 21px;
	font-weight: 700;
	line-height: 27px;
	color: #555;
	cursor: pointer;

  &::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    border-radius: 32px;
    background: linear-gradient(90deg, #19395A 0%, #0D94BF 100%);
  }

  &::after {
    content: '';
    position: absolute;
    inset: 2px;
    z-index: -1;
    border-radius: 32px;
    background-color: #fff;
  }
}

.csc-btn-back {
  margin-block-start: 16px;
}

/* Size Guide */
.csc-size-guide-outer {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  justify-content: center;
  align-items: center;
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.5);
  overflow-y: auto;

  &.active {
    display: flex;
  }

  @media only screen and (min-width: 851px) {
    padding: 40px;
  }
}

.csc-size-guide {
  border-radius: 32px;
  width: 100%;
  max-width: 832px;
  max-height: 100%;
  background-color: #fff;
  overflow-y: auto;
}

.csc-size-guide-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin: 0;
  padding: 24px 24px 0;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.72px;

  .csc-size-guide-close {
    cursor: pointer;
  }

  svg {
    width: 32px;
    min-width: 32px;
    height: auto;
  }
}

.csc-size-measurements {
  margin-block-start: 16px;
}

.csc-size-measurements-tab-nav {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 32px;
  border-block-end: 1px solid #ccc;

  button {
    margin-block-end: -1px;
    border: 0;
    border-bottom: 2px solid transparent;
    padding-block: 4px 2px;
    background: none;
    font-size: 18px;
    line-height: 24px;
    font-weight: 700;
    color: #0C85AC;
    cursor: pointer;

    &.is-active {
      border-color: #999;
      color: #222;
    }
  }
}

.csc-size-measurements-tab-content {
  padding: 32px;
}

.csc-size-measurements-header {

  p {
    margin-block: 0;
    font-size: 16px;
    line-height: 21px;
    color: #222;

    & + p {
      margin-block-start: 1.25em
    }
  }
}

.csc-size-measurements-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  margin-block-start: 40px;

	@media only screen and (min-width: 851px) {
    grid-template-columns: 344px minmax(0, 1fr);
    gap: 60px;
  }
}

.csc-size-measurements-image {
  display: block;
  margin: 0;
  max-width: 344px;

  img {
    display: block;
  }
}

.csc-size-measurements-text {
  h3 {
    margin-block: 0;
    font-size: 16px;
    line-height: 21px;
    font-weight: 700;
  }

  p {
    margin-block: 4px 0;
    font-size: 16px;
    line-height: 21px;
    color: #555;

    & + p {
      margin-block-start: 1.25em;
    }

    & + h3 {
      margin-block-start: 16px;
    }
  }
}

.csc-size-chart {
  padding-inline: 24px;
  padding-block-end: 32px;
}

.csc-size-chart-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin: 0;
  border-radius: 8px;
  padding: 16px;
  background-color: rgba(64, 197, 243, 0.15);
  font-size: 24px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.72px;
  cursor: pointer;

  svg {
    rotate: 180deg;
    width: 26px;
    min-width: 26px;
    height: auto;
  }
}

.csc-size-chart-heading.is-open {
  svg {
    rotate: 0deg;
  }
}

.csc-size-chart-tabs {
  display: none;
  margin-block-start: 16px;
}

.csc-size-chart-tabs.is-open {
  display: block;
}

.csc-size-chart-tab-nav {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 32px;
  border-block-end: 1px solid #E5E7EB;

  button {
    margin-block-end: -1px;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 4px 0 2px;
    background: none;
    font-size: 18px;
    line-height: 24px;
    font-weight: 700;
    color: #0C85AC;
    cursor: pointer;

    &.is-active {
      border-color: #999;
      color: #222;
    }
  }
}

.csc-size-chart-tab-content {
  padding: 32px 0 0;

	@media only screen and (min-width: 851px) {
    padding: 32px 32px 0;
  }
}

.csc-tab-panel {
  display: none;
}

.csc-tab-panel.is-active {
  display: block;
}

.csc-size-chart-table {
  display: block;
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  line-height: 21px;
  color: #222;
  overflow-x: auto;

  @media only screen and (min-width: 851px) {
    display: table;
    overflow-x: visible;
  }

  thead {
    padding-block-end: 16px;
    font-weight: 700;
    text-transform: uppercase;
    display: table;
    width: 100%;
    min-width: 450px;
    table-layout: fixed;

    @media only screen and (min-width: 851px) {
      display: table-header-group;
      table-layout: auto;
    }
  }

  tbody tr {
    border-block-start: 1px solid #ccc;
    display: table;
    width: 100%;
    min-width: 450px;
    table-layout: fixed;

    @media only screen and (min-width: 851px) {
      display: table-row;
      table-layout: auto;
    }
  }

  th, td {
    padding-block: 16px;
  }
}

.csc-size-chart-content-footer {
  margin-block-start: 32px;

  p {
    margin: 0;
    font-size: 14px;
    line-height: 18px;
    color: #555;
  }
}