inside each field div. display:contents makes the
invisible to flexbox so the
gap:9px on .pv-application-form__field works between label and input. */
.pv-application-form .pv-application-form__field > p {
margin: 0;
display: contents;
}
/* Hide the
CF7 inserts between label and input */
.pv-application-form .pv-application-form__field br {
display: none;
}
/* Two-column row */
.pv-application-form .pv-application-form__row--two {
display: grid;
grid-template-columns: 1fr 1fr;
gap: calc(24px * var(--pv-ui-scale));
}
/* Single field wrapper */
.pv-application-form .pv-application-form__field {
display: flex;
flex-direction: column;
gap: calc(9px * var(--pv-ui-scale));
min-width: 0;
}
/* Labels */
.pv-application-form .pv-application-form__field label {
font-family: var(--wp--preset--font-family--inter);
font-size: calc(14px * var(--pv-ui-scale));
font-weight: 600;
color: var(--wp--preset--color--gray-03, #666);
line-height: 1.5;
display: block;
}
/* CF7 wraps each input in span.wpcf7-form-control-wrap */
.pv-application-form .wpcf7-form-control-wrap {
display: block;
width: 100%;
}
/* Text / email / tel inputs */
.pv-application-form .pv-application-form__input {
width: 100%;
box-sizing: border-box;
border: 1px solid var(--wp--preset--color--gray-02, #e4e4e7);
border-radius: calc(12px * var(--pv-ui-scale));
padding: calc(16px * var(--pv-ui-scale));
font-family: var(--wp--preset--font-family--inter);
font-size: calc(16px * var(--pv-ui-scale));
color: var(--wp--preset--color--brand-01-dark, #102f5d);
background: var(--wp--preset--color--white, #fff);
outline: none;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
appearance: none;
-webkit-appearance: none;
display: block;
}
.pv-application-form .pv-application-form__input::placeholder {
color: var(--wp--preset--color--gray-03, #666);
font-weight: 400;
}
.pv-application-form .pv-application-form__input:focus {
border-color: var(--wp--preset--color--primary-blue, #0068ff);
box-shadow: 0 0 0 calc(3px * var(--pv-ui-scale)) rgba(0, 104, 255, 0.08);
}
/* Submit button will be added later in Step 4.
For now, no [submit] inside CF7 — navigation is handled
by template buttons (.pv-application-btn--next / --back). */
/* Validation tip */
.pv-application-form .wpcf7-not-valid-tip {
font-family: var(--wp--preset--font-family--inter);
font-size: calc(13px * var(--pv-ui-scale));
color: #c03a2b;
margin-top: calc(5px * var(--pv-ui-scale));
display: block;
}
/* Invalid input highlight */
.pv-application-form .pv-application-form__input.wpcf7-not-valid {
border-color: #c03a2b;
}
/* Response output banner */
.pv-application-form .wpcf7-response-output {
border-radius: calc(16px * var(--pv-ui-scale));
padding: calc(20px * var(--pv-ui-scale)) calc(24px * var(--pv-ui-scale));
font-family: var(--wp--preset--font-family--inter);
font-size: calc(18px * var(--pv-ui-scale));
font-weight: 600;
line-height: 1.5;
margin: calc(16px * var(--pv-ui-scale)) 0 0 !important;
}
.pv-application-page .wpcf7 form.sent .wpcf7-response-output,
.pv-application-form .wpcf7 form.sent .wpcf7-response-output {
border: 2px solid #1a8f4b;
background: #e8f7ee;
color: #0d5c30;
}
.pv-application-page .wpcf7 form.invalid .wpcf7-response-output,
.pv-application-page .wpcf7 form.failed .wpcf7-response-output,
.pv-application-form .wpcf7 form.invalid .wpcf7-response-output,
.pv-application-form .wpcf7 form.failed .wpcf7-response-output {
border: 2px solid #c03a2b;
background: #fdecea;
color: #8b1f12;
}
/* Clickable sidebar step controls */
.pv-application-step__trigger {
display: block;
width: 100%;
border: none;
background: transparent;
padding: 0;
margin: 0;
text-align: left;
cursor: default;
font: inherit;
color: inherit;
}
.pv-application-step__trigger.pv-application-step--clickable {
cursor: pointer;
}
.pv-application-step__trigger.pv-application-step--clickable:hover,
.pv-application-step__trigger.pv-application-step--clickable:focus-visible {
background: #e8eef5;
outline: 2px solid var(--wp--preset--color--primary-blue, #0068ff);
outline-offset: -2px;
}
.pv-application-step__trigger:disabled {
cursor: default;
opacity: 1;
}
/* Selected file UI */
.pv-application-file {
display: flex;
align-items: center;
gap: calc(12px * var(--pv-ui-scale));
flex-wrap: wrap;
margin-top: calc(4px * var(--pv-ui-scale));
}
.pv-application-file__name {
font-family: var(--wp--preset--font-family--inter);
font-size: calc(15px * var(--pv-ui-scale));
font-weight: 500;
color: var(--wp--preset--color--brand-01-dark, #102f5d);
word-break: break-all;
}
.pv-application-file__remove {
border: none;
border-radius: calc(100px * var(--pv-ui-scale));
padding: calc(8px * var(--pv-ui-scale)) calc(14px * var(--pv-ui-scale));
background: #f0f4f8;
color: var(--wp--preset--color--brand-01-dark, #102f5d);
font-family: var(--wp--preset--font-family--inter);
font-size: calc(14px * var(--pv-ui-scale));
font-weight: 600;
cursor: pointer;
}
.pv-application-file__remove:hover,
.pv-application-file__remove:focus-visible {
background: #e4e8ec;
outline: 2px solid var(--wp--preset--color--primary-blue, #0068ff);
outline-offset: 2px;
}
.pv-application-file__remove[hidden] {
display: none !important;
}
/* --------------------------------------------------------------------------
Step 2 — Map panel (full-width, below address fields)
-------------------------------------------------------------------------- */
/* The outer div has both classes: pv-application-form AND cf7-map-wrapper.
The plugin CSS sets .cf7-map-wrapper { display:flex; align-items:flex-start }
(a horizontal row). We override with two-class selector (higher specificity)
to force our column layout so fields always fill full width. */
.pv-application-form.cf7-map-wrapper {
flex-direction: column;
align-items: stretch;
gap: calc(20px * var(--pv-ui-scale));
}
/* Map panel — step 1 only, shown after In-AKS coordinates are set. */
.pv-application-map[hidden] {
display: none !important;
height: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden;
border: none;
}
/* Map panel sits below the CF7 fields on step 1. */
.pv-application-map:not([hidden]) {
border-radius: calc(12px * var(--pv-ui-scale));
overflow: hidden;
width: 100%;
}
.pv-application-map:not([hidden]) .pv-application-map__canvas {
display: block;
width: 100%;
height: calc(300px * var(--pv-ui-scale));
}
.pv-application-map__canvas {
display: block;
width: 100%;
height: 0;
min-height: 0;
background: transparent;
}
/* Address row layout (address + postal code) */
.pv-application-form .pv-application-form__row--address {
display: grid;
grid-template-columns: 2fr 1fr;
gap: calc(24px * var(--pv-ui-scale));
}
/* --------------------------------------------------------------------------
Bottom bar
-------------------------------------------------------------------------- */
.pv-application-bottom {
display: flex;
align-items: center;
justify-content: space-between;
}
.pv-application-bottom__info {
display: flex;
align-items: center;
gap: calc(12px * var(--pv-ui-scale));
}
.pv-application-bottom__counter {
font-family: var(--wp--preset--font-family--inter);
font-size: calc(14px * var(--pv-ui-scale));
font-weight: 600;
color: var(--wp--preset--color--gray-03, #666);
letter-spacing: calc(1.4px * var(--pv-ui-scale));
text-transform: uppercase;
}
.pv-application-bottom__dots {
display: flex;
gap: calc(10px * var(--pv-ui-scale));
align-items: center;
}
.pv-application-dot {
background: #f0f4f8;
border-radius: calc(100px * var(--pv-ui-scale));
width: calc(7px * var(--pv-ui-scale));
height: calc(7px * var(--pv-ui-scale));
display: block;
}
.pv-application-dot--active {
width: calc(40px * var(--pv-ui-scale));
background: var(--wp--preset--color--primary-blue, #0068ff);
}
.pv-application-dot--done {
background: var(--wp--preset--color--primary-blue, #0068ff);
}
/* Bottom buttons */
.pv-application-bottom__buttons {
display: flex;
align-items: center;
gap: calc(12px * var(--pv-ui-scale));
}
.pv-application-btn {
display: inline-flex;
align-items: center;
gap: calc(6px * var(--pv-ui-scale));
border-radius: calc(100px * var(--pv-ui-scale));
padding: calc(14px * var(--pv-ui-scale)) calc(24px * var(--pv-ui-scale));
font-family: var(--wp--preset--font-family--inter);
font-size: calc(15px * var(--pv-ui-scale));
font-weight: 600;
cursor: pointer;
transition: background 0.15s, opacity 0.15s;
border: none;
line-height: 1;
}
.pv-application-btn--next {
background: var(--wp--preset--color--primary-blue, #0068ff);
color: #fff;
}
.pv-application-btn--next:hover {
background: #0056d6;
}
.pv-application-btn--back {
background: #f0f4f8;
color: var(--wp--preset--color--brand-01-dark, #102f5d);
}
.pv-application-btn--back:hover {
background: #e4e8ec;
}
.pv-application-btn--outline {
background: var(--wp--preset--color--white, #fff);
color: var(--wp--preset--color--primary-blue, #0068ff);
border: 1px solid var(--wp--preset--color--primary-blue, #0068ff);
}
.pv-application-btn--outline:hover,
.pv-application-btn--outline:focus-visible {
background: var(--wp--preset--color--primary-blue, #0068ff);
color: #fff;
outline: 2px solid var(--wp--preset--color--primary-blue, #0068ff);
outline-offset: 2px;
}
.pv-application-btn--outline:active {
background: #0056d6;
border-color: #0056d6;
color: #fff;
}
.pv-application-btn--outline:disabled,
.pv-application-btn--outline[aria-busy="true"] {
opacity: 0.55;
cursor: not-allowed;
}
.pv-application-btn--outline:disabled:hover,
.pv-application-btn--outline[aria-busy="true"]:hover {
background: var(--wp--preset--color--white, #fff);
color: var(--wp--preset--color--primary-blue, #0068ff);
}
/* --------------------------------------------------------------------------
Focus states
-------------------------------------------------------------------------- */
.pv-application-help__link:focus-visible,
.pv-application-card__link:focus-visible {
outline: 2px solid var(--wp--preset--color--primary-blue, #0068ff);
outline-offset: 2px;
border-radius: calc(4px * var(--pv-ui-scale));
}
/* --------------------------------------------------------------------------
Responsive — tablet & mobile (≤900). Desktop ≥901 unchanged.
Order: step dropdown → breadcrumb → form card (usertest p.9).
-------------------------------------------------------------------------- */
@media (max-width: 900px) {
.pv-application-page {
padding: calc(16px * var(--pv-ui-scale)) calc(16px * var(--pv-ui-scale)) calc(48px * var(--pv-ui-scale));
}
.pv-application-layout {
flex-direction: column;
align-items: stretch;
gap: calc(16px * var(--pv-ui-scale));
}
.pv-application-sidebar {
order: 1;
width: 100%;
flex: none;
flex-direction: column;
flex-wrap: nowrap;
gap: calc(8px * var(--pv-ui-scale));
padding: 0;
background: transparent;
border-radius: 0;
position: relative;
}
.pv-application-sidebar__title {
display: none;
}
.pv-application-sidebar__mobile-bar {
display: flex;
align-items: stretch;
gap: calc(8px * var(--pv-ui-scale));
width: 100%;
}
.pv-application-sidebar__toggle {
display: flex;
align-items: center;
justify-content: space-between;
gap: calc(10px * var(--pv-ui-scale));
flex: 1 1 auto;
width: 100%;
min-width: 0;
padding: calc(12px * var(--pv-ui-scale)) calc(14px * var(--pv-ui-scale));
border: 1px solid var(--wp--preset--color--gray-02, #e4e4e7);
border-radius: calc(12px * var(--pv-ui-scale));
background: var(--wp--preset--color--white, #fff);
color: var(--wp--preset--color--brand-01-dark, #102f5d);
font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
cursor: pointer;
text-align: left;
}
.pv-application-sidebar__toggle-text {
display: flex;
flex-direction: column;
gap: calc(2px * var(--pv-ui-scale));
min-width: 0;
flex: 1 1 auto;
}
.pv-application-sidebar__toggle-meta {
font-size: calc(12px * var(--pv-ui-scale));
font-weight: 600;
letter-spacing: calc(1px * var(--pv-ui-scale));
text-transform: uppercase;
color: var(--wp--preset--color--gray-03, #666);
line-height: 1.3;
}
.pv-application-sidebar__toggle-current {
font-size: calc(14px * var(--pv-ui-scale));
font-weight: 600;
letter-spacing: calc(1.2px * var(--pv-ui-scale));
text-transform: uppercase;
color: var(--wp--preset--color--brand-01-dark, #102f5d);
line-height: 1.35;
overflow-wrap: anywhere;
}
.pv-application-sidebar__toggle-chevron {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--wp--preset--color--brand-01-dark, #102f5d);
transition: transform 0.18s ease;
}
.pv-application-sidebar.is-open .pv-application-sidebar__toggle-chevron svg {
transform: rotate(180deg);
}
.pv-application-sidebar__toggle:focus-visible {
outline: 2px solid var(--wp--preset--color--primary-blue, #0068ff);
outline-offset: 2px;
}
.pv-application-sidebar__top {
width: 100%;
min-width: 0;
}
.pv-application-sidebar.is-collapsed .pv-application-steps {
display: none;
}
.pv-application-steps {
margin-top: calc(8px * var(--pv-ui-scale));
padding: calc(8px * var(--pv-ui-scale));
background: var(--wp--preset--color--white, #fff);
border: 1px solid var(--wp--preset--color--gray-02, #e4e4e7);
border-radius: calc(12px * var(--pv-ui-scale));
}
.pv-application-step__inner {
padding: calc(12px * var(--pv-ui-scale)) calc(14px * var(--pv-ui-scale));
}
/* Help panel: popover above sticky bottom bar */
.pv-application-help {
display: none;
position: fixed;
left: calc(16px * var(--pv-ui-scale));
right: calc(16px * var(--pv-ui-scale));
bottom: calc(56px * var(--pv-ui-scale) + env(safe-area-inset-bottom, 0px));
z-index: 30;
width: auto;
max-width: calc(400px * var(--pv-ui-scale));
box-sizing: border-box;
padding: calc(16px * var(--pv-ui-scale));
background: var(--wp--preset--color--white, #fff);
border: 1px solid var(--wp--preset--color--gray-02, #e4e4e7);
border-radius: calc(16px * var(--pv-ui-scale));
box-shadow: 0 calc(8px * var(--pv-ui-scale)) calc(24px * var(--pv-ui-scale)) rgba(16, 47, 93, 0.12);
gap: calc(10px * var(--pv-ui-scale));
}
.pv-application-sidebar.is-help-open .pv-application-help {
display: flex;
}
.pv-application-help__icon {
width: calc(40px * var(--pv-ui-scale));
height: calc(40px * var(--pv-ui-scale));
}
.pv-application-breadcrumb {
order: 2;
display: flex;
align-items: center;
gap: calc(12px * var(--pv-ui-scale));
flex-wrap: wrap;
padding: 0 calc(4px * var(--pv-ui-scale));
}
.pv-application-breadcrumb__item {
font-family: var(--wp--preset--font-family--inter);
font-weight: 600;
font-size: calc(13px * var(--pv-ui-scale));
letter-spacing: calc(1.2px * var(--pv-ui-scale));
text-transform: uppercase;
color: var(--wp--preset--color--gray-03, #666);
text-decoration: none;
}
.pv-application-breadcrumb__item--current {
color: var(--wp--preset--color--brand-01-dark, #102f5d);
}
.pv-application-breadcrumb__item:hover {
color: var(--wp--preset--color--brand-01-dark, #102f5d);
}
.pv-application-breadcrumb__chevron {
display: inline-flex;
color: var(--wp--preset--color--gray-03, #666);
}
.pv-application-card {
order: 3;
padding: calc(24px * var(--pv-ui-scale));
gap: calc(28px * var(--pv-ui-scale));
border-radius: calc(20px * var(--pv-ui-scale));
/* Room for compact sticky bottom bar */
padding-bottom: calc(calc(64px * var(--pv-ui-scale)) + env(safe-area-inset-bottom, 0px));
}
.pv-application-card__header {
gap: calc(10px * var(--pv-ui-scale));
}
.pv-application-card__title {
font-size: calc(32px * var(--pv-ui-scale));
letter-spacing: calc(-0.8px * var(--pv-ui-scale));
}
.pv-application-card__subtitle {
font-size: calc(15px * var(--pv-ui-scale));
}
.pv-application-map__canvas {
height: calc(270px * var(--pv-ui-scale));
}
/* Bottom bar: [help] [dots] [Edasi] — compact, vertically centered */
.pv-application-bottom {
position: sticky;
bottom: 0;
z-index: 5;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
column-gap: calc(8px * var(--pv-ui-scale));
/* Pull flush with card bottom so padding doesn't sit under the controls */
margin: 0 calc(-24px * var(--pv-ui-scale)) calc(-64px * var(--pv-ui-scale) - env(safe-area-inset-bottom, 0px));
padding: calc(10px * var(--pv-ui-scale)) calc(12px * var(--pv-ui-scale));
background: rgba(255, 255, 255, 0.96);
border-top: 1px solid var(--wp--preset--color--gray-02, #e4e4e7);
backdrop-filter: blur(calc(8px * var(--pv-ui-scale)));
min-height: 0;
}
.pv-application-bottom .pv-application-help-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
justify-self: start;
grid-column: 1;
width: calc(40px * var(--pv-ui-scale));
height: calc(40px * var(--pv-ui-scale));
min-width: calc(40px * var(--pv-ui-scale));
padding: 0;
border: none;
border-radius: calc(100px * var(--pv-ui-scale));
background: #e2e5f9;
color: var(--wp--preset--color--brand-02, #707cd2);
cursor: pointer;
}
.pv-application-bottom .pv-application-help-toggle:focus-visible {
outline: 2px solid var(--wp--preset--color--primary-blue, #0068ff);
outline-offset: 2px;
}
.pv-application-bottom .pv-application-help-toggle[aria-expanded="true"] {
background: var(--wp--preset--color--brand-02, #707cd2);
color: #fff;
}
.pv-application-bottom__info {
grid-column: 2;
justify-self: center;
flex: 0 0 auto;
justify-content: center;
min-width: 0;
gap: 0;
}
.pv-application-bottom__counter {
display: none;
}
.pv-application-bottom__dots {
flex-shrink: 0;
gap: calc(8px * var(--pv-ui-scale));
}
.pv-application-dot {
width: calc(8px * var(--pv-ui-scale));
height: calc(8px * var(--pv-ui-scale));
}
.pv-application-dot--active {
width: calc(28px * var(--pv-ui-scale));
}
.pv-application-bottom__buttons {
grid-column: 3;
justify-self: end;
flex: 0 0 auto;
justify-content: flex-end;
min-width: 0;
gap: calc(8px * var(--pv-ui-scale));
}
.pv-application-btn {
padding: calc(10px * var(--pv-ui-scale)) calc(18px * var(--pv-ui-scale));
font-size: calc(14px * var(--pv-ui-scale));
}
.pv-application-btn--next {
flex: 0 0 auto;
justify-content: center;
}
.pv-application-btn--back {
padding: calc(10px * var(--pv-ui-scale)) calc(12px * var(--pv-ui-scale));
}
/* Hide floating cookie + reCAPTCHA on mobile/tablet; desktop unchanged */
body:has(.pv-application-page) .grecaptcha-badge {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
body:has(.pv-application-page) #sharks-cookie-floating-wrap {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
}
/* Tablet (no hamburger): surface cookie prefs in the header nav */
body:has(.pv-application-page) .pv-header-nav__item--cookie {
display: block;
}
/* Visible reCAPTCHA attribution (required when badge is hidden) */
.pv-application-recaptcha-note {
display: block;
margin: 0;
padding: calc(4px * var(--pv-ui-scale)) 0 calc(12px * var(--pv-ui-scale));
font-family: var(--wp--preset--font-family--inter);
font-size: calc(12px * var(--pv-ui-scale));
line-height: 1.45;
color: var(--wp--preset--color--gray-03, #666);
}
.pv-application-recaptcha-note[hidden] {
display: none !important;
}
.pv-application-recaptcha-note a {
color: var(--wp--preset--color--primary-blue, #0068ff);
text-decoration: underline;
text-underline-offset: 2px;
}
.pv-application-recaptcha-note a:focus-visible {
outline: 2px solid var(--wp--preset--color--primary-blue, #0068ff);
outline-offset: 2px;
border-radius: 2px;
}
}
/* --------------------------------------------------------------------------
Extended field types (used by the full multi-step CF7 markup)
Scoped to .pv-application-form, reusing the existing design tokens.
-------------------------------------------------------------------------- */
/* Section headings inside a step (e.g. "Planeeritud tarbimine") */
.pv-application-form .pv-application-form__section-title {
font-family: var(--wp--preset--font-family--plus-jakarta-sans);
font-weight: 700;
font-size: calc(22px * var(--pv-ui-scale));
line-height: 1.2;
letter-spacing: calc(-0.44px * var(--pv-ui-scale));
color: var(--wp--preset--color--brand-01-dark, #102f5d);
margin: calc(8px * var(--pv-ui-scale)) 0 0;
}
.pv-application-form .pv-application-form__section-desc {
font-family: var(--wp--preset--font-family--inter);
font-size: calc(14px * var(--pv-ui-scale));
color: var(--wp--preset--color--gray-03, #666);
line-height: 1.5;
margin: calc(-8px * var(--pv-ui-scale)) 0 0;
}
/* Optional sub-section ("Esindaja andmed (olemasolul)") */
.pv-application-form .pv-application-form__optional {
border-top: 1px solid var(--wp--preset--color--gray-02, #e4e4e7);
padding-top: calc(20px * var(--pv-ui-scale));
display: flex;
flex-direction: column;
gap: calc(20px * var(--pv-ui-scale));
}
/* Fieldset reset for grouped choices */
.pv-application-form fieldset.pv-application-form__field {
border: 0;
margin: 0;
padding: 0;
min-width: 0;
}
.pv-application-form .pv-application-form__legend {
font-family: var(--wp--preset--font-family--inter);
font-size: calc(14px * var(--pv-ui-scale));
font-weight: 600;
color: var(--wp--preset--color--gray-03, #666);
line-height: 1.5;
padding: 0;
margin: 0;
}
/* Checkbox / radio choice list (services, owner type, delivery method) */
.pv-application-form .pv-application-form__choice-group {
display: flex;
flex-direction: column;
gap: calc(10px * var(--pv-ui-scale));
}
/* CF7 renders checkbox/radio groups as span.wpcf7-form-control > span.wpcf7-list-item */
.pv-application-form .wpcf7-checkbox,
.pv-application-form .wpcf7-radio {
display: flex;
flex-direction: column;
gap: calc(10px * var(--pv-ui-scale));
}
.pv-application-form .wpcf7-list-item {
margin: 0;
display: flex;
}
.pv-application-form .wpcf7-list-item label {
display: flex;
align-items: center;
gap: calc(10px * var(--pv-ui-scale));
cursor: pointer;
font-family: var(--wp--preset--font-family--inter);
font-size: calc(16px * var(--pv-ui-scale));
font-weight: 500;
color: var(--wp--preset--color--brand-01-dark, #102f5d);
}
.pv-application-form .wpcf7-list-item input[type="checkbox"],
.pv-application-form .wpcf7-list-item input[type="radio"] {
width: calc(20px * var(--pv-ui-scale));
height: calc(20px * var(--pv-ui-scale));
flex-shrink: 0;
accent-color: var(--wp--preset--color--primary-blue, #0068ff);
margin: 0;
}
/* Radio "cards" variant (building type selection) */
.pv-application-form .pv-application-form__choice-group--cards .wpcf7-radio,
.pv-application-form .pv-application-form__choice-group--cards .wpcf7-checkbox {
display: grid;
grid-template-columns: 1fr 1fr;
gap: calc(12px * var(--pv-ui-scale));
}
.pv-application-form .pv-application-form__choice-group--cards .wpcf7-list-item {
border: 1px solid var(--wp--preset--color--gray-02, #e4e4e7);
border-radius: calc(12px * var(--pv-ui-scale));
transition: border-color 0.15s ease, background 0.15s ease;
}
.pv-application-form .pv-application-form__choice-group--cards .wpcf7-list-item label {
padding: calc(16px * var(--pv-ui-scale));
width: 100%;
}
.pv-application-form .pv-application-form__choice-group--cards .wpcf7-list-item:hover {
border-color: var(--wp--preset--color--primary-blue, #0068ff);
}
/* Sections group related fields vertically */
.pv-application-form .pv-application-form__section {
display: flex;
flex-direction: column;
gap: calc(20px * var(--pv-ui-scale));
}
.pv-application-form .pv-application-form__branch {
display: flex;
flex-direction: column;
gap: calc(20px * var(--pv-ui-scale));
}
.pv-application-form .pv-application-form__branch[hidden] {
display: none !important;
}
/* Sub-section heading (h4, e.g. "Veetarbimine") */
.pv-application-form .pv-application-form__subsection-title {
font-family: var(--wp--preset--font-family--inter);
font-weight: 700;
font-size: calc(16px * var(--pv-ui-scale));
color: var(--wp--preset--color--brand-01-dark, #102f5d);
margin: calc(4px * var(--pv-ui-scale)) 0 0;
}
/* Explanatory note paragraph */
.pv-application-form .pv-application-form__note {
font-family: var(--wp--preset--font-family--inter);
font-size: calc(14px * var(--pv-ui-scale));
color: var(--wp--preset--color--gray-03, #666);
line-height: 1.5;
margin: 0;
}
/* Three-column numeric row (planned consumption) */
.pv-application-form .pv-application-form__row--three {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: calc(24px * var(--pv-ui-scale));
}
/* Textareas: full width (the markup uses .pv-application-form__textarea) */
.pv-application-form .pv-application-form__textarea,
.pv-application-form textarea.pv-application-form__input {
width: 100%;
box-sizing: border-box;
border: 1px solid var(--wp--preset--color--gray-02, #e4e4e7);
border-radius: calc(12px * var(--pv-ui-scale));
padding: calc(16px * var(--pv-ui-scale));
font-family: var(--wp--preset--font-family--inter);
font-size: calc(16px * var(--pv-ui-scale));
color: var(--wp--preset--color--brand-01-dark, #102f5d);
background: var(--wp--preset--color--white, #fff);
outline: none;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
min-height: calc(120px * var(--pv-ui-scale));
resize: vertical;
line-height: 1.5;
display: block;
}
.pv-application-form .pv-application-form__textarea::placeholder {
color: var(--wp--preset--color--gray-03, #666);
font-weight: 400;
}
.pv-application-form .pv-application-form__textarea:focus,
.pv-application-form textarea.pv-application-form__input:focus {
border-color: var(--wp--preset--color--primary-blue, #0068ff);
box-shadow: 0 0 0 calc(3px * var(--pv-ui-scale)) rgba(0, 104, 255, 0.08);
}
.pv-application-form .pv-application-form__textarea.wpcf7-not-valid {
border-color: #c03a2b;
}
/* Character counter / hint text under a field */
.pv-application-form .pv-application-form__hint {
font-family: var(--wp--preset--font-family--inter);
font-size: calc(13px * var(--pv-ui-scale));
color: var(--wp--preset--color--gray-03, #666);
}
/* Date input keeps the same chrome as text inputs */
.pv-application-form input[type="date"].pv-application-form__input {
min-height: calc(56px * var(--pv-ui-scale));
}
/* File upload fields: full width */
.pv-application-form .pv-application-form__field--file .wpcf7-form-control-wrap {
display: block;
}
.pv-application-form input[type="file"].pv-application-form__file {
width: 100%;
box-sizing: border-box;
border: 1px dashed var(--wp--preset--color--gray-02, #e4e4e7);
border-radius: calc(12px * var(--pv-ui-scale));
padding: calc(14px * var(--pv-ui-scale)) calc(16px * var(--pv-ui-scale));
font-family: var(--wp--preset--font-family--inter);
font-size: calc(15px * var(--pv-ui-scale));
color: var(--wp--preset--color--gray-03, #666);
background: #fafbfc;
cursor: pointer;
}
.pv-application-form input[type="file"].pv-application-form__file::file-selector-button {
margin-right: calc(12px * var(--pv-ui-scale));
border: none;
border-radius: calc(100px * var(--pv-ui-scale));
padding: calc(8px * var(--pv-ui-scale)) calc(16px * var(--pv-ui-scale));
background: #f0f4f8;
color: var(--wp--preset--color--brand-01-dark, #102f5d);
font-family: var(--wp--preset--font-family--inter);
font-size: calc(14px * var(--pv-ui-scale));
font-weight: 600;
cursor: pointer;
}
/* Conditional blocks: hidden via [hidden], shown as a flex column group */
.pv-application-form [data-pv-condition] {
display: flex;
flex-direction: column;
gap: calc(20px * var(--pv-ui-scale));
}
.pv-application-form [data-pv-condition][hidden] {
display: none !important;
}
/* Invalid required choice group */
.pv-application-form .pv-application-form__field--invalid .wpcf7-list-item label,
.pv-application-form .pv-application-form__field--invalid .pv-application-form__legend {
color: #c03a2b;
}
/* Final CF7 submit button (rendered only inside the last step) */
.pv-application-form .wpcf7-submit {
align-self: flex-start;
border: none;
border-radius: calc(100px * var(--pv-ui-scale));
padding: calc(16px * var(--pv-ui-scale)) calc(32px * var(--pv-ui-scale));
min-width: calc(160px * var(--pv-ui-scale));
min-height: calc(48px * var(--pv-ui-scale));
background: var(--wp--preset--color--primary-blue, #0068ff);
color: #fff;
font-family: var(--wp--preset--font-family--inter);
font-size: calc(15px * var(--pv-ui-scale));
font-weight: 600;
line-height: 1.2;
cursor: pointer;
transition: background 0.15s;
}
.pv-application-form .wpcf7-submit.has-spinner {
display: inline-flex;
align-items: center;
justify-content: center;
}
.pv-application-form .wpcf7-submit:hover {
background: #0056d6;
}
.pv-application-form .wpcf7-spinner {
margin: 0 0 0 calc(12px * var(--pv-ui-scale));
}
/* Desktop keeps the floating reCAPTCHA badge — hide inline attribution */
.pv-application-recaptcha-note {
display: none;
}
/* --------------------------------------------------------------------------
In-AKS address / cadastral lookup
-------------------------------------------------------------------------- */
.pv-inaks-field .wpcf7-form-control-wrap {
position: relative;
}
.pv-inaks-address-combobox {
position: relative;
display: block;
width: 100%;
}
.pv-inaks-cadastral-row {
display: flex;
gap: calc(8px * var(--pv-ui-scale));
align-items: stretch;
}
.pv-inaks-cadastral-row .pv-application-form__input,
.pv-inaks-cadastral-row .wpcf7-text {
flex: 1 1 auto;
min-width: 0;
}
.pv-inaks-lookup-btn {
flex: 0 0 auto;
white-space: nowrap;
}
.pv-inaks-suggest {
position: absolute;
z-index: 30;
top: calc(100% + calc(4px * var(--pv-ui-scale)));
left: 0;
right: 0;
max-height: calc(240px * var(--pv-ui-scale));
overflow-y: auto;
background: var(--wp--preset--color--white, #fff);
border: 1px solid #d8e0ea;
border-radius: calc(8px * var(--pv-ui-scale));
box-shadow: 0 calc(8px * var(--pv-ui-scale)) calc(24px * var(--pv-ui-scale)) rgba(16, 47, 93, 0.12);
}
.pv-inaks-suggest__item {
display: block;
width: 100%;
padding: calc(10px * var(--pv-ui-scale)) calc(12px * var(--pv-ui-scale));
border: 0;
background: transparent;
text-align: left;
font-family: var(--wp--preset--font-family--inter);
font-size: calc(14px * var(--pv-ui-scale));
line-height: 1.4;
color: var(--wp--preset--color--brand-01-dark, #102f5d);
cursor: pointer;
}
.pv-inaks-suggest__item:hover,
.pv-inaks-suggest__item--active,
.pv-inaks-suggest__item:focus-visible {
background: var(--wp--preset--color--brand-01-light, #daf2f3);
outline: none;
}
.pv-inaks-picker {
margin-top: calc(8px * var(--pv-ui-scale));
padding: calc(12px * var(--pv-ui-scale));
border: 1px solid #d8e0ea;
border-radius: calc(8px * var(--pv-ui-scale));
background: #f8fafc;
}
.pv-inaks-picker__title {
margin: 0 0 calc(8px * var(--pv-ui-scale));
font-family: var(--wp--preset--font-family--inter);
font-size: calc(13px * var(--pv-ui-scale));
font-weight: 600;
color: var(--wp--preset--color--brand-01-dark, #102f5d);
}
.pv-inaks-picker__list {
display: flex;
flex-direction: column;
gap: calc(6px * var(--pv-ui-scale));
}
.pv-inaks-picker__option {
width: 100%;
padding: calc(10px * var(--pv-ui-scale)) calc(12px * var(--pv-ui-scale));
border: 1px solid #d8e0ea;
border-radius: calc(8px * var(--pv-ui-scale));
background: var(--wp--preset--color--white, #fff);
text-align: left;
font-family: var(--wp--preset--font-family--inter);
font-size: calc(14px * var(--pv-ui-scale));
line-height: 1.4;
color: var(--wp--preset--color--brand-01-dark, #102f5d);
cursor: pointer;
}
.pv-inaks-picker__option:hover,
.pv-inaks-picker__option:focus-visible {
border-color: var(--wp--preset--color--brand-01, #348695);
background: var(--wp--preset--color--brand-01-light, #daf2f3);
outline: 2px solid var(--wp--preset--color--primary-blue, #0068ff);
outline-offset: 1px;
}
.pv-inaks-status {
margin: calc(6px * var(--pv-ui-scale)) 0 0;
font-family: var(--wp--preset--font-family--inter);
font-size: calc(13px * var(--pv-ui-scale));
line-height: 1.4;
color: #4a5c6e;
}
.pv-inaks-status--success {
color: var(--wp--preset--color--brand-01, #348695);
}
.pv-inaks-status--error {
color: #b42318;
}
.pv-inaks-status--loading {
color: #4a5c6e;
}
.pv-inaks-attribution {
margin: calc(4px * var(--pv-ui-scale)) 0 0;
font-family: var(--wp--preset--font-family--inter);
font-size: calc(12px * var(--pv-ui-scale));
color: #6b7c8f;
}
.pv-inaks-attribution a {
color: var(--wp--preset--color--primary-blue, #0068ff);
text-decoration: underline;
}
@media (max-width: 600px) {
.pv-application-page {
padding: calc(12px * var(--pv-ui-scale)) calc(12px * var(--pv-ui-scale)) calc(40px * var(--pv-ui-scale));
}
/* Match site-wide mobile breadcrumb (Näidu teatamine); tablet ≤900 left alone */
.pv-application-breadcrumb {
justify-content: center;
gap: calc(10px * var(--pv-ui-scale));
padding: 0;
margin-bottom: calc(12px * var(--pv-ui-scale));
}
.pv-application-breadcrumb__item {
font-size: calc(14px * var(--pv-ui-scale));
letter-spacing: calc(1.4px * var(--pv-ui-scale));
line-height: 1.5;
}
.pv-inaks-cadastral-row {
flex-direction: column;
}
.pv-inaks-lookup-btn {
width: 100%;
}
.pv-application-form .pv-application-form__choice-group--cards .wpcf7-radio,
.pv-application-form .pv-application-form__choice-group--cards .wpcf7-checkbox {
grid-template-columns: 1fr;
}
.pv-application-form .pv-application-form__row--three {
grid-template-columns: 1fr;
}
.pv-application-card {
padding: calc(20px * var(--pv-ui-scale));
gap: calc(24px * var(--pv-ui-scale));
padding-bottom: calc(calc(56px * var(--pv-ui-scale)) + env(safe-area-inset-bottom, 0px));
}
.pv-application-card__title {
font-size: calc(28px * var(--pv-ui-scale));
}
.pv-application-form .pv-application-form__row--two,
.pv-application-form .pv-application-form__row--address {
grid-template-columns: 1fr;
}
.pv-application-bottom {
margin: 0 calc(-20px * var(--pv-ui-scale)) calc(-56px * var(--pv-ui-scale) - env(safe-area-inset-bottom, 0px));
padding: calc(10px * var(--pv-ui-scale)) calc(12px * var(--pv-ui-scale));
}
.pv-application-bottom .pv-application-help-toggle {
width: calc(40px * var(--pv-ui-scale));
height: calc(40px * var(--pv-ui-scale));
min-width: calc(40px * var(--pv-ui-scale));
}
.pv-application-btn--back {
padding: calc(10px * var(--pv-ui-scale));
}
.pv-application-help {
left: calc(12px * var(--pv-ui-scale));
right: calc(12px * var(--pv-ui-scale));
bottom: calc(56px * var(--pv-ui-scale) + env(safe-area-inset-bottom, 0px));
max-width: none;
}
}