/**
 * MSBela – Omlouvání dětí – styly  v1.0.0
 *
 * Využívá Design System tokeny z main.css (:root).
 * Žádné hardcoded barvy – vše přes CSS proměnné.
 *
 * @package MSBela
 */

/* ==========================================================================
   1. Page layout
   ========================================================================== */

.omluvenka-page {
  padding-block-start: var(--space-8);
  padding-block-end:   var(--space-10);
}

.omluvenka-page__layout {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   var(--space-8);
  align-items:           start;
}

@media (min-width: 900px) {
  .omluvenka-page__layout {
    grid-template-columns: 300px 1fr;
    gap:                   var(--space-10);
  }
}

/* ── Intro (levý panel) ─────────────────────────────────────────── */

.omluvenka-page__header {
  margin-bottom: var(--space-5);
}

.omluvenka-page__content p {
  color:       var(--ds-text-mid);
  line-height: 1.7;
  margin:      0 0 var(--space-4);
}

.omluvenka-page__list {
  margin:      var(--space-4) 0 0;
  padding:     0 0 0 var(--space-5);
  color:       var(--ds-text-mid);
  line-height: 1.8;
}

.omluvenka-page__list li {
  margin-bottom: var(--space-2);
}

.omluvenka-page__list li strong {
  color: var(--ds-teal-dark);
}

.omluvenka-page__phones {
  list-style:  none;
  margin:      var(--space-2) 0 0;
  padding:     0;
  display:     flex;
  flex-direction: column;
  gap:         4px;
}

.omluvenka-page__phone-label {
  font-size: 0.8rem;
  color:     var(--ds-text-light);
  display:   block;
}

.omluvenka-page__phone-link {
  font-weight:     700;
  color:           var(--ds-teal-dark);
  text-decoration: none;
  font-size:       1rem;
}

.omluvenka-page__phone-link:hover {
  text-decoration: underline;
}

/* ==========================================================================
   2. Form wrapper
   ========================================================================== */

.omluvenka-wrap {
  position: relative;
}

.omluvenka-form {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-5);
}

/* ==========================================================================
   3. Info banner
   ========================================================================== */

.omluvenka-info {
  display:       flex;
  align-items:   flex-start;
  gap:           var(--space-3);
  padding:       var(--space-4) var(--space-5);
  background:    var(--ds-sky-pale, #EEF9FF);
  border:        1px solid var(--ds-sky-light, #C8EDFB);
  border-left:   4px solid var(--ds-sky, #7EC8E3);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
}

.omluvenka-info__icon {
  flex-shrink: 0;
  color:       var(--ds-sky, #7EC8E3);
  margin-top:  2px;
}

.omluvenka-info__body {
  flex: 1;
}

.omluvenka-info__text {
  margin:      0 0 var(--space-2);
  font-size:   0.875rem;
  color:       var(--ds-text-mid);
  line-height: 1.6;
}

.omluvenka-info__text:last-child {
  margin-bottom: 0;
}

.omluvenka-info__phones {
  list-style:  none;
  margin:      var(--space-2) 0 0;
  padding:     0;
  display:     flex;
  flex-direction: column;
  gap:         2px;
}

.omluvenka-info__phone-label {
  font-size:   0.8rem;
  color:       var(--ds-text-light);
}

.omluvenka-info__phone-link {
  font-size:       0.875rem;
  font-weight:     600;
  color:           var(--ds-sky, #7EC8E3);
  text-decoration: none;
  white-space:     nowrap;
}

.omluvenka-info__phone-link:hover {
  text-decoration: underline;
}

/* ==========================================================================
   4. Status + errors ARIA regions
   ========================================================================== */

.omluvenka-status[hidden],
.omluvenka-errors[hidden] {
  display: none;
}

.omluvenka-errors {
  background:    #fef2f2;
  border:        1px solid #fca5a5;
  border-left:   4px solid #ef4444;
  border-radius: var(--radius-md);
  padding:       var(--space-4) var(--space-5);
  outline:       none;
}

.omluvenka-errors p {
  margin:      0 0 var(--space-2);
  font-weight: 600;
  font-size:   0.875rem;
  color:       #b91c1c;
}

.omluvenka-errors ul {
  margin:    0;
  padding:   0 0 0 var(--space-5);
}

.omluvenka-errors li {
  font-size:   0.875rem;
  color:       #b91c1c;
  line-height: 1.6;
}

/* ==========================================================================
   5. Fieldset
   ========================================================================== */

.omluvenka-fieldset {
  border:        none;
  margin:        0;
  padding:       var(--space-5) var(--space-6);
  background:    var(--ds-white, #fff);
  border-radius: var(--radius-lg);
  box-shadow:    var(--shadow-card);
  display:       flex;
  flex-direction: column;
  gap:           var(--space-4);
}

.omluvenka-fieldset__legend {
  display:     flex;
  align-items: center;
  gap:         var(--space-3);
  font-family: var(--font-display);
  font-size:   1.05rem;
  font-weight: 400;
  color:       var(--ds-teal-dark);
  padding:     0;
  margin-bottom: var(--space-1);
  /* Legend musí být součástí fieldset flow */
  width: 100%;
  float: left;
}

.omluvenka-fieldset__num {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           26px;
  height:          26px;
  border-radius:   50%;
  background:      var(--ds-teal);
  color:           #fff;
  font-family:     var(--font-ui);
  font-size:       0.8rem;
  font-weight:     700;
  flex-shrink:     0;
}

/* ==========================================================================
   6. Rows
   ========================================================================== */

.omluvenka-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

@media (min-width: 560px) {
  .omluvenka-row--2col {
    flex-direction: row;
    gap: var(--space-5);
  }

  .omluvenka-row--2col > .omluvenka-field {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* ==========================================================================
   7. Fields
   ========================================================================== */

.omluvenka-field {
  display:        flex;
  flex-direction: column;
  gap:            4px;
}

.omluvenka-field.has-error .omluvenka-input,
.omluvenka-field.has-error .omluvenka-select,
.omluvenka-field.has-error .omluvenka-textarea {
  border-color: #ef4444;
  box-shadow:   0 0 0 3px rgba(239, 68, 68, .15);
}

/* ==========================================================================
   8. Labels
   ========================================================================== */

.omluvenka-label {
  font-size:   0.875rem;
  font-weight: 600;
  color:       var(--ds-text-dark);
  cursor:      pointer;
  line-height: 1.4;
}

.omluvenka-label__required {
  color:      var(--ds-teal-dark);
  margin-left: 2px;
}

/* ==========================================================================
   9. Inputs, selects, textarea
   ========================================================================== */

.omluvenka-input,
.omluvenka-select,
.omluvenka-textarea {
  width:         100%;
  padding:       10px 14px;
  border:        1.5px solid var(--ds-teal-light, #A8E6DF);
  border-radius: var(--radius-sm);
  background:    #fff;
  color:         var(--ds-text-dark);
  font-family:   var(--font-body);
  font-size:     0.9375rem;
  line-height:   1.5;
  transition:    border-color .15s, box-shadow .15s;
  box-sizing:    border-box;
}

.omluvenka-input:focus,
.omluvenka-select:focus,
.omluvenka-textarea:focus {
  outline:      none;
  border-color: var(--ds-teal);
  box-shadow:   0 0 0 3px rgba(38, 181, 165, .18);
}

.omluvenka-input:focus-visible,
.omluvenka-select:focus-visible,
.omluvenka-textarea:focus-visible {
  outline:        3px solid var(--ds-teal);
  outline-offset: 2px;
}

.omluvenka-select:disabled {
  background:  var(--ds-neutral-100, #f0f0f0);
  color:       var(--ds-text-light);
  cursor:      not-allowed;
  border-color: var(--ds-border, #ddd);
}

.omluvenka-input--date {
  appearance:    auto;
  cursor:        pointer;
}

.omluvenka-textarea {
  resize:     vertical;
  min-height: 90px;
}

.omluvenka-hint {
  font-size: 0.78rem;
  color:     var(--ds-text-light);
}

/* ==========================================================================
   10. Errors
   ========================================================================== */

.omluvenka-error {
  font-size: 0.8rem;
  color:     #dc2626;
  font-weight: 500;
  line-height: 1.4;
}

.omluvenka-error[hidden] {
  display: none;
}

/* ==========================================================================
   11. GDPR
   ========================================================================== */

.omluvenka-gdpr {
  background:    var(--ds-apricot-pale, #FFF5EC);
  border:        1px solid var(--ds-apricot-light, #FFD9B5);
  border-radius: var(--radius-md);
  padding:       var(--space-4) var(--space-5);
  display:       flex;
  flex-direction: column;
  gap:            var(--space-2);
}

.omluvenka-gdpr.has-error {
  border-color: #ef4444;
  background:   #fef2f2;
}

.omluvenka-gdpr__label {
  display:     flex;
  align-items: flex-start;
  gap:         var(--space-3);
  cursor:      pointer;
  line-height: 1.6;
}

.omluvenka-gdpr__checkbox {
  flex-shrink:    0;
  width:          18px;
  height:         18px;
  margin-top:     3px;
  accent-color:   var(--ds-teal);
  cursor:         pointer;
}

.omluvenka-gdpr__text {
  font-size:  0.875rem;
  color:      var(--ds-text-mid);
}

.omluvenka-gdpr__text a {
  color:           var(--ds-teal-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.omluvenka-gdpr__text a:hover {
  color: var(--ds-teal);
}

/* ==========================================================================
   12. Required note + submit
   ========================================================================== */

.omluvenka-required-note {
  font-size: 0.8rem;
  color:     var(--ds-text-light);
  margin:    0;
}

.omluvenka-required-note span {
  color: var(--ds-teal-dark);
}

.omluvenka-submit-row {
  display:     flex;
  justify-content: flex-start;
  margin-top:  var(--space-2);
}

.omluvenka-submit {
  display:     inline-flex;
  align-items: center;
  gap:         var(--space-3);
  min-width:   200px;
  justify-content: center;
}

.omluvenka-submit:disabled {
  opacity:        .65;
  cursor:         not-allowed;
  pointer-events: none;
}

.omluvenka-submit__icon {
  flex-shrink: 0;
  transition:  transform .2s;
}

.omluvenka-submit:not(:disabled):hover .omluvenka-submit__icon {
  transform: translateX(3px) translateY(-2px);
}

/* ==========================================================================
   13. Honeypot
   ========================================================================== */

.omluvenka-hp {
  position:   absolute;
  left:       -9999px;
  top:        -9999px;
  visibility: hidden;
  overflow:   hidden;
  width:      1px;
  height:     1px;
  opacity:    0;
}

/* ==========================================================================
   14. Success screen
   ========================================================================== */

.omluvenka-success[hidden] {
  display: none;
}

.omluvenka-success {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  text-align:      center;
  gap:             var(--space-4);
  padding:         var(--space-10) var(--space-6);
  background:      #f0fdf4;
  border:          1px solid #86efac;
  border-radius:   var(--radius-lg);
  outline:         none;
}

.omluvenka-success__icon {
  color:       #16a34a;
}

.omluvenka-success__title {
  font-family: var(--font-display);
  font-size:   clamp(1.25rem, 3vw, 1.6rem);
  color:       #15803d;
  margin:      0;
}

.omluvenka-success__text {
  color:      var(--ds-text-mid);
  font-size:  0.9375rem;
  margin:     0;
  max-width:  480px;
}

/* ==========================================================================
   15. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .omluvenka-input,
  .omluvenka-select,
  .omluvenka-textarea,
  .omluvenka-submit,
  .omluvenka-submit__icon {
    transition: none;
  }
}