/* Quotineer Public Styles */

:root {
    --qf-blue: #2563eb;
    --qf-blue-dark: #1d4ed8;
    --qf-blue-light: #eff6ff;
    --qf-green: #16a34a;
    --qf-gray-50: #f8fafc;
    --qf-gray-100: #f1f5f9;
    --qf-gray-200: #e2e8f0;
    --qf-gray-400: #94a3b8;
    --qf-gray-600: #475569;
    --qf-gray-700: #334155;
    --qf-gray-900: #0f172a;
    --qf-radius: 10px;
    --qf-shadow: 0 4px 6px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.08);
}

/* Wrapper */
.qf-wrapper {
    max-width: 680px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--qf-gray-700);
    line-height: 1.5;
}

.qf-title {
    font-size: 28px;
    font-weight: 800;
    color: var(--qf-gray-900);
    margin: 0 0 8px;
    line-height: 1.2;
}

.qf-description {
    font-size: 15px;
    color: var(--qf-gray-600);
    margin: 0 0 24px;
}

/* Messages */
.qf-messages {
    padding: 14px 18px;
    border-radius: var(--qf-radius);
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 500;
}
.qf-messages.success {
    background: #f0fdf4;
    color: var(--qf-green);
    border: 1px solid #bbf7d0;
}
.qf-messages.error {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

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

/* Fieldset */
.qf-fieldset {
    border: 1px solid var(--qf-gray-200);
    border-radius: var(--qf-radius);
    padding: 20px 24px;
    margin: 0 0 20px;
    background: white;
    box-shadow: var(--qf-shadow);
}
.qf-legend {
    font-size: 13px;
    font-weight: 700;
    color: var(--qf-blue);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 0 8px;
}

/* Field layout */
.qf-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 500px) { .qf-field-row { grid-template-columns: 1fr; } }

.qf-field { margin-bottom: 16px; }
.qf-field:last-child { margin-bottom: 0; }

.qf-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--qf-gray-700);
    margin-bottom: 6px;
}
.qf-required { color: #e11d48; margin-left: 2px; }

/* Inputs */
.qf-input {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--qf-gray-200);
    border-radius: 8px;
    font-size: 15px;
    color: var(--qf-gray-900);
    background: var(--qf-gray-50);
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
    outline: none;
    -webkit-appearance: none;
}
.qf-input:focus {
    border-color: var(--qf-blue);
    background: white;
    box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.qf-input::placeholder { color: var(--qf-gray-400); }
.qf-select { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; }

/* Number input with +/- */
.qf-number-wrap { display: flex; align-items: center; gap: 0; }
.qf-number-input { text-align: center; width: 80px !important; border-radius: 0 !important; flex-shrink: 0; }
.qf-num-btn { width: 40px; height: 42px; background: var(--qf-gray-100); border: 1.5px solid var(--qf-gray-200); font-size: 20px; cursor: pointer; color: var(--qf-gray-700); display: flex; align-items: center; justify-content: center; line-height: 1; transition: background .1s; flex-shrink: 0; }
.qf-num-minus { border-radius: 8px 0 0 8px; border-right: none; }
.qf-num-plus { border-radius: 0 8px 8px 0; border-left: none; }
.qf-num-btn:hover { background: var(--qf-blue-light); color: var(--qf-blue); }
.qf-num-btn:active { background: #dbeafe; }

/* Radio */
.qf-radio-group { border: none; padding: 0; margin: 0; }
.qf-radio-group legend { font-size: 14px; font-weight: 600; color: var(--qf-gray-700); margin-bottom: 10px; }
.qf-radio-label { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1.5px solid var(--qf-gray-200); border-radius: 8px; margin-bottom: 8px; cursor: pointer; font-size: 14px; transition: border-color .15s, background .15s; background: var(--qf-gray-50); }
.qf-radio-label:hover { border-color: var(--qf-blue); background: var(--qf-blue-light); }
.qf-radio { accent-color: var(--qf-blue); width: 16px; height: 16px; }
.qf-radio:checked + span { font-weight: 600; color: var(--qf-blue); }

/* Toggle */
.qf-field-type-toggle .qf-field { margin-bottom: 12px; }
.qf-toggle-label { display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 10px 0; }
.qf-toggle-input { position: absolute; opacity: 0; width: 0; height: 0; }
.qf-toggle-track { width: 44px; height: 24px; background: var(--qf-gray-200); border-radius: 12px; position: relative; transition: background .2s; flex-shrink: 0; }
.qf-toggle-thumb { width: 20px; height: 20px; background: white; border-radius: 50%; position: absolute; top: 2px; left: 2px; transition: left .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.qf-toggle-input:checked ~ .qf-toggle-track { background: var(--qf-blue); }
.qf-toggle-input:checked ~ .qf-toggle-track .qf-toggle-thumb { left: 22px; }
.qf-toggle-text { font-size: 14px; font-weight: 500; color: var(--qf-gray-700); }

/* Live Total */
.qf-total-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, #1e40af, #2563eb);
    color: white;
    border-radius: var(--qf-radius);
    padding: 18px 24px;
    margin-bottom: 20px;
    box-shadow: 0 4px 12px rgba(37,99,235,.3);
}
.qf-total-label {
    font-size: 14px;
    font-weight: 600;
    opacity: .85;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.qf-total-value {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1;
}
.qf-currency { opacity: .7; font-size: 20px; vertical-align: top; margin-top: 4px; display: inline-block; }
.qf-amount { transition: all .2s; }

/* Submit button */
.qf-submit-btn {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, #1e40af, #2563eb);
    color: white;
    border: none;
    border-radius: var(--qf-radius);
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s, opacity .15s;
    box-shadow: 0 4px 12px rgba(37,99,235,.3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 12px;
}
.qf-submit-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(37,99,235,.4); }
.qf-submit-btn:active { transform: translateY(0); }
.qf-submit-btn:disabled { opacity: .7; cursor: not-allowed; }

/* Spinner */
.qf-spinner {
    width: 18px; height: 18px;
    animation: qf-spin .8s linear infinite;
    display: inline-block;
    vertical-align: middle;
}
@keyframes qf-spin { to { transform: rotate(360deg); } }

/* Privacy note */
.qf-privacy-note {
    text-align: center;
    font-size: 12px;
    color: var(--qf-gray-400);
    margin: 0;
}

/* Error state on inputs */
.qf-input.qf-error { border-color: #e11d48; }

/* Success state: hide form */
.qf-form.qf-submitted { display: none; }