/* Infinity Mortgage Journey - frontend styles (v2.2: fully responsive, fluid sizing) */
.ifl-mj-wrap{--ifl-accent:#1d3fbf;--ifl-ink:#0d1b3d;--ifl-mut:#44507a;margin:0 auto;padding:clamp(10px,2.5vw,24px) clamp(8px,2vw,12px);font-family:inherit;width:100%;box-sizing:border-box}
.ifl-mj-wrap *,.ifl-mj-wrap *:before,.ifl-mj-wrap *:after{box-sizing:border-box}
.ifl-mj-card{background:#fff;border-radius:clamp(12px,1.6vw,16px);padding:clamp(16px,3.5vw,30px) clamp(14px,3vw,28px);box-shadow:0 6px 30px rgba(15,25,60,.08);overflow:hidden}

/* progress + meta */
.ifl-mj-progress{height:6px;background:#e8ecf5;border-radius:3px;margin-bottom:12px;overflow:hidden}
.ifl-mj-progress-bar{height:100%;width:5%;border-radius:3px;transition:width .45s cubic-bezier(.4,0,.2,1);background:linear-gradient(90deg,var(--ifl-accent),color-mix(in srgb,var(--ifl-accent) 60%,#7aa4ff));background-size:200% 100%;animation:iflSheen 2.5s linear infinite}
@keyframes iflSheen{0%{background-position:0 0}100%{background-position:200% 0}}
.ifl-mj-meta{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:clamp(12px,2vw,18px);font-size:clamp(11px,1.4vw,13px);color:var(--ifl-mut)}
.ifl-mj-stepno{font-weight:700;color:var(--ifl-accent);text-transform:uppercase;letter-spacing:.4px}
.ifl-mj-time{display:inline-flex;align-items:center;gap:6px}
.ifl-mj-time svg{width:15px;height:15px}

/* question row + help */
.ifl-mj-qrow{display:flex;align-items:flex-start;gap:clamp(8px,1.5vw,12px);margin:0 0 clamp(10px,1.8vw,14px)}
.ifl-mj-qic{flex:none;width:clamp(36px,5vw,44px);height:clamp(36px,5vw,44px);border-radius:clamp(9px,1.3vw,12px);display:flex;align-items:center;justify-content:center;color:var(--ifl-accent);background:color-mix(in srgb,var(--ifl-accent) 10%,#fff);animation:iflPop .35s cubic-bezier(.34,1.56,.64,1) both}
.ifl-mj-qic svg{width:55%;height:55%}
.ifl-mj-q{font-size:clamp(17px,2.6vw,23px);font-weight:700;color:var(--ifl-ink);margin:5px 0 0;line-height:1.3;flex:1;overflow-wrap:break-word}
.ifl-mj-helpbtn{flex:none;width:28px;height:28px;min-width:28px;margin-top:6px;border-radius:50%;border:1.5px solid #ccd4e8;background:#fff;color:var(--ifl-mut);font-weight:700;font-size:14px;cursor:pointer;transition:all .2s}
.ifl-mj-helpbtn:hover,.ifl-mj-helpbtn.open{border-color:var(--ifl-accent);color:#fff;background:var(--ifl-accent);transform:scale(1.08)}
.ifl-mj-help{background:#f2f6ff;border-left:3px solid var(--ifl-accent);border-radius:0 10px 10px 0;padding:clamp(10px,1.6vw,13px) clamp(12px,2vw,15px);font-size:clamp(13px,1.7vw,14px);color:var(--ifl-mut);line-height:1.55;margin:0 0 14px;animation:iflSlideDown .25s ease both}
@keyframes iflSlideDown{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.ifl-mj-sub{font-size:clamp(13px,1.8vw,15px);color:var(--ifl-mut);margin:-4px 0 16px}

/* step transition */
.ifl-anim-fwd{animation:iflInR .35s cubic-bezier(.4,0,.2,1) both}
.ifl-anim-back{animation:iflInL .35s cubic-bezier(.4,0,.2,1) both}
@keyframes iflInR{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes iflInL{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}

/* options - min 48px touch target */
.ifl-mj-opt{display:flex;align-items:center;gap:clamp(10px,1.6vw,13px);border:1.5px solid #ccd4e8;border-radius:12px;padding:clamp(11px,1.8vw,14px) clamp(12px,2vw,16px);min-height:48px;margin-bottom:clamp(9px,1.5vw,12px);cursor:pointer;background:#fff;transition:border-color .18s,box-shadow .18s,transform .18s;font-size:clamp(14.5px,1.9vw,16px);color:var(--ifl-ink);animation:iflPop .35s cubic-bezier(.34,1.56,.64,1) both;-webkit-tap-highlight-color:transparent}
@keyframes iflPop{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.ifl-mj-opt:hover{border-color:var(--ifl-accent);box-shadow:0 4px 14px rgba(29,63,191,.12);transform:translateY(-1px)}
.ifl-mj-opt .opt-ic{flex:none;width:clamp(32px,4.4vw,38px);height:clamp(32px,4.4vw,38px);border-radius:10px;display:flex;align-items:center;justify-content:center;background:#f1f4fb;color:var(--ifl-mut);transition:all .2s}
.ifl-mj-opt .opt-ic svg{width:56%;height:56%}
.ifl-mj-opt:hover .opt-ic{background:color-mix(in srgb,var(--ifl-accent) 12%,#fff);color:var(--ifl-accent)}
.ifl-mj-opt .opt-lbl{flex:1;min-width:0;overflow-wrap:break-word}
.ifl-mj-opt .dot{width:20px;height:20px;border:2px solid #ccd4e8;border-radius:50%;flex:none;position:relative;transition:border-color .2s}
.ifl-mj-opt.selected{background:var(--ifl-ink);color:#fff;border-color:var(--ifl-ink)}
.ifl-mj-opt.selected .opt-ic{background:rgba(255,255,255,.14);color:#fff}
.ifl-mj-opt.selected .dot{border-color:#fff}
.ifl-mj-opt.selected .dot:after{content:"";position:absolute;inset:3px;background:#fff;border-radius:50%;animation:iflDot .25s cubic-bezier(.34,1.56,.64,1) both}
@keyframes iflDot{from{transform:scale(0)}to{transform:scale(1)}}
.ifl-mj-opt.pulse{animation:iflPulse .3s ease}
@keyframes iflPulse{0%{transform:scale(1)}50%{transform:scale(1.015)}100%{transform:scale(1)}}

/* inputs - 16px minimum prevents iOS auto-zoom */
.ifl-mj-input{width:100%;border:1.5px solid #ccd4e8;border-radius:12px;padding:clamp(12px,1.8vw,14px) 15px;font-size:16px;margin-bottom:12px;color:var(--ifl-ink);transition:border-color .18s,box-shadow .18s;min-height:48px}
.ifl-mj-input:focus{outline:none;border-color:var(--ifl-accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--ifl-accent) 14%,transparent)}
.ifl-mj-label{display:block;font-size:clamp(13px,1.7vw,14px);font-weight:600;color:var(--ifl-mut);margin:0 0 5px}
.ifl-mj-currency{position:relative}
.ifl-mj-currency>span{position:absolute;left:15px;top:50%;transform:translateY(-62%);font-size:16px;font-weight:700;color:var(--ifl-mut)}
.ifl-mj-currency .ifl-mj-input{padding-left:32px}

/* nav buttons */
.ifl-mj-nav{display:flex;justify-content:space-between;margin-top:clamp(16px,2.4vw,22px);gap:10px;flex-wrap:wrap}
.ifl-mj-btn{border-radius:12px;padding:clamp(11px,1.8vw,13px) clamp(18px,3vw,26px);font-size:clamp(15px,1.9vw,16px);font-weight:600;cursor:pointer;transition:all .18s;min-height:48px;-webkit-tap-highlight-color:transparent}
.ifl-mj-back{background:#fff;border:2px solid var(--ifl-ink);color:var(--ifl-ink)}
.ifl-mj-back:hover{background:#f4f6fb}
.ifl-mj-next{background:var(--ifl-accent);border:2px solid var(--ifl-accent);color:#fff;margin-left:auto;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.ifl-mj-next:hover{filter:brightness(1.1);transform:translateY(-1px);box-shadow:0 6px 16px rgba(29,63,191,.28)}
.ifl-mj-next:active{transform:none}
.ifl-mj-next:disabled{opacity:.65;cursor:not-allowed;transform:none;box-shadow:none}
.ifl-spinner{width:16px;height:16px;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;display:inline-block;animation:iflSpin .7s linear infinite}
@keyframes iflSpin{to{transform:rotate(360deg)}}

/* feedback */
.ifl-mj-error{color:#c0392b;font-size:clamp(13px,1.7vw,14px);margin-top:12px;min-height:18px}
.ifl-shake{animation:iflShake .4s ease}
@keyframes iflShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.ifl-mj-notice{background:#ffe9c2;border-radius:12px;padding:clamp(12px,2vw,16px) clamp(14px,2.4vw,18px);font-size:clamp(13.5px,1.8vw,15px);color:#5a4300;margin:0 0 16px;line-height:1.5;animation:iflPop .35s both}

/* success */
.ifl-mj-done{text-align:center;padding:clamp(16px,3vw,26px) 10px}
.ifl-mj-done h3{font-size:clamp(20px,3vw,26px);color:var(--ifl-ink);margin:14px 0 10px;animation:iflPop .4s .5s both}
.ifl-mj-done p{font-size:clamp(14px,1.9vw,16px);color:var(--ifl-mut);animation:iflPop .4s .65s both}
.ifl-mj-donecheck{width:clamp(64px,10vw,84px);height:clamp(64px,10vw,84px);display:block;margin:0 auto}
.ifl-mj-donecheck .c{stroke:var(--ifl-accent);stroke-dasharray:176;stroke-dashoffset:176;animation:iflDraw .6s ease-out forwards}
.ifl-mj-donecheck .t{stroke:var(--ifl-accent);stroke-dasharray:40;stroke-dashoffset:40;animation:iflDraw .35s .55s ease-out forwards}
@keyframes iflDraw{to{stroke-dashoffset:0}}

/* consent + trust */
.ifl-mj-consent{display:flex;gap:10px;align-items:flex-start;font-size:clamp(12.5px,1.7vw,14px);color:var(--ifl-mut);margin-top:6px;line-height:1.5}
.ifl-mj-consent input{margin-top:3px;width:18px;height:18px;flex:none}
.ifl-mj-trust{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;font-size:clamp(11.5px,1.5vw,13px);color:var(--ifl-mut);text-align:center}
.ifl-mj-trust svg{width:15px;height:15px;flex:none;color:var(--ifl-accent)}

/* Elementor outer wrapper */
.ifl-el-outer{display:flex;justify-content:center;width:100%}
.ifl-el-outer>div{min-width:0}

/* ============================================================
 * BREAKPOINTS
 * ============================================================ */

/* Small phones (<=380px): stack nav full width, tighter chrome */
@media(max-width:380px){
	.ifl-mj-wrap{padding:6px 4px}
	.ifl-mj-nav{flex-direction:column-reverse}
	.ifl-mj-btn{width:100%;margin-left:0}
	.ifl-mj-meta{justify-content:center}
	.ifl-mj-qrow{gap:8px}
	.ifl-mj-opt .dot{width:17px;height:17px}
}

/* Phones (381-520px): full-width buttons, submit stays on top */
@media(min-width:381px) and (max-width:520px){
	.ifl-mj-nav{flex-direction:column-reverse}
	.ifl-mj-btn{width:100%;margin-left:0}
}

/* Landscape phones: trim vertical chrome so the step fits the short viewport */
@media(max-height:480px) and (orientation:landscape){
	.ifl-mj-wrap{padding:8px}
	.ifl-mj-card{padding:14px 18px}
	.ifl-mj-progress{margin-bottom:8px}
	.ifl-mj-meta{margin-bottom:8px}
	.ifl-mj-opt{min-height:42px;padding:8px 14px;margin-bottom:7px}
	.ifl-mj-done{padding:8px}
}

/* Tablets (768-1024px): a touch more breathing room */
@media(min-width:768px) and (max-width:1024px){
	.ifl-mj-card{padding:30px 30px}
}

/* Large desktop (>=1600px): scale the card up slightly so it doesn't look lost */
@media(min-width:1600px){
	.ifl-mj-q{font-size:25px}
	.ifl-mj-opt{font-size:17px;padding:16px 18px}
	.ifl-mj-card{padding:34px 32px}
}

/* Mouse-only fine pointers can have slightly tighter targets; touch keeps 48px */
@media(hover:none) and (pointer:coarse){
	.ifl-mj-opt:hover{transform:none}
	.ifl-mj-next:hover{transform:none}
}

/* accessibility: honour reduced motion */
@media(prefers-reduced-motion:reduce){
	.ifl-mj-wrap *,.ifl-mj-wrap *:before,.ifl-mj-wrap *:after{animation:none!important;transition:none!important}
	.ifl-mj-donecheck .c,.ifl-mj-donecheck .t{stroke-dashoffset:0}
}