:root{--primary-color: #3b82f6;--primary-light: #60a5fa;--primary-dark: #2563eb;--secondary-color: #10b981;--accent-color: #8b5cf6;--background-color: #0f172a;--surface-color: #1e293b;--surface-light: #334155;--text-primary: #f1f5f9;--text-secondary: #cbd5e1;--text-light: #94a3b8;--border-color: #334155;--border-light: #475569;--success-color: #10b981;--warning-color: #f59e0b;--error-color: #ef4444;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .3);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .4), 0 2px 4px -2px rgb(0 0 0 / .4);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .5), 0 4px 6px -4px rgb(0 0 0 / .5);--radius-sm: 6px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:linear-gradient(135deg,#0f172a 0%,#1e293b 50%,#0f172a 100%);color:var(--text-primary);line-height:1.6;min-height:100vh}.climate-payment-app{min-height:100vh;background:linear-gradient(135deg,#0f172a 0%,#1e293b 50%,#0f172a 100%)}.progress-container{width:100%;height:4px;background:var(--surface-color);position:fixed;top:0;left:0;z-index:1000}.progress-fill{height:100%;background:linear-gradient(90deg,var(--primary-color),var(--secondary-color));transition:width .3s ease;border-radius:0 2px 2px 0}.app-container{max-width:1200px;margin:0 auto;padding:0 20px}.app-header{display:flex;justify-content:space-between;align-items:center;padding:24px 0;margin-bottom:8px}.logo-section{display:flex;align-items:center;gap:16px}.logo{display:flex;align-items:center;gap:12px;padding:16px 20px;background:var(--surface-color);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);border:1px solid var(--border-color)}.logo svg{color:var(--primary-light)}.logo-text h1{font-size:24px;font-weight:700;color:var(--text-primary);line-height:1.2}.logo-text p{font-size:14px;color:var(--text-secondary);font-weight:500}.user-info{display:flex;align-items:center;gap:16px}.property-badge{display:flex;align-items:center;gap:8px;padding:12px 20px;background:var(--surface-color);border:1px solid var(--border-color);border-radius:var(--radius-lg);font-weight:500;color:var(--text-primary);box-shadow:var(--shadow-md)}.btn-logout{display:flex;align-items:center;gap:8px;padding:12px 20px;background:var(--surface-color);border:1px solid var(--border-color);border-radius:var(--radius-lg);color:var(--text-secondary);font-weight:500;cursor:pointer;transition:all .2s ease;box-shadow:var(--shadow-md)}.btn-logout:hover{background:#334155;color:var(--error-color);border-color:var(--error-color)}.security-badge{display:flex;align-items:center;gap:8px;padding:12px 20px;background:var(--surface-color);border:1px solid var(--border-color);border-radius:var(--radius-lg);font-size:14px;color:var(--text-secondary);font-weight:500;box-shadow:var(--shadow-md)}.security-badge svg{color:var(--success-color)}.app-main{padding-bottom:40px}.main-card{background:var(--surface-color);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);border:1px solid var(--border-color);overflow:hidden}.step-indicator{display:grid;grid-template-columns:repeat(7,1fr);align-items:flex-start;padding:32px 40px 0;background:linear-gradient(135deg,#1e293b 0%,#334155 100%);border-bottom:1px solid var(--border-color);position:relative}.step-circle{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--surface-light);border:2px solid var(--border-color);transition:all .3s ease;box-shadow:var(--shadow-md);margin-bottom:12px;flex-shrink:0}.step-connector{position:absolute;top:28px;left:50%;right:-50%;height:2px;background:var(--border-color);z-index:1}.step.active~.step .step-connector,.step.current~.step .step-connector{background:var(--border-color)}.content-section{padding:40px}.step-header{display:flex;align-items:center;gap:20px;margin-bottom:32px;padding:0 8px}.header-icon{width:64px;height:64px;border-radius:var(--radius-lg);background:linear-gradient(135deg,var(--primary-color),var(--primary-light));display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:var(--shadow-lg)}.step-header h1{font-size:28px;font-weight:700;color:var(--text-primary);margin-bottom:4px}.step-header p{font-size:16px;color:var(--text-secondary)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:24px}.input-group{display:flex;flex-direction:column;gap:8px}.input-group.full-width{grid-column:1 / -1}.input-group label{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--text-primary);font-size:14px}.input-wrapper{position:relative;display:flex;align-items:center}.input-wrapper input,.input-wrapper select{width:100%;padding:12px 16px 12px 44px;border:1px solid var(--border-color);border-radius:var(--radius-md);font-size:14px;background:var(--surface-light);color:var(--text-primary);transition:all .2s ease}.input-wrapper input::placeholder{color:var(--text-light)}.input-wrapper input:focus,.input-wrapper select:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #3b82f633;background:var(--surface-color)}.input-icon{position:absolute;left:16px;color:var(--text-light);pointer-events:none}.icon-placeholder{width:18px;text-align:center;font-size:16px}.btn{display:flex;align-items:center;gap:8px;padding:12px 24px;border:none;border-radius:var(--radius-md);font-weight:600;font-size:14px;cursor:pointer;transition:all .2s ease;text-decoration:none}.btn-primary{background:linear-gradient(135deg,var(--primary-color),var(--primary-light));color:#fff;box-shadow:var(--shadow-md)}.btn-primary:hover:not(:disabled){background:linear-gradient(135deg,var(--primary-dark),var(--primary-color));box-shadow:var(--shadow-lg);transform:translateY(-1px)}.btn-secondary{background:var(--surface-light);color:var(--text-secondary);border:1px solid var(--border-color)}.btn-secondary:hover{background:#334155;color:var(--text-primary);border-color:var(--border-light)}.btn:disabled{opacity:.6;cursor:not-allowed;transform:none!important}.navigation{display:flex;justify-content:space-between;align-items:center;margin-top:32px;padding-top:24px;border-top:1px solid var(--border-color)}.property-info-card,.calculation-card,.info-card,.summary-card,.detail-card{background:var(--surface-light);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:24px;margin-bottom:24px;box-shadow:var(--shadow-md)}.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.info-item{display:flex;flex-direction:column;gap:4px}.info-item.full-width{grid-column:1 / -1}.info-item label{font-size:12px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}.info-value{font-size:16px;font-weight:500;color:var(--text-primary)}.calculation-header{display:flex;align-items:center;gap:12px;margin-bottom:20px}.calculation-header h3{font-size:18px;font-weight:600;color:var(--text-primary)}.calculation-header svg{color:var(--secondary-color)}.calculation-details{display:flex;flex-direction:column;gap:12px}.calculation-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;color:var(--text-primary)}.calculation-divider{height:1px;background:var(--border-color);margin:8px 0}.calculation-total{display:flex;justify-content:space-between;align-items:center;padding:16px 0 0;font-weight:600;color:var(--text-primary)}.total-amount{font-size:20px;color:var(--primary-light)}.payment-layout{display:grid;grid-template-columns:1fr 400px;gap:32px}.payment-method-selector{margin-bottom:24px}.payment-method-selector label{display:block;font-weight:600;color:var(--text-primary);margin-bottom:16px}.method-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}.method-card{display:flex;align-items:center;gap:12px;padding:16px;border:2px solid var(--border-color);border-radius:var(--radius-md);cursor:pointer;transition:all .2s ease;background:var(--surface-light)}.method-card:hover{border-color:var(--primary-light);background:var(--surface-color)}.method-card.selected{border-color:var(--primary-color);background:linear-gradient(135deg,#1e3a8a,#1e40af)}.method-title{font-weight:600;color:var(--text-primary);font-size:14px}.method-description{font-size:12px;color:var(--text-light)}.terms-section{margin-top:24px;padding-top:24px;border-top:1px solid var(--border-color)}.checkbox-group{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}.checkbox-group input[type=checkbox]{margin-top:2px;accent-color:var(--primary-color)}.checkbox-group label{font-size:14px;color:var(--text-primary);line-height:1.4}.summary-content{display:flex;flex-direction:column;gap:12px;margin-bottom:24px}.summary-item{display:flex;justify-content:space-between;align-items:center;padding:8px 0;color:var(--text-primary)}.summary-divider{height:1px;background:var(--border-color);margin:8px 0}.summary-total{display:flex;justify-content:space-between;align-items:center;padding:16px 0 0;font-weight:600;font-size:18px;color:var(--text-primary)}.total-price{color:var(--primary-light);font-size:20px}.pay-button{width:100%;padding:16px;background:linear-gradient(135deg,var(--secondary-color),#34d399);color:#fff;border:none;border-radius:var(--radius-md);font-weight:600;font-size:16px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:var(--shadow-lg)}.pay-button:hover:not(:disabled){background:linear-gradient(135deg,#059669,#10b981);box-shadow:var(--shadow-lg);transform:translateY(-1px)}.pay-button:disabled{opacity:.6;cursor:not-allowed;transform:none}.security-notice{display:flex;align-items:center;gap:8px;padding:16px;background:linear-gradient(135deg,#422006,#451a03);border:1px solid #f59e0b;border-radius:var(--radius-md);margin:24px 0;font-size:14px;color:#fbbf24}.security-notice svg{color:#f59e0b;flex-shrink:0}.payment-history{margin-bottom:32px}.empty-state{text-align:center;padding:60px 40px;color:var(--text-light)}.empty-state svg{margin-bottom:16px;color:var(--border-color)}.history-table{border:1px solid var(--border-color);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md)}.table-header{display:grid;grid-template-columns:1fr 1fr 1.5fr 1fr 1fr 1fr 1fr;gap:1px;background:var(--border-color)}.table-header>div{background:var(--surface-light);padding:16px 12px;font-weight:600;font-size:12px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}.table-row{display:grid;grid-template-columns:1fr 1fr 1.5fr 1fr 1fr 1fr 1fr;gap:1px;background:var(--border-color);border-top:1px solid var(--border-color)}.table-row>div{background:var(--surface-light);padding:16px 12px;font-size:14px;color:var(--text-primary)}.amount{font-weight:600;color:var(--primary-light)}.status{font-weight:600;font-size:12px;padding:4px 8px;border-radius:20px;text-align:center;text-transform:uppercase}.status.completed{background:#065f46;color:#6ee7b7}.status.pending{background:#92400e;color:#fcd34d}.status.failed{background:#991b1b;color:#fca5a5}.history-summary{margin-top:32px}.summary-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}.stat{display:flex;flex-direction:column;align-items:center;padding:20px;background:linear-gradient(135deg,#1e293b,#334155);border-radius:var(--radius-lg);text-align:center;border:1px solid var(--border-color)}.stat span:first-child{font-size:14px;color:var(--text-secondary);margin-bottom:8px}.stat span:last-child{font-size:24px;font-weight:700;color:var(--primary-light)}.confirmation{text-align:center}.confirmation-header{margin-bottom:40px}.success-animation{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,var(--success-color),#34d399);display:flex;align-items:center;justify-content:center;margin:0 auto 24px;color:#fff;box-shadow:var(--shadow-lg)}.confirmation-details{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:40px}.detail-grid{display:flex;flex-direction:column;gap:16px}.detail-item{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--border-color);color:var(--text-primary)}.detail-item:last-child{border-bottom:none}.fee-amount{font-size:20px;font-weight:700;color:var(--success-color)}.transaction-id{font-family:Monaco,Consolas,monospace;font-size:14px;color:var(--text-secondary)}.confirmation-actions{display:flex;justify-content:center;gap:16px;margin-bottom:40px}.environment-message{display:flex;align-items:center;gap:16px;padding:24px;background:linear-gradient(135deg,#064e3b,#065f46);border:1px solid #10b981;border-radius:var(--radius-lg);max-width:600px;margin:0 auto}.environment-message svg{color:var(--secondary-color);flex-shrink:0}.environment-message strong{color:var(--text-primary);display:block;margin-bottom:4px}.environment-message p{color:var(--text-secondary);font-size:14px}.app-footer{text-align:center;padding:32px 0;color:var(--text-light);font-size:14px;border-top:1px solid var(--border-color);margin-top:40px}.demo-credentials{background:linear-gradient(135deg,#1e293b,#334155);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:20px;margin:24px 0}.demo-credentials h4{margin-bottom:12px;color:var(--text-primary);font-size:14px}.demo-credentials p{margin-bottom:8px;font-size:13px;color:var(--text-secondary)}.demo-credentials strong{color:var(--primary-light)}.counter-container{display:flex;align-items:center;gap:12px}.counter-btn{width:36px;height:36px;border:1px solid var(--border-color);background:var(--surface-light);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;font-weight:600;color:var(--text-primary);transition:all .2s ease}.counter-btn:hover{background:var(--surface-color);border-color:var(--primary-color);color:var(--primary-color)}.counter-value{font-weight:600;color:var(--text-primary);min-width:40px;text-align:center}.bank-transfer-info .info-card{background:linear-gradient(135deg,#1e293b,#334155);border:1px solid var(--border-color)}.bank-details{display:flex;flex-direction:column;gap:12px;margin-top:16px}.bank-detail{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--border-color)}.bank-detail:last-child{border-bottom:none}.bank-detail span:first-child{font-weight:600;color:var(--text-secondary)}.bank-detail span:last-child{color:var(--text-primary);font-family:Monaco,Consolas,monospace;font-size:13px}.reference{color:var(--primary-light)!important;font-weight:600}.login-form{max-width:500px;margin:0 auto}@media (max-width: 1024px){.payment-layout{grid-template-columns:1fr;gap:24px}.summary-section{order:-1}}@media (max-width: 768px){.app-container{padding:0 16px}.app-header{flex-direction:column;gap:16px;text-align:center}.step-indicator{grid-template-columns:repeat(7,1fr);padding:24px 16px 0;gap:0}.step-circle{width:48px;height:48px}.step-title{font-size:12px}.step-description{font-size:10px}.step-connector{top:24px}.form-grid{grid-template-columns:1fr;gap:20px}.content-section{padding:24px}.confirmation-details,.summary-stats,.method-cards{grid-template-columns:1fr}.history-table .table-header,.history-table .table-row{grid-template-columns:1fr 1fr}.table-header>div:nth-child(n+4),.table-row>div:nth-child(n+4){display:none}}@media (max-width: 480px){.step-indicator{grid-template-columns:repeat(7,1fr);padding:20px 8px 0}.step-circle{width:40px;height:40px}.step-title{font-size:10px}.step-description{font-size:9px}.step-connector{top:20px}.step-header{flex-direction:column;text-align:center;gap:16px}.header-icon{align-self:center}.navigation{flex-direction:column;gap:12px}.navigation .btn{width:100%;justify-content:center}.confirmation-actions{flex-direction:column}.logo{padding:12px 16px}.logo-text h1{font-size:20px}.logo-text p{font-size:12px}}.nav-left{display:flex;gap:12px;align-items:center}.btn-outline{display:flex;align-items:center;gap:8px;padding:12px 20px;background:transparent;border:1px solid var(--primary-color);border-radius:var(--radius-md);color:var(--primary-color);font-weight:600;font-size:14px;cursor:pointer;transition:all .2s ease}.btn-outline:hover{background:var(--primary-color);color:#fff}.payment-history-modal{padding:0}.history-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px;padding-bottom:24px;border-bottom:1px solid var(--border-color)}.history-title{display:flex;align-items:center;gap:20px}.history-title h1{font-size:28px;font-weight:700;color:var(--text-primary);margin-bottom:4px}.history-title p{font-size:16px;color:var(--text-secondary)}.payment-history-content{margin-bottom:32px}.step-indicator{display:grid;grid-template-columns:repeat(6,1fr);align-items:flex-start;padding:32px 40px 0;background:linear-gradient(135deg,#1e293b 0%,#334155 100%);border-bottom:1px solid var(--border-color);position:relative}.step{display:flex;flex-direction:column;align-items:center;position:relative;padding:0 4px;z-index:2}.step-circle{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--surface-light);border:2px solid var(--border-color);transition:all .3s ease;box-shadow:var(--shadow-md);margin-bottom:12px;flex-shrink:0;color:var(--text-light)}.step.active .step-circle{background:var(--primary-color);border-color:var(--primary-color);color:#fff}.step.current .step-circle{background:var(--surface-light);border-color:var(--primary-color);color:var(--primary-color);box-shadow:0 0 0 4px #3b82f633}.step-circle svg{color:inherit}.step-text{text-align:center;max-width:100%;min-width:80px}.step-title{font-weight:600;color:var(--text-secondary);font-size:14px;margin-bottom:4px;white-space:nowrap}.step-description{font-size:12px;color:var(--text-light);line-height:1.3;white-space:nowrap}.step.active .step-title,.step.current .step-title{color:var(--text-primary)}.step.active .step-description,.step.current .step-description{color:var(--text-secondary)}.step-connector{position:absolute;top:28px;left:50%;right:-50%;height:2px;background:var(--border-color);z-index:1;transition:all .3s ease}.step-connector.active{background:var(--primary-color)}.step:last-child .step-connector{display:none}.step.active .step-connector,.step.current .step-connector{background:var(--primary-color)}