/* ==========================================================================
   Tarabichi — forms.css
   Native forms (contact, quote, careers), Contact Form 7 styling, contact
   page cards, map card, branches, quote sidebar.
   Loaded on: contact, quote, careers, single position, pages with CF7.
   ========================================================================== */

/* ---- Form card ---- */
.tpp-formCard { padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.tpp-formCard:hover { transform: none; }
.tpp-formCard .tpp-secHead { margin-block-end: 1.5rem; }
.tpp-formCard .tpp-secHead__title { font-size: clamp(1.5rem, 1.3rem + .8vw, 1.9rem); }
.tpp-formCard--lg { padding: clamp(1.5rem, 1rem + 2.5vw, 2.75rem); }

/* ---- Grid & fields ---- */
.tpp-form__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; }
.tpp-field { grid-column: span 6; display: flex; flex-direction: column; gap: .45rem; min-inline-size: 0; }
.tpp-field.is-half { grid-column: span 3; }
.tpp-field.is-third { grid-column: span 2; }
.tpp-field > label, .tpp-opts legend { font-size: .84rem; font-weight: 600; color: var(--tpp-ink); padding: 0; }
.tpp-req { color: var(--tpp-primary); text-decoration: none; border: 0; }
.tpp-field input, .tpp-field select, .tpp-field textarea, .wpcf7 input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]), .wpcf7 select, .wpcf7 textarea {
	inline-size: 100%; padding: .85rem 1rem; min-block-size: 3.1rem; border: 1px solid var(--tpp-line); border-radius: 12px; background: #fff; color: var(--tpp-ink); font-size: .95rem; outline: none;
	transition: border-color .3s var(--tpp-ease), box-shadow .3s var(--tpp-ease), background-color .3s;
}
.tpp-field input::placeholder, .tpp-field textarea::placeholder { color: #A3A6AD; }
.tpp-field input:hover, .tpp-field select:hover, .tpp-field textarea:hover { border-color: #D3CEC6; }
.tpp-field input:focus, .tpp-field select:focus, .tpp-field textarea:focus, .wpcf7 input:focus, .wpcf7 select:focus, .wpcf7 textarea:focus { border-color: var(--tpp-primary); box-shadow: 0 0 0 4px var(--tpp-primary-soft); }
.tpp-field textarea, .wpcf7 textarea { min-block-size: 8rem; resize: vertical; line-height: 1.6; }
.tpp-select { position: relative; }
.tpp-select select { appearance: none; -webkit-appearance: none; padding-inline-end: 2.6rem; cursor: pointer; }
.tpp-select .tpp-ic { position: absolute; inset-inline-end: 1rem; inset-block-start: 50%; transform: translateY(-50%); pointer-events: none; color: var(--tpp-body); }
.tpp-field.is-error input, .tpp-field.is-error select, .tpp-field.is-error textarea, .tpp-field.is-error .tpp-drop { border-color: var(--tpp-primary); background: #FFFBFB; }
.tpp-field__err { font-size: .78rem; color: var(--tpp-primary); min-block-size: 0; }
.tpp-field__err:empty { display: none; }
.tpp-field--regarding { grid-column: span 6; }
.tpp-hp { position: absolute !important; inset-inline-start: -9999px; inline-size: 1px; block-size: 1px; overflow: hidden; }

/* ---- Options (radio / checks) ---- */
.tpp-opts { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.tpp-opts legend { margin-block-end: .65rem; }
.tpp-opts__list { display: flex; flex-wrap: wrap; gap: .55rem; }
.tpp-opt { position: relative; display: inline-flex; cursor: pointer; }
.tpp-opt input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
.tpp-opt span { display: inline-flex; align-items: center; gap: .55rem; padding: .65rem 1rem; border: 1px solid var(--tpp-line); border-radius: 12px; font-size: .88rem; font-weight: 550; color: var(--tpp-ink); background: #fff; transition: all .3s var(--tpp-ease); }
.tpp-opt span::before { content: ""; inline-size: .95rem; block-size: .95rem; border-radius: 4px; border: 1.5px solid #C8C2B9; transition: all .3s var(--tpp-ease); flex: none; }
.tpp-opt input[type="radio"] + span::before { border-radius: 50%; }
.tpp-opt:hover span { border-color: var(--tpp-ink); }
.tpp-opt input:checked + span { border-color: var(--tpp-primary); background: var(--tpp-primary-soft); color: var(--tpp-primary); }
.tpp-opt input:checked + span::before { background: var(--tpp-primary); border-color: var(--tpp-primary); box-shadow: inset 0 0 0 2.5px #fff; }
.tpp-opt input:focus-visible + span { outline: 2px solid var(--tpp-primary); outline-offset: 2px; }

/* ---- Upload ---- */
.tpp-drop { position: relative; display: flex; align-items: center; gap: 1rem; padding: 1.35rem 1.5rem; border: 1.5px dashed #D6D0C7; border-radius: var(--tpp-radius); background: var(--tpp-paper); transition: all .35s var(--tpp-ease); }
.tpp-drop > .tpp-ic { color: var(--tpp-primary); flex: none; }
.tpp-drop__txt { display: grid; gap: .15rem; flex: 1; min-inline-size: 0; }
.tpp-drop__txt b { color: var(--tpp-ink); font-size: .95rem; }
.tpp-drop__hint { font-size: .8rem; overflow-wrap: anywhere; }
.tpp-drop__input { position: absolute; inset: 0; opacity: 0; cursor: pointer; inline-size: 100%; block-size: 100%; }
.tpp-drop:hover, .tpp-drop.is-over { border-color: var(--tpp-primary); background: var(--tpp-primary-soft); }
.tpp-drop.has-file { border-style: solid; border-color: var(--tpp-primary); background: #fff; }
.tpp-drop.has-file .tpp-drop__hint { color: var(--tpp-primary); font-weight: 600; }
.tpp-drop:focus-within { box-shadow: 0 0 0 4px var(--tpp-primary-soft); }

/* ---- Steps (quote) ---- */
.tpp-form__steps { list-style: none; display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; padding-block-end: 1.5rem; margin-block-end: 2rem; border-block-end: 1px solid var(--tpp-line); }
.tpp-form__steps li { display: flex; align-items: center; gap: .6rem; font-size: .88rem; font-weight: 600; color: var(--tpp-body); transition: color .35s; }
.tpp-form__steps li span { inline-size: 2rem; block-size: 2rem; border-radius: 50%; display: grid; place-items: center; font-size: .82rem; font-weight: 700; border: 1px solid var(--tpp-line); background: #fff; transition: all .4s var(--tpp-ease); }
.tpp-form__steps li.is-current { color: var(--tpp-ink); }
.tpp-form__steps li.is-current span { border-color: var(--tpp-primary); color: var(--tpp-primary); box-shadow: 0 0 0 4px var(--tpp-primary-soft); }
.tpp-form__steps li.is-done span { background: var(--tpp-primary); border-color: var(--tpp-primary); color: #fff; }
.tpp-form__group { border: 0; padding: 0; margin: 0 0 2.25rem; min-inline-size: 0; }
.tpp-form__legend { display: flex; align-items: center; gap: .75rem; font-size: 1.15rem; font-weight: 700; color: var(--tpp-ink); letter-spacing: -.015em; padding: 0; }
.tpp-form__num { inline-size: 1.8rem; block-size: 1.8rem; border-radius: 8px; background: var(--tpp-primary-soft); color: var(--tpp-primary); display: grid; place-items: center; font-size: .82rem; }
.tpp-form__hint { margin: .35rem 0 1.1rem; font-size: .86rem; }
.tpp-form__group .tpp-opts legend { display: none; }

/* ---- Footer & status ---- */
.tpp-form__foot { display: flex; align-items: center; gap: 1rem 1.5rem; flex-wrap: wrap; margin-block-start: 1.5rem; }
.tpp-form__status { margin: 0; font-size: .9rem; font-weight: 500; }
.tpp-form__status.is-ok { color: #1E7B4C; }
.tpp-form__status.is-err { color: var(--tpp-primary); }
.tpp-form.is-busy button[type="submit"] { opacity: .7; pointer-events: none; }
.tpp-form.is-busy button[type="submit"] .tpp-ar { animation: tpp-spinNudge 1s var(--tpp-ease) infinite; }
@keyframes tpp-spinNudge { 50% { transform: translateX(5px); } }
.tpp-form__done { display: grid; justify-items: start; gap: .75rem; padding: 1.5rem; border-radius: var(--tpp-radius); background: #F1FAF5; border: 1px solid #CDEBDB; }
.tpp-form__done b { color: #1E7B4C; font-size: 1.1rem; }
.tpp-form__done p { margin: 0; color: var(--tpp-ink); }

/* ---- CF7 ---- */
.wpcf7 form > p, .wpcf7 label { display: grid; gap: .45rem; font-size: .84rem; font-weight: 600; color: var(--tpp-ink); margin-block-end: 1rem; }
.wpcf7 input[type="submit"] { background: var(--tpp-primary); color: #fff; border: 0; border-radius: 999px; min-block-size: 3.15rem; padding-inline: 1.6rem; font-weight: 600; cursor: pointer; transition: background-color .35s, transform .35s var(--tpp-ease); }
.wpcf7 input[type="submit"]:hover { background: var(--tpp-primary-dark); transform: translateY(-2px); }
.wpcf7-not-valid-tip { font-size: .78rem; color: var(--tpp-primary); margin-block-start: .3rem; }
.wpcf7 form .wpcf7-response-output { margin: 1rem 0 0; padding: .9rem 1.1rem; border-radius: 12px; font-size: .9rem; }
.wpcf7-spinner { margin-inline: .75rem; }

/* ---- Contact page ---- */
.tpp-contactCards { margin-block-end: clamp(2.5rem, 2rem + 1.5vw, 3.5rem); }
.tpp-cc { display: flex; gap: 1.1rem; align-items: center; }
.tpp-cc__k { display: block; font-size: .82rem; }
.tpp-cc b { color: var(--tpp-ink); font-size: 1rem; line-height: 1.4; }
.tpp-contactSplit { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(1.25rem, .8rem + 1.5vw, 2rem); align-items: stretch; }
.tpp-map { position: relative; min-block-size: 32rem; border-radius: var(--tpp-radius); overflow: hidden; background: #ECE8E1; isolation: isolate; }
.tpp-map__art { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.tpp-map__roads path { stroke: #DCD6CC; stroke-width: 14; fill: none; stroke-linecap: round; }
.tpp-map__streets path { stroke: #E4DFD7; stroke-width: 6; fill: none; }
.tpp-map__pin { position: absolute; left: 50%; inset-block-start: 46%; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; z-index: 2; }
.tpp-map__card { background: #fff; border-radius: 16px; padding: .85rem 1.1rem; box-shadow: var(--tpp-shadow-m); display: flex; gap: .75rem; align-items: center; margin-block-end: .6rem; max-inline-size: 18rem; }
.tpp-map__card .tpp-logo__img { block-size: 2.4rem; }
.tpp-map__card b { display: block; color: var(--tpp-ink); font-size: .9rem; line-height: 1.3; }
.tpp-map__card span { font-size: .78rem; }
.tpp-map__dot { inline-size: 1.25rem; block-size: 1.25rem; border-radius: 50%; background: var(--tpp-primary); box-shadow: 0 0 0 8px rgba(var(--tpp-primary-rgb), .18), 0 0 0 18px rgba(var(--tpp-primary-rgb), .08); animation: tpp-pin 2.2s var(--tpp-ease) infinite; }
@keyframes tpp-pin { 50% { box-shadow: 0 0 0 12px rgba(var(--tpp-primary-rgb), .14), 0 0 0 26px rgba(var(--tpp-primary-rgb), .05); } }
.tpp-map__acts { position: absolute; inset-inline-end: 1.25rem; inset-block-end: 1.25rem; z-index: 3; display: flex; gap: .6rem; flex-wrap: wrap; justify-content: flex-end; }
.tpp-map__acts .tpp-btn { box-shadow: var(--tpp-shadow-m); }
.tpp-map iframe { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; z-index: 4; }
.tpp-map.is-live .tpp-map__acts { z-index: 5; }
.tpp-branches { display: grid; grid-template-columns: repeat(var(--tpp-n, 5), minmax(0, 1fr)); gap: 1rem; }
.tpp-branch { padding: 1.5rem; }
.tpp-branch__head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.tpp-branch h3 { font-size: 1.15rem; }
.tpp-branch__city { margin: .2rem 0 1rem; font-size: .84rem; }
.tpp-branch ul { list-style: none; display: grid; gap: .6rem; font-size: .86rem; color: var(--tpp-ink); }
.tpp-branch li { display: flex; gap: .55rem; align-items: flex-start; }
.tpp-branch li .tpp-ic { color: var(--tpp-primary); margin-block-start: .2rem; }
.tpp-branch li a { overflow-wrap: anywhere; }
.tpp-branch.is-current { background: var(--tpp-dark); border-color: var(--tpp-dark); color: #A6A9B1; }
.tpp-branch.is-current h3 { color: #fff; }
.tpp-branch.is-current ul { color: #D3D5DA; }
.tpp-branch.is-current li .tpp-ic { color: var(--tpp-accent); }

/* ---- Lists & sidebar cards ---- */
.tpp-contactList { list-style: none; display: grid; gap: .8rem; }
.tpp-contactList li { display: flex; gap: .75rem; align-items: center; color: var(--tpp-ink); }
.tpp-contactList .tpp-ic { color: var(--tpp-primary); }
.tpp-contactList a:hover { color: var(--tpp-primary); }
.tpp-contactList--light li { color: #fff; }
.tpp-contactList--light .tpp-ic { color: var(--tpp-accent); }
.tpp-contactList--light a:hover { color: var(--tpp-accent); }
.tpp-sideSteps h2 { margin-block-end: 1.1rem; }
.tpp-sideSteps ol { list-style: none; display: grid; gap: 1rem; counter-reset: s; }
.tpp-sideSteps li { display: flex; gap: .85rem; font-size: .92rem; color: var(--tpp-ink); line-height: 1.5; }
.tpp-sideSteps li span { inline-size: 1.75rem; block-size: 1.75rem; border-radius: 50%; background: var(--tpp-primary-soft); color: var(--tpp-primary); display: grid; place-items: center; font-size: .78rem; font-weight: 700; flex: none; }
.tpp-sideDark { background: var(--tpp-dark); border-radius: var(--tpp-radius); padding: 1.75rem; display: grid; gap: 1.1rem; }
.tpp-sideImg { aspect-ratio: 4 / 3; }

/* ---- Responsive ---- */
@media (max-width: 1080px) {
	.tpp-branches { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.tpp-contactSplit { grid-template-columns: minmax(0, 1fr); }
	.tpp-map { min-block-size: 24rem; }
}
@media (max-width: 620px) {
	.tpp-field.is-half, .tpp-field.is-third { grid-column: span 6; }
	.tpp-branches { grid-template-columns: minmax(0, 1fr); }
	.tpp-drop { flex-wrap: wrap; }
	.tpp-drop .tpp-btn { display: none; }
	.tpp-form__steps { gap: .6rem 1rem; }
	.tpp-form__steps li { font-size: 0; gap: 0; }
	.tpp-form__steps li span { font-size: .82rem; }
	.tpp-form__foot .tpp-btn { inline-size: 100%; }
	.tpp-map__acts { inset-inline: 1rem; justify-content: stretch; }
	.tpp-map__acts .tpp-btn { flex: 1; }
}