/* Root */
.sdn-wrap{
  --bg:#B01632;
  --accent:#F18520;
  --tile-bg:#F5EEE9;
  --white:#fff;
  --text:#3c3c3c;
  --muted:#9b8f8f;
  --radius:18px;
  --gap:16px;
  --tile-h:64px;
  --shadow:0 1px 2px rgba(0,0,0,.06),0 8px 24px rgba(0,0,0,.08);
  background:var(--bg);
  padding:18px;
  border-radius:24px;
  color:var(--white);
}

/* 2-Spalten-Grid */
.sdn-grid{
  display:grid;
  grid-template-columns: 1fr auto;
  column-gap: 22px;
  align-items: start;
}

/* linke Spalte */
.sdn-col-left{ display:grid; row-gap:22px; }

/* rechte Spalte */
.sdn-col-right{ display:flex; align-items:flex-start; }

/* REIHE 1 */
.sdn-amounts{
  display:flex;
  align-items:stretch;
  gap:var(--gap);
  flex-wrap:nowrap;
  justify-content: space-between;
}

.sdn-amount,.sdn-custom,.sdn-submit{
  min-height:var(--tile-h);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* Kacheln */
.sdn-amount{
  background:var(--tile-bg);
  padding:0 22px;
  font-size:24px;
  line-height:1;
  color:var(--text);
  border:none;
  cursor:pointer;
  user-select:none;
  white-space:nowrap;
  transition:transform .06s, color .06s;
}
.sdn-amount:focus { background:var(--tile-bg); }
.sdn-amount:hover{ transform:translateY(-1px); } .active:hover {background-color: var(--tile-bg); }
.sdn-amount.active{ color:var(--accent); }

/* eigener Betrag */
.sdn-custom{
  background:var(--tile-bg);
  padding:0 14px 0 18px;
  border:none;
  flex:0 0 auto;
  width:auto;
  white-space:nowrap;
}
.sdn-custom input[type="number"]{
  width:15ch;
  border:none;
  background:transparent;
  outline:none;
  font-size:22px;
  line-height:1.1;
  color:var(--text);
  appearance:textfield;
}
.sdn-currency{
  font-size:22px;
  color:var(--muted);
  padding-left:8px;
  white-space:nowrap;
}

/* REIHE 2: Selects */
.sdn-selects{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:var(--gap);
}

.sdn-select{
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: var(--tile-h);
  background: var(--tile-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0 18px;
  display: flex;
  align-items: center;
}

/* Native Select reset */
.sdn-select select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 0 !important;
  outline: 0 !important;
  background: transparent;
  box-shadow: none !important;
  width: 100%;
  height: var(--tile-h);
  line-height: var(--tile-h);
  padding: 0 40px 0 2px;
  font: inherit;
  font-size: 16px;
  color: var(--text);
  cursor: pointer;
}
.sdn-select select::-ms-expand{ display:none; }

.sdn-select::after{
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 14px;
  color: var(--muted);
  pointer-events: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'><path d='M143 352.3L7 216.3c-9.3-9.3-9.3-25.3 0-34.6l22.6-22.6c9.3-9.4 24.5-9.4 33.9 0L160 255.6l96.6-96.6c9.4-9.4 24.6-9.4 34 0l22.4 22.6c9.4 9.4 9.4 24.6 0 34L177 352.3c-9.4 9.4-24.6 9.4-34 0z'/></svg>") no-repeat center/100% 100%;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'><path d='M143 352.3L7 216.3c-9.3-9.3-9.3-25.3 0-34.6l22.6-22.6c9.3-9.4 24.5-9.4 33.9 0L160 255.6l96.6-96.6c9.4-9.4 24.6-9.4 34 0l22.4 22.6c9.4 9.4 9.4 24.6 0 34L177 352.3c-9.4 9.4-24.6 9.4-34 0z'/></svg>") no-repeat center/100% 100%;
}

.sdn-select:hover{ transform: translateY(-1px); }
.sdn-select:focus-within{
  box-shadow: 0 0 0 3px rgba(241,133,32,.35), var(--shadow);
}
.sdn-select:focus-within::after{ color: var(--accent); }

.sdn-select select option{
  background: var(--tile-bg);
  color: var(--text);
}

/* Submit */
.sdn-submit{
  background:var(--accent);
  color:#fff;
  border:none;
  padding:0 24px;
  font-size:20px;
  line-height:1;
  cursor:pointer;
  white-space:nowrap;
  transition:transform .06s, box-shadow .1s, background .1s;
}
.sdn-submit:hover{ transform:translateY(-1px); }
.sdn-submit:disabled{ opacity:.6; cursor:not-allowed; }

/* Responsive */
@media (max-width: 1020px){
  .sdn-grid{ grid-template-columns: 1fr; row-gap: 18px; }
  .sdn-col-right{ justify-content:center; }
  .sdn-amounts{ flex-wrap:wrap; row-gap: var(--gap); justify-content: space-between; }
  .sdn-selects{ grid-template-columns: 1fr; }
  .sdn-submit{ width: auto; }
}
@media (max-width: 680px){
  .sdn-custom input[type="number"]{ width: 10ch; min-width: 200px; }
  .sdn-custom { width: 100%; }
}