/** 1. form-label 2. form-control -> done 3. form-select */ /* ===================================== HEADING 1 :: PREMIUM SKY-EMERALD UNDERLINE SMOOTH ===================================== */ .heading-1 { display: block !important; width: fit-content; /* trbl */ margin: 0.8rem auto 0.8rem auto !important; /* top and bottom spacing */ font-family: 'Poppins', sans-serif !important; /* modern premium font */ font-weight: 700 !important; font-size: 1.7rem !important; text-align: center !important; line-height: 1.3 !important; /* Gradient text */ background: linear-gradient(90deg, #0ea5e9, #22c55e) !important; /* sky-blue → emerald */ -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; /* Depth / shadow */ text-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important; /* Underline only with smooth gradient */ border-top: 0 !important; border-left: 0 !important; border-right: 0 !important; border-bottom: 3px solid; border-image: linear-gradient(90deg, rgba(14, 165, 233, 0.6), rgba(56, 189, 248, 0.4), rgba(34, 197, 94, 0.6)) 1 !important; /* soft blended gradient */ padding-bottom: 6px !important; letter-spacing: 0.5px !important; text-transform: uppercase !important; /* Smooth hover transition */ transition: all 0.25s ease-in-out !important; } /* Hover effect: slight lift + stronger shadow */ .heading-1:hover { text-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important; transform: translateY(-2px) !important; } /* ===================================== FORM LABELS :: PREMIUM OVERRIDE ===================================== */ label.form-label { display: inline-block !important; /* Typography */ font-size: 13.5px !important; font-weight: 600 !important; line-height: 1.4 !important; letter-spacing: 0.2px !important; /* Color */ color: #334155 !important; /* slate-700 */ /* Spacing */ margin-bottom: 6px !important; /* Rendering */ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ===================================== BOOTSTRAP .form-control — PREMIUM v2 (FORCED) ===================================== */ .form-control { /* Structure */ border-radius: 12px !important; padding: 11px 14px !important; min-height: 44px !important; margin-bottom: 3px; /* Surface */ background-color: #ffffff !important; border: 1px solid #e2e8f0 !important; color: #0f172a !important; /* Typography */ font-size: 15px !important; font-weight: 500 !important; letter-spacing: 0.15px !important; /* Premium depth */ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 1px rgba(0, 0, 0, 0.03) !important; /* Motion (IMPORTANT FIX) */ transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease !important; } /* Placeholder — understated */ .form-control::placeholder { color: #94a3b8 !important; font-weight: 400 !important; } /* Hover — minimal */ .form-control:hover { border-color: #cbd5e1 !important; } /* Focus — calm, premium */ .form-control:focus { background-color: #ffffff !important; border-color: #38bdf8 !important; /* sky-400 */ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 0 0 2px rgba(56, 189, 248, 0.18) !important; outline: none !important; } /* Disabled / Readonly */ .form-control:disabled, .form-control[readonly] { background-color: #f8fafc !important; border-color: #e5e7eb !important; color: #64748b !important; cursor: not-allowed !important; box-shadow: none !important; } /* Invalid — muted red */ .form-control.is-invalid { border-color: #f87171 !important; } .form-control.is-invalid:focus { box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.18) !important; } /* Valid — subtle green */ .form-control.is-valid { border-color: #4ade80 !important; } .form-control.is-valid:focus { box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.18) !important; } /* ===================================== FORM SELECT :: MATCHING .form-control HEIGHT ===================================== */ .form-select { appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; border-radius: 12px !important; /* match .form-control */ padding: 8px 38px 8px 14px !important; /* match vertical padding + room for arrow */ min-height: 44px !important; /* same as .form-control */ box-sizing: border-box !important; /* important to control total height */ background-color: #ffffff !important; border: 1px solid #e2e8f0 !important; /* match input border */ color: #0f172a !important; font-size: 15px !important; font-weight: 500 !important; letter-spacing: 0.15px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 1px rgba(0, 0, 0, 0.03) !important; /* Custom arrow */ background-image: linear-gradient(45deg, transparent 50%, #64748b 50%), linear-gradient(135deg, #64748b 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease !important; } /* Hover state */ .form-select:hover { border-color: #cbd5e1 !important; /* subtle hover like input */ } /* Focus state */ .form-select:focus { background-color: #ffffff !important; border-color: #38bdf8 !important; /* sky-400 */ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 0 0 2px rgba(56, 189, 248, 0.18) !important; outline: none !important; } /* Disabled / readonly */ .form-select:disabled { background-color: #f8fafc !important; border-color: #e5e7eb !important; color: #64748b !important; cursor: not-allowed !important; box-shadow: none !important; } /* Validation states */ .form-select.is-invalid { border-color: #f87171 !important; } .form-select.is-invalid:focus { box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.18) !important; } .form-select.is-valid { border-color: #4ade80 !important; } .form-select.is-valid:focus { box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.18) !important; }