.df-form-wrap {
    /* No max-width here — the Opportunity Grid needs whatever width its
       container actually has. Every other field type already constrains
       its own inputs directly (see max-width on text/email/etc. below),
       so removing this outer cap doesn't make ordinary fields balloon. */
    width: 100%;
}

.df-notice {
    padding: 12px 16px;
    border-radius: 4px;
    margin-bottom: 16px;
    font-size: 15px;
}
.df-notice--success { background: #e6f4ea; border: 1px solid #8bc79a; color: #1a6a26; }
.df-notice--error   { background: #fdecea; border: 1px solid #e0938c; color: #a12722; }

.df-field {
    margin-bottom: 18px;
}

.df-field-label,
.df-field-label + .df-field-desc {
    display: block;
}

.df-field-label {
    font-weight: 600;
    margin-bottom: 4px;
}

.df-required {
    color: #b32d2e;
}

.df-field-desc {
    color: #555;
    font-size: 0.9em;
    margin: 2px 0 6px;
}

.df-field input[type="text"],
.df-field input[type="email"],
.df-field input[type="tel"],
.df-field input[type="number"],
.df-field input[type="date"],
.df-field textarea,
.df-field select {
    width: 100%;
    max-width: 420px;
    padding: 8px 10px;
    font-size: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.df-field textarea {
    max-width: 100%;
    min-height: 90px;
}

.df-checkbox-label,
.df-radio-label {
    display: block;
    font-weight: normal;
    margin-bottom: 6px;
    cursor: pointer;
}

.df-checkbox-group,
.df-radio-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.df-invalid {
    border-color: #b32d2e !important;
    outline: 2px solid rgba(179, 45, 46, 0.25);
}

/* checkbox_group / opportunity_grid have no single input to mark .df-invalid
   on, so a failed required check instead marks the whole .df-field wrapper
   and this outlines the group/timeline container itself. */
.df-field-invalid > .df-field-label {
    color: #b32d2e;
}
.df-field-invalid .df-checkbox-group,
.df-field-invalid .df-og-timeline {
    outline: 2px solid #b32d2e;
    outline-offset: 3px;
    border-radius: 4px;
}

.df-field-logically-hidden {
    display: none;
}

/* ---- Groups ---- */
.df-group--top {
    margin: 28px 0;
}

.df-group-heading {
    margin: 0 0 10px;
}

.df-group--nested {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 14px 16px;
    margin-bottom: 14px;
}

.df-group--nested legend {
    font-weight: 600;
    padding: 0 6px;
}

.df-field-empty {
    color: #888;
}

/* ---- Repeat-group instances ---- */
.df-group-instance {
    position: relative;
    padding: 12px 14px;
    border: 1px dashed #ccc;
    border-radius: 4px;
    margin-bottom: 10px;
}

.df-instance-hidden {
    display: none;
}

.df-instance-label {
    margin: 0 0 8px;
}

.df-remove-instance {
    position: absolute;
    top: 8px;
    right: 10px;
    background: none;
    border: none;
    color: #b32d2e;
    cursor: pointer;
    font-size: 13px;
}
.df-remove-instance::before {
    content: '\2715';
    margin-right: 4px;
}

/* ---- Opportunity grid: proportional timeline, one section per date ---- */
.df-og-date-group {
    margin: 18px 0 28px;
}
.df-og-date-heading {
    margin: 0 0 8px;
    font-size: 1.05em;
    font-weight: normal;
    text-decoration: underline;
}

.df-og-timeline {
    display: grid;
    grid-auto-rows: minmax(40px, auto);
    border: 1px solid #e2e4e7;
    border-radius: 4px;
    overflow: hidden;
    overflow-x: auto;
    column-gap: 2px;
}

.df-og-task-label {
    padding: 8px 10px;
    border-right: 1px solid #d2d5d8;
    /* font-size: 14px; */
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    background: #fff;
}

/* Tooltip mode: an (i) button that opens a floating panel — position:fixed,
   placed via JS from the button's getBoundingClientRect() (df-form.js:
   positionOgTooltip) rather than CSS-anchored, because .df-og-timeline
   clips overflow-y and a plain position:absolute popup would get cut off
   at the row's edge. Fixed positioning escapes that clipping (its
   containing block is the viewport, not the timeline), so the panel truly
   floats above the page instead of pushing any other row/column around.
   Opens on hover/focus as a preview (desktop bonus); a click "pins" it
   open so touch devices — which have no hover — get a persistent panel
   dismissed via its close button, an outside click, Escape, or scroll. */
.df-og-tooltip-wrap {
    display: inline-flex;
    align-items: center;
}
.df-og-info-btn {
    width: 16px;
    height: 16px;
    line-height: 14px;
    margin-left: 5px;
    padding: 0;
    border: 1px solid #8c8f94;
    border-radius: 50%;
    background: #f0f0f1;
    color: #50575e;
    font-size: 11px;
    font-style: italic;
    font-family: Georgia, 'Times New Roman', serif;
    text-align: center;
    cursor: pointer;
    flex-shrink: 0;
}
.df-og-info-btn:hover,
.df-og-info-btn[aria-expanded="true"] {
    background: #2271b1;
    border-color: #2271b1;
    color: #fff;
}
.df-og-tooltip {
    display: none;
    position: fixed;
    z-index: 100000;
    max-width: 260px;
    padding: 10px 26px 10px 12px;
    background: #32373c;
    color: #fff;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.45;
    box-shadow: 0 4px 16px rgba(0,0,0,.25);
}
.df-og-tooltip-wrap.is-open .df-og-tooltip {
    display: block;
}
.df-og-tooltip-close {
    position: absolute;
    top: 2px;
    right: 3px;
    padding: 2px 4px;
    border: none;
    background: none;
    color: #fff;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    opacity: .75;
}
.df-og-tooltip-close:hover {
    opacity: 1;
}

/* "above"/"below" description-display mode — a full-width note row sharing
   the task's own grid rows, distinct from the tooltip mode (rendered
   inline within the label cell instead, see .df-og-tooltip above). */
.df-og-description {
    padding: 4px 8px;
    font-size: 12px;
    font-style: italic;
    color: #666;
    background: #fff;
    display: flex;
    align-items: center;
}

.df-og-slot-block {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    background: var( --df-grid-tint, #eef6fb ) !important;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
}
.df-og-slot-block:hover {
    filter: brightness(0.95);
}
.df-og-slot-block input[type="checkbox"] {
    flex-shrink: 0;
}
.df-og-slot-time {
    /* font-size: 12px; */
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Full-width horizontal line under every row, including columns with no
   slot block in them — see the comment in templates/form.php next to where
   this is rendered (last child of each row, on top, so it shows through). */
.df-og-row-divider {
    border-bottom: 1px solid #e2e4e7;
    pointer-events: none;
}

/* Ineligible: JS toggles this class on a task's label AND every one of its
   slot blocks together (matched via the shared data-choice-id attribute). */
.df-og-task-label.df-og-ineligible,
.df-og-slot-block.df-og-ineligible {
    color: #999;
    background: #f7f7f7 !important;
    cursor: not-allowed;
}
.df-og-reason {
    color: #888;
    font-size: 0.85em;
    font-style: italic;
}

/* A dense hour-proportional grid doesn't fit a narrow screen — fall back to
   a plain stacked list of tasks and their shift checkboxes. */
@media (max-width: 640px) {
    .df-og-timeline {
        display: block;
        border: none;
        overflow-x: visible;
    }
    .df-og-task-label {
        border: none;
        padding: 10px 0 2px;
        font-weight: 600;
    }
    .df-og-slot-block {
        display: inline-flex;
        border: 1px solid #dcdcde;
        border-radius: 4px;
        margin: 3px 6px 3px 0;
        white-space: normal;
    }
    .df-og-description {
        padding: 0 0 4px;
        display: block;
    }
}

.df-submit-row {
    margin-top: 20px;
}

/* Styling is admin-configurable per form (see the "Button & Grid Styling"
   settings), passed in as CSS custom properties on .df-form-wrap. Each
   property below falls back to a sensible plugin default when the admin
   hasn't set an override. The properties an admin can actually control are
   marked !important — scoped narrowly to this one class, this guarantees
   an explicit choice actually renders instead of silently losing to a
   theme or page builder's own (often !important-laden) global button reset. */
.df-submit-btn {
    box-sizing: border-box;
    padding: 10px 24px;
    font-size: 16px;
    background: var( --df-btn-bg, #2271b1 ) !important;
    color: var( --df-btn-color, #fff ) !important;
    border-width: var( --df-btn-border-width, 1px ) !important;
    border-style: solid !important;
    border-color: var( --df-btn-border-color, transparent ) !important;
    border-radius: var( --df-btn-radius, 4px ) !important;
    cursor: pointer;
}
.df-submit-btn:hover {
    /* Matches Driving Donations' .dd-btn:hover exactly — opacity (not a
       brightness filter) so the button reads as lighter on hover regardless
       of whatever color is configured, the same way it does in DD. */
    opacity: 0.85;
}