.pdct-cart-hire-form {
    max-width: 900px;
    margin: 0 auto;
    font-family: 'Plaak-56ExpandedBlack', serif;
}

.pdct-cart-hire-form .pdct-form-row {
    display: flex;
    gap: 40px;
    margin-bottom: 28px;
}

.pdct-cart-hire-form .pdct-form-row-single {
    display: block;
}

.pdct-cart-hire-form .pdct-form-field {
    flex: 1;
}

/* Real <label> elements stay in the DOM for accessibility (screen readers,
   autofill) but are visually hidden — the placeholder text carries the
   visible label, matching the original GF layout's tighter spacing. */
.pdct-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Every real field carries .pdct-field-input explicitly — deliberately
   NOT a tag/type selector like input[type="number"], because flatpickr
   inserts its calendar/time popup as a sibling *inside* .pdct-form-field,
   and a type-based selector would also style flatpickr's internal year/
   hour inputs, breaking the popup's own layout. Keep it scoped to the
   class, not the tag, going forward. */
.pdct-field-input {
    width: 100%;
    border: none;
    border-bottom: 1px solid #000;
    padding: 8px 4px;
    text-align: center;
    font-family: inherit;
    font-size: 14px;
    line-height: 40px;
    height: 40px;
    font-weight: 400;
    background: transparent;
}

textarea.pdct-field-input {
    height: auto;
    line-height: normal;
    text-align: left;
    min-height: 100px;
    resize: vertical;
}

.pdct-field-input::placeholder {
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: normal;
    text-align: center;
    color: #000;
    opacity: 1;
}

textarea.pdct-field-input::placeholder {
    text-align: left; /* centering a multi-line placeholder looks broken — keep Notes left-aligned */
}

.pdct-field-input:focus {
    outline: none;
    border-bottom: 2px solid #000;
}

/* flatpickr theming — plain and monochrome to match the rest of the form
   rather than its default blue-accented calendar. Deliberately targets
   flatpickr's own classes only, never a bare tag selector.

   The !important overrides below exist because Pidapipo's theme applies
   a global, site-wide input reset (width:100%, height:40px, black
   border-bottom, transparent background — the same underline-input look
   used everywhere on the site) with no scoping of its own. That rule
   reaches flatpickr's internal year/hour <input> elements no matter how
   tightly OUR selectors are scoped, since the leak is coming from the
   theme, not from us. Forcing sane values back is the only reliable fix
   short of the theme scoping its own reset properly. */
.flatpickr-calendar {
    font-family: inherit;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    background: #fff !important;
}
.flatpickr-calendar input {
    width: auto !important;
    height: auto !important;
    line-height: normal !important;
    border: none !important;
    border-bottom: none !important;
    background: transparent !important;
    text-align: left !important;
    padding: 0 !important;
}
.flatpickr-current-month {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px;
}
.flatpickr-current-month input.cur-year {
    width: 4em !important;
    font-size: inherit !important;
    display: inline-block !important;
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background: #000;
    border-color: #000;
}
.flatpickr-day:hover {
    background: #eee;
}
.flatpickr-time input:hover,
.flatpickr-time .flatpickr-am-pm:hover {
    background: #eee;
}

.pdct-cart-hire-form .pdct-hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.pdct-cart-hire-form .pdct-submit {
    display: block;
    margin: 30px auto 0;
    padding: 14px 48px;
    background: #fff;
    border: 1px solid #000;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.05em;
    cursor: pointer;
}

.pdct-cart-hire-form .pdct-submit:hover {
    background: #000;
    color: #fff;
}

.pdct-form-success {
    background: #eafaf0;
    border: 1px solid #34a853;
    padding: 12px 16px;
    margin-bottom: 24px;
}

.pdct-form-error {
    background: #fdecea;
    border: 1px solid #d63638;
    padding: 12px 16px;
    margin-bottom: 24px;
}

@media (max-width: 640px) {
    .pdct-cart-hire-form .pdct-form-row {
        flex-direction: column;
        gap: 24px;
    }
}