/* Plugin markup in the design's look. Loaded on every page, before the area files.
   The sandbox has none of these plugins, so each block styles only what is known about the plugin's markup
   and stays small. Elementor pop-ups and the Axeptio cookie notice are deliberately not touched. */

/* ---------- Addify Request a Quote ----------
   Targets: a.afrfqbt (the "Add to Quote" button on product cards) and a.afrfqbt_single_page (on the product
   page). Both are the design's secondary button: white with a navy outline. The plugin also gives them
   WooCommerce's .button (and .alt) classes; woo.css leaves these two alone so the amber buy colour never
   lands on them. As in woo.css, the rules that replace WooCommerce's button defaults carry its weight and
   the rest is weightless, so a page file can restyle the button. The quote pop-up
   (.afrfq-popup-form-steps) is left to the plugin. */
:where(.tg-page) :where(a.afrfqbt,a.afrfqbt_single_page){box-sizing:border-box;min-height:44px;font-family:inherit;text-align:center;cursor:pointer;transition:background-color .14s ease-out,border-color .14s ease-out,color .14s ease-out}
:where(.tg-page) a.afrfqbt_single_page{min-height:48px}
.tg-page a.afrfqbt,
.tg-page a.afrfqbt_single_page,
.tg-page a.button.afrfqbt,
.tg-page a.button.afrfqbt_single_page{display:inline-block;margin:0;padding:10px 16px;border:2px solid #003050;border-radius:4px;background-color:#FFFFFF;color:#003050;font-size:16px;font-weight:700;line-height:20px;text-decoration:none;opacity:1}
.tg-page a.afrfqbt:hover,
.tg-page a.afrfqbt_single_page:hover,
.tg-page a.button.afrfqbt:hover,
.tg-page a.button.afrfqbt_single_page:hover{background-color:#E9EDF1;color:#003050;text-decoration:none}
.tg-page a.afrfqbt_single_page,
.tg-page a.button.afrfqbt_single_page{padding:12px 22px}

/* ---------- WPC Fly Cart (the side cart that opens after an add to cart) ----------
   Targets: #wcspc-area (the panel), .wcspc-overlay (the dimmed page behind it), #wcspc-count (the floating
   cart count). On a phone the panel covers the whole screen including the theme's dock (.tg-dock, 60px tall,
   z-index 40; the menu sheets go up to 70). The old site kept 48px free under the panel for its own dock,
   with !important, so these rules need !important and a stronger selector to take that back. */
@media (max-width:699px){
  html body.tg-theme #wcspc-area,
  html body.tg-theme .wcspc-area{top:0!important;bottom:0!important;height:auto!important;max-height:none!important;margin-bottom:0!important;padding-bottom:env(safe-area-inset-bottom,0px);z-index:99999!important}
  html body.tg-theme .wcspc-overlay{top:0!important;bottom:0!important;height:auto!important;z-index:99998!important}
  /* the floating count, when it sits at the bottom of the screen, clears the dock (or a page's own 64px bar) */
  html body.tg-theme #wcspc-count:is(.wcspc-count-bottom-left,.wcspc-count-bottom-right){bottom:calc(76px + env(safe-area-inset-bottom,0px))!important}
}

/* ---------- Contact Form 7 (with CleanTalk's hidden fields) ----------
   Targets: .wpcf7 form, p, label, .wpcf7-form-control-wrap, .wpcf7-form-control (input, textarea, select),
   .wpcf7-submit, .wpcf7-spinner, .wpcf7-not-valid-tip, .wpcf7-response-output, and CleanTalk's
   .apbct_special_field trap fields, which must stay hidden.
   Fields and the send button are the design's (Contact): 48px fields with a 1px #8796A5 border, amber button.
   The selectors sit above Elementor's kit styles so a form inside an Elementor page looks the same. */
.tg-page .wpcf7{max-width:100%}
.tg-page .wpcf7 form{margin:0}
.tg-page .wpcf7 .screen-reader-response{position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);width:1px;height:1px;margin:-1px;padding:0;border:0}
.tg-page .wpcf7 fieldset.hidden-fields-container{display:none}
.tg-page .wpcf7 .apbct_special_field{display:none!important}
.tg-page .wpcf7 form p{margin:0 0 16px}
.tg-page .wpcf7 form label{display:block;margin:0;font-size:14px;font-weight:600;line-height:1.4;color:#0E1B26}
.tg-page .wpcf7 form label > br{display:none}
.tg-page .wpcf7 .wpcf7-form-control-wrap{display:block;position:relative;margin-top:6px}
.tg-page .wpcf7 .wpcf7-form-control-wrap .wpcf7-form-control:not(.wpcf7-checkbox,.wpcf7-radio,.wpcf7-acceptance,.wpcf7-file){display:block;box-sizing:border-box;width:100%;max-width:100%;height:48px;margin:0;padding:0 14px;border:1px solid #8796A5;border-radius:4px;background:#FFFFFF;color:#0E1B26;font:inherit;font-size:16px;font-weight:400;line-height:normal}
.tg-page .wpcf7 .wpcf7-form-control-wrap textarea.wpcf7-form-control:not(.wpcf7-file){height:176px;min-height:112px;padding:12px 14px;line-height:1.5;resize:vertical}
.tg-page .wpcf7 .wpcf7-form-control-wrap select.wpcf7-form-control:not(.wpcf7-file){padding:0 12px}
.tg-page .wpcf7 .wpcf7-form-control-wrap .wpcf7-form-control:not(.wpcf7-checkbox,.wpcf7-radio,.wpcf7-acceptance,.wpcf7-file):focus{border-color:#003050}
.tg-page .wpcf7 .wpcf7-form-control-wrap .wpcf7-form-control:not(.wpcf7-checkbox,.wpcf7-radio,.wpcf7-acceptance,.wpcf7-file):focus-visible{outline:2px solid #003050;outline-offset:2px;box-shadow:0 0 0 4px rgba(255,184,28,.6)}
.tg-page .wpcf7 .wpcf7-form-control-wrap .wpcf7-form-control.wpcf7-not-valid:not(.wpcf7-checkbox,.wpcf7-radio,.wpcf7-acceptance,.wpcf7-file){border-color:#A32A2A;box-shadow:inset 0 0 0 1px #A32A2A}
.tg-page .wpcf7 .wpcf7-not-valid-tip{display:block;margin-top:6px;font-size:14px;font-weight:600;line-height:1.4;color:#A32A2A}
/* checkboxes, radio buttons and the acceptance box */
.tg-page .wpcf7 .wpcf7-list-item{display:inline-block;margin:0 20px 0 0}
.tg-page .wpcf7 .wpcf7-list-item label{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:16px;font-weight:400;cursor:pointer}
.tg-page .wpcf7 .wpcf7-list-item input{flex:0 0 auto;width:20px;height:20px;margin:0;accent-color:#003050}
/* send */
.tg-page .wpcf7 .wpcf7-form-control.wpcf7-submit{display:inline-block;box-sizing:border-box;width:auto;min-height:52px;margin:0;padding:0 30px;border:0;border-radius:4px;background:#FFB81C;color:#0E1B26;font:inherit;font-size:17px;font-weight:700;line-height:1.2;text-transform:none;letter-spacing:0;cursor:pointer;-webkit-appearance:none;appearance:none;transition:background-color .14s ease-out}
.tg-page .wpcf7 .wpcf7-form-control.wpcf7-submit:hover{background:#F2AB0D;color:#0E1B26}
.tg-page .wpcf7 .wpcf7-form-control.wpcf7-submit:active{background:#E19F0C}
.tg-page .wpcf7 .wpcf7-form-control.wpcf7-submit:disabled{opacity:.55;cursor:not-allowed}
.tg-page .wpcf7 .wpcf7-spinner{vertical-align:middle;margin:0 0 0 14px}
/* the message under the form: sent, a field to fix, could not send */
.tg-page .wpcf7 form .wpcf7-response-output{margin:16px 0 0;padding:12px 16px;border:1px solid #DCE2E8;border-left:4px solid #114575;border-radius:4px;background:#FFFFFF;color:#0E1B26;font-size:16px;font-weight:600;line-height:1.45}
.tg-page .wpcf7 form:is(.init,.resetting,.submitting) .wpcf7-response-output{display:none}
.tg-page .wpcf7 form.sent .wpcf7-response-output{border-color:#B9DEC8;border-left-color:#17794A;background:#E7F4EC}
.tg-page .wpcf7 form:is(.invalid,.unaccepted,.payment-required) .wpcf7-response-output{border-color:#DCE2E8;border-left-color:#A32A2A;background:#FFFFFF}
.tg-page .wpcf7 form:is(.failed,.aborted,.spam) .wpcf7-response-output{border-color:#DCE2E8;border-left-color:#A32A2A;background:#FFFFFF}

/* The contact page's form area: short fields sit two to a row on desktop and on a wide tablet (one to a row
   below 1000px); a message box, the send row and anything that is not a plain field row take the full width. */
.tg-page .cn-form .wpcf7 form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.tg-page .cn-form .wpcf7 form > *{grid-column:1/-1;min-width:0;margin-top:0;margin-bottom:0}
.tg-page .cn-form .wpcf7 form > p{grid-column:auto}
.tg-page .cn-form .wpcf7 form > p:has(textarea,[type="submit"],.wpcf7-checkbox,.wpcf7-radio,.wpcf7-acceptance,.wpcf7-file),
.tg-page .cn-form .wpcf7 form > p:not(:has(.wpcf7-form-control)){grid-column:1/-1}
.tg-page .cn-form .wpcf7 form > p:has([type="submit"]){margin-top:4px}

@media (max-width:999px){
  .tg-page .cn-form .wpcf7 form{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:699px){
  .tg-page .wpcf7 form label{font-size:15px}
  .tg-page .wpcf7 .wpcf7-form-control-wrap .wpcf7-form-control:not(.wpcf7-checkbox,.wpcf7-radio,.wpcf7-acceptance,.wpcf7-file,textarea){height:52px}
  .tg-page .wpcf7 .wpcf7-form-control-wrap textarea.wpcf7-form-control:not(.wpcf7-file){height:168px}
  .tg-page .wpcf7 .wpcf7-form-control.wpcf7-submit{display:block;width:100%;min-height:56px;font-size:18px}
  .tg-page .wpcf7 form p:has(.wpcf7-submit){position:relative}
  .tg-page .wpcf7 form p:has(.wpcf7-submit) .wpcf7-spinner{position:absolute;right:16px;top:50%;margin:-12px 0 0}
}