/* ============================================================================
   THE NEW INQUIRY FORM (inc/quote-form.php, assets/js/quote-form.js), on top of form.css (the
   fields, errors, error summary, success panel). Three parts on one page: eleven service cards,
   then only the chosen service's fields (chips for short choices, tick boxes, units inside the
   fields, one „Допълнителни данни“), then the contact details. The layout follows the form's own
   width (a container query): it sits in panels of different widths (the quote page, the service
   pages' band, the home page).
   Which service shows is the part-1 fieldset's data-svc-on (set by the server for a page's own
   service, then by the script), so the first paint already shows the right one.
   ============================================================================ */

.ts-q2{container-type:inline-size}
.ts-q2 fieldset{min-width:0;margin:0;padding:0;border:0}
/* legends as plain blocks (floated out of the fieldset's border box), cleared by what follows */
.ts-q2-h,.ts-q2-svc-h,.ts-q2 .ts-legend,.ts-q2 .ts-group-h{float:left;width:100%;padding:0}
.ts-q2 fieldset > :not(legend){clear:both}

/* the parts: a heading with a small number, a thin rule between them */
.ts-q2-h{margin:0 0 18px;font-family:var(--ts-font-display);font-size:21px;font-weight:800;line-height:1.3;color:var(--ink)}
/* a required field: a small red asterisk after its label (the current form says „(задължително)“),
   explained by the form's first line, small and muted under the form's title */
.ts-q2-star{margin-left:.15em;font-weight:700;color:var(--red)}
.ts-q2-reqnote{margin:0 0 22px;font-size:14px;line-height:1.45;color:var(--muted)}
.ts-q2-n{display:inline-grid;place-items:center;width:28px;height:28px;margin-right:12px;border-radius:50%;background:var(--ink);color:var(--white);font-family:var(--ts-font-body);font-size:15px;font-weight:700;line-height:1;vertical-align:2px}
.ts-q2 .ts-q2-cargo,.ts-q2 .ts-q2-contact{margin-top:30px;padding-top:26px;border-top:1px solid var(--rule)}
.ts-q2-contact .ts-form-grid{gap:20px 24px}

/* ---- 1 · the service cards: rows of four where the form is wide (4 + 4 + 3: Димо's four, FCL, LCL,
   FTL and LTL, are the first row), two columns on phones (5 × 2 + 1); every card the same size, „Друго“
   included, the last one at the left of its row; a row's cards as tall as its tallest ---- */
.ts-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ts-card{position:relative;display:block;margin:0;cursor:pointer}
.ts-card input,.ts-chip input,.ts-tick input,.ts-box input{position:absolute;width:1px;height:1px;margin:0;opacity:0}
.ts-card-box{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;height:100%;min-height:86px;padding:12px 4px 10px;
  border:2px solid var(--rule-2);border-radius:var(--r-sm);background:var(--soft);font-size:14px;font-weight:700;line-height:1.25;color:var(--ink);text-align:center;
  transition:border-color .15s,background-color .15s,box-shadow .15s}
.ts-card-ic{flex:none;display:grid;place-items:center;width:26px;height:26px;color:var(--ink)}
.ts-card-ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ts-card-t{min-width:0}
@media (hover:hover){ .ts-card:hover .ts-card-box{border-color:var(--muted)} }
.ts-card input:checked + .ts-card-box{border-color:var(--ink);background:var(--white);box-shadow:inset 0 -4px 0 var(--red)}
.ts-card input:checked + .ts-card-box .ts-card-ic{color:var(--red)}
.ts-card input:focus-visible + .ts-card-box{outline:2px solid var(--red);outline-offset:2px}
.ts-cards.wpcf7-not-valid .ts-card-box{border-color:var(--red)}
/* the longest word ("Пристанище", 86 px at 14 px) needs a card of about 140 px with the icon beside
   the text: below that (a 320 px phone) the icon sits above it */
@container (min-width:280px){
  .ts-card-box{flex-direction:row;gap:8px;min-height:58px;padding:8px;text-align:left}
}
@container (min-width:540px){
  .ts-cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
  .ts-card-box{flex-direction:column;gap:8px;min-height:112px;padding:16px 8px 14px;text-align:center}
  .ts-card-ic{width:32px;height:32px}
  .ts-card-ic svg{width:30px;height:30px}
}

/* a page with its own service: only that card, with „Промени“ beside it */
.ts-q2-change{display:none}
.js .ts-q2-pick.is-set .ts-card:not(.is-on){display:none}
.js .ts-q2-pick.is-set .wpcf7-form-control-wrap{display:inline-block;width:fit-content;max-width:100%;vertical-align:middle}
.js .ts-q2-pick.is-set .ts-cards{display:block}
.js .ts-q2-pick.is-set .ts-card{display:inline-block;max-width:100%;vertical-align:middle}
.js .ts-q2-pick.is-set .ts-card-box{flex-direction:row;min-height:56px;padding:9px 20px 9px 12px;font-size:15px;text-align:left;box-shadow:none}
.js .ts-q2-pick.is-set .ts-q2-change{display:inline-flex;align-items:center;min-height:46px;margin:8px 0 8px 14px;padding:0 20px;border:2px solid var(--ink);border-radius:var(--pill);
  background:var(--white);font:inherit;font-size:15px;font-weight:700;color:var(--ink);vertical-align:middle;cursor:pointer}
.js .ts-q2-pick.is-set .ts-q2-change:hover{background:var(--ink);color:var(--white)}
.ts-q2-change:focus-visible{outline:2px solid var(--red);outline-offset:2px}

/* ---- 2 · only the chosen service (none: part 2 waits for a card); without scripts all of them ---- */
/* before a card is picked: part 2's heading, muted, and one line */
.ts-q2-wait{display:none;margin:0;font-size:16px;line-height:1.5;color:var(--text)}
.js .ts-q2-pick[data-svc-on=""] ~ .ts-q2-cargo > :not(legend):not(.ts-q2-wait){display:none}
.js .ts-q2-pick[data-svc-on=""] ~ .ts-q2-cargo .ts-q2-wait{display:block}
.js .ts-q2-pick[data-svc-on=""] ~ .ts-q2-cargo .ts-q2-h{color:var(--muted)}
.js .ts-q2-pick[data-svc-on=""] ~ .ts-q2-cargo .ts-q2-n{background:var(--muted)}
.js .ts-q2-pick[data-svc-on="fcl"] ~ .ts-q2-cargo .ts-q2-svc:not([data-svc="fcl"]),
.js .ts-q2-pick[data-svc-on="lcl"] ~ .ts-q2-cargo .ts-q2-svc:not([data-svc="lcl"]),
.js .ts-q2-pick[data-svc-on="ftl"] ~ .ts-q2-cargo .ts-q2-svc:not([data-svc="ftl"]),
.js .ts-q2-pick[data-svc-on="ltl"] ~ .ts-q2-cargo .ts-q2-svc:not([data-svc="ltl"]),
.js .ts-q2-pick[data-svc-on="ferry"] ~ .ts-q2-cargo .ts-q2-svc:not([data-svc="ferry"]),
.js .ts-q2-pick[data-svc-on="rail"] ~ .ts-q2-cargo .ts-q2-svc:not([data-svc="rail"]),
.js .ts-q2-pick[data-svc-on="customs"] ~ .ts-q2-cargo .ts-q2-svc:not([data-svc="customs"]),
.js .ts-q2-pick[data-svc-on="ens"] ~ .ts-q2-cargo .ts-q2-svc:not([data-svc="ens"]),
.js .ts-q2-pick[data-svc-on="port"] ~ .ts-q2-cargo .ts-q2-svc:not([data-svc="port"]),
.js .ts-q2-pick[data-svc-on="agency"] ~ .ts-q2-cargo .ts-q2-svc:not([data-svc="agency"]),
.js .ts-q2-pick[data-svc-on="other"] ~ .ts-q2-cargo .ts-q2-svc:not([data-svc="other"]){display:none}
/* with scripts the chosen card names the service; its own heading is for screen readers */
.ts-q2-svc-h{margin:0 0 16px;font-size:18px;font-weight:800;line-height:1.3;color:var(--ink)}
.js .ts-q2-svc-h{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap}
html:not(.js) .ts-q2 .ts-q2-svc + .ts-q2-svc{margin-top:28px;padding-top:24px;border-top:1px dashed var(--rule-2)}
/* fields shown on a condition (the date after „Дата“, the IMO class, …) */
.js [data-q2-when]:not(.is-on){display:none}
/* the attachment waits for the script to move it into the chosen service's „Допълнителни данни“ */
.js .ts-q2-common > [data-q2-file]{display:none}
html:not(.js) .ts-more--empty{display:none}
/* part 2 appearing, or another service's fields: a short fade, no jump */
@keyframes ts-q2-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.ts-q2-cargo.is-entering,.ts-q2-svc.is-entering{animation:ts-q2-in .26s ease-out}
@media (prefers-reduced-motion:reduce){ .ts-q2-cargo.is-entering,.ts-q2-svc.is-entering{animation:none} }

/* a group's heading (chips, tick boxes) as the fields' labels */
.ts-q2 .ts-legend{margin:0 0 8px;font-size:16px;font-weight:700;line-height:1.3;color:var(--ink)}

/* chips: one choice (or several) as large buttons */
.ts-chips{display:flex;flex-wrap:wrap;gap:8px}
.ts-chip{position:relative;display:block;margin:0;cursor:pointer}
.ts-chip span{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:10px 18px;border:2px solid var(--rule-2);border-radius:var(--pill);background:var(--soft);
  font-size:16px;font-weight:600;line-height:1.25;color:var(--ink);transition:border-color .15s,background-color .15s,color .15s}
@media (hover:hover){ .ts-chip:hover span{border-color:var(--muted)} }
.ts-chip input:checked + span{border-color:var(--ink);background:var(--ink);color:var(--white)}
.ts-chip input[type="checkbox"]:checked + span::before{content:"";width:14px;height:14px;flex:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/14px no-repeat}
.ts-chip input:focus-visible + span{outline:2px solid var(--red);outline-offset:2px}
.ts-chips.wpcf7-not-valid .ts-chip span{border-color:var(--red)}

/* tick boxes in groups, each under its heading (the port services, Димо's list of 11.11.2026): two
   columns of groups where the form is wide, one on a phone; short rows, a label's second line beside
   its box, not under it */
.ts-q2 .ts-group-h{margin:0 0 4px;font-size:13px;font-weight:700;letter-spacing:.05em;line-height:1.35;text-transform:uppercase;color:var(--muted)}
.ts-groups{display:grid;grid-template-columns:minmax(0,1fr);gap:18px 28px;margin-top:2px}
.ts-group-list{display:block}
.ts-box{position:relative;display:block;margin:0;cursor:pointer}
.ts-box span{display:flex;align-items:flex-start;gap:10px;padding:6px 0;font-size:15px;font-weight:600;line-height:20px;color:var(--ink)}
.ts-box span::before{content:"";flex:none;width:20px;height:20px;border:2px solid var(--ink);border-radius:var(--r-xs);background:var(--white);box-sizing:border-box}
@media (hover:hover){ .ts-box:hover span::before{box-shadow:0 0 0 3px var(--rule-2)} }
.ts-box input:checked + span::before{background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat}
.ts-box input:focus-visible + span::before{outline:2px solid var(--red);outline-offset:2px}
.ts-groups.wpcf7-not-valid .ts-box span::before{border-color:var(--red)}
@container (min-width:520px){
  .ts-groups{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* tick boxes (cargo insurance, dangerous goods, customs clearance): as the consent box */
.ts-tick{position:relative;display:inline-flex;align-items:center;gap:12px;min-height:48px;margin:0;font-size:16px;font-weight:600;line-height:1.35;color:var(--ink);cursor:pointer}
.ts-tick span::before{content:"";flex:none;display:inline-block;width:24px;height:24px;margin-right:12px;border:2px solid var(--ink);border-radius:var(--r-xs);background:var(--white);vertical-align:-6px;box-sizing:border-box}
.ts-tick input:checked + span::before{background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/16px no-repeat}
.ts-tick input:focus-visible + span::before{outline:2px solid var(--red);outline-offset:2px}
.ts-q2-f--check{align-self:center}
/* the IMO class right under its tick box */
.ts-q2 .ts-q2-f--check + .ts-q2-f--check + [data-q2-when]{margin-top:-8px}

/* a hint under its field (the LCL volume) */
.ts-q2 .ts-hint--after{margin:8px 0 0;font-size:15px}

/* a unit inside its field ("кг", "м³", "бр.") */
.ts-unit{position:relative;display:block}
.ts-form .ts-unit input{padding-right:56px}
.ts-unit-txt{position:absolute;top:50%;right:16px;transform:translateY(-50%);font-size:16px;font-weight:600;color:var(--muted);pointer-events:none}

/* the date fields, as the other fields (form.css) */
.ts-form input[type="date"]{display:block;width:100%;min-height:54px;margin:0;padding:12px 16px;border:2px solid var(--rule-2);border-radius:var(--r-sm);background-color:var(--soft);
  font:inherit;font-size:17px;line-height:1.4;color:var(--ink);box-shadow:none}
.ts-form input[type="date"]:hover{border-color:var(--muted)}
.ts-form input[type="date"]:focus{outline:2px solid var(--red);outline-offset:2px;border-color:var(--ink);background-color:var(--white)}

/* „Допълнителни данни · Incoterms, митническо оформяне, файл“: one per service; the list muted and
   smaller, under the name on a narrow form (beside the text, never under the icon) */
.ts-more{margin-top:18px}
.ts-more > summary{display:flex;align-items:flex-start;gap:10px;min-height:48px;padding:12px 4px 10px 0;font-size:16px;line-height:1.4;color:var(--ink);cursor:pointer;list-style:none}
.ts-more-txt{min-width:0}
.ts-more-t{font-weight:700}
.ts-more-sep,.ts-more-list{font-size:15px;font-weight:400;color:var(--muted)}
html:not(.js) .ts-more-file{display:none}
.ts-more > summary::-webkit-details-marker{display:none}
.ts-more > summary::before{content:"";flex:none;width:24px;height:24px;margin-top:-1px;border:2px solid var(--ink);border-radius:50%;box-sizing:border-box;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d2733' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 7v10M7 12h10'/%3E%3C/svg%3E") center/16px no-repeat}
.ts-more[open] > summary::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d2733' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M7 12h10'/%3E%3C/svg%3E")}
.ts-more > summary:hover .ts-more-t{text-decoration:underline;text-underline-offset:3px}
.ts-more > summary:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.ts-more-body{padding:12px 0 4px}
.ts-q2-svc > .ts-form-grid + .ts-more{margin-top:22px}

/* the note at the end of part 2: small */
.ts-q2-common{margin-top:18px}
/* „Друго“: the message moved up beside its toggle, nothing left here */
.js .ts-q2-common:not(:has([data-q2-note])){display:none}
.ts-form .ts-q2-common textarea{min-height:96px}

/* under the send button */
.ts-q2-after{margin:14px 0 0;font-size:16px;line-height:1.5;color:var(--text)}

/* a field in the right column, under the question it follows (the EORI number under „Имате ли EORI номер?“) */
.ts-q2 .ts-field--col2{grid-column:2}

/* a narrow form (a phone, a narrow panel): one field a row */
@container (max-width:479px){
  .ts-q2 .ts-form-grid{grid-template-columns:minmax(0,1fr)}
  .ts-q2 .ts-field--half{grid-column:1 / -1}
  .ts-q2-h{font-size:19px}
  .ts-more-sep{display:none}
  .ts-more-list{display:block;margin-top:2px}
  /* chips a little tighter, so two short ones share a line (the ferry's directions at 390) */
  .ts-q2 .ts-chips{gap:6px}
  .ts-q2 .ts-chip span{padding-right:12px;padding-left:12px}
  /* the insurance and dangerous-goods pair stays one group: 36 px targets, touching, so their lines
     are 12 px apart, with the usual gap above and below the pair */
  .ts-q2 .ts-form-grid{row-gap:20px}
  .ts-q2 .ts-q2-f--check .ts-tick{min-height:36px}
  .ts-q2 .ts-field--start.ts-q2-f--check + .ts-q2-f--check{margin-top:-20px}
}
@media (max-width:767px){
  .ts-chip span{min-height:46px;padding:9px 16px}
}