/* ==========================================================================
   Paide Vesi — Meter Readings Block (two-column with map)
   ========================================================================== */

:root {
    --paidevesi-meter-bg: #f5f6fa;
    --paidevesi-red-light: #fee8e9;
    --paidevesi-red-dark: #c03a2b;
}

/* --------------------------------------------------------------------------
   Page-level background
   -------------------------------------------------------------------------- */

.meter-block {
    background-color: var(--paidevesi-meter-bg);
    padding: calc(48px * var(--pv-ui-scale)) calc(58px * var(--pv-ui-scale)) calc(80px * var(--pv-ui-scale));
}

.meter-block__inner {
    display: flex;
    flex-direction: column;
    gap: calc(42px * var(--pv-ui-scale));
}

/* --------------------------------------------------------------------------
   Breadcrumb
   -------------------------------------------------------------------------- */

.meter-breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(22px * var(--pv-ui-scale));
}

.meter-breadcrumb__link,
.meter-breadcrumb__current {
    font-family: var(--wp--preset--font-family--inter);
    font-size: calc(14px * var(--pv-ui-scale));
    font-weight: 600;
    letter-spacing: calc(1.4px * var(--pv-ui-scale));
    text-transform: uppercase;
    line-height: 1.5;
}

.meter-breadcrumb__link {
    color: var(--wp--preset--color--gray-03);
    text-decoration: none;
    transition: color 0.2s ease;
}

.meter-breadcrumb__link:hover {
    color: var(--wp--preset--color--brand-01-dark);
}

.meter-breadcrumb__current {
    color: var(--wp--preset--color--brand-01-dark);
}

.meter-breadcrumb svg {
    flex-shrink: 0;
    color: var(--wp--preset--color--gray-03);
}

/* --------------------------------------------------------------------------
   Hero / Title
   -------------------------------------------------------------------------- */

.meter-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: calc(24px * var(--pv-ui-scale));
}

.meter-hero__text {
    display: flex;
    flex-direction: column;
    gap: calc(12px * var(--pv-ui-scale));
}

.meter-hero__title {
    font-family: var(--wp--preset--font-family--plus-jakarta-sans);
    font-size: calc(48px * var(--pv-ui-scale));
    font-weight: 700;
    color: var(--wp--preset--color--brand-01-dark);
    letter-spacing: calc(-1.44px * var(--pv-ui-scale));
    line-height: 1.1;
    margin: 0;
}

.meter-hero__intro {
    font-family: var(--wp--preset--font-family--inter);
    font-size: calc(16px * var(--pv-ui-scale));
    color: var(--wp--preset--color--gray-03);
    line-height: 1.5;
    margin: 0;
    max-width: calc(560px * var(--pv-ui-scale));
}

/* --------------------------------------------------------------------------
   Time badge
   -------------------------------------------------------------------------- */

.meter-time-badge {
    display: inline-flex;
    align-items: center;
    gap: calc(4px * var(--pv-ui-scale));
    background: var(--wp--preset--color--brand-02-light);
    color: var(--wp--preset--color--brand-02);
    padding: calc(6px * var(--pv-ui-scale)) calc(12px * var(--pv-ui-scale));
    border-radius: calc(4px * var(--pv-ui-scale));
    font-family: var(--wp--preset--font-family--inter);
    font-size: calc(14px * var(--pv-ui-scale));
    font-weight: 600;
    width: fit-content;
}

.meter-time-badge svg {
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Two-column layout (form + map)
   -------------------------------------------------------------------------- */

.meter-layout {
    display: flex;
    gap: calc(30px * var(--pv-ui-scale));
    align-items: stretch;
}

.meter-layout__form {
    flex: 2;
    min-width: 0;
}

.meter-layout__map {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* --------------------------------------------------------------------------
   Form card
   -------------------------------------------------------------------------- */

.meter-form-card {
    background: var(--wp--preset--color--white);
    border-radius: calc(24px * var(--pv-ui-scale));
    padding: calc(32px * var(--pv-ui-scale));
    box-shadow: 0 calc(2px * var(--pv-ui-scale)) calc(16px * var(--pv-ui-scale)) rgba(16, 47, 93, 0.07);
}

.pv-meter-form {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.pv-meter-fields {
    display: flex;
    flex-direction: column;
    gap: calc(24px * var(--pv-ui-scale));
}

/* --------------------------------------------------------------------------
   Field groups
   -------------------------------------------------------------------------- */

.pv-field-group {
    display: flex;
    flex-direction: column;
    gap: calc(9px * var(--pv-ui-scale));
}

.pv-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);
    line-height: 1.5;
}

.pv-field-hint {
    font-weight: 400;
    font-size: calc(14px * var(--pv-ui-scale));
}

.pv-field-input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--wp--preset--color--gray-02);
    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);
    background: var(--wp--preset--color--white);
    outline: none;
    transition: border-color 0.2s ease;
    appearance: none;
    -webkit-appearance: none;
}

.pv-field-input::placeholder {
    color: #999;
}

.pv-field-input:focus {
    border-color: var(--wp--preset--color--primary-blue);
}

/* Date field */
.pv-date-wrapper {
    position: relative;
}

.pv-date-wrapper input[type="date"] {
    padding-right: calc(44px * var(--pv-ui-scale));
    cursor: pointer;
}

.pv-date-wrapper input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   Validation error state
   -------------------------------------------------------------------------- */

.pv-field-group.is-error .pv-field-input {
    border-color: var(--paidevesi-red-dark);
}

.pv-field-error {
    font-family: var(--wp--preset--font-family--inter);
    font-size: calc(13px * var(--pv-ui-scale));
    color: var(--paidevesi-red-dark);
    min-height: 0;
    display: none;
}

.pv-field-group.is-error .pv-field-error,
.pv-meter-section.is-error > .pv-field-error {
    display: block;
}

/* --------------------------------------------------------------------------
   Divider
   -------------------------------------------------------------------------- */

.pv-meter-divider {
    height: calc(1px * var(--pv-ui-scale));
    background: var(--wp--preset--color--gray-02);
    margin: calc(32px * var(--pv-ui-scale)) 0;
}

/* --------------------------------------------------------------------------
   Meter section (selector + reading fields)
   -------------------------------------------------------------------------- */

.pv-meter-section__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: calc(16px * var(--pv-ui-scale));
    flex-wrap: wrap;
    margin-bottom: calc(24px * var(--pv-ui-scale));
}

.pv-meter-section__titles {
    display: flex;
    flex-direction: column;
    gap: calc(8px * var(--pv-ui-scale));
}

.pv-meter-section__title {
    font-family: var(--wp--preset--font-family--plus-jakarta-sans);
    font-weight: 700;
    font-size: calc(22px * var(--pv-ui-scale));
    letter-spacing: calc(-0.66px * var(--pv-ui-scale));
    line-height: 1.1;
    color: var(--wp--preset--color--brand-01-dark);
    margin: 0;
}

.pv-meter-section__subtitle {
    font-family: var(--wp--preset--font-family--inter);
    font-weight: 400;
    font-size: calc(14px * var(--pv-ui-scale));
    color: var(--wp--preset--color--gray-03);
    line-height: 1.5;
    margin: 0;
}

/* Meter toggle buttons */
.pv-meter-buttons {
    display: flex;
    gap: calc(12px * var(--pv-ui-scale));
    flex-wrap: wrap;
}

.pv-meter-btn {
    display: flex;
    align-items: center;
    gap: calc(8px * var(--pv-ui-scale));
    padding: calc(16px * var(--pv-ui-scale)) calc(28px * var(--pv-ui-scale));
    border-radius: calc(100px * var(--pv-ui-scale));
    border: 1.5px solid var(--wp--preset--color--gray-02);
    background: var(--wp--preset--color--white);
    cursor: pointer;
    font-family: var(--wp--preset--font-family--inter);
    font-weight: 600;
    font-size: calc(16px * var(--pv-ui-scale));
    color: var(--wp--preset--color--gray-03);
    transition: border-color 0.15s, color 0.15s;
    user-select: none;
}

.pv-meter-btn--active {
    border-color: var(--wp--preset--color--primary-blue);
    color: var(--wp--preset--color--brand-01-dark);
}

.pv-meter-btn__check {
    width: calc(18px * var(--pv-ui-scale));
    height: calc(18px * var(--pv-ui-scale));
    border-radius: calc(4px * var(--pv-ui-scale));
    border: 1px solid var(--wp--preset--color--gray-02);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--wp--preset--color--white);
    transition: background 0.15s, border-color 0.15s;
}

.pv-meter-btn--active .pv-meter-btn__check {
    background: var(--wp--preset--color--primary-blue);
    border-color: var(--wp--preset--color--primary-blue);
}

.pv-meter-btn__check svg {
    display: none;
}

.pv-meter-btn--active .pv-meter-btn__check svg {
    display: block;
}

/* Reading fields */
.pv-reading-fields {
    display: flex;
    flex-direction: column;
    gap: calc(24px * var(--pv-ui-scale));
}

.pv-reading-field {
    display: none;
}

.pv-reading-field--visible {
    display: flex;
    flex-direction: column;
    gap: calc(9px * var(--pv-ui-scale));
}

/* --------------------------------------------------------------------------
   Remember me
   -------------------------------------------------------------------------- */

.pv-remember-label {
    display: flex;
    align-items: center;
    gap: calc(8px * var(--pv-ui-scale));
    cursor: pointer;
    font-family: var(--wp--preset--font-family--inter);
    font-weight: 400;
    font-size: calc(16px * var(--pv-ui-scale));
    line-height: 1.5;
    color: var(--wp--preset--color--gray-03);
    user-select: none;
    margin-top: calc(32px * var(--pv-ui-scale));
    margin-bottom: calc(32px * var(--pv-ui-scale));
}

.pv-remember-label input[type="checkbox"] {
    display: none;
}

.pv-remember-box {
    width: calc(18px * var(--pv-ui-scale));
    height: calc(18px * var(--pv-ui-scale));
    border-radius: calc(4px * var(--pv-ui-scale));
    border: 1px solid var(--wp--preset--color--gray-03);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--wp--preset--color--white);
    transition: background 0.15s, border-color 0.15s;
}

.pv-remember-label input:checked ~ .pv-remember-box {
    background: var(--wp--preset--color--primary-blue);
    border-color: var(--wp--preset--color--primary-blue);
}

.pv-remember-box svg {
    display: none;
}

.pv-remember-label input:checked ~ .pv-remember-box svg {
    display: block;
}

/* --------------------------------------------------------------------------
   Submit button
   -------------------------------------------------------------------------- */

.pv-meter-submit {
    margin-top: 0;
}

.pv-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: calc(6px * var(--pv-ui-scale));
    background: var(--wp--preset--color--primary-blue);
    color: var(--wp--preset--color--white);
    border: none;
    border-radius: calc(100px * var(--pv-ui-scale));
    padding: calc(16px * var(--pv-ui-scale)) calc(28px * var(--pv-ui-scale));
    font-family: var(--wp--preset--font-family--inter);
    font-size: calc(16px * var(--pv-ui-scale));
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
    appearance: none;
    -webkit-appearance: none;
}

.pv-submit-btn:hover {
    background-color: #0057d4;
}

.pv-submit-btn:active {
    transform: scale(0.97);
}

.pv-submit-btn:focus-visible {
    outline: 2px solid var(--wp--preset--color--brand-01-dark);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Map panel (right column)
   -------------------------------------------------------------------------- */

.meter-map-panel {
    background: var(--wp--preset--color--white);
    border-radius: calc(24px * var(--pv-ui-scale));
    padding: calc(24px * var(--pv-ui-scale));
    box-shadow: 0 calc(2px * var(--pv-ui-scale)) calc(16px * var(--pv-ui-scale)) rgba(16, 47, 93, 0.07);
    display: flex;
    flex-direction: column;
    gap: calc(16px * var(--pv-ui-scale));
    flex: 1;
}

.meter-map-panel__map {
    flex: 1;
    width: 100%;
    min-height: calc(420px * var(--pv-ui-scale));
    border-radius: calc(12px * var(--pv-ui-scale));
    overflow: hidden;
    background: #eee;
}

.meter-map-panel__header {
    display: flex;
    flex-direction: column;
    gap: calc(4px * var(--pv-ui-scale));
}

.meter-map-panel__title {
    font-family: var(--wp--preset--font-family--inter);
    font-weight: 600;
    font-size: calc(14px * var(--pv-ui-scale));
    letter-spacing: calc(1.4px * var(--pv-ui-scale));
    text-transform: uppercase;
    color: var(--wp--preset--color--brand-01-dark);
    line-height: 1.5;
    margin: 0;
}

.meter-map-panel__desc {
    font-family: var(--wp--preset--font-family--inter);
    font-weight: 400;
    font-size: calc(14px * var(--pv-ui-scale));
    color: var(--wp--preset--color--gray-03);
    line-height: 1.5;
    margin: 0;
}


/* Override plugin default map height inside our block */
.meter-block .cf7-address-map {
    height: 100%;
    min-height: calc(420px * var(--pv-ui-scale));
}

/* Override plugin wrapper flex inside our block — keep stretch so map panel matches form height */
.meter-block .cf7-map-wrapper {
    gap: calc(30px * var(--pv-ui-scale));
    align-items: stretch;
}

/* Ensure the map column is also a flex container so meter-map-panel can fill it */
.meter-block .cf7-map-col {
    display: flex;
    flex-direction: column;
}

/* Plugin dropdown inside our form */
.meter-block .cf7-gam-dropdown {
    border-radius: 0 0 calc(12px * var(--pv-ui-scale)) calc(12px * var(--pv-ui-scale));
    border-color: var(--wp--preset--color--gray-02);
    box-shadow: 0 calc(4px * var(--pv-ui-scale)) calc(12px * var(--pv-ui-scale)) rgba(16, 47, 93, 0.1);
}

.meter-block .cf7-gam-dropdown-item {
    padding: calc(12px * var(--pv-ui-scale)) calc(16px * var(--pv-ui-scale));
    font-family: var(--wp--preset--font-family--inter);
    font-size: calc(14px * var(--pv-ui-scale));
    color: var(--wp--preset--color--brand-01-dark);
}

.meter-block .cf7-gam-dropdown-item:hover,
.meter-block .cf7-gam-dropdown-item--active {
    background: var(--wp--preset--color--brand-02-light);
}

/* --------------------------------------------------------------------------
   Info cards (same as before)
   -------------------------------------------------------------------------- */

.meter-cards-row {
    display: flex;
    gap: calc(20px * var(--pv-ui-scale));
}

.meter-info-card {
    background: var(--wp--preset--color--white);
    border-radius: calc(24px * var(--pv-ui-scale));
    padding: calc(32px * var(--pv-ui-scale));
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: calc(12px * var(--pv-ui-scale));
}

.meter-info-card--contact {
    justify-content: flex-start;
}

.meter-icon-circle {
    width: calc(57px * var(--pv-ui-scale));
    height: calc(57px * var(--pv-ui-scale));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.meter-icon-circle--purple {
    background: var(--wp--preset--color--brand-02-light);
}

.meter-icon-circle--red {
    background: var(--paidevesi-red-light);
}

.meter-card-label {
    font-family: var(--wp--preset--font-family--inter);
    font-size: calc(14px * var(--pv-ui-scale));
    font-weight: 600;
    letter-spacing: calc(1.4px * var(--pv-ui-scale));
    text-transform: uppercase;
    color: var(--wp--preset--color--gray-03);
    line-height: 1.5;
}

.meter-card-title {
    font-family: var(--wp--preset--font-family--plus-jakarta-sans);
    font-size: calc(22px * var(--pv-ui-scale));
    font-weight: 700;
    color: var(--wp--preset--color--brand-01-dark);
    letter-spacing: calc(-0.66px * var(--pv-ui-scale));
    line-height: 1.1;
    margin: 0;
}

.meter-card-title--link {
    text-decoration: none;
    transition: color 0.2s ease;
}

.meter-card-title--link:hover {
    color: var(--wp--preset--color--primary-blue);
}

.meter-card-sub {
    font-family: var(--wp--preset--font-family--inter);
    font-size: calc(16px * var(--pv-ui-scale));
    color: var(--wp--preset--color--gray-03);
    line-height: 1.5;
    margin: 0;
}

.meter-card-link {
    display: inline-flex;
    align-items: center;
    gap: calc(4px * var(--pv-ui-scale));
    font-family: var(--wp--preset--font-family--inter);
    font-size: calc(16px * var(--pv-ui-scale));
    font-weight: 600;
    color: var(--wp--preset--color--primary-blue);
    text-decoration: none;
    margin-top: calc(4px * var(--pv-ui-scale));
    transition: opacity 0.2s ease;
}

.meter-card-link:hover {
    opacity: 0.8;
}

.meter-card-link svg {
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Focus states
   -------------------------------------------------------------------------- */

.meter-breadcrumb__link:focus-visible,
.meter-card-link:focus-visible,
.meter-card-title--link:focus-visible {
    outline: 2px solid var(--wp--preset--color--primary-blue);
    outline-offset: 2px;
    border-radius: calc(4px * var(--pv-ui-scale));
}

/* --------------------------------------------------------------------------
   Success message
   -------------------------------------------------------------------------- */

.pv-meter-success {
    display: none;
    background: #e8f5e9;
    border-radius: calc(12px * var(--pv-ui-scale));
    padding: calc(16px * var(--pv-ui-scale)) calc(20px * var(--pv-ui-scale));
    font-family: var(--wp--preset--font-family--inter);
    font-size: calc(16px * var(--pv-ui-scale));
    color: #2e7d32;
    font-weight: 600;
    margin-top: calc(16px * var(--pv-ui-scale));
}

.pv-meter-success--visible {
    display: block;
}

/* --------------------------------------------------------------------------
   Responsive — Tablet
   -------------------------------------------------------------------------- */

@media (max-width: 960px) {
    .meter-block {
        padding: calc(48px * var(--pv-ui-scale)) calc(24px * var(--pv-ui-scale)) calc(80px * var(--pv-ui-scale));
    }

    .meter-layout {
        flex-direction: column;
        gap: calc(24px * var(--pv-ui-scale));
    }

    .meter-layout__map {
        flex: none;
        width: 100%;
        position: static;
    }

    .meter-map-panel__map {
        min-height: calc(320px * var(--pv-ui-scale));
    }

    .meter-block .cf7-address-map {
        min-height: calc(320px * var(--pv-ui-scale));
    }
}

/* --------------------------------------------------------------------------
   Responsive — Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 700px) {
    .meter-block {
        padding: calc(32px * var(--pv-ui-scale)) calc(16px * var(--pv-ui-scale)) calc(64px * var(--pv-ui-scale));
    }

    .meter-hero__title {
        font-size: calc(34px * var(--pv-ui-scale));
    }

    .meter-form-card {
        padding: calc(24px * var(--pv-ui-scale)) calc(16px * var(--pv-ui-scale));
    }

    .meter-cards-row {
        flex-direction: column;
    }

    .pv-meter-section__header {
        flex-direction: column;
    }

    .pv-meter-buttons {
        flex-direction: column;
        width: 100%;
    }

    .pv-meter-btn {
        justify-content: center;
    }
}

@media (max-width: 640px) {
    .meter-block {
        /* Match content-banner top spacing above breadcrumb */
        padding-top: calc(48px * var(--pv-ui-scale));
    }
}

@media (max-width: 400px) {
    .meter-hero__title {
        font-size: calc(28px * var(--pv-ui-scale));
    }
}