/* Auraq Forms — frontend styles */

.apf-form { max-width: 720px; margin: 0 auto; }
.apf-fields { display: flex; flex-wrap: wrap; gap: 16px 12px; }

.apf-field { box-sizing: border-box; width: 100%; }
.apf-w-100 { width: 100%; }
.apf-w-50 { width: calc(50% - 6px); }
.apf-w-33 { width: calc(33.33% - 8px); }
.apf-w-25 { width: calc(25% - 9px); }
@media (max-width: 600px) {
	.apf-w-50, .apf-w-33, .apf-w-25 { width: 100%; }
}

.apf-label { display: block; font-weight: 600; margin-bottom: 6px; }
.apf-required { color: #c0392b; }

.apf-input {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	border: 1px solid #cbd2d9;
	border-radius: 5px;
	font-size: 16px;
	background: #fff;
	color: inherit;
}
.apf-input:focus { outline: 2px solid #2271b1; outline-offset: 1px; border-color: #2271b1; }
textarea.apf-input { min-height: 120px; resize: vertical; }
select.apf-input[multiple] { min-height: 110px; }
input[type="range"].apf-input { padding: 0; border: none; }
input[type="color"].apf-input { height: 44px; padding: 4px; }

.apf-choices { display: flex; flex-direction: column; gap: 6px; }
.apf-choice { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; font-weight: normal; }
.apf-choice input { margin-top: 3px; }

.apf-name-row { display: flex; gap: 12px; }
@media (max-width: 600px) { .apf-name-row { flex-direction: column; } }

.apf-description { font-size: 13px; color: #6b7280; margin: 6px 0 0; }

/* Rating stars */
.apf-rating { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.apf-rating input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.apf-rating label { font-size: 28px; color: #d1d5db; cursor: pointer; line-height: 1; }
.apf-rating label:hover,
.apf-rating label:hover ~ label,
.apf-rating input:checked ~ label { color: #f59e0b; }
.apf-rating input:focus-visible + label { outline: 2px solid #2271b1; border-radius: 3px; }

.apf-heading { margin: 8px 0 0; width: 100%; }
.apf-divider { border: none; border-top: 1px solid #e5e7eb; margin: 8px 0; width: 100%; }

/* Honeypot: visually removed but present in DOM */
.apf-hp-wrap { position: absolute !important; left: -9999px !important; top: -9999px !important; height: 1px; width: 1px; overflow: hidden; }

.apf-submit-row { margin-top: 20px; display: flex; align-items: center; gap: 12px; }
.apf-submit {
	background: #1d4ed8;
	color: #fff;
	border: none;
	border-radius: 5px;
	padding: 12px 28px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
}
.apf-submit:hover { background: #1e40af; }
.apf-submit:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; }
.apf-submit:disabled { opacity: .6; cursor: wait; }

.apf-spinner { width: 18px; height: 18px; border: 3px solid #cbd2d9; border-top-color: #1d4ed8; border-radius: 50%; animation: apf-spin .7s linear infinite; }
@keyframes apf-spin { to { transform: rotate(360deg); } }

.apf-message { margin-top: 16px; padding: 14px 16px; border-radius: 5px; }
.apf-success { background: #ecfdf5; border: 1px solid #10b981; color: #065f46; }
.apf-error { background: #fef2f2; border: 1px solid #ef4444; color: #991b1b; }
.apf-notice { background: #fffbeb; border: 1px solid #f59e0b; color: #92400e; padding: 12px 16px; border-radius: 5px; }

.apf-field.has-error .apf-input { border-color: #ef4444; }
.apf-field-error { display: block; color: #b91c1c; font-size: 13px; margin-top: 4px; min-height: 0; }

@media (forced-colors: active) {
	.apf-submit { border: 1px solid ButtonText; }
}
@media (prefers-reduced-motion: reduce) {
	.apf-spinner { animation: none; }
}

/* ============================================================
   v2.1: Form design themes (10) — Salient-friendly, responsive
   ============================================================ */

/* 1. classic — the default look above, no overrides needed */

/* 2. minimal — airy, borderless, thin lines */
.apf-theme-minimal .apf-input { border: none; border-bottom: 2px solid #d5dbe3; border-radius: 0; background: transparent; padding-left: 2px; }
.apf-theme-minimal .apf-input:focus { outline: none; border-bottom-color: #111827; }
.apf-theme-minimal .apf-label { font-weight: 500; letter-spacing: .02em; text-transform: uppercase; font-size: 12px; color: #6b7280; }
.apf-theme-minimal .apf-submit { background: #111827; border-radius: 0; padding: 14px 40px; letter-spacing: .06em; text-transform: uppercase; font-size: 13px; }
.apf-theme-minimal .apf-submit:hover { background: #374151; }

/* 3. modern — bold blue, big radius, soft shadows */
.apf-theme-modern { background: #fff; padding: 32px; border-radius: 16px; box-shadow: 0 8px 30px rgba(29, 78, 216, .10); }
.apf-theme-modern .apf-input { border-radius: 10px; border-color: #e5e7eb; background: #f9fafb; }
.apf-theme-modern .apf-input:focus { background: #fff; box-shadow: 0 0 0 4px rgba(29, 78, 216, .12); outline: none; border-color: #1d4ed8; }
.apf-theme-modern .apf-submit { border-radius: 10px; width: 100%; background: linear-gradient(135deg, #1d4ed8, #3b82f6); box-shadow: 0 6px 16px rgba(29, 78, 216, .3); }

/* 4. elegant — serif headings, warm neutrals, hairline borders */
.apf-theme-elegant { font-family: Georgia, 'Times New Roman', serif; }
.apf-theme-elegant .apf-label, .apf-theme-elegant .apf-heading { font-family: Georgia, serif; color: #3f3a34; }
.apf-theme-elegant .apf-input { border: 1px solid #d9d2c7; border-radius: 2px; background: #fffdf9; }
.apf-theme-elegant .apf-input:focus { outline: none; border-color: #a8865f; box-shadow: 0 0 0 3px rgba(168, 134, 95, .15); }
.apf-theme-elegant .apf-submit { background: #6b5335; border-radius: 2px; font-family: Georgia, serif; letter-spacing: .04em; }
.apf-theme-elegant .apf-submit:hover { background: #57432a; }

/* 5. publishing — Auraq warm ivory/teal, bookish */
.apf-theme-publishing { background: #fbf7f0; padding: 32px; border: 1px solid #e8ddcb; border-radius: 8px; }
.apf-theme-publishing .apf-label { color: #134e4a; }
.apf-theme-publishing .apf-input { border: 1px solid #d6cbb6; background: #fff; border-radius: 6px; }
.apf-theme-publishing .apf-input:focus { outline: none; border-color: #0f766e; box-shadow: 0 0 0 3px rgba(15, 118, 110, .15); }
.apf-theme-publishing .apf-submit { background: #0f766e; }
.apf-theme-publishing .apf-submit:hover { background: #115e59; }
.apf-theme-publishing .apf-heading { color: #134e4a; border-bottom: 2px solid #0f766e; padding-bottom: 6px; }

/* 6. dark — for dark sections / dark Salient rows */
.apf-theme-dark { background: #1f2430; padding: 32px; border-radius: 12px; color: #e6e8ec; }
.apf-theme-dark .apf-label, .apf-theme-dark .apf-heading, .apf-theme-dark .apf-choice, .apf-theme-dark .apf-description { color: #e6e8ec; }
.apf-theme-dark .apf-input { background: #2a3040; border-color: #3d4356; color: #e6e8ec; }
.apf-theme-dark .apf-input::placeholder { color: #8a91a3; }
.apf-theme-dark .apf-input:focus { outline: none; border-color: #60a5fa; box-shadow: 0 0 0 3px rgba(96, 165, 250, .2); }
.apf-theme-dark .apf-submit { background: #60a5fa; color: #10131a; font-weight: 700; }

/* 7. gradient — vivid header-style gradient card */
.apf-theme-gradient { background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 55%, #db2777 100%); padding: 3px; border-radius: 16px; }
.apf-theme-gradient .apf-fields, .apf-theme-gradient .apf-submit-row, .apf-theme-gradient .apf-message, .apf-theme-gradient .apf-notice { background: #fff; }
.apf-theme-gradient .apf-fields { border-radius: 13px 13px 0 0; padding: 28px 28px 8px; margin: 0; }
.apf-theme-gradient .apf-submit-row { border-radius: 0 0 13px 13px; padding: 0 28px 28px; margin: 0; }
.apf-theme-gradient .apf-submit { background: linear-gradient(135deg, #4f46e5, #db2777); border-radius: 999px; padding: 12px 36px; }

/* 8. material — underline inputs with float feel */
.apf-theme-material .apf-input { border: none; border-bottom: 2px solid #cbd2d9; border-radius: 4px 4px 0 0; background: #f3f4f6; }
.apf-theme-material .apf-input:focus { outline: none; border-bottom-color: #6d28d9; background: #ede9fe; }
.apf-theme-material .apf-submit { background: #6d28d9; border-radius: 999px; padding: 12px 32px; box-shadow: 0 4px 10px rgba(109, 40, 217, .35); }
.apf-theme-material .apf-submit:hover { background: #5b21b6; }

/* 9. soft — rounded, pastel, friendly */
.apf-theme-soft { background: #f5f8ff; padding: 28px; border-radius: 20px; }
.apf-theme-soft .apf-input { border-radius: 14px; border: 2px solid #e0e7ff; background: #fff; }
.apf-theme-soft .apf-input:focus { outline: none; border-color: #818cf8; }
.apf-theme-soft .apf-submit { background: #818cf8; border-radius: 14px; width: 100%; }
.apf-theme-soft .apf-submit:hover { background: #6366f1; }

/* 10. glass — frosted card for image backgrounds */
.apf-theme-glass { background: rgba(255, 255, 255, .55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding: 32px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .6); }
.apf-theme-glass .apf-input { background: rgba(255, 255, 255, .75); border-color: rgba(255, 255, 255, .9); border-radius: 10px; }
.apf-theme-glass .apf-input:focus { outline: none; border-color: #0ea5e9; }
.apf-theme-glass .apf-submit { background: #0ea5e9; border-radius: 10px; }
.apf-theme-glass .apf-submit:hover { background: #0284c7; }