/*
 * LC Custom Forms — Public Stylesheet
 * Mirrors the Gravity Forms sp_kiwi theme used on lightandcomposition.com
 *
 * Key design tokens (from live site visual audit):
 *   Input bg:       #ffffff  (white, with 1px solid #ddd border)
 *   Input text:     #3a3a3a
 *   Label color:    #555555
 *   Accent blue:    #2ea3f2  (checkmarks, focus)
 *   Error red:      #f15555
 *   Required mark:  #f15555
 *   Button style:   filled green — #6c8b28 bg, white text (matches GF sp_kiwi)
 */

/* =====================================================================
   Wrapper
   ===================================================================== */
.lccf-wrapper {
    margin: 30px 0;
    font-family: inherit;
    max-width: 100%;
    box-sizing: border-box;
    --lccf-blue:    #2ea3f2;
    --lccf-green:   #6c8b28;
    --lccf-grey:    #f0f0f0;
    --lccf-input-bg: #ffffff;
    --lccf-input-border: #ddd;
    --lccf-text:    #3a3a3a;
    --lccf-label:   #555555;
    --lccf-error:   #f15555;
}

/* =====================================================================
   Notices
   ===================================================================== */
.lccf-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px;
    border-radius: 2px;
    margin-bottom: 24px;
    font-size: 1em;
    line-height: 1.6;
}

.lccf-notice__icon {
    font-size: 1.3em;
    flex-shrink: 0;
    margin-top: 1px;
}

.lccf-notice--success {
    background: #edf7ed;
    border-left: 4px solid #4caf50;
    color: #2a6b2a;
}

.lccf-notice--error {
    background: #fff7f7;
    border-left: 4px solid var(--lccf-error);
    color: #8a2020;
}

/* =====================================================================
   Form
   ===================================================================== */
.lccf-form {
    width: 100%;
}

.lccf-fields {
    margin-bottom: 24px;
}

/* =====================================================================
   Section Heading — matches GF gsection: large bold dark heading + rule
   ===================================================================== */
.lccf-section {
    margin: 32px 0 20px;
}

.lccf-section__title {
    font-size: 1.5em;
    font-weight: 700;
    color: var(--lccf-text);
    margin: 0 0 8px;
    letter-spacing: 0;
    text-transform: none;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 8px;
}

/* =====================================================================
   Field Rows
   ===================================================================== */
.lccf-field {
    margin-bottom: 1.5em;
}

.lccf-row {
    display: flex;
    gap: 20px;
}

.lccf-row--half .lccf-field {
    flex: 1 1 0;
    min-width: 0;
}

@media (max-width: 640px) {
    .lccf-row--half {
        flex-direction: column;
        gap: 0;
    }
}

/* =====================================================================
   Labels — match .gfield_label color (#858585, not bold)
   ===================================================================== */
.lccf-label {
    display: block;
    margin-bottom: 0.5em;
    font-size: 1em;
    font-weight: 400;
    color: var(--lccf-label);
    line-height: 1.4;
}

.lccf-fieldset {
    border: none;
    margin: 0;
    padding: 0;
    /* Fieldsets have a browser-default min-width:min-content that causes
       horizontal overflow when labels are long — this kills that. */
    min-width: 0;
    width: 100%;
}

.lccf-fieldset > .lccf-label {
    margin-bottom: 0.6em;
}

.lccf-required {
    color: var(--lccf-error);
    margin-left: 2px;
}

/* =====================================================================
   Inputs, Selects, Textareas
   Matches GF sp_kiwi live site: white bg, 1px solid #ddd border
   ===================================================================== */
.lccf-input,
.lccf-form input[type="text"],
.lccf-form input[type="email"],
.lccf-form input[type="url"],
.lccf-form input[type="number"],
.lccf-form input[type="date"],
.lccf-form input[type="tel"],
.lccf-form input[type="password"],
.lccf-form select,
.lccf-form textarea {
    width: 100%;
    padding: 0.75em 1em;
    font-size: 1em;
    color: var(--lccf-text);
    background: var(--lccf-input-bg);
    border: 1px solid var(--lccf-input-border);
    border-radius: 2px;
    box-sizing: border-box;
    line-height: 1.5;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
}

.lccf-form select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23858585' d='M5 6L0 0h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-color: var(--lccf-input-bg);
    padding-right: 36px;
}

.lccf-form textarea {
    resize: vertical;
    min-height: 100px;
}

/* Focus: blue border glow matching GF focus */
.lccf-input:focus,
.lccf-form input:focus,
.lccf-form select:focus,
.lccf-form textarea:focus {
    outline: none;
    border-color: var(--lccf-blue);
    box-shadow: 0 0 0 2px rgba(46, 163, 242, 0.2);
}

/* Placeholder */
.lccf-input::placeholder,
.lccf-form input::placeholder,
.lccf-form textarea::placeholder {
    color: #aaa;
}

/* Error state — white bg + left border like sp_kiwi */
/* =====================================================================
   Conditional Logic — Hidden Fields
   ===================================================================== */
.lccf-field--hidden {
    display: none !important;
}

/* =====================================================================
   Validation Errors
   ===================================================================== */
.lccf-field--invalid .lccf-input,
.lccf-field--invalid input,
.lccf-field--invalid select,
.lccf-field--invalid textarea {
    background-color: #fff7f7;
    border-left: 3px solid var(--lccf-error);
}

/* =====================================================================
   File Upload — styled to resemble GF's dropzone
   ===================================================================== */
.lccf-file-wrap {
    border: 1px dashed #bbb;
    border-radius: 2px;
    background: #fafafa;
    padding: 1.5em 1em;
    text-align: center;
}

.lccf-input--file {
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 0.9em;
    color: var(--lccf-label);
}

.lccf-file-hint {
    display: block;
    font-size: 0.82em;
    color: #999;
    margin-top: 6px;
}

/* =====================================================================
   Checkboxes & Radios
   Custom-styled to match sp_kiwi's CSS-only checkbox approach:
   - Hide native input
   - ::before shows ✓ for checkbox, ✕ for radio
   - Checked state turns accent blue
   ===================================================================== */

/* 2-column grid layout (like GF inline checkbox layout) */
.lccf-choices--inline {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.lccf-choices--inline .lccf-choice {
    margin-right: 0;
}

/* Vertical layout (default) */
.lccf-choices--vertical .lccf-choice {
    display: block;
}

.lccf-choice {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0.4em;
    cursor: pointer;
    position: relative; /* contain the visually-hidden absolute input */
}

/* Hide native input; render custom box via label::before */
.lccf-choice input[type="checkbox"],
.lccf-choice input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
}

.lccf-choice-label {
    display: inline-flex;
    align-items: center;
    font-size: 1em;
    color: var(--lccf-text);
    line-height: 1.8;
    cursor: pointer;
    transition: opacity 0.4s;
    padding-right: 1em;
    margin-top: 0.25em;
    margin-bottom: 0.25em;
    /* Prevent long labels from causing horizontal overflow */
    overflow-wrap: break-word;
    word-break: break-word;
    min-width: 0;
}

/* The checkbox/radio icon
   Matches GF sp_kiwi: ✓ checkmark visible in both states
   — light grey when unchecked, accent blue when checked
   Radio fields use the same ✓ style as checkboxes (not a bullet) */
.lccf-choice-label::before {
    content: '\2713\FE0E';       /* ✓ checkmark — same for radio and checkbox */
    display: inline-block;
    flex-shrink: 0;
    width: 1.3em;
    height: 1.3em;
    line-height: 1.3em;
    text-align: center;
    margin-right: 0.5em;
    background: var(--lccf-grey);
    border: 1px solid #c8c8c8;
    border-radius: 2px;
    font-size: 0.9em;
    color: #bbb;                /* light grey ✓ when unchecked */
    transition: color 0.2s, background 0.2s, border-color 0.2s;
}

/* Checked state — accent blue ✓ */
.lccf-choice input[type="checkbox"]:checked + .lccf-choice-label::before,
.lccf-choice input[type="radio"]:checked   + .lccf-choice-label::before {
    color: var(--lccf-blue);
    border-color: var(--lccf-blue);
    background: var(--lccf-grey);
}

/* Un-checked label text: slightly muted but fully readable */
.lccf-choice input[type="checkbox"]:not(:checked) + .lccf-choice-label,
.lccf-choice input[type="radio"]:not(:checked)    + .lccf-choice-label {
    opacity: 0.8;
}

/* =====================================================================
   Field Descriptions
   ===================================================================== */
.lccf-field-description {
    font-size: 0.9em;
    color: var(--lccf-label);
    background: rgba(0, 0, 0, 0.02);
    margin-top: 6px;
    padding: 4px 0;
    line-height: 1.5;
}

.lccf-field-description a {
    color: var(--lccf-blue);
}

/* =====================================================================
   Validation Messages
   ===================================================================== */
.lccf-validation-msg {
    font-size: 0.87em;
    font-weight: 700;
    color: var(--lccf-error);
    margin-top: 5px;
    min-height: 0;
    display: none;
}

.lccf-validation-msg:not(:empty) {
    display: block;
}

/* =====================================================================
   Submit Button
   Matches sp_kiwi: outline style, color #2ea3f2, hover fills grey
   ===================================================================== */
.lccf-submit-row {
    margin-top: 28px;
}

.lccf-wrapper .lccf-submit-btn,
.lccf-wrapper .lccf-submit-btn:link,
.lccf-wrapper .lccf-submit-btn:visited {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0.75em 1.8em;
    font-size: 1em;
    font-weight: 600;
    font-family: inherit;
    color: #ffffff !important;
    background: var(--lccf-green) !important;
    border: none !important;
    border-radius: 3px;
    cursor: pointer;
    letter-spacing: 0;
    text-transform: none;
    transition: background 0.2s;
    -webkit-appearance: none;
    box-shadow: none !important;
}

.lccf-wrapper .lccf-submit-btn:hover {
    background: #5a7520 !important;
    color: #ffffff !important;
}

.lccf-wrapper .lccf-submit-btn:active {
    background: #4d6419 !important;
}

.lccf-submit-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

/* =====================================================================
   Spinner (inside submit button)
   ===================================================================== */
.lccf-spinner {
    display: none;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(46, 163, 242, 0.3);
    border-top-color: var(--lccf-blue);
    border-radius: 50%;
    animation: lccf-spin 0.7s linear infinite;
}

.lccf-form--submitting .lccf-spinner {
    display: inline-block;
}

@keyframes lccf-spin {
    to { transform: rotate(360deg); }
}

/* =====================================================================
   WooCommerce embedded form
   ===================================================================== */
.lccf-woo-form-wrap {
    margin-top: 30px;
    padding-top: 24px;
    border-top: 1px solid #e1e1e1;
}

.lccf-woo-form-title {
    font-size: 1em;
    font-weight: 400;
    color: var(--lccf-label);
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* =====================================================================
   Price / total field (matches GF product/total fields)
   ===================================================================== */
.lccf-price-display {
    padding: 1em;
    background: var(--lccf-grey);
    color: var(--lccf-text);
    font-size: 1em;
    border: none;
    width: 100%;
    box-sizing: border-box;
}

.lccf-total-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0.8em 0;
}

.lccf-total-label {
    color: var(--lccf-label);
    font-size: 1em;
}

.lccf-total-value {
    font-size: 1.1em;
    font-weight: 700;
    color: var(--lccf-text);
}

/* =====================================================================
   Responsive — 2-col checkbox on tablet, 1-col on mobile (sp_kiwi mob)
   ===================================================================== */
@media (max-width: 640px) {
    .lccf-choices--inline {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .lccf-choices--inline .lccf-choice {
        margin-right: 0;
    }
}

@media (max-width: 400px) {
    .lccf-choices--inline {
        grid-template-columns: 1fr;
    }
}