/*
 * Basic styles for the Elementor Checklist Form widget.
 *
 * These styles provide sensible defaults for the checklist list, name input
 * and submit button. Site owners can override and extend these rules via
 * Elementor’s style controls or custom CSS. Use of classes scoped to
 * `.ecf-` prefix helps avoid conflicts with other plugins.
 */

.ecf-form {
    display: block;
    width: 100%;
    /*
     * Do not set custom property defaults here; they will be inherited from the
     * widget wrapper. Fallback values for each variable are defined where
     * they are used (see below) so that user‑defined settings can properly
     * override them via Elementor's style controls.
     */
}

.ecf-checklist-items {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}

/* Checklist item rows are flex containers, with the label on the left and
 * the checkbox aligned to the far right. A bottom border is used to
 * separate rows, mimicking lined paper. Padding on the top and bottom of
 * each row is adjustable via Elementor’s style controls. */
/* Each list item has a bottom border and padding. The flex layout is moved
 * into a child container (.ecf-item-row) to ensure descriptions do not
 * disrupt alignment of the checkbox. */
.ecf-checklist-item {
    /* Separate border properties so Elementor style controls can override colour and thickness individually. */
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #ccc;
    /* Default vertical padding; can be adjusted in the widget settings. */
    padding: 8px 0;
}

/* The row containing the label and checkbox is flex; it keeps the checkbox
 * fixed to the right and the label grows to fill the available space. */
/* Each checklist row wraps the checkbox input and its label. We do not use flex
 * here because the layout is handled by absolutely positioned pseudo‑elements
 * on the label itself. */
.ecf-item-row {
    position: relative;
}

/* The label inside the item row should fill the available width. Margin is
 * reset to avoid unwanted spacing. */
.ecf-checkbox-label {
    margin: 0;
}

/*
 * Hide the native checkbox and use the label pseudo‑elements to draw the
 * custom checkbox and tick. The input remains in the DOM for accessibility
 * but is visually hidden and inert to pointer events.
 */
.ecf-checkbox-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

/* The label contains both the text and the custom checkbox. Padding on the
 * right reserves space for the box. Position: relative allows the pseudo
 * elements to be absolutely positioned relative to the label. */
.ecf-checkbox-label {
    display: block;
    position: relative;
    /* Reserve space on the right for the custom checkbox */
    padding-right: calc(var(--checkbox-size, 20px) + 10px);
    cursor: pointer;
}

/* The custom checkbox box */
.ecf-checkbox-label::before {
    content: '';
    position: absolute;
    top: 50%;
    /* Align to the right of the label */
    right: 0;
    transform: translateY(-50%);
    width: var(--checkbox-size, 20px);
    height: var(--checkbox-size, 20px);
    border: 2px solid var(--checkbox-color, #0073aa);
    border-radius: var(--checkbox-radius, 4px);
    background-color: transparent;
    box-sizing: border-box;
}

/* When the checkbox is checked, fill the box */
.ecf-checkbox-input:checked + .ecf-checkbox-label::before {
    background-color: var(--checkbox-color, #0073aa);
}

/* Draw the tick mark using a second pseudo element on the label when checked */
.ecf-checkbox-input:checked + .ecf-checkbox-label::after {
    /* Use a unicode check mark instead of border lines for the tick */
    content: '\2713';
    color: var(--checkbox-tick-color, #fff);
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    /* Scale the tick relative to the checkbox size. Use 80% of the box height by default. */
    font-size: calc(var(--checkbox-size, 20px) * 0.8);
    line-height: 1;
    /* Shift the tick slightly left inside the filled box */
    margin-right: calc(var(--checkbox-size, 20px) / 5);
}

.ecf-name-field {
    margin-bottom: 20px;
}

.ecf-name-field label {
    display: block;
    margin-bottom: 5px;
}

.ecf-name-field input[type="text"] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 3px;
    box-sizing: border-box;
}

/* Email field styles mimic the name field */

/* Email field styling mirrors the name field, providing consistent spacing and appearance. */
.ecf-email-field {
    margin-bottom: 20px;
}

.ecf-email-field label {
    display: block;
    margin-bottom: 5px;
}

.ecf-email-field input[type="email"] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 3px;
    box-sizing: border-box;
}

/* Style for optional item descriptions */
.ecf-item-description {
    font-size: 0.9em;
    color: #666;
    margin-top: 4px;
}

.ecf-submit-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #0073aa;
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.ecf-submit-button:hover {
    background-color: #006799;
}