/**
 * Standalone EV charging reservation form — palette + typography ported
 * 1:1 from hotelteledom.local/nabijanie-elektromobilu/ form-card. Keeps
 * the form embeddable on any page or iframe without pulling in the
 * multi-product cart layout machinery.
 *
 * Reference variables (paper/ink/green/sans/r-*) match the theme's
 * design-tokens so the form blends seamlessly into the partner site.
 */

.teledom-ev-form-wrap {
    /* Brand tokens — mirror hotelteledom theme so EV form drops in
     * looking native. Scoped to .teledom-ev-form-wrap to avoid
     * polluting the parent doc's :root.  */
    --ev-paper: #f7f4ed;          /* cream background (theme --paper) */
    --ev-paper-2: #efeae0;        /* warmer cream for accent surfaces */
    --ev-card: #ffffff;           /* inner cards / fieldsets */
    --ev-ink: #292b2c;            /* primary text */
    --ev-ink-2: #232930;          /* darker headings */
    --ev-muted: #8a8580;          /* warm-grey muted text */
    --ev-muted-light: #5a5550;
    --ev-line: rgba(0, 0, 0, 0.08);

    --ev-primary: #12894a;        /* brand green (theme --green) */
    --ev-primary-bright: #1ba858; /* hover (--green-bright) */
    --ev-primary-deep: #0d6a39;   /* active / pressed (--green-deep) */
    --ev-primary-soft: rgba(18, 137, 74, 0.12);

    --ev-danger: #b91c1c;
    --ev-success: #15803d;

    --ev-r-sm: 6px;
    --ev-r: 14px;
    --ev-r-md: 18px;
    --ev-r-lg: 24px;

    --ev-shadow-soft: 0 20px 50px -25px rgba(0, 0, 0, 0.18);
    --ev-shadow-hover: 0 24px 60px -22px rgba(18, 137, 74, 0.28);
    --ev-ease: cubic-bezier(0.22, 1, 0.36, 1);

    --ev-sans: 'Inter', 'Raleway', -apple-system, BlinkMacSystemFont,
               'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    --ev-display: 'Fraunces', 'Raleway', Georgia, serif;

    /* The whole wrap (cream background + padding + form-card) caps at
     * 980px and centers — matches hotelteledom's form-card geometry.
     * Background stays cream-coloured only behind the form area, not
     * edge-to-edge on the partner page. */
    max-width: 980px;
    margin: 0 auto;
    background: var(--ev-paper);
    padding: 32px 16px;
    color: var(--ev-ink);
    font-family: var(--ev-sans);
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    box-sizing: border-box;
}

.teledom-ev-form {
    /* Wrap already caps at 980px — let the form fill its container so
     * the inner card aligns flush with the wrap's padding. */
    max-width: 100%;
    margin: 0 auto;
}

.teledom-ev-card {
    background: var(--ev-card);
    border: 1px solid var(--ev-line);
    border-radius: var(--ev-r-lg);
    box-shadow: var(--ev-shadow-soft);
    overflow: hidden;
}

/* ───────────────────────────────────────────────────────────────────
   Header — product name + headline price
   Cream gradient that subtly hints at the brand green
   ─────────────────────────────────────────────────────────────────── */
.teledom-ev-card__header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 28px 32px;
    background: linear-gradient(135deg, var(--ev-paper) 0%, var(--ev-paper-2) 100%);
    border-bottom: 1px solid var(--ev-line);
}

.teledom-ev-card__header > .dashicons {
    color: var(--ev-primary);
    font-size: 36px;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}

.teledom-ev-card__header h2 {
    margin: 0 0 6px;
    font-family: var(--ev-display);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ev-ink-2);
}

.teledom-ev-card__price {
    margin: 0;
    font-size: 16px;
    color: var(--ev-ink);
    font-weight: 600;
}

.teledom-ev-vat-note {
    font-weight: 400;
    color: var(--ev-muted);
    font-size: 13px;
    margin-left: 4px;
}

.teledom-ev-price-bez {
    display: inline-block;
    margin-left: 10px;
    padding: 2px 10px;
    border-radius: 14px;
    background: var(--ev-primary-soft);
    color: var(--ev-primary-deep);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* "zadarmo" pill — shown in the header when product price ≤ 0. */
.teledom-ev-free-tag {
    display: inline-block;
    padding: 5px 16px;
    background: var(--ev-primary);
    color: #fff;
    font-weight: 700;
    border-radius: 16px;
    font-size: 15px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: 0 6px 16px -6px rgba(18, 137, 74, 0.5);
}

/* Long description block */
.teledom-ev-card__description {
    padding: 18px 32px;
    color: var(--ev-muted-light);
    font-size: 14px;
    background: #fcfbf8;
    border-bottom: 1px solid var(--ev-line);
    line-height: 1.6;
}

/* ───────────────────────────────────────────────────────────────────
   Main grid (fieldsets + summary + submit)
   ─────────────────────────────────────────────────────────────────── */
.teledom-ev-grid {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 32px;
}

/* Fieldset blocks */
.teledom-ev-fieldset {
    margin: 0;
    padding: 18px 20px;
    border: 1px solid var(--ev-line);
    border-radius: var(--ev-r);
    background: #fff;
    transition: border-color 0.25s var(--ev-ease), box-shadow 0.25s var(--ev-ease);
}

.teledom-ev-fieldset:focus-within {
    border-color: var(--ev-primary);
    box-shadow: 0 0 0 4px var(--ev-primary-soft);
}

.teledom-ev-fieldset legend {
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ev-muted);
}

.teledom-ev-fieldset legend .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
    color: var(--ev-primary);
}

.teledom-ev-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
}

.teledom-ev-field label {
    font-weight: 500;
    font-size: 13px;
    color: var(--ev-ink);
}

.teledom-ev-field label .required {
    color: var(--ev-danger);
    font-weight: 700;
    margin-left: 2px;
}

.teledom-ev-field input[type="date"],
.teledom-ev-field input[type="time"],
.teledom-ev-field input[type="text"],
.teledom-ev-field input[type="email"],
.teledom-ev-field input[type="tel"],
.teledom-ev-field input[type="number"],
.teledom-ev-field select,
.teledom-ev-field textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #d6d3cc;
    border-radius: var(--ev-r-sm);
    font-size: 15px;
    color: var(--ev-ink);
    background: #fff;
    font-family: inherit;
    transition: border-color 0.2s var(--ev-ease), box-shadow 0.2s var(--ev-ease);
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

.teledom-ev-field select {
    /* Custom chevron in brand green */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1L6 6L11 1' stroke='%2312894a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

.teledom-ev-field input:focus,
.teledom-ev-field select:focus,
.teledom-ev-field textarea:focus {
    outline: 0;
    border-color: var(--ev-primary);
    box-shadow: 0 0 0 4px var(--ev-primary-soft);
}

.teledom-ev-field input::placeholder,
.teledom-ev-field textarea::placeholder {
    color: #b5b0a8;
}

/* Booked time slots — mirrors main form's #popup-time-* .booked-slot
 * styling (public.css). Red label + soft-red background so the user
 * instantly sees which times are already taken. Applied by JS in
 * refreshTimeOptions() when capacity for that option is ≤ 0. */
.teledom-ev-field select.ev-time-start option.booked-slot,
.teledom-ev-field select.ev-time-end option.booked-slot,
.teledom-ev-field select.ev-time-start option.booked-slot:disabled,
.teledom-ev-field select.ev-time-end option.booked-slot:disabled {
    color: var(--ev-danger);
    background-color: #ffeaea;
}

.teledom-ev-field select.ev-time-start option:disabled,
.teledom-ev-field select.ev-time-end option:disabled {
    color: #999;
}

.teledom-ev-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 6px;
}

.teledom-ev-hint-static {
    margin: 12px 0 0;
    font-size: 12px;
    color: var(--ev-muted);
    font-style: italic;
}

/* ───────────────────────────────────────────────────────────────────
   The booking calendar widget (.popup-mini-calendar +
   .popup-cal-days + .cal-legend) inherits from the main form's
   public.css. Only summary block needs theming so the visual
   chrome around the calendar feels native to the EV palette.
   ─────────────────────────────────────────────────────────────────── */

/* Live price summary block — between time picker and remaining fields */
.teledom-ev-summary {
    padding: 18px 20px;
    border: 1px solid var(--ev-line);
    border-radius: var(--ev-r);
    background: linear-gradient(135deg, #ffffff 0%, var(--ev-paper) 100%);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.teledom-ev-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 14px;
}

.teledom-ev-summary-row .label {
    color: var(--ev-muted);
}

.teledom-ev-summary-row strong {
    color: var(--ev-ink);
    font-weight: 600;
}

.teledom-ev-summary-total {
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px dashed var(--ev-line);
    font-size: 16px;
}

.teledom-ev-summary-total .label {
    color: var(--ev-ink-2);
    font-weight: 600;
}

.teledom-ev-summary-total strong {
    color: var(--ev-primary-deep);
    font-size: 20px;
    font-family: var(--ev-display);
    letter-spacing: -0.01em;
}

.teledom-ev-summary-subtle {
    font-size: 12px;
}

.teledom-ev-summary-subtle .label,
.teledom-ev-summary-subtle strong {
    color: var(--ev-muted);
    font-weight: 400;
}

/* GDPR consent */
.teledom-ev-consent {
    padding: 14px 16px;
    background: var(--ev-paper);
    border: 1px solid var(--ev-line);
    border-radius: var(--ev-r);
}

.teledom-ev-consent label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
    color: var(--ev-ink);
    cursor: pointer;
    line-height: 1.5;
}

.teledom-ev-consent input[type="checkbox"] {
    margin-top: 3px;
    flex-shrink: 0;
    accent-color: var(--ev-primary);
    width: 16px;
    height: 16px;
}

/* GDPR link — brand green, underlined on hover only for a clean look */
.teledom-ev-consent a {
    color: var(--ev-primary-deep);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    font-weight: 500;
    transition: color 0.2s var(--ev-ease);
}

.teledom-ev-consent a:hover,
.teledom-ev-consent a:focus {
    color: var(--ev-primary-bright);
}

.teledom-ev-consent .required {
    color: var(--ev-danger);
    font-weight: 700;
    margin-left: 2px;
}

/* Status / error / success */
.teledom-ev-status {
    padding: 14px 16px;
    border-radius: var(--ev-r);
    font-size: 14px;
    font-weight: 500;
    border: 1px solid transparent;
}

.teledom-ev-status[data-type="info"] {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1e40af;
}

.teledom-ev-status[data-type="success"] {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: var(--ev-success);
}

.teledom-ev-status[data-type="error"] {
    background: #fef2f2;
    border-color: #fecaca;
    color: var(--ev-danger);
}

/* ───────────────────────────────────────────────────────────────────
   Submit button — matches theme's primary CTA styling
   ─────────────────────────────────────────────────────────────────── */
.teledom-ev-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 28px;
    background: var(--ev-primary);
    color: #fff;
    border: 0;
    border-radius: 999px;       /* pill shape — matches CTA convention */
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background 0.25s var(--ev-ease),
                transform 0.15s var(--ev-ease),
                box-shadow 0.25s var(--ev-ease);
    box-shadow: 0 12px 28px -14px rgba(18, 137, 74, 0.55);
    text-transform: none;
}

.teledom-ev-submit:hover:not(:disabled) {
    background: var(--ev-primary-bright);
    box-shadow: var(--ev-shadow-hover);
    transform: translateY(-1px);
}

.teledom-ev-submit:active:not(:disabled) {
    background: var(--ev-primary-deep);
    transform: translateY(0);
}

.teledom-ev-submit:disabled,
.teledom-ev-submit.is-loading {
    opacity: 0.6;
    cursor: wait;
    box-shadow: none;
}

.teledom-ev-submit .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
}

.teledom-ev-footer-note {
    margin: 0;
    text-align: center;
    font-size: 13px;
    color: var(--ev-muted);
}

.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ───────────────────────────────────────────────────────────────────
   Responsive — three breakpoints
   ─────────────────────────────────────────────────────────────────── */

/* Tablet (≤ 768px) — tighten paddings, keep two-column field rows */
@media (max-width: 768px) {
    .teledom-ev-form-wrap {
        padding: 24px 12px;
    }
    .teledom-ev-card {
        border-radius: var(--ev-r-md);
    }
    .teledom-ev-card__header {
        padding: 22px 22px;
    }
    .teledom-ev-grid {
        padding: 22px;
        gap: 16px;
    }
    .teledom-ev-fieldset {
        padding: 16px;
    }
}

/* Phone (≤ 540px) — single column, full-width submit, compact header */
@media (max-width: 540px) {
    .teledom-ev-form-wrap {
        padding: 14px 8px;
    }
    .teledom-ev-card {
        /* Slightly smaller radius so the cream edges around the card
         * don't disappear at full-width-minus-tiny-padding. */
        border-radius: var(--ev-r);
    }
    .teledom-ev-card__header {
        padding: 18px 16px;
        gap: 12px;
        flex-wrap: wrap;
    }
    .teledom-ev-card__header > .dashicons {
        font-size: 28px;
        width: 28px;
        height: 28px;
    }
    .teledom-ev-card__header h2 {
        font-size: 18px;
        margin: 0 0 4px;
    }
    .teledom-ev-card__price {
        font-size: 15px;
        width: 100%;     /* push price onto its own line — never overflows */
    }
    /* When product is free, the "ZADARMO" pill drops to a fresh row
     * and aligns left so it's clearly readable next to the price */
    .teledom-ev-free-tag {
        margin-left: 0;
        margin-top: 4px;
        font-size: 13px;
        padding: 4px 12px;
    }
    .teledom-ev-price-bez {
        margin-left: 6px;
        font-size: 11px;
        padding: 2px 8px;
    }

    .teledom-ev-grid {
        padding: 16px;
        gap: 12px;
    }
    .teledom-ev-fieldset {
        padding: 14px;
    }
    .teledom-ev-fieldset legend {
        font-size: 11px;
        letter-spacing: 0.04em;
    }
    .teledom-ev-field {
        gap: 5px;
        margin-top: 8px;
    }
    .teledom-ev-field label {
        font-size: 13px;
    }

    /* Inputs — bump font to 16px so iOS Safari doesn't zoom on focus */
    .teledom-ev-field input[type="date"],
    .teledom-ev-field input[type="time"],
    .teledom-ev-field input[type="text"],
    .teledom-ev-field input[type="email"],
    .teledom-ev-field input[type="tel"],
    .teledom-ev-field input[type="number"],
    .teledom-ev-field select,
    .teledom-ev-field textarea {
        font-size: 16px;
        padding: 11px 12px;
    }

    /* Collapse two-column rows (date + time / first-name + last-name) */
    .teledom-ev-field-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    /* Summary block — slightly compact, total stays prominent */
    .teledom-ev-summary {
        padding: 14px 16px;
    }
    .teledom-ev-summary-row {
        font-size: 13px;
    }
    .teledom-ev-summary-total {
        font-size: 15px;
    }
    .teledom-ev-summary-total strong {
        font-size: 19px;
    }

    /* GDPR consent — bigger checkbox tap target */
    .teledom-ev-consent {
        padding: 12px 14px;
    }
    .teledom-ev-consent input[type="checkbox"] {
        width: 18px;
        height: 18px;
    }
    .teledom-ev-consent label {
        font-size: 13px;
        line-height: 1.45;
    }

    /* Submit — full-width pill on phones, comfortable tap height */
    .teledom-ev-submit {
        width: 100%;
        padding: 15px 20px;
        font-size: 16px;
    }

    /* Calendar (.popup-mini-calendar is shared with main form's popup
     * via public.css). On narrow screens we shrink day cells to fit
     * 7 columns inside the card without horizontal scroll, and give
     * the prev/next chevrons bigger tap targets. */
    .popup-mini-calendar {
        padding: 12px 8px !important;
    }
    .popup-mini-calendar .popup-cal-days {
        gap: 2px !important;
    }
    .popup-mini-calendar .popup-cal-day,
    .popup-mini-calendar .popup-cal-day-name {
        font-size: 13px !important;
        min-height: 36px !important;
        padding: 4px 2px !important;
    }
    .popup-mini-calendar .popup-cal-prev,
    .popup-mini-calendar .popup-cal-next {
        min-width: 36px !important;
        min-height: 36px !important;
    }
    .popup-mini-calendar .popup-cal-month-year {
        font-size: 14px !important;
    }

    /* Status box — full-bleed, smaller text */
    .teledom-ev-status {
        padding: 12px 14px;
        font-size: 13px;
    }

    .teledom-ev-footer-note {
        font-size: 12px;
        line-height: 1.5;
    }

    .teledom-ev-hint-static {
        font-size: 11px;
    }
}

/* Tiny phones (≤ 380px — iPhone SE, older Androids) */
@media (max-width: 380px) {
    .teledom-ev-form-wrap {
        padding: 10px 6px;
    }
    .teledom-ev-card__header {
        padding: 16px 14px;
    }
    .teledom-ev-card__header h2 {
        font-size: 17px;
    }
    .teledom-ev-grid {
        padding: 14px;
        gap: 10px;
    }
    .teledom-ev-fieldset {
        padding: 12px;
    }
    .popup-mini-calendar .popup-cal-day,
    .popup-mini-calendar .popup-cal-day-name {
        font-size: 12px !important;
        min-height: 32px !important;
    }
    .teledom-ev-summary-total strong {
        font-size: 17px;
    }
}

/* ── Unified notification stack under the time picker ────────────────
   Overnight info, station working hours and the live availability status
   share one visual language: slim notification rows with an icon, soft
   tinted background and a thin border. display:flex lives here so jQuery
   .show() (which clears the inline display:none) restores the layout. */
.ev-info-stack {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 10px 0 0;
}

.ev-info-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 11px;
    border-radius: 7px;
    border: 1px solid transparent;
    font-size: 12.5px;
    line-height: 1.45;
}
.ev-info-row svg {
    flex: 0 0 auto;
}
.ev-info-row strong {
    font-weight: 600;
    white-space: nowrap;
}

/* Neutral note — station working hours */
.ev-info-row.is-neutral {
    background: #f8fafc;
    border-color: #e2e8f0;
    color: #64748b;
}
.ev-info-row.is-neutral strong {
    color: #475569;
}

/* Informational — overnight booking crossing midnight */
.ev-info-row.is-info {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1e40af;
}
.ev-info-row.is-info strong {
    color: #1e3a8a;
}
.ev-info-row.is-info .ev-overnight-hint-sub {
    color: #3b82f6;
    font-size: 11.5px;
}

/* Availability status — classes toggled by JS */
.ev-info-row.ev-availability-result.available {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #15803d;
}
.ev-info-row.ev-availability-result.unavailable {
    background: #fef2f2;
    border-color: #fecaca;
    color: #b91c1c;
}
.ev-info-row.ev-availability-result.checking {
    background: #fffbeb;
    border-color: #fde68a;
    color: #b45309;
}
.ev-info-row.ev-availability-result .dashicons {
    flex: 0 0 auto;
    font-size: 16px;
    width: 16px;
    height: 16px;
}