/* Styles for Smart Project Budget Calculator - harmonized with site theme */
:root{
    --accent-gradient: linear-gradient(135deg,#667eea 0%,#ff5b74 100%);
    --accent-start:#667eea;
    --accent-end:#ff5b74;
    --muted:#6c757d;
    --card-bg:#ffffff;
}

/* Container and card */
.budget-calculator-container { max-width:820px; margin: 0 auto; position: relative; --mx: 0px; --my: 0px; }
.calculator-form { padding: 28px; border-radius: 12px; background: var(--card-bg); box-shadow: 0 30px 60px rgba(30,30,30,0.06); position: relative; z-index: 2; transform: translate3d(calc(var(--mx) * 0.06), calc(var(--my) * 0.06), 0); transition: transform .18s ease; }

/* Progress */
.progress { height:10px; background:#f1f3f5; border-radius:6px; overflow:hidden; }
.progress-bar { background: var(--accent-gradient); height:100%; width:0; box-shadow: 0 6px 24px rgba(102,126,234,0.18); }

/* Step indicators */
.step-indicators { margin-bottom: 24px; }
.step-indicator { width:44px; height:44px; border-radius:50%; background:#f3f4f6; color:var(--muted); display:inline-flex; align-items:center; justify-content:center; font-weight:700; box-shadow: 0 6px 18px rgba(21,21,21,0.03); transition: transform .22s ease, background .22s ease; }
.step-indicator.active { background: var(--accent-start); background: linear-gradient(135deg,var(--accent-start),var(--accent-end)); color:#fff; transform: translateY(-6px); box-shadow: 0 18px 40px rgba(102,126,234,0.12); }

/* Buttons consistent with theme */
.btn-gradient-purple-pink { background: var(--accent-gradient); border: none; color: #fff; padding: 10px 18px; border-radius: 10px; box-shadow: 0 12px 32px rgba(130,15,137,0.08); transition: transform .15s ease, box-shadow .15s ease; }
.btn-gradient-purple-pink:hover{ transform: translateY(-3px); box-shadow: 0 20px 46px rgba(130,15,137,0.12); }
.btn-outline-dark-gray { background: transparent; border:1px solid #e6e7e9; color:#333; padding:8px 14px; border-radius:10px; }

/* Option cards */
.card.h-100 { border-radius: 12px; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; border: 1px solid #eef2f6; }
.card.h-100 .card-body { padding: 22px 18px; }
.form-check-input:checked + .form-check-label .card.h-100, .card.h-100.selected { border-color: rgba(102,126,234,0.28); box-shadow: 0 18px 44px rgba(102,126,234,0.06); }

/* Item grid styles (re-use from inline styles but tightened) */
.item-grid { display:flex; flex-wrap:wrap; gap:12px; }
.col-item { flex: 1 1 calc(50% - 12px); }
@media(min-width:768px){ .col-item { flex: 1 1 calc(33.333% - 12px); } }

/* Card hover */
.card.h-100:hover { transform: translateY(-8px); }

/* Summary/result box */
#budgetResult { min-height: 220px; display:flex; align-items:center; justify-content:center; }
#resultContent { animation: fadeInUp .36s ease both; }

/* small utilities */
.bg-light { background:#fbfbfd; }
.text-gradient-dark-purple-watermelon { background: linear-gradient(90deg,#3b3b9f 0%, #ff2b86 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Responsive spacing */
@media(max-width:991px){
    .calculator-form { padding: 18px; }
    .step-indicator { width:38px; height:38px; }
}

/* Subtle animation */
@keyframes fadeInUp{ from { opacity:0; transform: translateY(8px);} to { opacity:1; transform: translateY(0);} }

/* Improve form control touch size */
.calculator-form .form-control, .calculator-form .form-select { padding: 10px 12px; border-radius:8px; }

/* Make the summary scroll area look nicer */
#summary-content { background: #fff; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(230,230,230,0.8); }

/* Accessibility focus styles */
.calculator-form .form-check-input:focus + .form-check-label .card.h-100 { outline: 3px solid rgba(102,126,234,0.14); }

/* Small dots accent similar to hero */
.calculator-form::before{ content: ''; position: absolute; left: -60px; top: -40px; width: 8px; height: 8px; background:#ff5b74; border-radius: 50%; opacity:0.12; }

/* Ensure inline spinner is centered */
#loadingSpinner { width:48px; height:48px; }

/* final small tweak for large screens */
@media(min-width:1200px){ .budget-calculator-container { max-width:920px; } }

/* Decorative background shapes that match site hero style */
.budget-calculator-container::before{
    content: '';
    position: absolute;
    left: -8%;
    top: -10%;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle at 30% 30%, rgba(102,126,234,0.12) 0%, rgba(102,126,234,0.06) 30%, rgba(255,255,255,0) 70%);
    filter: blur(28px);
    transform: translate3d(calc(var(--mx) * -0.6), calc(var(--my) * -0.6),0) rotate(-6deg);
    z-index: 0;
    pointer-events: none;
}
.budget-calculator-container::after{
    content: '';
    position: absolute;
    right: -6%;
    bottom: -8%;
    width: 360px;
    height: 360px;
    background: radial-gradient(circle at 70% 70%, rgba(255,91,116,0.10) 0%, rgba(102,126,234,0.04) 40%, rgba(255,255,255,0) 80%);
    filter: blur(36px);
    transform: translate3d(calc(var(--mx) * 0.45), calc(var(--my) * 0.45),0) rotate(8deg);
    z-index: 0;
    pointer-events: none;
}

/* Small floating accent dots */
.budget-calculator-container .bg-accent-dots{
    position:absolute; left:12px; top:60%; width:8px; height:8px; border-radius:50%; background:#ff5b74; opacity:.12; z-index:1; pointer-events:none; transform: translate3d(calc(var(--mx) * 0.2), calc(var(--my) * 0.2),0); }
.budget-calculator-container .bg-accent-dots.two{ left:42px; top:20%; background:#6f2c91; opacity:.08; width:6px; height:6px; }
.budget-calculator-container .bg-accent-dots.three{ right:36px; top:34%; background:#ffb3c2; opacity:.07; width:7px; height:7px; }

/* ensure the decoration doesn't affect printing */
@media print{ .budget-calculator-container::before, .budget-calculator-container::after, .budget-calculator-container .bg-accent-dots { display:none; } }

/* Floating decorative shapes */
.budget-calculator-container .floating-shape{
    position:absolute; z-index:0; pointer-events:none; will-change: transform, opacity;
    filter: blur(6px);
    opacity: .18;
    transform-origin: center;
}
.budget-calculator-container .floating-shape.shape-1{ width:260px; height:260px; left:-6%; top:-6%; background: radial-gradient(circle at 40% 40%, rgba(111,44,145,0.18), rgba(102,126,234,0.06)); border-radius:50%; animation: floatSlow 14s ease-in-out infinite; }
.budget-calculator-container .floating-shape.shape-2{ width:200px; height:200px; right:-8%; bottom:-12%; background: conic-gradient(from 120deg, rgba(255,91,116,0.12), rgba(102,126,234,0.06)); border-radius:20%; animation: floatSlowRev 18s ease-in-out infinite; }
.budget-calculator-container .floating-shape.shape-3{ width:120px; height:120px; left:18%; top:48%; background: radial-gradient(circle at 60% 60%, rgba(255,91,116,0.10), rgba(111,44,145,0.04)); border-radius:50%; animation: floatTiny 9s ease-in-out infinite; }

@keyframes floatSlow{ 0%{ transform: translate3d(0,0,0) rotate(0deg);} 50%{ transform: translate3d(18px, -12px,0) rotate(6deg);} 100%{ transform: translate3d(0,0,0) rotate(0deg);} }
@keyframes floatSlowRev{ 0%{ transform: translate3d(0,0,0) rotate(0deg);} 50%{ transform: translate3d(-22px, 10px,0) rotate(-8deg);} 100%{ transform: translate3d(0,0,0) rotate(0deg);} }
@keyframes floatTiny{ 0%{ transform: translateY(0);} 50%{ transform: translateY(-10px);} 100%{ transform: translateY(0);} }

/* small animated particles */
.budget-calculator-container .particle{ position:absolute; width:6px; height:6px; border-radius:50%; background: rgba(255,91,116,0.9); opacity:.12; pointer-events:none; transform: translate3d(0,0,0); animation: particleDrift 5s linear infinite; }
.budget-calculator-container .particle.p2{ width:5px; height:5px; background: rgba(111,44,145,0.9); opacity:.08; animation-duration:6.2s; }
.budget-calculator-container .particle.p3{ width:7px; height:7px; background: rgba(102,126,234,0.9); opacity:.07; animation-duration:7.1s; }
@keyframes particleDrift{ 0%{ transform: translateY(0) translateX(0) scale(1); } 25%{ transform: translateY(-10px) translateX(6px) scale(.9);} 50%{ transform: translateY(-6px) translateX(-8px) scale(.95);} 75%{ transform: translateY(6px) translateX(8px) scale(1.05);} 100%{ transform: translateY(0) translateX(0) scale(1);} }

/* Hue shift on mouse move - apply via JS adjusting CSS variable */
.budget-calculator-container { --hue-shift: 0deg; }
.budget-calculator-container::before, .budget-calculator-container::after, .budget-calculator-container .floating-shape{ filter: hue-rotate(var(--hue-shift)); }

/* Reduce motion for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
    .budget-calculator-container .floating-shape,
    .budget-calculator-container::before,
    .budget-calculator-container::after,
    .budget-calculator-container .particle{ animation: none !important; transform: none !important; }
}