/* consent-mobile.css - PIIRATE Elite. Load AFTER bootstrap.
   Bootstrap's floated .form-check lets validation text ride up beside the
   label and crush it on narrow screens. This makes it a real flex row. */
.form-check{display:flex;flex-wrap:wrap;align-items:flex-start;gap:.65rem;
  padding-left:0!important;margin-bottom:1rem;position:relative;z-index:2}
.form-check .form-check-input{flex:0 0 auto;float:none!important;
  margin:.15rem 0 0 0!important;width:1.35rem;height:1.35rem;min-width:1.35rem;
  cursor:pointer;pointer-events:auto;accent-color:var(--piirate-accent,#e63946)}
.form-check .form-check-label{flex:1 1 240px;min-width:0;text-align:left;
  line-height:1.55;cursor:pointer;overflow-wrap:break-word}
.form-check .form-check-label a{text-decoration:underline;position:relative;z-index:3}
.form-check .invalid-feedback,.form-check .valid-feedback,.form-check .form-text{
  flex:1 0 100%;width:100%;margin:.1rem 0 0 calc(1.35rem + .65rem);
  text-align:left;line-height:1.45}
.was-validated .form-check-input:invalid ~ .invalid-feedback,
.form-check-input.is-invalid ~ .invalid-feedback{display:block}
.form-check .form-check-input:focus-visible{
  outline:2px solid var(--piirate-accent,#e63946);outline-offset:2px}
@media (max-width:576px){
  .form-check{gap:.6rem;margin-bottom:1.15rem}
  .form-check .form-check-input{width:1.5rem;height:1.5rem;min-width:1.5rem}
  .form-check .form-check-label{flex:1 1 100%;font-size:.95rem}
  .form-check .invalid-feedback,.form-check .valid-feedback,
  .form-check .form-text{margin-left:0;font-size:.875rem}}
#piirate-chat-widget,.chat-widget-bubble,.support-bubble{z-index:1040}

/* --- visible checked state (added after live triage) ---
   Draws the checkmark with ::after instead of relying on Bootstrap's
   background-image SVG, so no custom background rule can erase it. */
.form-check input.form-check-input[type="checkbox"]{
  -webkit-appearance:none;appearance:none;
  background-color:#0f1b2d;background-image:none;
  border:2px solid #8fa3bf;border-radius:4px;
  position:relative;box-sizing:border-box;
}
.form-check input.form-check-input[type="checkbox"]:checked{
  background-color:#e63946!important;
  background-image:none!important;
  border-color:#e63946!important;
}
.form-check input.form-check-input[type="checkbox"]:checked::after{
  content:"";position:absolute;left:32%;top:10%;
  width:26%;height:58%;
  border:solid #fff;border-width:0 3px 3px 0;
  transform:rotate(45deg);
}
.form-check input.form-check-input[type="checkbox"]:hover{border-color:#e63946}

/* --- correction: <input> is a replaced element, so ::after
   never paints in Chrome/Safari. Hand the control back to the UA and
   colour it with accent-color, which draws its own checkmark. */
.form-check input.form-check-input[type="checkbox"]{
  -webkit-appearance:revert!important;
  appearance:revert!important;
  background:revert!important;
  background-image:none!important;
  border:revert!important;
  border-radius:revert!important;
  accent-color:#e63946!important;
  width:1.35rem!important;height:1.35rem!important;
  min-width:1.35rem;cursor:pointer;
}
.form-check input.form-check-input[type="checkbox"]:checked::after{content:none!important}
@media (max-width:576px){
  .form-check input.form-check-input[type="checkbox"]{
    width:1.5rem!important;height:1.5rem!important}
}

/* --- guard: don't hijack Bootstrap inline checks or switches --- */
.form-check.form-check-inline{display:inline-flex;width:auto;margin-right:1rem}
.form-check.form-switch{display:block;padding-left:2.5em!important}
.form-check.form-switch input.form-check-input[type="checkbox"]{
  -webkit-appearance:none!important;appearance:none!important;
  float:left!important;margin-left:-2.5em!important;
  width:2em!important;height:1em!important;min-width:2em;
  border-radius:2em!important;background-color:rgba(255,255,255,.25)!important;
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e")!important;
  background-position:left center!important;background-repeat:no-repeat!important;
  border:1px solid rgba(255,255,255,.25)!important;transition:background-position .15s ease-in-out;
}
.form-check.form-switch input.form-check-input[type="checkbox"]:checked{
  background-position:right center!important;background-color:#e63946!important;border-color:#e63946!important;
}

/* --- hero content offset (after measurement) ---
   #free-scan starts at document top and its .scan-bg-effects overlay covers
   the full section, so the gradient already runs behind the fixed bar.
   Pad the section's content box only - the background stays full-bleed,
   and .scan-trust-bar (was at y=48, under a 78px header) clears it.
   Note: main{padding-top} does not apply here - #main-content outranks it. */
#free-scan{padding-top:calc(var(--piirate-header-h) + 26px)!important}
@media (max-width:768px){#free-scan{padding-top:calc(var(--piirate-header-h) + 18px)!important}}