/* Návrh 8 – Dark Glass + Neon Gradient */
:root {
  --primary: #16a34a; /* green for Generate */
  --primary-text: #ffffff;
}

html, body { height:100%; }
body {
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #e6e9f5;
  background:
    radial-gradient(40rem 40rem at 80% 20%, rgba(99,102,241,.25), transparent 60%),
    radial-gradient(36rem 36rem at 20% 80%, rgba(168,85,247,.25), transparent 55%),
    linear-gradient(135deg, #0a0f23 0%, #111327 45%, #0a0f23 100%);
}

.wrap { max-width: 1600px; margin: 2.2rem auto; padding: 1rem; }
.layout { display: grid; grid-template-columns: 2fr 1fr; gap: 1.5rem; align-items: start; }
@media (max-width: 1024px) { .layout { grid-template-columns: 1fr; } }

.section-title { margin: .25rem 0 1rem; font-size: 1.15rem; font-weight: 600; color: #f3f4f6; }

.card {
  border-radius: 1rem;
  padding: 1rem;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.glass {
  background: rgba(255,255,255,.06);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

form#payform {
  display: grid;
  gap: .8rem;
  grid-template-columns: repeat(6, 1fr);
  align-items: end;
}

label { display:grid; gap:.35rem; grid-column: span 2; font-size:.95rem; color:#cbd5e1; }
label.full { grid-column: 1 / -1; }
.grid-1 { grid-column: span 1; }
.grid-2 { grid-column: span 2; }
.grid-3 { grid-column: span 3; }
.grid-6 { grid-column: span 6; }

input, select, button, a.btn {
  font-size: 1rem;
  padding: .70rem .8rem;
  border-radius: .65rem;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: #e5e7eb;
  outline: none;
}
input::placeholder, select::placeholder { color: #9aa3b2; }
input:focus, select:focus, button:focus, a.btn:focus {
  box-shadow: 0 0 0 .25rem rgba(34,197,94,.30);
  border-color: transparent;
}

button, a.btn { cursor: pointer; text-align:center; text-decoration:none; transition: transform .03s ease, filter .15s ease; }
button:active, a.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--primary); color: var(--primary-text); border: none; }
.btn-primary:hover { filter: brightness(.97); }

.hint { color:#9aa3b2; font-size:.9rem; }
.hr { height:1px; background: rgba(255,255,255,.1); margin:1rem 0; grid-column: 1 / -1; }

.right-col { position: sticky; top: 1rem; align-self: start; }
.qr { margin-top: .75rem; display:flex; gap: 1.25rem; align-items:center; flex-wrap:wrap; }
#qr {
  display:block;
  border-radius: .75rem;
  box-shadow: 0 0 0 8px rgba(255,255,255,.06), 0 0 50px rgba(168,85,247,.35);
}

a.btn { display:inline-block; background: rgba(255,255,255,.06); }
a.btn:hover { filter: brightness(1.05); }

/* Make dropdown and small buttons compact */
#tplSelect { width:100%; }


.generovani { display: block; grid-column: 1 / -1; padding: 18px; margin: 0px 0 20px 0;}
.vzory { display: block; grid-column: 1 / -1; padding: 18px; margin: 0px 0 20px 0;}
.distribuce { display: block; grid-column: 1 / -1; padding: 18px; margin: 0px 0 20px 0;}
.max-button {width: 100%;}

.preview {
    display: flex
;
    align-items: center;
    justify-content: center;
    background: #0b1025;
    border: 1px dashed #2b3465;
    border-radius: 16px;
    min-height: 320px;
}

.crop-text {
  display: inline-block;   /* nebo block, ale ne inline */
  max-width: 40ch;         /* 20 znaků (ch = šířka "0" ve fontu) */
  white-space: nowrap;     /* zakáže zalomení */
  overflow: hidden;        /* ořízne přesahující text */
  text-overflow: ellipsis; /* zobrazí "..." */
  color: #d2d2f8;
  margin: 10px;
}
/* === Dark form hardening (unifikace vzhledu input/select) === */
:root, body, form, .card { color-scheme: dark; }

select {
  -webkit-appearance: none;
  appearance: none;
  background-color: rgba(255,255,255,.06);
  color: #e5e7eb;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: .65rem;
  padding-right: 2.2rem;
  position: relative;
}

input, select, textarea {
  background-color: rgba(255,255,255,.06);
  color: #e5e7eb;
}
input:hover, select:hover, textarea:hover {
  background-color: rgba(255,255,255,.08);
}
input:focus, select:focus, textarea:focus {
  background-color: rgba(255,255,255,.08);
  box-shadow: 0 0 0 .25rem rgba(34,197,94,.30);
  border-color: transparent;
}
input:disabled, select:disabled, textarea:disabled {
  opacity: .65;
  cursor: not-allowed;
}

select option, select optgroup {
  background-color: #0a0f23;
  color: #e5e7eb;
}

input:-webkit-autofill,
select:-webkit-autofill,
textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px rgba(255,255,255,.06) inset !important;
  -webkit-text-fill-color: #e5e7eb !important;
  caret-color: #e5e7eb !important;
  transition: background-color 9999s ease-in-out 0s;
}

input:required:valid,
select:required:valid,
input:not(:placeholder-shown) {
  background-color: rgba(255,255,255,.06);
  color: #e5e7eb;
}

select {
  background-image:
    linear-gradient(45deg, transparent 50%, #e5e7eb 50%),
    linear-gradient(135deg, #e5e7eb 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
    calc(100% - 1.2rem) calc(50% - .25rem),
    calc(100% - .8rem)  calc(50% - .25rem),
    calc(100% - 2.2rem) 50%;
  background-size:
    .35rem .35rem,
    .35rem .35rem,
    1px 1.8rem;
  background-repeat: no-repeat;
}
select:focus {
  background-image:
    linear-gradient(45deg, transparent 50%, #ffffff 50%),
    linear-gradient(135deg, #ffffff 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
}

#mode, #tplSelect {
  background-color: rgba(255,255,255,.06) !important;
  color: #e5e7eb !important;
}



/* === Mobile & tablet responsiveness fixes === */
@media (max-width: 900px) {
  /* Stack the form into a single column */
  form#payform { grid-template-columns: 1fr; }
  /* Make all fields span full width */
  label, label.full, .grid-1, .grid-2, .grid-3, .grid-6 { grid-column: 1 / -1; }
  /* Disable sticky sidebar on small screens */
  .right-col { position: static; top: auto; align-self: stretch; }
  /* Tighter overall paddings on small devices */
  .wrap { margin: 1rem auto; padding: .75rem; }
  .section-title { font-size: 1rem; }
  /* Larger tap targets */
  button, a.btn { min-height: 44px; }
  /* Preview area shouldn't be too tall on phones */
  .preview { min-height: 220px; }
  /* Headline scales nicely */
  h1 { font-size: clamp(1.25rem, 4.5vw, 1.75rem); }
  /* Space economy in QR row */
  .qr { gap: .75rem; }
}

@media (max-width: 600px) {
  /* Keep layout single column and reduce gaps further */
  .layout { grid-template-columns: 1fr; gap: 1rem; }
}

/* Ensure QR image scales within its container */
#qr { width: 100%; max-width: 256px; height: auto; }
img, canvas { max-width: 100%; height: auto; }