html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin: 0;
  background: #f4f6fc;
  color: #172554;
}

.ticket-terminal { min-height: 100vh; max-width: 1180px; margin: auto; padding: 2rem clamp(1.25rem, 4vw, 3.5rem); display: flex; flex-direction: column; }
.terminal-header { display: flex; justify-content: space-between; align-items: center; font-size: 1.25rem; font-weight: 700; }
.brand { display: flex; align-items: center; gap: .6rem; letter-spacing: .12em; }
.brand-mark { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: white; background: #3348d5; }
.terminal-status { color: #16845b; font-size: .85rem; letter-spacing: 0; }
.welcome { margin: clamp(3rem, 8vh, 6rem) 0 3rem; }
.eyebrow { color: #455be0; font-size: .8rem; font-weight: 800; letter-spacing: .2em; }
.welcome h1 { font-size: clamp(2rem, 5vw, 3.5rem); margin: .75rem 0 .5rem; }
.welcome p { color: #647084; font-size: 1.25rem; }
.service-grid, #service-step { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; align-items: stretch; }
#ticket-form { display: block; width: 100%; }
.selection-step { width: 100%; }
.service-button { min-height: 210px; display: flex; flex-direction: column; align-items: flex-start; border: 2px solid transparent; border-radius: 1.25rem; padding: 1.75rem; background: white; color: #172554; text-align: left; box-shadow: 0 .5rem 1.5rem rgba(38,53,111,.08); transition: transform .15s, border-color .15s, box-shadow .15s; cursor: pointer; touch-action: manipulation; }
.service-button:hover, .service-button:focus { border-color: #455be0; transform: translateY(-3px); }
.service-button:hover { box-shadow: 0 .75rem 1.75rem rgba(38,53,111,.14); }
.service-button:active { transform: scale(.98); }
.service-icon { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 16px; background: #e8ebff; color: #3348d5; font-size: 1.8rem; margin-bottom: 1.5rem; }
.service-name, .service-description, .service-action { display: block; }
.service-name { font-size: 1.4rem; font-weight: 700; }
.service-description { min-height: 3rem; margin: .5rem 0 1.5rem; color: #647084; }
.service-action { margin-top: auto; color: #3348d5; font-size: .9rem; font-weight: 700; }
.back-button { border: 0; background: transparent; color: #3348d5; font-size: 1rem; font-weight: 700; padding: .5rem 0 1rem; }
.phone-card { max-width: 620px; margin: auto; padding: 2rem; border-radius: 1.25rem; background: white; box-shadow: 0 .5rem 1.5rem rgba(38,53,111,.08); }
.phone-card h2 { font-size: 1.7rem; }.phone-card p { color: #647084; }.phone-card .form-control { margin: 1.5rem 0; padding: 1rem; }
.confirm-button { width: 100%; border: 0; border-radius: .75rem; padding: 1.1rem; background: #16845b; color: white; font-size: 1.1rem; font-weight: 700; }
.confirm-button:disabled { opacity: .65; cursor: wait; }
.terminal-footer { color: #8892a7; text-align: center; margin-top: auto; padding-top: 3rem; }
.ticket-receipt { background: white; border: 1px dashed #9ca3af; padding: 1.5rem; margin: 2rem auto; max-width: 320px; text-align: center; }
.receipt-brand { font-weight: 800; letter-spacing: .2em; }.receipt-title { margin-top: 1rem; }.receipt-number { font-size: 4rem; font-weight: 800; color: #3348d5; }.receipt-service { font-weight: 700; }.receipt-date { margin-top: 1rem; color: #647084; font-size: .85rem; }
.ticket-alert-backdrop { position: fixed; inset: 0; z-index: 1050; display: grid; place-items: center; padding: 1.5rem; background: rgba(23, 37, 84, .68); }
.ticket-alert { width: min(100%, 460px); padding: 2.5rem 2rem 2rem; border-radius: 1.5rem; background: white; color: #172554; text-align: center; box-shadow: 0 1.5rem 4rem rgba(23, 37, 84, .3); animation: ticket-alert-appear .2s ease-out; }
.ticket-alert-icon { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 1rem; border-radius: 50%; background: #dcfce7; color: #16845b; font-size: 2rem; font-weight: 800; }
.ticket-alert h2 { margin: 0 0 .75rem; font-size: 1.8rem; }.ticket-alert p { margin-bottom: .5rem; color: #647084; }.ticket-alert p strong { color: #172554; }.ticket-alert-countdown { font-size: .9rem; margin: 1.25rem 0 1.5rem !important; }
.ticket-alert-button { width: 100%; border: 0; border-radius: .75rem; padding: 1rem; background: #3348d5; color: white; font-size: 1.05rem; font-weight: 700; cursor: pointer; }.ticket-alert-button:hover, .ticket-alert-button:focus { background: #2638b5; }
@keyframes ticket-alert-appear { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
@media (max-width: 900px) { .service-grid, #service-step { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .ticket-terminal { padding-top: 1.25rem; }.terminal-status { font-size: .75rem; }.welcome { margin: 3rem 0 2rem; }.welcome p { font-size: 1rem; }.service-grid, #service-step { grid-template-columns: 1fr; gap: 1rem; }.service-button { min-height: 175px; padding: 1.5rem; } }
@media print { body { background: white; }.ticket-terminal > *:not(#ticket-receipt) { display: none !important; }.ticket-receipt { display: block !important; border: 0; margin: 0 auto; } }

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}