/*
 Theme Name:   Ticketbox
 Description:  Webits custom Ticketbox Theme
 Author:       Webits
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  ticketbox
*/
:root {
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-7: 28px;
  --spacing-8: 32px;
  --spacing-10: 40px;
  --spacing-12: 48px;
  --spacing-25: 100px;
  --spacing-30: 120px;
  --content-max-width: 1300px;
  --content-width: min(82%, var(--content-max-width));
  --spacing-1: 4px;
  --side-gap: calc(50% - var(--content-width) / 2);
  --content-right: calc(var(--side-padding) + var(--content-width));
}

@media (max-width: 767px) {
  :root {
    --content-width: 85%;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  scroll-behavior: smooth;
}

body {
  font-family: var(--wp--preset--font-family--manrope);
  color: #000;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  border: 0;
}

fieldset {
  padding: 0;
  border: 0;
}

input {
  width: 100%;
  font-family: var(--wp--preset--font-family--manrope);
}

:is(.input-text:focus, input[type="checkbox"]:focus) {
  outline: 2px solid var(--wp--preset--color--dark-green);
}

body .is-layout-flow>*+.wp-block-spacer,
body .is-layout-constrained>*+.wp-block-spacer,
body .is-layout-flow>.wp-block-spacer+*,
body .is-layout-constrained>.wp-block-spacer+* {
  margin-block-start: 0;
}

.input-wrapper {
  font-size: 1rem;
  line-height: 1.32;
  letter-spacing: .03rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.input-wrapper:has(input[type="checkbox"]) {
  display: grid;
  grid-template-columns: 3rem 1fr;
}

.input-wrapper+.input-wrapper {
  margin-top: 1.06rem;
}

@media (min-width: 782px) {
  .input-wrapper+.input-wrapper {
    margin-top: 1.81rem;
  }
}

input:not([type="submit"]).wpcf7-form-control,
textarea.wpcf7-form-control,
.input-wrapper input:not([type="checkbox"]):not([type="radio"]) {
  border-radius: 5px;
  margin-block-start: .5rem;
  border: 0.1rem solid #000;
  background-color: #fff;
  padding: .77rem 1.44rem;
  font-size: 1.125rem;
  line-height: 1.17;
  letter-spacing: .03375rem;
}

@media (min-width: 782px) {
  :is(#billing_state_field, #billing_country_field, .input-wrapper) label {
    font-size: 1.19725rem;
    line-height: 1.10;
    letter-spacing: .03594rem;
  }
}

.wpcf7-checkbox label {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: start;
	gap: .5rem;
}

.wpcf7-checkbox .wpcf7-list-item {
	margin-left: 0;
}

.input-wrapper input[type="checkbox"],
.wpcf7-checkbox input[type="checkbox"] {
  /* Add if not using autoprefixer */
  -webkit-appearance: none;
  appearance: none;
  /* For iOS < 15 to remove gradient background */
  background-color: #fff;
  /* Not removed via appearance */
  margin: 0;
  font: inherit;
  color: currentColor;
  border: 0.15em solid currentColor;
  border-radius: 0.15em;
  transform: translateY(-0.075em);
  width: 2.5em;
  aspect-ratio: 1;
  border-radius: 5px;
  border: 0.1rem solid #000;
  display: grid;
  position: absolute;
}

.wpcf7-checkbox input[type="checkbox"] {
  width: 5.25rem;
  transform: translateY(0);
  position: relative;
}

.input-wrapper:has(input[type="checkbox"]) input[type="checkbox"]{
  position: relative;
}

.wpcf7-checkbox input[type="checkbox"]:after,
.input-wrapper:has(input[type="checkbox"]) input[type="checkbox"]::after {
  content: '';
  width: 0.625em;
  height: 1.125em;
  border-bottom: 0.2rem solid var(--wp--preset--color--green);
  border-right: 0.2rem solid var(--wp--preset--color--green);
  transition: opacity .1s ease-out;
  left: 1.1em;
  top: 0.52em;
  transform: translate(140%, 40%) rotate(45deg);
  cursor: pointer;
  opacity: 0;
}

.wpcf7-checkbox input[type="checkbox"]:checked:after,
.input-wrapper:has(input[type="checkbox"]) input[type="checkbox"]:checked::after {
  opacity: 1;
}


.input-wrapper input[type="checkbox"]+label {
  position: relative;
  display: inline-flex;
  min-height: 2.5em;
  padding-left: 3em;
  align-items: center;
  cursor: pointer;
  display: inline-block;
  margin-block-start: 0.5rem;
}

.input-wrapper:has(input[type="checkbox"]) input[type="checkbox"]+label {
  margin:0;
  padding: 0;
  min-height: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
}

.input-wrapper input[type="checkbox"]+label:after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  cursor: pointer;
}

.input-wrapper input[type="checkbox"]+label:after {
  width: 0.625em;
  height: 1.125em;
  border-bottom: 0.2rem solid var(--wp--preset--color--green);
  border-right: 0.2rem solid var(--wp--preset--color--green);
  opacity: 0;
  transition: opacity .1s ease-out;
  left: 1.1em;
  top: 0.52em;
  transform: translate(-50%, -65%) rotate(45deg);
  cursor: pointer;
}

.input-wrapper input[type="checkbox"]:checked+label:after {
  opacity: 1;
}

.input-wrapper:has(input[type="checkbox"])  input[type="checkbox"]+label:after {
  content: none;
}

.hide {
  display: none;
}

@media (min-width: 782px) {
  .md\:hide {
    display: none;
  }

  .md\:show {
    display: revert;
  }
}

.text-4 {
  font-size: 1rem;
}

.text-5 {
  font-size: 1.25rem;
}

.text-8 {
  font-size: 2rem;
}

@media (min-width: 782px) {
  .md\:text-5 {
    font-size: 1.25rem;
  }

  .md\:text-8 {
    font-size: 2rem;
  }

  .md\:text-12 {
    font-size: 3rem;
  }
}

.pl-10 {
  padding-left: 2.5rem;
}

@media (min-width: 782px) {
  .md\:pl-0 {
    padding-left: 0
  }
}

.btn-primary {
  border-radius: .3125rem;
  background-color: var(--wp--preset--color--dark-green);
  box-shadow: 0 3px 1px 0 rgba(0, 0, 0, .21), 0 8px 33px 2px rgba(0, 0, 0, .09);
  text-transform: uppercase;
  font-family: var(--wp--preset--font-family--inter);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: .03rem;
  color: #fff;
  text-align: center;
  padding: .5625rem .875rem;
  display: inline-block;
  cursor: pointer;
}

.btn-secondary {
  border-radius: .3125rem;
  background: #fff;
  box-shadow: 0 3px 1px 0 rgba(0, 0, 0, .21), 0 8px 33px 2px rgba(0, 0, 0, .09);
  text-transform: uppercase;
  font-family: var(--wp--preset--font-family--inter);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: .03rem;
  padding: .5625rem 2.0625rem .5625rem 0.8125rem;
}

.section-title {
  text-transform: uppercase;
  font-weight: 800;
  font-size: 1.19725rem;
  line-height: 1.10;
  letter-spacing: .03594rem;
}

.section-title--fieldset {
  border-bottom: 1px dotted #000;
  padding-bottom: .69rem;
}

:is(abbr, span).required {
  text-decoration: none;
  color: var(--wp--preset--color--vivid-red);
}

.select2-container--default .select2-selection--single {
  border: 1px solid #000;
  border-radius: 5px;
}

.select2-container .select2-selection--single .select2-selection__rendered {
  padding: .77rem 1.44rem;
  line-height: 1.17;
  letter-spacing: .03375rem;
  color: inherit;
  font-size: 1.125rem;

}

.select2-container .select2-selection--single {
  height: auto;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {

  margin-top: 0.4em;

}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.page-template-page__long-form
:is(.ticketbox-template-page__header, .ticketbox-long-form) {
  --content-max-width: 48rem;
  --content-width: min(82%, var(--content-max-width));
}

.ticketbox-long-form {
  --gap: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  padding-block: calc(var(--gap) * 2);
  > * {
    margin: 0;
  }
  * + h2 {
    margin-block-start: var(--gap);
  }
  h2, h3, h4 {
    text-wrap: balance;
  }
  p {
    text-wrap: pretty;
  }
  a {
    color: var(--wp--preset--color--blue-electric);
    text-decoration: underline;
  }
}