/* ==========================================================
   inputs.css — সব টেক্সটবক্স/টেক্সটএরিয়া/সিলেক্ট বক্সের কমন ডিজাইন + হালকা অ্যানিমেশন
   partials/footer.php থেকে সব পেজে লোড হয় (শুধু স্ক্রিনে — প্রিন্টে কোনো প্রভাব নেই)।
   শুধু "চেহারা" (বর্ডার রঙ, শ্যাডো, ট্রানজিশন, অ্যানিমেশন) বদলায়; সাইজ, প্যাডিং ও লেআউট
   প্রতিটি পেজের নিজস্ব থাকে। কোনো বক্স বাদ দিতে চাইলে data-no-fx অ্যাট্রিবিউট দিন।
   ========================================================== */
:root { --fx-rgb: 0, 106, 78; --fx-accent: #006a4e; }
body.dark-mode { --fx-rgb: 79, 209, 165; --fx-accent: #4fd1a5; }

/* ---------- মূল টেক্সট ফিল্ড ---------- */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="hidden"]):not([type="color"]):not([type="image"]):not([data-no-fx]):not(.msg-input):not(.composer-link-input),
textarea:not([data-no-fx]):not(.msg-input):not(.composer-textarea):not(.story-text-input),
select:not([data-no-fx]) {
    border-color: rgba(var(--fx-rgb), 0.24);
    caret-color: var(--fx-accent);
    accent-color: var(--fx-accent);
    transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease, opacity .2s ease;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="hidden"]):not([type="color"]):not([type="image"]):not([data-no-fx]):not(.msg-input):not(.composer-link-input):hover:not(:focus):not(:disabled),
textarea:not([data-no-fx]):not(.msg-input):not(.composer-textarea):not(.story-text-input):hover:not(:focus):not(:disabled),
select:not([data-no-fx]):hover:not(:focus):not(:disabled) {
    border-color: rgba(var(--fx-rgb), 0.5);
    box-shadow: 0 4px 14px rgba(var(--fx-rgb), 0.08);
}
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="hidden"]):not([type="color"]):not([type="image"]):not([data-no-fx]):not(.msg-input):not(.composer-link-input):focus,
textarea:not([data-no-fx]):not(.msg-input):not(.composer-textarea):not(.story-text-input):focus,
select:not([data-no-fx]):focus {
    outline: none;
    border-color: var(--fx-accent);
    box-shadow: 0 0 0 4px rgba(var(--fx-rgb), 0.14), 0 8px 22px rgba(var(--fx-rgb), 0.12);
    animation: fxFocusRing .4s ease-out;
}
@keyframes fxFocusRing {
    0%   { box-shadow: 0 0 0 0 rgba(var(--fx-rgb), 0.38), 0 0 0 rgba(var(--fx-rgb), 0); }
    100% { box-shadow: 0 0 0 4px rgba(var(--fx-rgb), 0.14), 0 8px 22px rgba(var(--fx-rgb), 0.12); }
}

/* ---------- প্লেসহোল্ডার ---------- */
input::placeholder, textarea::placeholder { transition: opacity .25s ease; }
input:focus::placeholder, textarea:focus::placeholder { opacity: .4; }

/* ---------- ভুল/সঠিক ইনপুট (ব্যবহারকারী লেখার পর) ---------- */
input:user-invalid:not(:focus):not([data-no-fx]),
textarea:user-invalid:not(:focus):not([data-no-fx]),
select:user-invalid:not(:focus):not([data-no-fx]) {
    border-color: #f42a41;
    box-shadow: 0 0 0 3px rgba(244, 42, 65, 0.12);
    animation: fxShake .35s ease;
}
@keyframes fxShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    50% { transform: translateX(4px); }
    75% { transform: translateX(-2px); }
}

/* ---------- ডিজেবলড / রিড-অনলি ---------- */
input:disabled, textarea:disabled, select:disabled { opacity: .62; cursor: not-allowed; }
input[readonly]:not([type="hidden"]):not([data-no-fx]), textarea[readonly]:not([data-no-fx]) { background-color: rgba(var(--fx-rgb), 0.05); }

/* ---------- ব্রাউজারের অটোফিল ---------- */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus,
textarea:-webkit-autofill, select:-webkit-autofill {
    -webkit-text-fill-color: var(--text-dark, #1a202c);
    -webkit-box-shadow: 0 0 0 1000px var(--light-bg, #f7faf9) inset;
    caret-color: var(--fx-accent);
    transition: background-color 9999s ease-out 0s;
}

/* ---------- সিলেক্ট বক্স: সুন্দর তীর ---------- */
select:not([multiple]):not([size]):not([data-no-fx]) {
    -webkit-appearance: none; appearance: none;
    padding-right: 34px;
    background-repeat: no-repeat; background-position: right 12px center; background-size: 14px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23006a4e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    cursor: pointer;
}
body.dark-mode select:not([multiple]):not([size]):not([data-no-fx]) {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234fd1a5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
}

/* ---------- ফাইল বক্সের বাটন ---------- */
input[type="file"]:not([data-no-fx])::file-selector-button {
    margin-right: 12px; padding: 7px 14px; border: none; border-radius: 9px; cursor: pointer;
    background: rgba(var(--fx-rgb), 0.12); color: var(--fx-accent); font-family: inherit; font-weight: 700; font-size: 12.5px;
    transition: background-color .2s ease, transform .15s ease;
}
input[type="file"]:not([data-no-fx])::file-selector-button:hover { background: rgba(var(--fx-rgb), 0.22); transform: translateY(-1px); }

/* ---------- লেবেল ও আইকন ফোকাসে সাড়া দেয় ---------- */
.form-group > label, .lv-field > label, .lv-form label { transition: color .25s ease; }
.form-group:focus-within > label, .lv-field:focus-within > label { color: var(--fx-accent); }

.input-wrap i.field-icon { transition: opacity .25s ease, color .25s ease, transform .25s ease; }
.input-wrap:focus-within i.field-icon { opacity: 1; color: var(--fx-accent); transform: translateY(-50%) scale(1.15); }

/* ---------- চোখের (পাসওয়ার্ড শো) বাটন ---------- */
.pw-eye-btn { transition: color .2s ease, background-color .2s ease, transform .15s ease; }
.pw-eye-btn:hover { background: rgba(var(--fx-rgb), 0.10); transform: translateY(-50%) scale(1.08); }
.pw-eye-btn:active { transform: translateY(-50%) scale(0.92); }
.pw-eye-wrap:focus-within .pw-eye-btn { color: var(--fx-accent); }
.pw-eye-btn svg { animation: fxPop .25s ease-out; }
@keyframes fxPop { from { transform: scale(.6) rotate(-12deg); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- ফর্ম ঢুকলে ধাপে ধাপে হালকা ভেসে ওঠা ---------- */
.form-group, .lv-field, .form-row > .form-group {
    animation: fxRise .45s ease backwards;
}
.form-group:nth-child(2), .lv-field:nth-child(2) { animation-delay: .05s; }
.form-group:nth-child(3), .lv-field:nth-child(3) { animation-delay: .10s; }
.form-group:nth-child(4), .lv-field:nth-child(4) { animation-delay: .15s; }
.form-group:nth-child(5), .lv-field:nth-child(5) { animation-delay: .20s; }
.form-group:nth-child(n+6), .lv-field:nth-child(n+6) { animation-delay: .25s; }
@keyframes fxRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- অ্যানিমেশন কমানো থাকলে বন্ধ ---------- */
@media (prefers-reduced-motion: reduce) {
    input, textarea, select, .form-group, .lv-field, .pw-eye-btn, .pw-eye-btn svg, .input-wrap i.field-icon {
        animation: none !important; transition: none !important;
    }
}