/*
=========================================================
FurniCore Professional UI
Sprint 2
=========================================================
*/

:root{

--fc-primary:#2563eb;
--fc-primary-dark:#1d4ed8;
--fc-success:#16a34a;

--fc-bg:#f5f7fb;
--fc-card:#ffffff;

--fc-border:#e5e7eb;

--fc-heading:#111827;
--fc-text:#374151;
--fc-muted:#6b7280;

--fc-radius:22px;

--fc-shadow-sm:
0 6px 20px rgba(15,23,42,.06);

--fc-shadow:
0 18px 50px rgba(15,23,42,.10);

--fc-shadow-lg:
0 28px 80px rgba(15,23,42,.14);

}

*{

box-sizing:border-box;

}

.fc-calculator{

max-width:1380px;

margin:60px auto;

padding:0 24px;

font-family:
Inter,
system-ui,
sans-serif;

color:var(--fc-text);

}

.fc-layout{

display:grid;

grid-template-columns:

1fr 340px;

gap:42px;

align-items:start;

}

.fc-main{

min-width:0;

}

.fc-sidebar{

position:sticky;

top:40px;

display:flex;

flex-direction:column;

gap:24px;

}

.fc-sidebar-card{

background:#fff;

border:1px solid var(--fc-border);

border-radius:var(--fc-radius);

padding:30px;

box-shadow:var(--fc-shadow-sm);

transition:.3s;

}

.fc-sidebar-card:hover{

transform:translateY(-4px);

box-shadow:var(--fc-shadow);

}

.fc-sidebar-icon{

width:72px;

height:72px;

display:flex;

align-items:center;

justify-content:center;

font-size:36px;

background:#eff6ff;

border-radius:18px;

margin-bottom:20px;

}

.fc-sidebar-card h3{

margin:0 0 14px;

font-size:22px;

color:var(--fc-heading);

}

.fc-sidebar-card p{

line-height:1.8;

margin:0;

color:var(--fc-muted);

}

.fc-sidebar-features{

margin:24px 0 0;

padding:0;

list-style:none;

display:grid;

gap:14px;

}

.fc-sidebar-features li{

display:flex;

align-items:center;

gap:10px;

font-weight:600;

color:var(--fc-heading);

}

.fc-hero{

position:relative;

overflow:hidden;

padding:60px;

border-radius:28px;

background:

linear-gradient(
135deg,
#2563eb,
#1e3a8a);

color:#fff;

margin-bottom:40px;

box-shadow:var(--fc-shadow-lg);

}

.fc-hero-background{

position:absolute;

inset:0;

background:

radial-gradient(circle at top right,
rgba(255,255,255,.18),
transparent 55%);

pointer-events:none;

}

.fc-hero-content{

position:relative;

z-index:2;

}

.fc-hero-top{

display:flex;

justify-content:space-between;

align-items:center;

flex-wrap:wrap;

gap:16px;

margin-bottom:24px;

}

.fc-hero-badge{

display:inline-flex;

padding:10px 20px;

border-radius:999px;

background:rgba(255,255,255,.18);

backdrop-filter:blur(10px);

font-weight:700;

}

.fc-hero-version{

padding:10px 18px;

border-radius:999px;

background:rgba(255,255,255,.10);

font-size:14px;

}

.fc-hero-title{

font-size:48px;

line-height:1.1;

margin:0;

font-weight:800;

color:#fff;

}

.fc-hero-description{

max-width:760px;

margin:22px 0 40px;

font-size:19px;

line-height:1.8;

opacity:.95;

}

.fc-hero-highlights{

display:grid;

grid-template-columns:

repeat(3,1fr);

gap:18px;

margin-bottom:32px;

}

.fc-highlight-card{

display:flex;

gap:16px;

align-items:center;

padding:18px;

background:rgba(255,255,255,.12);

border-radius:18px;

backdrop-filter:blur(10px);

transition:.3s;

}

.fc-highlight-card:hover{

transform:translateY(-4px);

background:rgba(255,255,255,.18);

}

.fc-highlight-icon{

font-size:32px;

}

.fc-highlight-content{

display:flex;

flex-direction:column;

gap:4px;

}

.fc-highlight-content strong{

font-size:16px;

}

.fc-highlight-content span{

font-size:14px;

opacity:.9;

}

.fc-hero-stats{

display:flex;

gap:60px;

flex-wrap:wrap;

}

.fc-stat{

display:flex;

flex-direction:column;

}

.fc-stat strong{

font-size:34px;

font-weight:800;

}

.fc-stat span{

opacity:.9;

}
/* =========================================================
   PREMIUM PROGRESS
========================================================= */

.fc-stepper-wrapper{

background:#fff;

border:1px solid var(--fc-border);

border-radius:24px;

padding:30px;

margin-bottom:36px;

box-shadow:var(--fc-shadow-sm);

}

.fc-stepper-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:22px;

gap:20px;

flex-wrap:wrap;

}

.fc-stepper-badge{

display:inline-flex;

padding:8px 16px;

border-radius:999px;

background:#eff6ff;

color:var(--fc-primary);

font-size:13px;

font-weight:700;

margin-bottom:8px;

}

.fc-stepper-title{

margin:0;

font-size:24px;

color:var(--fc-heading);

}

.fc-stepper-progress{

font-size:15px;

font-weight:600;

color:var(--fc-muted);

}

.fc-stepper-progress strong{

color:var(--fc-primary);

}

.fc-progress-bar{

height:8px;

background:#e5e7eb;

border-radius:999px;

overflow:hidden;

margin-bottom:32px;

}

.fc-progress-fill{

height:100%;

width:0;

background:linear-gradient(
90deg,
#2563eb,
#3b82f6);

transition:.45s ease;

}

.fc-stepper{

display:flex;

justify-content:space-between;

gap:18px;

}

.fc-step{

flex:1;

display:flex;

align-items:flex-start;

gap:16px;

position:relative;

}

.fc-step-circle{

width:54px;

height:54px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:#d1d5db;

flex-shrink:0;

transition:.3s;

}

.fc-step.active .fc-step-circle{

background:var(--fc-primary);

transform:scale(1.08);

box-shadow:
0 8px 24px rgba(37,99,235,.35);

}

.fc-step.completed .fc-step-circle{

background:var(--fc-success);

}

.fc-step-number,
.fc-step-check{

font-weight:700;

font-size:16px;

color:#fff;

}

.fc-step-content{

display:flex;

flex-direction:column;

gap:6px;

padding-top:5px;

}

.fc-step-label{

font-size:15px;

font-weight:700;

color:var(--fc-heading);

}

.fc-step-status{

font-size:13px;

color:var(--fc-muted);

}

/* =========================================================
   WIZARD
========================================================= */

.fc-wizard-step{

display:none;

animation:
fcFade .35s ease;

}

.fc-wizard-step.active{

display:block;

}

.fc-step-header{

margin-bottom:30px;

}

.fc-step-badge{

display:inline-flex;

padding:8px 14px;

border-radius:999px;

background:#eff6ff;

color:var(--fc-primary);

font-size:13px;

font-weight:700;

margin-bottom:12px;

}

.fc-step-title{

margin:0;

font-size:34px;

font-weight:800;

color:var(--fc-heading);

}

.fc-step-description{

margin:14px 0 0;

font-size:16px;

color:var(--fc-muted);

line-height:1.7;

}

/* =========================================================
   OPTION GRID
========================================================= */

.fc-options{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(260px,1fr));

gap:26px;

}

.fc-option{

position:relative;

display:flex;

flex-direction:column;

background:#fff;

border:1px solid var(--fc-border);

border-radius:22px;

padding:26px;

cursor:pointer;

transition:.3s;

overflow:hidden;

text-align:left;

min-height:280px;

}

.fc-option:hover{

transform:translateY(-8px);

box-shadow:var(--fc-shadow);

border-color:var(--fc-primary);

}

.fc-option.active{

border-color:var(--fc-primary);

background:#eff6ff;

box-shadow:
0 18px 50px rgba(37,99,235,.18);

}

.fc-option-top{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:24px;

}

.fc-option-icon{

font-size:52px;

transition:.3s;

}

.fc-option:hover .fc-option-icon{

transform:scale(1.12);

}

.fc-option-check{

width:34px;

height:34px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:var(--fc-primary);

color:#fff;

opacity:0;

transform:scale(.5);

transition:.3s;

}

.fc-option.active .fc-option-check{

opacity:1;

transform:scale(1);

}

.fc-option-body{

flex:1;

}

.fc-option-title{

margin:0;

font-size:22px;

font-weight:800;

color:var(--fc-heading);

}

.fc-option-subtitle{

margin-top:12px;

font-size:15px;

line-height:1.7;

color:var(--fc-muted);

}

.fc-option-footer{

display:flex;

justify-content:space-between;

align-items:flex-end;

padding-top:24px;

border-top:1px solid #edf2f7;

}

.fc-price-label{

display:block;

font-size:12px;

text-transform:uppercase;

letter-spacing:.08em;

color:var(--fc-muted);

margin-bottom:6px;

}

.fc-option-price strong{

font-size:24px;

font-weight:800;

color:var(--fc-heading);

}

.fc-option-arrow{

font-size:26px;

font-weight:700;

color:var(--fc-primary);

transition:.3s;

}

.fc-option:hover .fc-option-arrow{

transform:translateX(6px);

}
/* =========================================================
   FOOTER & NAVIGATION
========================================================= */

.fc-footer{

display:flex;

justify-content:space-between;

align-items:center;

gap:20px;

margin-top:42px;

padding-top:30px;

border-top:1px solid var(--fc-border);

flex-wrap:wrap;

}

.fc-footer-left{

display:flex;

align-items:center;

gap:12px;

font-size:14px;

color:var(--fc-muted);

}

.fc-footer-right{

display:flex;

gap:14px;

flex-wrap:wrap;

}

.fc-btn{

display:inline-flex;

align-items:center;

justify-content:center;

gap:10px;

padding:15px 30px;

border-radius:14px;

border:none;

cursor:pointer;

font-size:15px;

font-weight:700;

transition:.25s;

text-decoration:none;

}

.fc-btn:hover{

transform:translateY(-2px);

}

.fc-btn:disabled{

opacity:.45;

cursor:not-allowed;

transform:none;

}

.fc-btn-primary{

background:var(--fc-primary);

color:#fff;

box-shadow:

0 12px 30px rgba(37,99,235,.22);

}

.fc-btn-primary:hover{

background:var(--fc-primary-dark);

}

.fc-btn-secondary{

background:#eef2f7;

color:var(--fc-heading);

}

/* =========================================================
   LOADING
========================================================= */

.fc-loading{

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

padding:90px 20px;

text-align:center;

}

.fc-loading-spinner{

width:70px;

height:70px;

border-radius:50%;

border:6px solid #dbeafe;

border-top-color:var(--fc-primary);

animation:fcSpin 1s linear infinite;

margin-bottom:28px;

}

.fc-loading h3{

margin:0;

font-size:24px;

color:var(--fc-heading);

}

.fc-loading p{

margin-top:12px;

font-size:16px;

color:var(--fc-muted);

}

/* =========================================================
   RESULTS
========================================================= */

.fc-result{

max-width:980px;

margin:60px auto;

}

.fc-result-card{

background:#fff;

border-radius:28px;

padding:46px;

box-shadow:var(--fc-shadow-lg);

border:1px solid var(--fc-border);

}

.fc-result-header{

text-align:center;

margin-bottom:40px;

}

.fc-result-badge{

display:inline-flex;

padding:10px 18px;

border-radius:999px;

background:#eff6ff;

color:var(--fc-primary);

font-weight:700;

margin-bottom:18px;

}

.fc-result-price{

margin:0;

font-size:62px;

font-weight:800;

color:var(--fc-heading);

}

.fc-result-range{

margin-top:18px;

font-size:18px;

line-height:1.7;

color:var(--fc-muted);

}

.fc-result-grid{

display:grid;

grid-template-columns:

repeat(2,1fr);

gap:26px;

margin:40px 0;

}

.fc-summary-card{

padding:28px;

background:#f8fafc;

border-radius:20px;

border:1px solid #edf2f7;

}

.fc-summary-card h3{

margin:0 0 24px;

font-size:22px;

color:var(--fc-heading);

}

.fc-summary-row{

display:flex;

justify-content:space-between;

align-items:center;

padding:14px 0;

border-bottom:1px solid #e5e7eb;

}

.fc-summary-row:last-child{

border-bottom:none;

}

.fc-summary-row span{

color:var(--fc-muted);

}

.fc-summary-row strong{

color:var(--fc-heading);

}

.fc-price-box{

padding:22px;

border-radius:18px;

background:#2563eb;

color:#fff;

text-align:center;

margin-bottom:24px;

}

.fc-price-box small{

display:block;

opacity:.9;

margin-bottom:10px;

}

.fc-price-box strong{

font-size:34px;

font-weight:800;

}

.fc-price-breakdown{

display:grid;

gap:14px;

}

.fc-price-breakdown div{

display:flex;

justify-content:space-between;

padding:14px 0;

border-bottom:1px solid #e5e7eb;

}

.fc-price-breakdown span{

font-weight:700;

color:var(--fc-heading);

}

.fc-recommendation{

margin-top:10px;

padding:30px;

border-left:6px solid var(--fc-primary);

background:#f8fbff;

border-radius:18px;

}

.fc-recommendation h3{

margin:0 0 16px;

color:var(--fc-heading);

}

.fc-recommendation p{

margin:0;

line-height:1.9;

color:var(--fc-muted);

}

.fc-result-actions{

display:flex;

gap:18px;

margin-top:36px;

flex-wrap:wrap;

}

.fc-action{

display:inline-flex;

align-items:center;

justify-content:center;

padding:15px 28px;

border-radius:14px;

font-weight:700;

text-decoration:none;

background:#eef2f7;

color:var(--fc-heading);

transition:.25s;

border:none;

cursor:pointer;

}

.fc-action:hover{

transform:translateY(-2px);

}

.fc-action-primary{

background:var(--fc-primary);

color:#fff;

}

/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes fcFade{

from{

opacity:0;

transform:translateY(12px);

}

to{

opacity:1;

transform:translateY(0);

}

}

@keyframes fcSpin{

to{

transform:rotate(360deg);

}

}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width:1100px){

.fc-layout{

grid-template-columns:1fr;

}

.fc-sidebar{

position:static;

}

.fc-hero-highlights{

grid-template-columns:1fr;

}

.fc-result-grid{

grid-template-columns:1fr;

}

}

@media (max-width:768px){

.fc-calculator{

padding:0 16px;

}

.fc-hero{

padding:34px 26px;

}

.fc-hero-title{

font-size:34px;

}

.fc-hero-description{

font-size:16px;

}

.fc-stepper{

flex-direction:column;

gap:22px;

}

.fc-options{

grid-template-columns:1fr;

}

.fc-option{

min-height:auto;

}

.fc-result-card{

padding:28px;

}

.fc-result-price{

font-size:42px;

}

.fc-footer{

flex-direction:column;

align-items:stretch;

}

.fc-footer-right{

width:100%;

}

.fc-btn{

width:100%;

}

.fc-result-actions{

flex-direction:column;

}

.fc-action{

width:100%;

}

}
/* =========================================================
   CARD COMPONENT
========================================================= */

.fc-card{

background:#fff;

border:1px solid var(--fc-border);

border-radius:24px;

padding:36px;

box-shadow:var(--fc-shadow-sm);

margin-bottom:30px;

transition:.3s;

}

.fc-card:hover{

box-shadow:var(--fc-shadow);

}

.fc-card-header{

margin-bottom:28px;

}

.fc-card-title{

margin:0;

font-size:30px;

font-weight:800;

color:var(--fc-heading);

}

.fc-card-description{

margin:14px 0 0;

font-size:16px;

line-height:1.7;

color:var(--fc-muted);

}

.fc-card-body{

display:block;

}

.fc-card-footer{

margin-top:30px;

padding-top:24px;

border-top:1px solid var(--fc-border);

}

@media (max-width:768px){

.fc-card{

padding:24px;

}

.fc-card-title{

font-size:24px;

}

}