/* ========================================================================== ADVANCED FORM COMPONENTS Option Picker,Chip Select,Form Wizard,Dark Theme Form Polishing ========================================================================== */ /* ========================================================================== OPTION PICKER - Card-based Single & Multi Select ========================================================================== */ .option-picker{position:relative}.option-picker-grid{display:grid;gap:var(--spacing-4)}.option-picker-grid-2{grid-template-columns:repeat(2,1fr)}.option-picker-grid-3{grid-template-columns:repeat(3,1fr)}.option-picker-grid-4{grid-template-columns:repeat(4,1fr)}@media (max-width:768px){.option-picker-grid-3,.option-picker-grid-4{grid-template-columns:repeat(2,1fr)}}@media (max-width:480px){.option-picker-grid-2,.option-picker-grid-3,.option-picker-grid-4{grid-template-columns:1fr}}.option-picker-option{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:var(--spacing-6);background:var(--color-bg);border:2px solid var(--color-border);border-radius:var(--border-radius-xl);cursor:pointer;transition:all var(--duration-200) var(--ease-in-out);font-family:inherit;width:100%;color:inherit;-webkit-appearance:none;appearance:none}.option-picker-option:hover{border-color:var(--color-primary);transform:translateY(-2px);box-shadow:var(--shadow-md)}.option-picker-option:focus-visible{outline:none;box-shadow:0 0 0 2px var(--color-bg),0 0 0 4px var(--color-primary)}.option-picker-option.selected{border-color:var(--color-accent,var(--color-primary));box-shadow:0 0 0 1px var(--color-accent,var(--color-primary)),0 0 20px rgba(99,229,38,0.15)}.option-picker-option.disabled,.option-picker-option[disabled]{opacity:0.5;cursor:not-allowed;pointer-events:none}/* Check indicator */ .option-picker-check{position:absolute;top:var(--spacing-3);right:var(--spacing-3);width:1.5rem;height:1.5rem;border-radius:var(--border-radius-full);border:2px solid var(--color-border-strong);transition:all var(--duration-200) var(--ease-in-out);display:flex;align-items:center;justify-content:center}.option-picker-option.selected .option-picker-check{background:var(--color-accent,var(--color-primary));border-color:var(--color-accent,var(--color-primary));background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3e%3cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3e%3c/svg%3e");background-size:0.875rem;background-repeat:no-repeat;background-position:center}/* Icon area */ .option-picker-icon{font-size:2rem;margin-bottom:var(--spacing-3);line-height:1}.option-picker-icon svg{width:2rem;height:2rem}/* Content area */ .option-picker-content{display:flex;flex-direction:column;gap:var(--spacing-1)}.option-picker-title{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold)}.option-picker-description{font-size:var(--font-size-sm);color:var(--color-text-muted);line-height:var(--line-height-relaxed)}/* Compact variant */ .option-picker-sm .option-picker-option{padding:var(--spacing-4)}.option-picker-sm .option-picker-icon{font-size:1.5rem;margin-bottom:var(--spacing-2)}.option-picker-sm .option-picker-title{font-size:var(--font-size-sm)}.option-picker-sm .option-picker-description{font-size:var(--font-size-xs)}/* Horizontal layout */ .option-picker-horizontal .option-picker-option{flex-direction:row;text-align:left;gap:var(--spacing-4)}.option-picker-horizontal .option-picker-icon{margin-bottom:0;flex-shrink:0}/* ========================================================================== CHIP SELECT - Compact Pill Selection ========================================================================== */ .chip-select{position:relative}.chip-select-group{display:flex;flex-wrap:wrap;gap:var(--spacing-2)}.chip-select-chip{display:inline-flex;align-items:center;gap:var(--spacing-1-5);padding:var(--spacing-2) var(--spacing-4);font-family:inherit;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text);background:var(--color-bg-muted);border:1px solid var(--color-border);border-radius:var(--border-radius-full);cursor:pointer;transition:all var(--duration-150) var(--ease-in-out);user-select:none;-webkit-appearance:none;appearance:none}.chip-select-chip:hover{border-color:var(--color-primary)}.chip-select-chip:focus-visible{outline:none;box-shadow:0 0 0 2px var(--color-bg),0 0 0 4px var(--color-primary)}.chip-select-chip.selected{color:var(--color-gray-900);background:var(--color-accent,var(--color-primary));border-color:var(--color-accent,var(--color-primary));font-weight:var(--font-weight-semibold)}.chip-select-chip.disabled,.chip-select-chip[disabled]{opacity:0.5;cursor:not-allowed;pointer-events:none}.chip-select-chip-icon{font-size:1.125em;line-height:1}/* Size variants */ .chip-select-sm .chip-select-chip{padding:var(--spacing-1) var(--spacing-3);font-size:var(--font-size-xs);gap:var(--spacing-1)}.chip-select-lg .chip-select-chip{padding:var(--spacing-3) var(--spacing-5);font-size:var(--font-size-base)}/* ========================================================================== FORM WIZARD - Multi-Step Form ========================================================================== */ .form-wizard{position:relative}/* Step Progress Indicators */ .form-wizard-progress{margin-bottom:var(--spacing-8)}.form-wizard-steps{display:flex;align-items:center;justify-content:center}.form-wizard-step{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-2);position:relative;z-index:1}.form-wizard-step-number{display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:var(--border-radius-full);background:var(--color-bg-muted);border:2px solid var(--color-border-strong);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);color:var(--color-text-muted);transition:all var(--duration-300) var(--ease-out)}.form-wizard-step-label{font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);color:var(--color-text-muted);transition:color var(--duration-300) var(--ease-out);white-space:nowrap}/* Active step */ .form-wizard-step.active .form-wizard-step-number{background:var(--color-primary-50,rgba(99,229,38,0.1));border-color:var(--color-accent,var(--color-primary));color:var(--color-accent,var(--color-primary));box-shadow:0 0 0 4px rgba(99,229,38,0.1)}.form-wizard-step.active .form-wizard-step-label{color:var(--color-text);font-weight:var(--font-weight-semibold)}/* Completed step */ .form-wizard-step.completed .form-wizard-step-number{background:var(--color-accent,var(--color-primary));border-color:var(--color-accent,var(--color-primary));color:#030712;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23030712'%3e%3cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3e%3c/svg%3e");background-size:1rem;background-repeat:no-repeat;background-position:center;font-size:0}.form-wizard-step.completed .form-wizard-step-label{color:var(--color-text)}/* Connector lines between steps */ .form-wizard-step-connector{flex:1;height:2px;min-width:3rem;background:var(--color-border);transition:background var(--duration-300) var(--ease-out);align-self:flex-start;margin-top:1.25rem}.form-wizard-step-connector.completed{background:var(--color-accent,var(--color-primary))}/* Thin progress bar */ .form-wizard-progress-bar{width:100%;height:3px;background:var(--color-border);border-radius:var(--border-radius-full);margin-top:var(--spacing-4);overflow:hidden}.form-wizard-progress-fill{height:100%;background:var(--color-accent,var(--color-primary));border-radius:var(--border-radius-full);transition:width 500ms var(--ease-out)}/* Step panels */ .form-wizard-body{position:relative;overflow:hidden}.form-wizard-panel{display:none}.form-wizard-panel.active{display:block;animation:wizard-slide-in 300ms var(--ease-out) forwards}.form-wizard-panel.exiting{display:block;animation:wizard-slide-out 200ms var(--ease-in) forwards}.form-wizard-panel.backward.active{animation:wizard-slide-in-back 300ms var(--ease-out) forwards}.form-wizard-panel.backward.exiting{animation:wizard-slide-out-back 200ms var(--ease-in) forwards}@keyframes wizard-slide-in{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}}@keyframes wizard-slide-out{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-30px)}}@keyframes wizard-slide-in-back{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:translateX(0)}}@keyframes wizard-slide-out-back{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(30px)}}/* Footer navigation */ .form-wizard-footer{display:flex;justify-content:space-between;align-items:center;margin-top:var(--spacing-8);padding-top:var(--spacing-6);border-top:1px solid var(--color-border)}.form-wizard-footer .btn:only-child{margin-left:auto}/* Step count text */ .form-wizard-step-count{font-size:var(--font-size-sm);color:var(--color-text-muted)}@media (max-width:480px){.form-wizard-step-label{display:none}.form-wizard-step-number{width:2rem;height:2rem;font-size:var(--font-size-xs)}.form-wizard-step-connector{min-width:2rem;margin-top:1rem}}/* ========================================================================== DARK DONAMIC THEME - Option Picker ========================================================================== */ .dark-donamic .option-picker-option{background:var(--donamic-bg-800);border-color:rgba(255,255,255,0.08);color:var(--donamic-text-100)}.dark-donamic .option-picker-option:hover{background:var(--donamic-bg-700);border-color:var(--donamic-primary);box-shadow:var(--donamic-shadow-lg)}.dark-donamic .option-picker-option:focus-visible{box-shadow:0 0 0 2px var(--donamic-bg-900),0 0 0 4px var(--donamic-primary)}.dark-donamic .option-picker-option.selected{border-color:var(--donamic-primary);background:rgba(99,229,38,0.05);box-shadow:0 0 0 1px var(--donamic-primary),0 0 20px var(--donamic-primary-glow)}.dark-donamic .option-picker-check{border-color:rgba(255,255,255,0.15)}.dark-donamic .option-picker-option.selected .option-picker-check{background:var(--donamic-primary);border-color:var(--donamic-primary)}.dark-donamic .option-picker-description{color:var(--donamic-text-500)}/* ========================================================================== DARK DONAMIC THEME - Chip Select ========================================================================== */ .dark-donamic .chip-select-chip{color:var(--donamic-text-300);background:var(--donamic-bg-700);border-color:rgba(255,255,255,0.08)}.dark-donamic .chip-select-chip:hover{color:var(--donamic-text-white);background:var(--donamic-bg-600);border-color:var(--donamic-primary)}.dark-donamic .chip-select-chip:focus-visible{box-shadow:0 0 0 2px var(--donamic-bg-900),0 0 0 4px var(--donamic-primary)}.dark-donamic .chip-select-chip.selected{color:var(--donamic-bg-900);background:var(--donamic-primary);border-color:var(--donamic-primary);box-shadow:0 0 12px var(--donamic-primary-glow)}/* ========================================================================== DARK DONAMIC THEME - Form Wizard ========================================================================== */ .dark-donamic .form-wizard-step-number{background:var(--donamic-bg-700);border-color:rgba(255,255,255,0.15);color:var(--donamic-text-500)}.dark-donamic .form-wizard-step-label{color:var(--donamic-text-500)}.dark-donamic .form-wizard-step.active .form-wizard-step-number{background:var(--donamic-primary-muted);border-color:var(--donamic-primary);color:var(--donamic-primary);box-shadow:0 0 12px var(--donamic-primary-glow)}.dark-donamic .form-wizard-step.active .form-wizard-step-label{color:var(--donamic-text-white)}.dark-donamic .form-wizard-step.completed .form-wizard-step-number{background:var(--donamic-primary);border-color:var(--donamic-primary);color:var(--donamic-bg-900)}.dark-donamic .form-wizard-step.completed .form-wizard-step-label{color:var(--donamic-text-100)}.dark-donamic .form-wizard-step-connector{background:rgba(255,255,255,0.1)}.dark-donamic .form-wizard-step-connector.completed{background:var(--donamic-primary)}.dark-donamic .form-wizard-progress-bar{background:rgba(255,255,255,0.1)}.dark-donamic .form-wizard-progress-fill{background:var(--donamic-primary);box-shadow:0 0 8px var(--donamic-primary-glow)}.dark-donamic .form-wizard-footer{border-top-color:rgba(255,255,255,0.08)}/* ========================================================================== DARK DONAMIC THEME - Base Form Field Polishing ========================================================================== */ /* Text inputs */ .dark-donamic .form-control{color:var(--donamic-text-white);background:var(--donamic-bg-700);border:2px solid transparent;border-radius:var(--donamic-radius-md)}.dark-donamic .form-control::placeholder{color:var(--donamic-text-500)}.dark-donamic .form-control:hover{border-color:rgba(255,255,255,0.15)}.dark-donamic .form-control:focus{border-color:var(--donamic-primary);box-shadow:0 0 0 4px var(--donamic-primary-muted)}.dark-donamic .form-control:disabled,.dark-donamic .form-control[readonly]{background:var(--donamic-bg-800);color:var(--donamic-text-500)}/* Select */ .dark-donamic .form-select{color:var(--donamic-text-white);background-color:var(--donamic-bg-700);border:2px solid transparent;border-radius:var(--donamic-radius-md);background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23ffffff' stroke-opacity='0.5' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e")}.dark-donamic .form-select:hover{border-color:rgba(255,255,255,0.15)}.dark-donamic .form-select:focus{border-color:var(--donamic-primary);box-shadow:0 0 0 4px var(--donamic-primary-muted)}.dark-donamic .form-select:disabled{background-color:var(--donamic-bg-800);color:var(--donamic-text-500)}.dark-donamic textarea.form-control{color:var(--donamic-text-white);background:var(--donamic-bg-700)}.dark-donamic .form-check-input{background-color:var(--donamic-bg-700);border-color:rgba(255,255,255,0.2)}.dark-donamic .form-check-input:hover{border-color:var(--donamic-primary)}.dark-donamic .form-check-input:focus{border-color:var(--donamic-primary);box-shadow:0 0 0 3px var(--donamic-primary-muted)}.dark-donamic .form-check-input:checked{background-color:var(--donamic-primary);border-color:var(--donamic-primary)}.dark-donamic .form-check-label{color:var(--donamic-text-100)}.dark-donamic .form-switch-input{background-color:var(--donamic-bg-600)}.dark-donamic .form-switch-input:checked{background-color:var(--donamic-primary)}.dark-donamic .form-switch-input::before{background-color:var(--donamic-text-white)}.dark-donamic .form-switch-input:focus{box-shadow:0 0 0 3px var(--donamic-primary-muted)}.dark-donamic .form-switch-label{color:var(--donamic-text-100)}.dark-donamic .form-label{color:var(--donamic-text-100)}.dark-donamic .form-text{color:var(--donamic-text-500)}.dark-donamic .form-control.is-valid:focus{box-shadow:0 0 0 3px rgba(34,197,94,0.2)}.dark-donamic .form-control.is-invalid:focus{box-shadow:0 0 0 3px rgba(239,68,68,0.2)}.dark-donamic .input-group-text{background:var(--donamic-bg-600);border-color:rgba(255,255,255,0.1);color:var(--donamic-text-300)}.dark-donamic .form-floating > label{color:var(--donamic-text-500)}.dark-donamic input[type="file"].form-control{color:var(--donamic-text-white);background:var(--donamic-bg-700)}.dark-donamic input[type="file"].form-control::file-selector-button{color:var(--donamic-text-white);background:var(--donamic-bg-600);border-color:rgba(255,255,255,0.1)}.dark-donamic input[type="file"].form-control::file-selector-button:hover{background:var(--donamic-bg-500)}.dark-donamic .form-range::-webkit-slider-runnable-track{background-color:var(--donamic-bg-600)}.dark-donamic .form-range::-webkit-slider-thumb{background-color:var(--donamic-primary)}.dark-donamic .form-range::-moz-range-track{background-color:var(--donamic-bg-600)}.dark-donamic .form-range::-moz-range-thumb{background-color:var(--donamic-primary)}.dark-donamic .valid-feedback{color:#22c55e}.dark-donamic .invalid-feedback{color:#ef4444}