/* farmingbd.com — Landing styles | Developed by Siyam King (t.me/Siyam_King_09) */
html { scroll-behavior: smooth; }
body { font-family: 'Hind Siliguri', sans-serif; background-color: #04140c !important; color: #f1f5f9 !important; overflow-x: hidden; }
.gradient-bg-main { background: linear-gradient(180deg, #04140c 0%, #0a2e1c 50%, #04140c 100%) !important; }
.gradient-bg-card { background: linear-gradient(135deg, rgba(16,68,42,.95) 0%, rgba(6,30,18,.98) 100%) !important; }
.orange-gradient-text { background: linear-gradient(135deg, #ff8c00 0%, #ff4500 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.announce-bar { background: linear-gradient(90deg, #052e16, #065f46, #052e16); background-size: 200% 100%; animation: slideBg 6s linear infinite; }
@keyframes slideBg { to { background-position: 200% 0; } }

.pulse-glow { box-shadow: 0 0 25px rgba(255,107,0,.4); animation: pulse 2s infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 20px rgba(255,107,0,.4); } 50% { box-shadow: 0 0 35px rgba(255,107,0,.75); } }

.sec-badge { display: inline-block; margin-bottom: .75rem; padding: .375rem 1rem; border-radius: 9999px; font-size: .75rem; font-weight: 700; color: #fb923c; background: rgba(249,115,22,.15); border: 1px solid rgba(249,115,22,.45); }

/* shine effect for buttons */
.btn-shine { position: relative; overflow: hidden; transition: transform .2s; }
.btn-shine:hover { transform: translateY(-2px); }
.btn-shine::after { content: ''; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255,255,255,.45), transparent); transform: skewX(-20deg); animation: shine 3s infinite; }
@keyframes shine { 0% { left: -75%; } 60%,100% { left: 130%; } }

.logo-float { animation: float 4s ease-in-out infinite; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.badge-bounce { animation: bounce 2.2s ease-in-out infinite; }
@keyframes bounce { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-6px) rotate(2deg); } }
.hover-lift { transition: transform .3s, box-shadow .3s, border-color .3s; }
.hover-lift:hover { transform: translateY(-4px); box-shadow: 0 14px 30px -10px rgba(34,197,94,.35); border-color: rgba(74,222,128,.7); }
.tilt-card { transition: transform .4s; }
.tilt-card:hover { transform: perspective(900px) rotateY(-4deg) rotateX(3deg) scale(1.01); }
.zoom-img { transition: transform .6s; }
.zoom-img:hover { transform: scale(1.05); }
.hero-glow::before { content: ''; position: absolute; width: 520px; height: 520px; right: -120px; top: -160px; background: radial-gradient(circle, rgba(249,115,22,.18), transparent 65%); pointer-events: none; }
.hero-glow::after { content: ''; position: absolute; width: 480px; height: 480px; left: -160px; bottom: -200px; background: radial-gradient(circle, rgba(34,197,94,.16), transparent 65%); pointer-events: none; }

/* scroll reveal */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }

/* video */
.video-frame { box-shadow: 0 0 0 6px rgba(16,185,129,.08), 0 30px 60px -20px rgba(0,0,0,.8); }
.unmute-btn { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); background: rgba(234,88,12,.95); color: #fff; font-weight: 700; font-size: 13px; padding: 8px 16px; border-radius: 9999px; display: flex; gap: 8px; align-items: center; box-shadow: 0 6px 20px rgba(0,0,0,.4); animation: pulse 1.6s infinite; z-index: 3; white-space: nowrap; }
.unmute-btn.hidden { display: none; }

/* ============ ORDER FORM ============ */
.checkout-bg { background: radial-gradient(ellipse at top, #0d3b24 0%, #04140c 70%); }
.orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .35; pointer-events: none; animation: orb 12s ease-in-out infinite alternate; }
.orb-1 { width: 320px; height: 320px; background: #f97316; top: 6%; left: -100px; }
.orb-2 { width: 360px; height: 360px; background: #22c55e; bottom: 0; right: -120px; animation-delay: -6s; }
@keyframes orb { to { transform: translate(60px, -40px) scale(1.15); } }

.cart-icon-wrap { width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; font-size: 30px; color: #fff; background: linear-gradient(135deg, #f97316, #ea580c); box-shadow: 0 0 0 10px rgba(249,115,22,.15), 0 0 0 20px rgba(249,115,22,.07); animation: ring 2.4s infinite; }
@keyframes ring { 0%,100% { box-shadow: 0 0 0 8px rgba(249,115,22,.18), 0 0 0 16px rgba(249,115,22,.07); } 50% { box-shadow: 0 0 0 14px rgba(249,115,22,.12), 0 0 0 28px rgba(249,115,22,.04); } }

.step { display: flex; align-items: center; gap: 6px; color: #6ee7b7; opacity: .55; font-weight: 600; transition: all .4s; }
.step span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 2px solid #10b981; font-size: 12px; transition: all .4s; }
.step.active { opacity: 1; color: #fff; }
.step.active span { background: linear-gradient(135deg, #f97316, #ea580c); border-color: #f97316; color: #fff; box-shadow: 0 0 14px rgba(249,115,22,.6); transform: scale(1.1); }
.step-line { width: 34px; height: 2px; background: rgba(16,185,129,.35); border-radius: 2px; }

.form-shell { position: relative; border-radius: 28px; padding: 2px; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(0,0,0,.9); }
.form-shell::before { content: ''; position: absolute; inset: -60%; background: conic-gradient(from 0deg, #f97316, #22c55e, #facc15, #10b981, #f97316); animation: spin 6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.form-inner { position: relative; border-radius: 26px; background: linear-gradient(160deg, rgba(8,45,27,.98), rgba(3,20,12,.99)); }
.form-h { display: flex; align-items: center; gap: 8px; color: #fff; font-weight: 700; font-size: 1rem; }
.form-h i { color: #fb923c; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

.fx-field { position: relative; }
.fx-field input, .fx-field textarea { width: 100%; background: rgba(2,20,12,.7); border: 2px solid rgba(16,185,129,.3); border-radius: 16px; padding: 22px 44px 8px 46px; color: #fff; font-size: 15px; outline: none; transition: border-color .3s, box-shadow .3s, background .3s; font-family: inherit; resize: none; }
.fx-field textarea { min-height: 78px; }
.fx-field label { position: absolute; left: 46px; top: 16px; color: #86efac; font-size: 14px; pointer-events: none; transition: all .25s cubic-bezier(.2,.8,.2,1); }
.fx-field label b { color: #f97316; }
.fx-field input:focus ~ label, .fx-field input:not(:placeholder-shown) ~ label,
.fx-field textarea:focus ~ label, .fx-field textarea:not(:placeholder-shown) ~ label { top: 6px; font-size: 11px; color: #fb923c; font-weight: 700; }
.fx-field input:focus, .fx-field textarea:focus { border-color: #f97316; background: rgba(2,26,15,.95); box-shadow: 0 0 0 4px rgba(249,115,22,.15), 0 10px 25px -10px rgba(249,115,22,.5); }
.fx-icon { position: absolute; left: 17px; top: 19px; color: #34d399; transition: all .3s; }
.fx-field input:focus ~ .fx-icon, .fx-field textarea:focus ~ .fx-icon { color: #fb923c; transform: scale(1.15); }
.fx-ok { position: absolute; right: 16px; top: 19px; color: #22c55e; opacity: 0; transform: scale(0); transition: all .35s cubic-bezier(.3,1.6,.5,1); }
.fx-field.valid input, .fx-field.valid textarea { border-color: #22c55e; }
.fx-field.valid .fx-ok { opacity: 1; transform: scale(1); }
.fx-err { display: block; max-height: 0; overflow: hidden; color: #fca5a5; font-size: 12px; padding-left: 6px; transition: max-height .3s, margin .3s; }
.fx-field.invalid input, .fx-field.invalid textarea { border-color: #ef4444; box-shadow: 0 0 0 4px rgba(239,68,68,.15); }
.fx-field.invalid .fx-err { max-height: 40px; margin-top: 4px; }
.fx-field.invalid .fx-icon { color: #ef4444; }
.fx-hint { display: block; font-size: 11px; color: rgba(167,243,208,.5); padding-left: 6px; margin-top: 3px; }
.fx-field.invalid .fx-hint { display: none; }
.shake { animation: shake .45s; }
@keyframes shake { 20%,60% { transform: translateX(-7px); } 40%,80% { transform: translateX(7px); } }

.opt-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; cursor: pointer; border: 2px solid rgba(16,185,129,.3); background: rgba(2,20,12,.6); transition: all .3s; }
.opt-card input { display: none; }
.opt-dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #34d399; position: relative; flex-shrink: 0; transition: all .3s; }
.opt-dot::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: #f97316; transform: scale(0); transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
.opt-card:has(input:checked), .opt-card.is-on { border-color: #f97316; background: rgba(249,115,22,.08); box-shadow: 0 8px 22px -12px rgba(249,115,22,.8); }
.opt-card:has(input:checked) .opt-dot, .opt-card.is-on .opt-dot { border-color: #f97316; }
.opt-card:has(input:checked) .opt-dot::after, .opt-card.is-on .opt-dot::after { transform: scale(1); }

.summary-card { padding: 18px; border-radius: 22px; background: linear-gradient(160deg, rgba(16,68,42,.75), rgba(4,30,17,.9)); border: 1px solid rgba(52,211,153,.25); }
.qty-bubble { position: absolute; top: -8px; right: -8px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; background: #f97316; color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; border: 2px solid #052e16; }
.qty-box { display: flex; align-items: center; background: rgba(2,20,12,.8); border: 2px solid rgba(16,185,129,.35); border-radius: 14px; overflow: hidden; }
.qty-box button { width: 40px; height: 40px; color: #fff; background: rgba(16,185,129,.18); transition: background .2s; }
.qty-box button:hover { background: #f97316; }
.qty-box input { width: 46px; text-align: center; background: transparent; color: #fff; font-weight: 800; font-size: 16px; border: 0; outline: none; }
.bump { animation: bump .35s; }
@keyframes bump { 50% { transform: scale(1.3); } }
.total-amt { font-size: 1.6rem; font-weight: 900; background: linear-gradient(135deg, #fdba74, #f97316); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.submit-btn { position: relative; width: 100%; overflow: hidden; padding: 16px 18px; border-radius: 18px; font-weight: 800; font-size: 1.05rem; color: #fff; background: linear-gradient(90deg, #ea580c, #f97316, #fb923c, #f97316, #ea580c); background-size: 300% 100%; animation: flow 4s linear infinite, pulse 2s infinite; transition: transform .2s; }
.submit-btn:hover { transform: translateY(-2px) scale(1.01); }
.submit-btn:active { transform: scale(.98); }
.submit-btn::after { content: ''; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255,255,255,.5), transparent); transform: skewX(-20deg); animation: shine 2.6s infinite; }
@keyframes flow { to { background-position: 300% 0; } }
.submit-btn .sb-load { display: none; }
.submit-btn.loading { pointer-events: none; opacity: .9; }
.submit-btn.loading .sb-text { display: none; }
.submit-btn.loading .sb-load { display: inline; }
.trust-chip { padding: 8px 4px; border-radius: 12px; background: rgba(2,20,12,.55); border: 1px solid rgba(16,185,129,.2); }
.trust-chip i { display: block; font-size: 16px; color: #fbbf24; margin-bottom: 4px; }

/* ============ REVIEWS ============ */
.rv-stat { padding: 22px; border-radius: 22px; background: linear-gradient(150deg, rgba(16,68,42,.85), rgba(4,30,17,.95)); border: 1px solid rgba(52,211,153,.25); }
.stars { color: #fbbf24; letter-spacing: 2px; }
.live-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; border-radius: 99px; background: rgba(239,68,68,.15); color: #fca5a5; font-size: 11px; font-weight: 800; letter-spacing: 1px; border: 1px solid rgba(239,68,68,.4); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: .2; transform: scale(.7); } }
#liveCount { display: inline-block; transition: color .3s; }
#liveCount.up { color: #4ade80 !important; }
#liveCount.down { color: #fb923c !important; }
.rv-bar { width: 0; background: linear-gradient(90deg, #f59e0b, #f97316); transition: width 1.6s cubic-bezier(.2,.8,.2,1); }
.reveal.in .rv-bar { width: var(--w); }
.marquee { overflow: hidden; padding: 8px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee-track { display: flex; gap: 16px; width: max-content; animation: marquee 70s linear infinite; }
.marquee-rev .marquee-track { animation-direction: reverse; animation-duration: 80s; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.rv-card { width: 300px; flex-shrink: 0; padding: 16px; border-radius: 20px; background: linear-gradient(150deg, rgba(16,68,42,.9), rgba(4,30,17,.95)); border: 1px solid rgba(52,211,153,.22); transition: transform .3s, border-color .3s; }
.rv-card:hover { transform: translateY(-4px); border-color: #f97316; }
.rv-avatar { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-weight: 800; color: #fff; background: linear-gradient(135deg, hsl(var(--h),70%,45%), hsl(calc(var(--h) + 40),80%,35%)); border: 2px solid rgba(255,255,255,.2); }
.verified { margin-left: 6px; font-size: 10px; letter-spacing: 0; color: #4ade80; font-weight: 600; }

/* footer */
.soc-btn { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(4,120,87,.6); display: flex; align-items: center; justify-content: center; color: #fff; transition: all .3s; }
.soc-btn:hover { border-color: #34d399; color: #34d399; transform: translateY(-3px); box-shadow: 0 8px 20px -6px rgba(52,211,153,.5); }
.dev-credit { display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px 7px 7px; border-radius: 99px; background: rgba(34,158,217,.1); border: 1px solid rgba(34,158,217,.4); color: #bae6fd; font-size: 12px; transition: all .3s; }
.dev-credit:hover { background: rgba(34,158,217,.22); transform: translateY(-2px); }
.dev-credit b { color: #fff; }
.dev-credit small { color: #7dd3fc; margin-left: 2px; }
.tg-ico { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #37aee2, #1e96c8); display: grid; place-items: center; font-size: 17px; color: #fff; }

/* music button */
.music-btn { position: fixed; left: 14px; bottom: 84px; z-index: 45; width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, #16a34a, #065f46); color: #fff; display: grid; place-items: center; box-shadow: 0 8px 20px rgba(0,0,0,.45); border: 2px solid rgba(255,255,255,.2); }
@media (min-width: 768px) { .music-btn { bottom: 20px; } }
.music-btn.hidden { display: none; }
.music-btn .eq { display: flex; gap: 3px; align-items: flex-end; height: 18px; }
.music-btn .eq i { width: 3px; background: #fff; border-radius: 2px; animation: eq 1s ease-in-out infinite; }
.music-btn .eq i:nth-child(2) { animation-delay: -.3s; } .music-btn .eq i:nth-child(3) { animation-delay: -.6s; } .music-btn .eq i:nth-child(4) { animation-delay: -.15s; }
@keyframes eq { 0%,100% { height: 4px; } 50% { height: 18px; } }
.music-btn .mute-ico { display: none; }
.music-btn.off .eq { display: none; }
.music-btn.off .mute-ico { display: block; }

/* ============ LIVE CHAT WIDGET ============ */
.chat-widget { position: fixed; bottom: 84px; z-index: 55; font-family: 'Hind Siliguri', sans-serif; }
@media (min-width: 768px) { .chat-widget { bottom: 24px; } }
.chat-widget.pos-right { right: 16px; }
.chat-widget.pos-left { left: 16px; }

.chat-launch-btn { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, #f97316, #ea580c); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; border: 2px solid rgba(255,255,255,0.3); transition: transform .3s, box-shadow .3s; animation: pulse 2.5s infinite; }
.chat-launch-btn:hover { transform: scale(1.08); }
.chat-unread-dot { position: absolute; top: 0; right: 0; width: 14px; height: 14px; background: #ef4444; border: 2px solid #fff; border-radius: 50%; }

.chat-popup { position: absolute; bottom: 68px; width: 320px; max-width: calc(100vw - 32px); height: 420px; max-height: calc(100vh - 160px); background: #071f14; border: 1px solid #134e2c; border-radius: 24px; box-shadow: 0 25px 60px -15px rgba(0,0,0,0.8); display: flex; flex-direction: column; overflow: hidden; animation: pop .35s cubic-bezier(.2,1.3,.4,1); }
.chat-widget.pos-right .chat-popup { right: 0; }
.chat-widget.pos-left .chat-popup { left: 0; }

.chat-header { background: linear-gradient(135deg, #0d3b24, #052e16); padding: 12px 16px; border-bottom: 1px solid #134e2c; display: flex; align-items: center; justify-content: space-between; }
.chat-messages-body { flex: 1; overflow-y: auto; background: #04140c; }
.chat-footer { background: #071f14; border-top: 1px solid #134e2c; }

.chat-msg { max-width: 82%; padding: 8px 12px; border-radius: 16px; font-size: 12px; line-height: 1.45; word-break: break-word; }
.chat-msg.admin { background: #134e2c; color: #ecfdf5; border-top-left-radius: 4px; border: 1px solid rgba(34,197,94,0.3); align-self: flex-start; }
.chat-msg.user { background: linear-gradient(135deg, #ea580c, #f97316); color: #fff; border-top-right-radius: 4px; align-self: flex-end; }
.chat-msg-time { font-size: 9px; opacity: 0.75; display: block; margin-top: 3px; text-align: right; }

/* sales popup */
.sales-pop { position: fixed; left: 14px; bottom: 140px; z-index: 50; display: flex; gap: 10px; align-items: center; max-width: 300px; padding: 10px 14px 10px 10px; border-radius: 16px; background: #fff; color: #0f172a; box-shadow: 0 18px 40px rgba(0,0,0,.35); transform: translateX(-130%); transition: transform .6s cubic-bezier(.2,.9,.3,1.2); }
@media (min-width: 768px) { .sales-pop { bottom: 80px; } }
.sales-pop.show { transform: translateX(0); }
.sales-pop img { width: 50px; height: 50px; border-radius: 10px; object-fit: cover; }
.sp-name { font-weight: 700; font-size: 13px; }
.sp-text { font-size: 12px; color: #475569; }
.sp-time { font-size: 10px; color: #64748b; margin-top: 2px; }

/* modals */
.modal-wrap { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0,0,0,.75); backdrop-filter: blur(4px); }
.modal-wrap.hidden { display: none; }
.modal-box { position: relative; width: 100%; max-width: 440px; border-radius: 26px; padding: 24px; box-shadow: 0 30px 60px rgba(0,0,0,.5); animation: pop .45s cubic-bezier(.2,1.4,.4,1); }
@keyframes pop { from { transform: scale(.7) translateY(30px); opacity: 0; } }
.modal-x { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%; background: #f1f5f9; color: #64748b; }
.success-box { background: #fff; color: #0f172a; z-index: 2; }
#confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.check-svg { width: 86px; height: 86px; margin: 0 auto; display: block; }
.check-svg circle { stroke: #22c55e; stroke-width: 3; stroke-dasharray: 160; stroke-dashoffset: 160; animation: draw .7s ease forwards; }
.check-svg path { stroke: #22c55e; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 50; stroke-dashoffset: 50; animation: draw .45s .6s ease forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.star-pick { display: flex; gap: 8px; font-size: 28px; justify-content: center; color: #cbd5e1; cursor: pointer; }
.star-pick i.on { color: #fbbf24; }
.star-pick i:hover { transform: scale(1.2); }
.rv-in { width: 100%; border: 2px solid #e2e8f0; border-radius: 14px; padding: 10px 14px; font-size: 14px; outline: none; font-family: inherit; }
.rv-in:focus { border-color: #f97316; }

.toast { position: fixed; left: 50%; top: 20px; transform: translate(-50%, -150%); z-index: 200; padding: 12px 20px; border-radius: 14px; background: #dc2626; color: #fff; font-weight: 600; font-size: 14px; box-shadow: 0 12px 30px rgba(0,0,0,.4); transition: transform .4s cubic-bezier(.2,1.3,.4,1); max-width: 92vw; text-align: center; }
.toast.ok { background: #16a34a; }
.toast.show { transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .reveal { opacity: 1; transform: none; } }