.elementor-437 .elementor-element.elementor-element-9dfcf6a{--display:flex;--padding-top:80px;--padding-bottom:80px;--padding-left:20px;--padding-right:20px;}.elementor-437 .elementor-element.elementor-element-49d9f68{--display:flex;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:20px 20px;--row-gap:20px;--column-gap:20px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-437 .elementor-element.elementor-element-c9a4121 .elementor-heading-title{font-family:"Montserrat", Sans-serif;font-size:48px;font-weight:800;text-transform:uppercase;line-height:1.1em;letter-spacing:-0.02em;color:var( --e-global-color-secondary );}.elementor-437 .elementor-element.elementor-element-18593d1{width:100%;max-width:100%;}:root{--page-title-display:none;}/* Start custom CSS for shortcode, class: .elementor-element-18593d1 *//* ===================== TOURNAMENT ENTRY FORM STYLING ===================== */
/* Matches Suffolk Squash's navy/yellow design system — written against the
   ACTUAL rendered Contact Form 7 markup (CF7 6.1.7) for this form. */

.tournament-entry-form{
  --navy:#001026;
  --yellow:#FCCC38;
  --heading-font:"Montserrat", Sans-serif;
  --body-font:"Inter", Sans-serif;

  max-width: 640px;
  margin: 0 auto;
  padding: clamp(28px,5vw,44px);
  background: #fff;
  border: 1px solid rgba(0,16,38,.1);
  border-radius: 10px;
  box-shadow: 0 20px 50px rgba(0,16,38,.08);
  font-family: var(--body-font);
      display: flex;
    flex-direction: column;
    gap: 30px;
}

/* CF7 wraps every field in its own <p> — reset that as the single source
   of vertical rhythm between fields, instead of stacking multiple margins. */
.tournament-entry-form form p{
  margin: 0 0 20px 0;
}
.tournament-entry-form form p:last-of-type{
  margin-bottom:0;
}

/* Field labels ("FIRST NAME*", "EMAIL*" etc.) */
.tournament-entry-form label{
  display:block;
  font-weight:700;
  font-size:12.5px;
  letter-spacing:1px;
  text-transform:uppercase;
  color: var(--navy);
  opacity:.75;
  margin-bottom: 8px;
}

/* The <br> CF7 inserts between label and input — collapse it, spacing is
   already handled by the label's margin-bottom above. */
.tournament-entry-form label + br{
  display:none;
}

.tournament-entry-form .wpcf7-form-control-wrap{
  display:block;
  position:relative;
}

/* Text, email, tel, single select inputs */
.tournament-entry-form input[type="text"],
.tournament-entry-form input[type="email"],
.tournament-entry-form input[type="tel"],
.tournament-entry-form select{
  width:100%;
  display:block;
  font-family: var(--body-font);
  font-size:15.5px;
  color: var(--navy);
  background: rgba(0,16,38,.03);
  border: 1px solid rgba(0,16,38,.15);
  border-radius: 6px;
  padding: 14px 16px;
  line-height:1.4;
  transition: border-color .2s ease, background .2s ease;
  box-sizing: border-box;
}

.tournament-entry-form input[type="text"]:focus,
.tournament-entry-form input[type="email"]:focus,
.tournament-entry-form input[type="tel"]:focus,
.tournament-entry-form select:focus{
  outline:none;
  border-color: var(--yellow);
  background: #fff;
}

.tournament-entry-form select{
  appearance:none;
  -webkit-appearance:none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' stroke='%23001026' stroke-width='2' fill='none' fill-rule='evenodd'/></svg>");
  background-repeat:no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
  cursor:pointer;
}

/* Validation error tip — force into normal flow so it stacks below the
   field instead of overlapping it (CF7's own CSS sometimes floats this). */
.tournament-entry-form .wpcf7-not-valid-tip{
  position:static !important;
  display:block;
  font-size:12.5px;
  font-weight:600;
  color:#d0342c;
  margin-top:6px;
}

.tournament-entry-form input.wpcf7-not-valid,
.tournament-entry-form select.wpcf7-not-valid{
  border-color:#d0342c !important;
  background: rgba(208,52,44,.04);
}

/* ---- Categories checkboxes ----
   Real markup: <span class="wpcf7-list-item"><label><input type="checkbox">
   <span class="wpcf7-list-item-label">Text</span></label></span>
   The checkbox and its text sit INSIDE the same real <label> element —
   so the bordered "pill" box must be styled on that <label>, not on the
   inner text span (styling the inner span only boxes the text, leaving
   the checkbox square floating above it, which is the bug in the screenshot). */
.tournament-entry-form .wpcf7-checkbox{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.tournament-entry-form .wpcf7-list-item{
  margin:0;
}

.tournament-entry-form .wpcf7-list-item label{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 13px 14px;
  border: 1px solid rgba(0,16,38,.12);
  border-radius: 6px;
  cursor:pointer;
  transition: border-color .2s ease, background .2s ease;
  -webkit-tap-highlight-color: transparent;
  /* reset the bold/uppercase field-label styling that would otherwise
     leak in from the generic "label" rule above */
  text-transform:none;
  letter-spacing:normal;
  font-weight:500;
  opacity:1;
  margin-bottom:0;
}

.tournament-entry-form .wpcf7-list-item label:has(input:checked){
  border-color: var(--yellow);
  background: rgba(252,204,56,.12);
}

.tournament-entry-form .wpcf7-list-item-label{
  font-size:15px;
  color: var(--navy);
}

.tournament-entry-form input[type="checkbox"]{
  width:19px;
  height:19px;
  accent-color: var(--navy);
  cursor:pointer;
  flex-shrink:0;
  margin:0;
}

/* ---- Submit button — matches site's existing .sqt-btn style ---- */
.tournament-entry-form input[type="submit"]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  background: var(--yellow);
  color: var(--navy);
  font-family: var(--body-font);
  font-weight:700;
  font-size:14px;
  letter-spacing:.5px;
  text-transform:uppercase;
  padding: 16px 30px;
  border: none;
  border-radius: 2px;
  cursor:pointer;
  transition: transform .25s ease, box-shadow .25s ease;
}

.tournament-entry-form input[type="submit"]:hover{
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(252,204,56,.3);
}

.tournament-entry-form input[type="submit"]:disabled{
  opacity:.6;
  cursor:not-allowed;
  transform:none;
}

.tournament-entry-form .wpcf7-spinner{
  margin-left:12px;
  vertical-align:middle;
}

/* ---- Success / error summary message ---- */
.tournament-entry-form .wpcf7-response-output{
  font-size:14px;
  border-radius:6px;
  padding:14px 16px;
  margin-top:20px;
  border-width:1px;
  border-style:solid;
}

/* ---- Responsive ---- */
@media (max-width:640px){
  .tournament-entry-form{
    padding: 22px 18px;
    border-radius:6px;
  }
  .tournament-entry-form label{
    font-size:11.5px;
  }
  .tournament-entry-form input[type="text"],
  .tournament-entry-form input[type="email"],
  .tournament-entry-form input[type="tel"],
  .tournament-entry-form select{
    font-size:16px; /* prevents iOS Safari auto-zoom on focus */
    padding: 13px 14px;
  }
  .tournament-entry-form .wpcf7-list-item label{
    padding: 12px 12px;
  }
  .tournament-entry-form .wpcf7-list-item-label{
    font-size:14px;
  }
  .tournament-entry-form form p{
    margin-bottom: 16px;
  }
}

@media (max-width:400px){
  .tournament-entry-form{
    padding: 18px 14px;
  }
}/* End custom CSS */