/***** Root palette *****/
:root{
  --bg:#0f172a;
  --glass:rgba(255,255,255,0.15);
  --border:rgba(255,255,255,0.4);
  --neon:#38bdf8;
  --neon2:#f472b6;
  --txt:#e2e8f0;
  --alt:#94a3b8;
}

.coalc-wrapper {
    position: relative;
    min-height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg,#0f2027,#203a43,#2c5364);
    font-family: 'Poppins',sans-serif;
    width: 80%;
    border-radius: 16px;
    margin: 30px auto;
}
/* Info slider */
.coalc-info-toggle{display:none}
.coalc-info-handle{
  position:fixed;left:0;top:50%;transform:translateY(-50%);background:var(--neon);color:#fff;padding:0.6rem 0.4rem;border-radius:0 0.5rem 0.5rem 0;cursor:pointer;z-index:20;
  animation:wave 2s infinite ease-in-out
}
@keyframes wave{0%,100%{transform:translateY(-50%) rotate(0)}50%{transform:translateY(-50%) rotate(-10deg)}}
.coalc-info-panel{
  position:fixed;left:-260px;top:0;height:100%;width:260px;background:#1e293b;color:#fff;padding:2rem 1rem;transition:left 0.4s cubic-bezier(.68,-0.55,.27,1.55);z-index:18;overflow-y:auto
}
.coalc-info-toggle:checked~.coalc-info-panel{left:0}

/* Frosted Card */
.coalc-card {
    width: min(80%,80%);
    backdrop-filter: blur(12px);
    background: var(--glass);
    border: 2px dashed var(--border);
    border-radius: 2rem;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    overflow: hidden;
    padding: 20px;
}

/* Steps */
.coalc-step{padding:2rem}
.coalc-heading {
    color: var(--txt);
    font-weight: 700;
    font-size: 1.4rem;
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    gap: .6rem;
}
.coalc-form{display:grid;gap:1.2rem}

/* Floating Fields */
.coalc-field{position:relative}
.coalc-field input, .coalc-field select {
    width: 100%;
    padding: 10px;
    border-radius: 1rem;
    border: none;
    background: rgb(245 202 192 / 43%);
    color: #fff;
    font-weight: 500;
    backdrop-filter: blur(6px);
    outline: none;
    border: 2px solid transparent;
    transition: border .3s;
}
.coalc-field label{
  position:absolute;left:0.9rem;top:1rem;font-size:0.9rem;color:var(--alt);pointer-events:none;
  transition:all .3s
}
.coalc-field input:focus,
.coalc-field input:not(:placeholder-shown),
.coalc-field select:focus{
  border:2px solid var(--neon)
}
.coalc-field input:focus+label,
.coalc-field input:not(:placeholder-shown)+label,
.coalc-field select:focus+label{
  top:-0.55rem;left:0.7rem;background:var(--bg);padding:0 .3rem;border-radius:.4rem;font-size:0.75rem;color:var(--neon)
}

/* Buttons */
.coalc-btn-row{display:flex;gap:1rem}
.coalc-btn-row.center{justify-content:center}
.coalc-btn{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.9rem 1rem;font-weight:600;color:#fff;background:none;border:3px solid transparent;cursor:pointer;position:relative;
}
.coalc-btn:before{
  content:'';position:absolute;inset:0;border-radius:2rem;
  border:3px dashed var(--neon);animation:borderMove 8s linear infinite;
}
.coalc-btn.alt:before{border-color:var(--neon2)}
@keyframes borderMove{to{stroke-dashoffset:-1000}}

.coalc-btn span{pointer-events:none}

/* Results */
.coalc-result-grid{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;color:#fff;margin-bottom:1rem}
.coalc-result-grid div{display:flex;justify-content:space-between;border-bottom:1px dashed var(--border)}
.coalc-copy{grid-column:1/3;text-align:right;cursor:pointer;color:var(--neon);font-size:1.2rem}

/* Chart */
#coalc-chart{max-height:200px}

/* dark glass toggle is global so no additional code */
/*────────────────────────────────────────────────────────────────────────*/
/* Responsive Adjustments for .coalc-wrapper Component                    */
/* Breakpoints: ≤992px, ≤768px, ≤600px, ≤400px                            */
/*────────────────────────────────────────────────────────────────────────*/

/* ≤ 992px */
@media (max-width: 992px) {
  .coalc-wrapper {
    width: 90%;
    padding: 15px;
  }
  .coalc-info-panel {
    width: 220px;
  }
  .coalc-info-handle {
    padding: 0.5rem 0.3rem;
    font-size: 0.9rem;
  }
  .coalc-card {
    width: 90%;
    padding: 16px;
  }
  .coalc-heading {
    font-size: 1.3rem;
    margin-bottom: 32px;
  }
  .coalc-form {
    gap: 1rem;
  }
  .coalc-field input,
  .coalc-field select {
    padding: 8px;
  }
  .coalc-field label {
    font-size: 0.85rem;
  }
  .coalc-btn-row {
    gap: 0.8rem;
  }
  .coalc-btn {
    padding: 8px 10px;
    font-size: 0.9rem;
  }
  .coalc-result-grid {
    gap: 0.6rem;
    font-size: 0.9rem;
  }
  .coalc-copy {
    font-size: 1.1rem;
  }
  #coalc-chart {
    max-height: 180px;
  }
}

/* ≤ 768px */
@media (max-width: 768px) {
  .coalc-wrapper {
    width: 95%;
    padding: 12px;
  }
  .coalc-info-panel {
    width: 200px;
  }
  .coalc-heading {
    font-size: 1.2rem;
    margin-bottom: 28px;
  }
  .coalc-field input,
  .coalc-field select {
    padding: 6px;
    font-size: 0.95rem;
  }
  .coalc-field label {
    font-size: 0.8rem;
  }
  .coalc-btn-row {
    flex-direction: column;
    gap: 0.6rem;
  }
  .coalc-btn {
    padding: 7px 8px;
    font-size: 0.85rem;
  }
  .coalc-result-grid {
    grid-template-columns: 1fr;
    gap: 0.5rem;
    font-size: 0.85rem;
  }
  .coalc-copy {
    text-align: center;
    font-size: 1rem;
  }
  #coalc-chart {
    max-height: 160px;
  }
}

/* ≤ 600px */
@media (max-width: 600px) {
  .coalc-wrapper {
    width: 100%;
    margin: 1rem 0;
    padding: 8px;
    border-radius: 12px;
  }
  .coalc-info-panel {
    width: 180px;
  }
  .coalc-info-handle {
    font-size: 0.85rem;
  }
  .coalc-card {
    width: 100%;
    padding: 12px;
  }
  .coalc-heading {
    font-size: 1.1rem;
    margin-bottom: 24px;
  }
  .coalc-field input,
  .coalc-field select {
    padding: 5px;
    font-size: 0.9rem;
  }
  .coalc-field label {
    font-size: 0.75rem;
  }
  .coalc-btn-row {
    gap: 0.5rem;
  }
  .coalc-btn {
    padding: 6px 8px;
    font-size: 0.8rem;
  }
  .coalc-result-grid {
    gap: 0.4rem;
    font-size: 0.8rem;
  }
  .coalc-copy {
    font-size: 0.95rem;
  }
  #coalc-chart {
    max-height: 140px;
  }
}

/* ≤ 400px */
@media (max-width: 400px) {
  .coalc-wrapper {
    margin: 0.5rem;
    padding: 6px;
    border-radius: 10px;
  }
  .coalc-info-panel {
    width: 160px;
    padding: 1rem 0.5rem;
  }
  .coalc-info-handle {
    padding: 0.4rem 0.2rem;
    font-size: 0.8rem;
  }
  .coalc-card {
    padding: 8px;
  }
  .coalc-heading {
    font-size: 1rem;
    margin-bottom: 16px;
  }
  .coalc-field input,
  .coalc-field select {
    padding: 4px;
    font-size: 0.85rem;
  }
  .coalc-field label {
    font-size: 0.7rem;
  }
  .coalc-btn-row {
    flex-direction: column;
    gap: 0.4rem;
  }
  .coalc-btn {
    padding: 5px 6px;
    font-size: 0.75rem;
  }
  .coalc-result-grid {
    gap: 0.3rem;
    font-size: 0.75rem;
    grid-template-columns: 1fr;
  }
  .coalc-copy {
    font-size: 0.9rem;
  }
  #coalc-chart {
    max-height: 120px;
  }
}