/** 
 * Form styling for "LOOPIS Theme" and "LOOPIS Theme HQ".
 *
 * Separated from base.css for clarity 
 */

/* Base tokens */
:root { --form-bg: #f5f5f5; --form-border: #e5e5e5; --form-border-focus: #d0d0d0; --form-radius: 10px; --form-control-radius: 8px; --form-label-size: 15px; --form-control-size: 22px; --form-pad: 10px 20px; --form-gap: 20px; --form-text: #333; --form-muted: #777; }

/* Lightweight reset */
:where(input, select, textarea, button) { box-sizing: border-box; margin: 0; font: inherit; color: inherit; transition: all .2s ease; }
:where(input[type="checkbox"], input[type="radio"]) { appearance: auto; }

/* Form panel (optional) */
.loopis-form-wrapper { background: var(--form-bg); border-radius: var(--form-radius); padding: var(--form-pad); text-align: inherit; }

/* Form input */
.loopis-form :where(label, input, select, textarea, button) { margin-bottom: 5px; }
.loopis-form :where(input[type="search"], input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="tel"], input[type="number"], select, textarea) { background: #fff; border: 2px solid var(--form-border); color: var(--form-muted); display: inline-block; width: 100%; outline: none; padding: 7px 8px; font-size: var(--form-control-size); font-weight: 300; text-align: left; }
.loopis-form select { border-radius: var(--form-control-radius); }
.loopis-form :where(input[type="search"], input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="tel"], input[type="number"], select, textarea):focus { border-color: var(--form-border-focus); color: var(--form-text); box-shadow: 0 0 3px rgba(0, 0, 0, 0.1); }
.loopis-form :where(input[type="submit"], button) { font-size: var(--form-control-size); }

/* Form labels */
.loopis-form label { color: var(--form-text); font-size: var(--form-label-size); font-weight: 600; display: block; }
.loopis-form label:has(input[type="radio"]) { font-size: 22px; font-weight: 300; }

/* Form description */
.loopis-form .description { color: var(--form-muted); font-size: 13px; font-style: italic; margin-top: 0px; opacity: 1; white-space: normal; display: block; }
.loopis-form p.description { margin: 0; }
label .required { color: #ff969d; }

/* Form rows */
.loopis-form .form-row { margin: 0 0 var(--form-gap); }
.loopis-form .form-row:last-child { margin-bottom: 0; }
.loopis-form .form-row :where(input, select, textarea, button) { margin-bottom: 0; }

/* Form placeholder text */
:where(input, textarea)::placeholder { color: #b3b3b3; opacity: 1; }

/* Comment form tweaks */
.logged-in-as, .comment-notes, .form-allowed-tags { display: none; }
#respond { position: relative; }
#reply-title { font-size: 16px; margin: 5px 0; }
li #reply-title { font-size: 0; margin: 0 !important; padding: 0; height: 0; border-top: 0; }
#commentform { margin-bottom: 0px; }
#commentform input[type="text"], #commentform textarea { height: 55px; font-size: 16px; width: 100%; }
#commentform p.comment-form-comment { margin-top: 10px; margin-bottom: 0px; }
#commentform p.comment-form-comment label { display: none; }
#commentform .comment-form-cookies-consent { padding: 10px 0; }
#commentform .comment-form-cookies-consent label { display: inline; }

/* Search form tweaks */
#search-form { margin: 10px 0; display: flex; gap: 10px; flex-wrap: nowrap; align-items: center; --form-control-size: 15; }
#search-form :where(input[type="text"], input[type="search"]) { width: auto; height: 35px; flex: 1 1 auto; min-width: 0; }
#search-form select { width: auto; padding: 6px; height: 35px; min-width: 0; max-width: 150px; flex: 0 1 150px; }
#search-form input[type="submit"] { font-size: 16px; width: auto; flex: 0 0 auto; margin-bottom: 5px; }

/* Support post form tweaks */
#support-form { background: var(--form-bg); border-radius: var(--form-radius); padding: var(--form-pad); max-width: 300px; margin: 20px auto; text-align: center; }
#support-form textarea[name="post_content"] { height: 100px; min-height: 100px; max-height: 100px; resize: none; }

/* Gift form tweaks */
#gift-form #images { display: none !important; }
#gift-form .terms-options { background: #fff; border: 2px solid var(--form-border); border-radius: var(--form-control-radius); display: grid; align-content: start; gap: 6px; height: 120px; overflow-y: auto; overscroll-behavior: contain; padding: 8px; }
#gift-form #terms-search { margin-bottom: 5px; }
#gift-form .terms-options.is-collapsed { display: none; }
#gift-form .term-option { align-items: center; cursor: pointer; display: flex; font-size: 18px; font-weight: 300; gap: 8px; margin: 0; padding: 2px 0; }
#gift-form .term-option.is-filter-hidden { display: none; }
#gift-form .term-option input[type="checkbox"] { margin: 0; border-radius: 0; }
#gift-form .term-option span { color: var(--form-text); font-size: 18px; line-height: 1.3; }
#gift-form #terms-count { display: inline-block; font-weight: 600; margin-left: 6px; }
.error { color: #b54b4b; font-style: normal; font-weight: 600; }
#image-previews { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; min-width: 0; }
#image-previews .image-preview-item { flex: 0 1 120px; min-width: 0; }
#image-previews img { display: block; flex: 1 1 0; min-width: 0; width: 100%; max-width: 120px; aspect-ratio: 1 / 1; object-fit: cover; border: 3px solid white; }
#image-previews .image-preview-controls { display: flex; gap: 6px; justify-content: center; margin-top: 5px; }
#image-previews .image-preview-controls button { background: #ffffff; border: 1px solid #ddd; border-radius: 50%; color: #333; display: inline-block; width: 32px; height: 32px; padding: 0; margin: 0; font-size: 14px !important; line-height: 32px; text-align: center; vertical-align: middle; }
#image-previews .image-preview-controls .feature-button:not(.is-featured) { filter: grayscale(1); opacity: 0.85; }
#image-previews .image-preview-controls button:hover { background: #e9e9e9; }

/* Member-form tweaks */
#member-form { max-width: 300px; margin: 0 auto; }

/* Form loading overlay */
.loopis-form-loading { position: fixed; inset: 0; z-index: -1; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.45); opacity: 0; pointer-events: none; transition: opacity 0.1s ease; }
.loopis-form-loading-icon { width: min(240px, 80vw); max-width: 240px; height: auto; opacity: 0; transform-origin: center; animation: loopis-loader-heart-pulse 1s ease-in-out infinite; animation-play-state: paused; transition: opacity 0.1s ease; }
body.loopis-form-loading-active .loopis-form-loading { z-index: 9999; opacity: 1; pointer-events: auto; }
body.loopis-form-loading-active .loopis-form-loading-icon { opacity: 0.9; animation-play-state: running; }
.loopis-form-loading-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
body.loopis-form-loading-active { overflow: hidden; }

@keyframes loopis-loader-heart-pulse {
    from { transform: scale(0.92); }
    50% { transform: scale(1.06); }
    to { transform: scale(0.92); }
}