/*
 * Contact forms (Kyranis_Forms): the base rules for the form markup, which
 * keeps Contact Form 7's class names so the theme's form styles (theme.css,
 * "message sent" box) apply unchanged. forms-rtl.css is the right-to-left copy.
 */
.wpcf7 .screen-reader-response { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); border: 0; word-wrap: normal !important; }
.wpcf7 form .wpcf7-response-output { margin: 2em .5em 1em; padding: .2em 1em; border: 2px solid #00a0d2; }
.wpcf7 form.init .wpcf7-response-output, .wpcf7 form.submitting .wpcf7-response-output { display: none; }
.wpcf7 form.sent .wpcf7-response-output { border-color: #46b450; }
.wpcf7 form.failed .wpcf7-response-output, .wpcf7 form.spam .wpcf7-response-output { border-color: #dc3232; }
.wpcf7 form.invalid .wpcf7-response-output { border-color: #ffb900; }
.wpcf7-form-control-wrap { position: relative; }
.wpcf7-not-valid-tip { display: block; font-size: 1em; font-weight: 400; color: #dc3232; }
/* Phone numbers and e-mail addresses read left to right in every language. */
.wpcf7 input[type="tel"], .wpcf7 input[type="email"] { direction: ltr; }
[dir="rtl"] .wpcf7 input[type="tel"], [dir="rtl"] .wpcf7 input[type="email"] { text-align: left; }
.wpcf7 .wpcf7-submit:disabled { cursor: not-allowed; }

/* The spinner next to the button while the form is sending. */
.wpcf7-spinner { visibility: hidden; display: inline-block; position: relative; width: 24px; height: 24px; margin: 0 24px; padding: 0; background-color: #23282d; border: 0; border-radius: 100%; opacity: .75; }
form.submitting .wpcf7-spinner { visibility: visible; }
.wpcf7-spinner::before { content: ""; position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; background-color: #fbfbfc; border: 0; border-radius: 100%; transform-origin: 8px 8px; animation: kz-form-spin 1000ms linear infinite; }
@keyframes kz-form-spin { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
@media (prefers-reduced-motion: reduce) {
	.wpcf7-spinner::before { animation: kz-form-blink 2000ms ease-in-out infinite; }
}
@keyframes kz-form-blink { from { opacity: 0; } 50% { opacity: 1; } to { opacity: 0; } }

/* Phone number with its country: the calling code on a button that opens a
   list searchable by name or code; without JavaScript, the plain list. */
.kz-phone { position: relative; display: flex; align-items: stretch; gap: 6px; margin-bottom: 10px; direction: ltr; }
/* The fields' 10px bottom margin goes on the row, so the country button is exactly as tall as the number field (Mongi 2026-10-22). */
.kz-phone input[type="tel"] { flex: 1 1 auto; min-width: 0; margin-bottom: 0 !important; }
.kz-phone-country { flex: 0 0 auto; max-width: 45%; }
.kz-phone-native { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); border: 0; padding: 0; }
.kz-phone .kz-phone-button, .kz-form .kz-phone .kz-phone-button { flex: 0 0 auto; height: auto; min-width: 84px; margin: 0; padding: 0 14px 0 30px; font-family: inherit; font-size: 14px; font-weight: 400; line-height: 1; color: #666; text-align: right; text-transform: none; letter-spacing: 0; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%235d6b76'/%3E%3C/svg%3E") no-repeat left 12px center; border: 1px solid rgba(167,167,167,.4); border-radius: 3px; box-shadow: none; cursor: pointer; }
/* The page builder's form-box styles colour every button in the form (.kz-cf7 button, per page), so the field look is forced. */
.kz-phone .kz-phone-button { color: #666 !important; background-color: #fff !important; font-size: 14px !important; font-weight: 400 !important; }
.kz-phone .kz-phone-button:hover, .kz-phone .kz-phone-button:focus-visible, .kz-phone .kz-phone-button[aria-expanded="true"] { color: #1d2327 !important; background-color: #fff !important; border-color: #00aeef; }
.kz-phone-panel { position: absolute; top: calc(100% + 4px); right: 0; z-index: 30; width: min(340px, 100%); padding: 8px; box-sizing: border-box; direction: rtl; text-align: right; background: #fff; border-radius: 8px; box-shadow: 0 12px 34px rgba(20,33,43,.22); }
.kz-phone-panel[hidden] { display: none; }
.kz-phone-panel .kz-phone-search { width: 100%; height: 40px; margin: 0 0 6px; padding: 0 10px; font-size: 15px; color: #1d2327; background: #f3f7fa; border: 1px solid #e3e9ee; border-radius: 6px; box-sizing: border-box; }
.kz-phone-list { max-height: 240px; margin: 0; padding: 0; overflow-y: auto; list-style: none; overscroll-behavior: contain; }
.kz-phone-list li { margin: 0; padding: 7px 10px; font-size: 14px; line-height: 1.35; color: #1d2327; border-radius: 4px; cursor: pointer; }
.kz-phone-list li[aria-selected="true"], .kz-phone-list li:hover { color: #fff; background: #00aeef; }
.kz-phone-list .kz-phone-none { color: #5d6b76; cursor: default; }
.kz-phone-list .kz-phone-none:hover { color: #5d6b76; background: none; }

/* Quote forms: the reply time under the button (task #61). Inherits the colour,
   so it reads on the light and the dark form boxes. */
.kz-form-promise { margin: 12px 0 0; font-size: 14px; line-height: 1.5; opacity: .85; }
