/* ============================================================
   Clever Forms — Frontend Styles
   ============================================================ */
:root {
    --cf-primary:      #2563EB;
    --cf-primary-dark: #1D4ED8;
    --cf-primary-light:#EFF6FF;
    --cf-success:      #16A34A;
    --cf-danger:       #DC2626;
    --cf-text:         #1E293B;
    --cf-text-muted:   #64748B;
    --cf-bg:           #F8FAFC;
    --cf-surface:      #FFFFFF;
    --cf-border:       #E2E8F0;
    --cf-radius:       8px;
    --cf-shadow:       0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
    --cf-shadow-md:    0 4px 6px -1px rgba(0,0,0,.08);
}

.cf-form-wrap * { box-sizing: border-box; }
.cf-form-wrap { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: var(--cf-text); }

/* --- Form header --- */
.cf-form-header { margin-bottom: 24px; }
.cf-form-title  { font-size: 24px; font-weight: 700; margin: 0 0 6px; color: var(--cf-text); }
.cf-form-desc   { color: var(--cf-text-muted); margin: 0; font-size: 15px; }

/* --- Messages --- */
.cf-messages { padding: 14px 18px; border-radius: var(--cf-radius); margin-bottom: 20px; font-size: 14px; font-weight: 500; }
.cf-messages.cf-error   { background: #FEF2F2; color: var(--cf-danger); border: 1px solid #FECACA; }
.cf-messages.cf-success { background: #F0FDF4; color: var(--cf-success); border: 1px solid #BBF7D0; }

/* --- Field rows --- */
.cf-field-row { margin-bottom: 20px; }
.cf-label { display: block; font-size: 14px; font-weight: 600; color: var(--cf-text); margin-bottom: 7px; }
.cf-required { color: var(--cf-danger); margin-left: 2px; }
.cf-field-desc { font-size: 13px; color: var(--cf-text-muted); margin: 0 0 8px; }

/* --- Inputs --- */
.cf-input {
    display: block;
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--cf-border);
    border-radius: var(--cf-radius);
    font-size: 15px;
    color: var(--cf-text);
    background: var(--cf-surface);
    transition: border-color .15s, box-shadow .15s;
    -webkit-appearance: none;
    appearance: none;
}
.cf-input:focus {
    border-color: var(--cf-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.cf-input::placeholder { color: #CBD5E1; }

.cf-textarea { min-height: 110px; resize: vertical; }
.cf-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748B' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; cursor: pointer; }

/* --- Choices --- */
.cf-choices { display: flex; flex-direction: column; gap: 8px; }
.cf-choice-label { display: flex; align-items: center; gap: 10px; font-size: 15px; cursor: pointer; padding: 8px 12px; border: 1.5px solid var(--cf-border); border-radius: var(--cf-radius); transition: border-color .15s, background .15s; }
.cf-choice-label:hover { border-color: var(--cf-primary); background: var(--cf-primary-light); }
.cf-checkbox, .cf-radio { width: 18px; height: 18px; accent-color: var(--cf-primary); cursor: pointer; flex-shrink: 0; }

/* --- File upload --- */
.cf-file-drop { position: relative; }
.cf-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.cf-file-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 28px 20px;
    border: 2px dashed var(--cf-border);
    border-radius: var(--cf-radius);
    cursor: pointer;
    background: var(--cf-bg);
    transition: border-color .15s, background .15s;
}
.cf-file-label:hover { border-color: var(--cf-primary); background: var(--cf-primary-light); }
.cf-file-icon { font-size: 28px; }
.cf-file-text { font-size: 14px; color: var(--cf-text-muted); text-align: center; }
.cf-file-name { display: block; margin-top: 8px; font-size: 13px; color: var(--cf-primary); font-weight: 500; }

/* --- Divider --- */
.cf-divider { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.cf-divider-line { flex: 1; height: 1px; background: var(--cf-border); }
.cf-divider-label { font-size: 13px; font-weight: 700; color: var(--cf-text-muted); text-transform: uppercase; letter-spacing: .5px; white-space: nowrap; }

/* --- Product field --- */
.cf-product-row-inner { display: flex; align-items: center; gap: 16px; padding: 14px; background: var(--cf-bg); border: 1.5px solid var(--cf-border); border-radius: var(--cf-radius); }
.cf-product-price { font-size: 18px; font-weight: 700; color: var(--cf-primary); min-width: 80px; }
.cf-qty-wrap { display: flex; align-items: center; gap: 10px; }
.cf-qty-label { font-size: 14px; font-weight: 600; }
.cf-qty-input { width: 80px; text-align: center; }

/* --- Total --- */
.cf-total-row .cf-total-display { display: inline-flex; align-items: baseline; gap: 6px; background: var(--cf-bg); border: 1.5px solid var(--cf-border); border-radius: var(--cf-radius); padding: 12px 18px; }
.cf-total-currency { font-size: 14px; font-weight: 600; color: var(--cf-text-muted); }
.cf-total-amount { font-size: 28px; font-weight: 800; color: var(--cf-primary); }

/* --- Currency selector --- */
.cf-currency-selector .cf-input { max-width: 300px; }

/* --- Submit button --- */
.cf-submit-row { margin-top: 28px; }
.cf-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 32px;
    background: var(--cf-primary);
    color: #fff;
    border: none;
    border-radius: var(--cf-radius);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s, transform .1s, box-shadow .15s;
    box-shadow: 0 2px 8px rgba(37,99,235,.3);
    min-width: 160px;
}
.cf-submit-btn:hover { background: var(--cf-primary-dark); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(37,99,235,.35); }
.cf-submit-btn:active { transform: translateY(0); }
.cf-submit-btn:disabled { opacity: .65; cursor: not-allowed; transform: none; }

/* --- PayPal buttons wrap --- */
.cf-paypal-buttons-wrap { margin-top: 20px; }
#cf-paypal-buttons-wrap p { font-size: 13px; color: var(--cf-text-muted); margin-bottom: 10px; }

/* --- Confirmation --- */
.cf-success-message { background: var(--cf-success); color: #fff; border-radius: var(--cf-radius); padding: 20px 24px; font-size: 16px; font-weight: 600; text-align: center; box-shadow: var(--cf-shadow-md); }

/* --- Validation errors inline --- */
.cf-input.cf-field-error { border-color: var(--cf-danger); }
.cf-inline-error { display: block; font-size: 12px; color: var(--cf-danger); margin-top: 5px; font-weight: 500; }

/* --- Spinner --- */
@keyframes cf-spin { to { transform: rotate(360deg); } }
.cf-btn-spinner::before { content: ''; display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: cf-spin .7s linear infinite; margin-right: 6px; }

/* --- Responsive --- */
@media (max-width: 640px) {
    .cf-form-title { font-size: 20px; }
    .cf-product-row-inner { flex-direction: column; align-items: flex-start; }
    .cf-submit-btn { width: 100%; }
}

/* --- Instructional Text / Content Block --- */
.cf-content-block { margin-bottom: 20px !important; }

.cf-content-heading {
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    display: block !important;
}

.cf-content-text {
    padding: 14px 18px !important;
    border-radius: 0 6px 6px 0 !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
    margin: 0 !important;
}

/* Style variants */
.cf-content-style-default {
    background-color: #F1F5F9 !important;
    border-left: 4px solid #94A3B8 !important;
    color: #475569 !important;
}
.cf-content-style-info {
    background-color: #EFF6FF !important;
    border-left: 4px solid #2563EB !important;
    color: #1E40AF !important;
}
.cf-content-style-success {
    background-color: #F0FDF4 !important;
    border-left: 4px solid #16A34A !important;
    color: #166534 !important;
}
.cf-content-style-warning {
    background-color: #FFFBEB !important;
    border-left: 4px solid #D97706 !important;
    color: #92400E !important;
}

/* Inner typography */
.cf-content-text p { margin: 0 0 8px !important; padding: 0 !important; background: none !important; border: none !important; }
.cf-content-text p:last-child { margin-bottom: 0 !important; }
.cf-content-text a { color: #2563EB !important; }
.cf-content-text strong { font-weight: 700 !important; }
.cf-content-text ul,
.cf-content-text ol  { margin: 8px 0 8px 20px !important; padding: 0 !important; }
.cf-content-text li  { margin-bottom: 4px !important; }

/* --- Check Payment Instructions --- */
.cf-check-instructions-box {
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    border-left: 4px solid #F59E0B;
    border-radius: var(--cf-radius);
    padding: 16px 20px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--cf-text);
}
.cf-check-instructions-box p { margin: 0 0 8px; }
.cf-check-instructions-box p:last-child { margin-bottom: 0; }

/* --- Payment Method Selector (Both mode) --- */
.cf-payment-method-selector {
    background: var(--cf-primary-light);
    border: 1px solid #BFDBFE;
    border-radius: var(--cf-radius);
    padding: 16px 20px;
}
.cf-payment-method-selector .cf-label {
    font-weight: 700;
    margin-bottom: 10px;
}
.cf-payment-method-selector .cf-choices {
    display: flex;
    gap: 20px;
}
.cf-payment-method-selector .cf-choice-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

/* ── Print Button ────────────────────────────────── */
.cf-print-row {
    padding: 4px 0;
}
.cf-print-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all .2s ease;
    line-height: 1.4;
    font-family: inherit;
}
.cf-print-btn .cf-print-icon {
    font-size: 16px;
    line-height: 1;
    width: 16px;
    height: 16px;
}
.cf-print-btn-outline {
    background: #fff;
    color: #334155;
    border: 1.5px solid #CBD5E1;
}
.cf-print-btn-outline:hover {
    background: #F1F5F9;
    border-color: #94A3B8;
    color: #1E293B;
}
.cf-print-btn-primary {
    background: #2563EB;
    color: #fff;
    border: 1.5px solid #2563EB;
}
.cf-print-btn-primary:hover {
    background: #1D4ED8;
    border-color: #1D4ED8;
}

/* ── Print Media Queries ─────────────────────────── */
@media print {
    /* Hide non-printable UI */
    .cf-print-row,
    .cf-submit-row,
    .cf-paypal-buttons-wrap,
    .cf-payment-method-selector,
    .cf-currency-selector,
    .cf-messages,
    .cf-confirmation,
    .cf-file-label,
    .cf-file-icon {
        display: none !important;
    }

    /* Clean up the form wrapper */
    .cf-form-wrap {
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        max-width: 100% !important;
    }

    /* Readable inputs for printing */
    .cf-input,
    .cf-textarea,
    .cf-select {
        border: 1px solid #999 !important;
        background: #fff !important;
        box-shadow: none !important;
        -webkit-appearance: none;
        color: #000 !important;
        padding: 6px 8px !important;
    }

    /* Show file name if one was selected */
    .cf-file-name {
        display: block !important;
    }

    /* Keep labels visible */
    .cf-label {
        color: #000 !important;
        font-weight: 700 !important;
    }
}

/* ============================================================
   TITLE HEADING
   ============================================================ */
.cf-title-row {
    padding: 4px 0 8px !important;
    border: none !important;
}
.cf-title-heading {
    font-size: 22px;
    font-weight: 700;
    color: #1E293B;
    margin: 0;
    line-height: 1.3;
}

/* ============================================================
   CONTAINER COLUMNS (Dual & Three)
   ============================================================ */
.cf-container-row {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}
.cf-container-columns {
    display: flex;
    gap: 20px;
    width: 100%;
}
.cf-container-columns.cf-col-halves > .cf-container-column {
    flex: 1 1 50%;
    min-width: 0;
}
.cf-container-columns.cf-col-thirds > .cf-container-column {
    flex: 1 1 33.333%;
    min-width: 0;
}
.cf-container-column > .cf-field-row:last-child {
    margin-bottom: 0;
}

/* Responsive: stack on small screens */
@media (max-width: 600px) {
    .cf-container-columns {
        flex-direction: column;
        gap: 0;
    }
    .cf-container-columns.cf-col-halves > .cf-container-column,
    .cf-container-columns.cf-col-thirds > .cf-container-column {
        flex: 1 1 100%;
    }
}