/* ============================================================
   CONTACTS — Contact Form 7 submit + success panel
   Figma: Transport Systems, node 710:28159 (textfield panel set)
   Applies to pages 19 (EN) and 130 (BG).

   Two things the stock plugin gets wrong for this design:
     1. CF7 renders .wpcf7-spinner as a SIBLING of the submit input, so it
        appears beside the button and shoves the row sideways. The design puts
        it INSIDE the pill, left of the label. An <input> cannot hold children,
        so the spinner is absolutely positioned over the button and the button
        grows its left padding to make room.
     2. The success text lands in an unstyled .wpcf7-response-output. The design
        wants a green panel with a check icon and a close control.

   Figma measurements used below:
     button        258x45 idle -> 384x45 while submitting, r22.5, #253C54 / #1F5E84
     spinner       circle r15 #3B9DC4, dot r5.25 white orbiting at r9.06
     spinner->text gap 13.9
     success panel 507x91, r9.5, fill #C2E3D1, border #4FAD79
     check icon    33x33 at left 27.5
     text          #3B3A3C, two lines, 22px apart, starting at left 82.5
     close         13.3x13.2 #616062, top 17.5 / right 15.2
     button->panel gap 38.5
   ============================================================ */

/* ---------- 1. Spinner inside the button ---------- */

/* The <p> CF7 emits wraps both the input and the spinner: make it the
   positioning context so the spinner can sit on top of the pill. */
/* inline-flex, not inline-block: as a block the <p> keeps inline leading below the
   input, so its box is a few px taller than the button and a 50% offset lands off
   centre. As a flex container it hugs the button exactly. */
.trsys-submit p {
	position: relative;
	display: inline-flex;
	align-items: center;
	margin: 0;
}

/* Selector reaches (0,3,1): Betheme ships `.wpcf7-form .wpcf7-spinner { top: 20px }`
   at (0,2,0), which parks the spinner below the button if this rule is any weaker. */
.wpcf7 form.wpcf7-form .wpcf7-spinner {
	display: none !important;
	position: absolute !important;
	/* Centred by auto margins between top:0 and bottom:0. Not translateY (the dot
	   inside is transform-animated, and a transform here fought it) and not top:50%
	   (percentages resolved against a box 6px shorter than the button). */
	top: 0 !important;
	bottom: 0 !important;
	left: 36px !important;    /* the button's own horizontal padding */
	width: 30px;              /* Figma circle r15 */
	height: 30px;
	margin: auto 0 !important;
	background-color: #3B9DC4;
	border-radius: 100%;
	pointer-events: none;
}

.wpcf7 form.wpcf7-form.submitting .wpcf7-spinner {
	display: block !important;
	visibility: visible !important;
}

/* The orbiting dot. Figma froze it at 4-5 o'clock, 9.06px out from the centre;
   transform-origin pulls the rotation point back to the circle's centre. */
.wpcf7 form.wpcf7-form .wpcf7-spinner::before {
	content: '';
	position: absolute;
	top: 18.81px;
	left: 9.75px;
	width: 10.5px;            /* Figma dot r5.25 */
	height: 10.5px;
	margin: 0;
	background-color: #FFFFFF;
	border: none;
	border-radius: 100%;
	transform-origin: 5.25px -3.81px;
	animation: trsys-spin 1s linear infinite;
}

@keyframes trsys-spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

/* Make room for the spinner: 30px circle + 13.9px gap, added to the existing
   36px padding, which puts the label 80px in and matches the Figma gap.

   The selector is this heavy on purpose. Betheme paints the button from page CSS
   as `#Content .mcb-item-citform .wpcf7 input.wpcf7-submit { padding: 13px 36px
   !important }` - specificity (1,3,1) AND !important, so a plain
   `.wpcf7-form.submitting .wpcf7-submit` loses even with !important of its own.
   Going through #Content and .wpcf7 puts this at (1,4,1) without depending on the
   builder's per-item uid class, which differs between the BG and EN pages. */
#Content .wpcf7 .wpcf7-form.submitting input.wpcf7-submit {
	padding-left: 80px !important;
}

@media (prefers-reduced-motion: reduce) {
	.wpcf7 form.wpcf7-form .wpcf7-spinner::before { animation-duration: 3s; }
}

/* ---------- 2. Success panel ---------- */

/* CF7 6.x puts the state class on the FORM, not on the output div.
   The selector carries .wpcf7 + form so it outweighs the plugin's own
   `.wpcf7 form.sent .wpcf7-response-output` - that one is (0,3,0) too, and CF7's
   stylesheet is enqueued after the theme's, so an equal-specificity rule loses. */
.wpcf7 form.wpcf7-form.sent .wpcf7-response-output {
	display: block;
	position: relative;
	box-sizing: border-box;
	min-height: 91px;
	margin: 38.5px 0 0;
	/* 23.5 top/bottom centres two 22px lines in the 91px panel;
	   82.5 left clears the icon; 44 right clears the close control. */
	padding: 23.5px 44px 23.5px 82.5px;
	background-color: #C2E3D1;
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%221504.5%20582%2037%2035%22%3E%3Cpath%20d%3D%22M1522.51%20617C1520.53%20617%201518.55%20616.64%201516.64%20615.912C1509.24%20613.102%201504.88%20605.409%201506.25%20597.628C1506.35%20597.025%201506.93%20596.621%201507.53%20596.731C1508.13%20596.834%201508.53%20597.407%201508.43%20598.011C1507.23%20604.747%201511.02%20611.411%201517.42%20613.852C1520.99%20615.213%201524.87%20615.095%201528.36%20613.529C1531.84%20611.962%201534.5%20609.138%201535.86%20605.571C1538.66%20598.202%201534.95%20589.928%201527.58%20587.126C1522.11%20585.044%201515.8%20586.567%201511.88%20590.913C1511.48%20591.369%201510.78%20591.406%201510.32%20590.994C1509.87%20590.59%201509.84%20589.891%201510.24%20589.435C1514.77%20584.419%201522.05%20582.662%201528.37%20585.067C1536.88%20588.303%201541.16%20597.856%201537.93%20606.358C1536.36%20610.477%201533.28%20613.742%201529.27%20615.544C1527.11%20616.515%201524.81%20617%201522.52%20617H1522.51Z%22%20fill%3D%22%25234FAD79%22%2F%3E%3Cpath%20d%3D%22M1519.75%20608.623C1519.45%20608.623%201519.16%20608.498%201518.95%20608.277L1512.36%20601.247C1511.94%20600.805%201511.96%20600.107%201512.41%20599.687C1512.86%20599.268%201513.55%20599.29%201513.97%20599.739L1519.72%20605.873L1529.52%20594.488C1529.91%20594.024%201530.61%20593.973%201531.08%20594.37C1531.54%20594.767%201531.59%20595.466%201531.19%20595.929L1520.6%20608.241C1520.39%20608.476%201520.1%20608.616%201519.79%20608.623C1519.78%20608.623%201519.78%20608.623%201519.77%20608.623H1519.75Z%22%20fill%3D%22%25234FAD79%22%2F%3E%3C%2Fsvg%3E");
	background-repeat: no-repeat;
	background-position: 27.5px center;
	background-size: 37px 35px;
	border: 1px solid #4FAD79;
	border-radius: 9.5px;
	color: #3B3A3C;
	font-family: var(--tr-font, Montserrat), sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 22px;
	text-align: left;
}

/* Close control - CF7 ships no such element, so functions.php injects it. */
.trsys-msg-close {
	position: absolute;
	top: 17.5px;
	right: 15.2px;
	width: 13.3px;
	height: 13.2px;
	padding: 0;
	background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%221957%20571%2013.3%2013.2%22%3E%3Cpath%20d%3D%22M1969.89%20571.302C1969.8%20571.209%201969.69%20571.136%201969.57%20571.086C1969.45%20571.035%201969.32%20571.01%201969.19%20571.01C1969.06%20571.01%201968.93%20571.035%201968.81%20571.086C1968.68%20571.136%201968.57%20571.209%201968.48%20571.302L1963.59%20576.182L1958.7%20571.292C1958.61%20571.199%201958.5%20571.126%201958.38%20571.076C1958.26%20571.026%201958.13%20571%201958%20571C1957.87%20571%201957.74%20571.026%201957.62%20571.076C1957.49%20571.126%201957.38%20571.199%201957.29%20571.292C1957.2%20571.385%201957.13%20571.495%201957.08%20571.615C1957.03%20571.736%201957%20571.866%201957%20571.997C1957%20572.128%201957.03%20572.258%201957.08%20572.379C1957.13%20572.5%201957.2%20572.609%201957.29%20572.702L1962.18%20577.592L1957.29%20582.482C1957.2%20582.575%201957.13%20582.685%201957.08%20582.805C1957.03%20582.926%201957%20583.056%201957%20583.187C1957%20583.318%201957.03%20583.448%201957.08%20583.569C1957.13%20583.69%201957.2%20583.799%201957.29%20583.892C1957.38%20583.985%201957.49%20584.058%201957.62%20584.108C1957.74%20584.158%201957.87%20584.184%201958%20584.184C1958.13%20584.184%201958.26%20584.158%201958.38%20584.108C1958.5%20584.058%201958.61%20583.985%201958.7%20583.892L1963.59%20579.002L1968.48%20583.892C1968.57%20583.985%201968.68%20584.058%201968.81%20584.108C1968.93%20584.158%201969.06%20584.184%201969.19%20584.184C1969.32%20584.184%201969.45%20584.158%201969.57%20584.108C1969.69%20584.058%201969.8%20583.985%201969.89%20583.892C1969.98%20583.799%201970.06%20583.69%201970.11%20583.569C1970.16%20583.448%201970.18%20583.318%201970.18%20583.187C1970.18%20583.056%201970.16%20582.926%201970.11%20582.805C1970.06%20582.685%201969.98%20582.575%201969.89%20582.482L1965%20577.592L1969.89%20572.702C1970.27%20572.322%201970.27%20571.682%201969.89%20571.302Z%22%20fill%3D%22%2523616062%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
	border: 0;
	cursor: pointer;
	opacity: .85;
}

.trsys-msg-close:hover,
.trsys-msg-close:focus-visible {
	opacity: 1;
}

/* Only the success state is specified in Figma; leave the others to CF7 but
   stop them inheriting the green panel. */
.wpcf7 form.wpcf7-form:not(.sent) .trsys-msg-close {
	display: none;
}

@media (max-width: 767px) {
	.wpcf7 form.wpcf7-form.sent .wpcf7-response-output {
		padding: 20px 40px 20px 70px;
		background-position: 20px 22px;
		background-size: 30px 28px;
	}
}