/* =====================================================================
   SAPCOTE THEME — forms (finishing step, 10 Nov 2026): the site search form and Contact Form 7's states on the kit.
   Loads on every page after the kit's v8 file. Contact Form 7's own stylesheet is dequeued (inc/forms.php), so every
   rule its markup needs is here. Kit tokens only; nothing under 16px; the kit css files are never edited.
   ===================================================================== */

/* ---- WordPress's own hidden label class (13 Nov 2026): WooCommerce (the basket's "Remove item" and "Thumbnail image"
   headings) and the media dialog an editor opens to change a photo ("Selected media actions") print text meant for
   screen readers only, and the theme had no rule for it, so it showed. The standard rule, shown on keyboard focus. ---- */
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important}
.screen-reader-text:focus{background:#fff;clip:auto!important;clip-path:none;color:var(--ink,#1b2a10);display:block;font-size:16px;height:auto;left:5px;top:5px;padding:12px 20px;width:auto;z-index:100000;text-decoration:none}

/* ---- the search form: in the mega menu's left column, on the 404 page and above the results ---- */
.sgc-sr{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sform{display:flex;gap:10px;max-width:560px}
.sform input[type=search]{flex:1 1 auto;min-width:0;border:1.5px solid var(--hair);border-radius:var(--r-sm);padding:12px 14px;font:400 18px/1.4 var(--font);color:var(--ink);background:#fff;-webkit-appearance:none;appearance:none}
.sform input[type=search]:focus{outline:0;border-color:var(--green);box-shadow:0 0 0 3px var(--lime-tint)}
.sform input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.sform .btn{flex:none}
.mega .secs .extra .sform{margin:0 0 6px;max-width:none}
.mega .secs .extra .sform input[type=search]{padding:10px 12px;font-size:16px}
.mega .secs .extra .sform .btn{min-height:44px;padding:0 16px;font-size:16px}
.season-xmas .mega .secs .extra .sform input[type=search]:focus{border-color:#8F2430;box-shadow:0 0 0 3px #FBE8EA}
@media (max-width:480px){
  .sform{flex-wrap:wrap}
  .sform .btn{flex:1 1 100%}
}

/* ---- Contact Form 7 inside the kit's form card (the Contact page's message block) ----
   The plugin's submit is an <input>, which the kit's .msg input rule would dress as a text field: the button rules are
   restated. A field's error tip takes no layout space (absolute) and the form reserves its room while invalid, so fixing a
   field (the tip goes on blur) never moves the Send button under the pointer mid-click. */
.msg .split>.wpcf7{min-width:0}
.msg .field>.wpcf7-form-control-wrap{display:block;font:inherit;margin:0}
.msg .wpcf7 .field{position:relative}
.msg .wpcf7 form.invalid .field{margin-bottom:34px}
.msg .wpcf7 .wpcf7-not-valid-tip{position:absolute;left:0;top:100%;margin:4px 0 0;white-space:nowrap}
.msg .send input.btn{display:inline-flex;width:auto;min-height:48px;padding:0 22px;border:2px solid var(--green);border-radius:var(--pill);font:700 17px/1 var(--font);color:#fff;background:var(--green);margin:0}
.msg .send input.btn:hover{background:var(--green-dark);border-color:var(--green-dark)}
.msg .send input.btn:focus{box-shadow:none}
.msg .send .wpcf7-spinner{margin:0}

/* ---- Contact Form 7 in the footer's form box (the same two rules: the button, the tips) ---- */
.ft5 .form .wpcf7-form-control-wrap{display:block;position:relative}
.ft5 .form form.invalid .wpcf7-form-control-wrap{margin-bottom:22px}
.ft5 .form .wpcf7-form-control-wrap .wpcf7-not-valid-tip{position:absolute;left:0;top:100%;margin:-8px 0 0;white-space:nowrap}
.ft5 .form input.btn{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:48px;padding:0 22px;border:2px solid var(--green);border-radius:var(--pill);font:700 17px/1 var(--font);color:#fff;background:var(--green);margin:0}
.ft5 .form input.btn:hover{background:var(--green-dark);border-color:var(--green-dark)}
.ft5 .form .wpcf7-spinner{display:none;margin:8px auto 0}
.ft5 .form form.submitting .wpcf7-spinner{display:block}
.ft5 .form .wpcf7-response-output{font-size:16px}

/* ---- Contact Form 7's own elements, restyled (its stylesheet is off) ---- */
.wpcf7 .screen-reader-response{position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);height:1px;width:1px;margin:0;padding:0;border:0;word-wrap:normal}
.wpcf7 .hidden-fields-container{display:none}
.wpcf7-not-valid-tip{display:block;font-size:16px;line-height:1.4;color:#8F2430;margin-top:6px}
.wpcf7-form-control.wpcf7-not-valid{border-color:#8F2430}
.wpcf7 form .wpcf7-response-output{margin:16px 0 0;padding:12px 16px;border:0;border-radius:var(--r-sm);font-size:17px;line-height:1.45;background:var(--lime-tint);color:var(--green-dark)}
.wpcf7 form.init .wpcf7-response-output,.wpcf7 form.resetting .wpcf7-response-output,.wpcf7 form.submitting .wpcf7-response-output{display:none}
.wpcf7 form.sent .wpcf7-response-output{background:var(--lime-tint);color:var(--green-dark);font-weight:700}
.wpcf7 form.invalid .wpcf7-response-output,.wpcf7 form.unaccepted .wpcf7-response-output,.wpcf7 form.payment-required .wpcf7-response-output{background:#FBEEE4;color:#7A3A10}
.wpcf7 form.failed .wpcf7-response-output,.wpcf7 form.aborted .wpcf7-response-output,.wpcf7 form.spam .wpcf7-response-output{background:#FBE8EA;color:#8F2430}
.wpcf7-spinner{display:inline-block;visibility:hidden;width:22px;height:22px;flex:none;border-radius:50%;border:3px solid var(--lime-tint);border-top-color:var(--green);animation:sgc-spin .8s linear infinite;vertical-align:middle;margin-left:8px}
.wpcf7 form.submitting .wpcf7-spinner{visibility:visible}
.wpcf7 form.submitting .btn{opacity:.7;cursor:progress}
@keyframes sgc-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.wpcf7-spinner{animation:none}}
