/* Order photo sequence UX ------------------------------------------------
 * Makes it explicit that uploaded photo order defines the final video order.
 */
.sequence-notice{
  display:grid;
  grid-template-columns:44px 1fr;
  gap:14px;
  align-items:start;
  margin:0 0 24px;
  padding:16px 18px;
  border:1px solid #d7c1b0;
  border-radius:13px;
  background:#fff8f2;
  color:var(--ink);
}
.sequence-notice-icon{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border-radius:12px;
  background:var(--copper);
  color:#fff;
  font-weight:700;
  font-size:1rem;
}
.sequence-notice strong{display:block;margin-bottom:3px}
.sequence-notice p{margin:0;color:var(--ink-2);font-size:.9rem;line-height:1.5}
.upload-sequence-hint{margin:7px 0 0;color:var(--copper-dark);font-size:.86rem;font-weight:700}

/* Keep two-column form controls aligned even when only one field has help text. */
.field-grid{align-items:start}
.field-grid>.field{align-self:start;align-content:start}
.contact-field{align-content:start}
.contact-field input{transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease}
.contact-field input.is-invalid{
  border-color:#b42318!important;
  background:#fffafa;
  box-shadow:0 0 0 2px rgba(180,35,24,.18)!important;
}
.contact-field input.is-invalid:focus{
  border-color:#b42318!important;
  box-shadow:0 0 0 3px rgba(180,35,24,.2)!important;
}
.field-validation-message{
  display:none;
  margin:0;
  color:#a61b1b;
  font-size:.78rem;
  line-height:1.35;
  font-weight:700;
}
.field-validation-message.visible{display:block}

/* Result video format ---------------------------------------------------- */
.video-format-field{
  min-inline-size:0;
  margin:28px 0 0;
  padding:0;
  border:0;
}
.video-format-field legend{
  margin:0 0 4px;
  padding:0;
  font-size:.92rem;
  font-weight:700;
  color:var(--ink);
}
.video-format-help{
  margin:0 0 14px;
  color:var(--ink-2);
  font-size:.86rem;
  line-height:1.45;
}
.video-format-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.video-format-card{
  position:relative;
  display:grid;
  grid-template-columns:22px minmax(0,1fr);
  gap:13px;
  align-items:start;
  min-height:112px;
  padding:18px 19px;
  border:1px solid #d8cbbd;
  border-radius:16px;
  background:#fff;
  cursor:pointer;
  transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease,transform .16s ease;
}
.video-format-card:hover{
  border-color:#c6a996;
  background:#fffaf6;
}
.video-format-card:has(input:checked){
  border-color:var(--copper);
  background:#fff7f1;
  box-shadow:0 0 0 2px rgba(166,96,69,.12);
}
.video-format-card input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.video-format-indicator{
  position:relative;
  width:20px;
  height:20px;
  margin-top:2px;
  border:2px solid #aaa69f;
  border-radius:50%;
  background:#fff;
  transition:border-color .16s ease,box-shadow .16s ease;
}
.video-format-card:has(input:checked) .video-format-indicator{
  border-color:var(--copper);
  box-shadow:inset 0 0 0 5px #fff;
  background:var(--copper);
}
.video-format-card:has(input:focus-visible){
  outline:3px solid rgba(166,96,69,.22);
  outline-offset:2px;
}
.video-format-copy{
  display:grid;
  gap:5px;
  min-width:0;
}
.video-format-copy strong{
  display:block;
  margin:0;
  font-size:.96rem;
  line-height:1.3;
  color:var(--ink);
}
.video-format-copy small{
  display:block;
  color:var(--ink-2);
  font-size:.8rem;
  line-height:1.5;
}

/* Delivery and payment use the same card language ----------------------- */
.form-step[data-step="3"] > fieldset.field{
  min-inline-size:0;
  margin:28px 0 0;
  padding:0;
  border:0;
}
.form-step[data-step="3"] > fieldset.field > legend{
  margin:0 0 12px;
  padding:0;
  font-size:.92rem!important;
  font-weight:700!important;
  color:var(--ink);
}
.form-step[data-step="3"] > fieldset.field > .choice-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.form-step[data-step="3"] > fieldset.field > .choice-grid > .choice{
  position:relative;
  display:grid;
  grid-template-columns:22px minmax(0,1fr);
  gap:13px;
  align-items:start;
  min-height:112px;
  padding:18px 19px;
  border:1px solid #d8cbbd;
  border-radius:16px;
  background:#fff;
  cursor:pointer;
  transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease;
}
.form-step[data-step="3"] > fieldset.field > .choice-grid > .choice:hover{
  border-color:#c6a996;
  background:#fffaf6;
}
.form-step[data-step="3"] > fieldset.field > .choice-grid > .choice:has(input:checked){
  border-color:var(--copper);
  background:#fff7f1;
  box-shadow:0 0 0 2px rgba(166,96,69,.12);
}
.form-step[data-step="3"] > fieldset.field > .choice-grid > .choice input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.form-step[data-step="3"] > fieldset.field > .choice-grid > .choice::before{
  content:"";
  width:20px;
  height:20px;
  margin-top:2px;
  border:2px solid #aaa69f;
  border-radius:50%;
  background:#fff;
  transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease;
}
.form-step[data-step="3"] > fieldset.field > .choice-grid > .choice:has(input:checked)::before{
  border-color:var(--copper);
  box-shadow:inset 0 0 0 5px #fff;
  background:var(--copper);
}
.form-step[data-step="3"] > fieldset.field > .choice-grid > .choice:has(input:focus-visible){
  outline:3px solid rgba(166,96,69,.22);
  outline-offset:2px;
}
.form-step[data-step="3"] > fieldset.field > .choice-grid > .choice > span{
  display:grid;
  gap:5px;
  min-width:0;
}
.form-step[data-step="3"] > fieldset.field > .choice-grid > .choice strong{
  display:block;
  margin:0;
  font-size:.96rem;
  line-height:1.3;
  color:var(--ink);
}
.form-step[data-step="3"] > fieldset.field > .choice-grid > .choice small{
  display:block;
  color:var(--ink-2);
  font-size:.8rem;
  line-height:1.5;
}

.preview-list{counter-reset:video-part}
.preview-item{
  position:relative;
  padding-top:36px;
  counter-increment:video-part;
}
.preview-item::before{
  content:counter(video-part) ". část videa";
  position:absolute;
  top:8px;
  left:9px;
  display:inline-flex;
  align-items:center;
  min-height:20px;
  padding:2px 8px;
  border-radius:999px;
  background:var(--cream);
  color:var(--copper-dark);
  font-size:.68rem;
  line-height:1;
  font-weight:700;
  letter-spacing:.015em;
}
.preview-controls::before{
  content:"Pořadí";
  align-self:center;
  margin-right:3px;
  color:var(--ink-2);
  font-size:.66rem;
  font-weight:600;
}
.sequence-summary{
  margin-top:18px;
  padding:13px 14px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:13px;
  background:rgba(255,255,255,.07);
  color:rgba(255,255,255,.82);
  font-size:.82rem;
  line-height:1.45;
}
.sequence-summary strong{color:#fff}

@media(max-width:680px){
  .sequence-notice{grid-template-columns:38px 1fr;padding:14px}
  .sequence-notice-icon{width:38px;height:38px}
  .video-format-grid{grid-template-columns:1fr}
  .video-format-card{min-height:0}
  .form-step[data-step="3"] > fieldset.field > .choice-grid{grid-template-columns:1fr}
  .form-step[data-step="3"] > fieldset.field > .choice-grid > .choice{min-height:0}
  .preview-controls::before{display:none}
}