/* Service Request-specific styles; shared site styles load first. */
body { margin: 0; background: #f5f7f9; color: #26323b; font: 16px/1.5 Arial, Helvetica, sans-serif; }
.site-header { background: #fff; border-bottom: 1px solid var(--border, #e2e7eb); }
.site-header-inner { max-width: 1200px; margin: 0 auto; padding: 20px 30px; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.site-brand { font-size: 1.5rem; font-weight: 700; line-height: 1.3; color: var(--primary, #253f55); text-decoration: none; }
.site-home { color: var(--primary, #253f55); font-weight: 600; text-decoration: none; }
.site-home:hover { color: var(--accent, #b88b52); }
.site-brand:focus-visible, .site-home:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; }
.page-wrap { max-width: 980px; margin: 30px auto; padding: 0 16px 40px; }
.page-card { background: white; border: 1px solid #e1e6eb; border-radius: 8px; padding: 28px; }
.page-card > h2 { font-size: 1.6rem; margin: 0 0 6px; }
.intro { margin: 0 0 20px; color: #5c6770; }
.test-notice { padding: 12px; background: #fff5dc; border: 1px solid #efd18b; border-radius: 5px; }
.row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 16px; row-gap: 16px; }
.col-12 { grid-column: span 12; } .col-md-8 { grid-column: span 8; } .col-md-6 { grid-column: span 6; }
.col-md-5 { grid-column: span 5; } .col-md-4 { grid-column: span 4; } .col-md-3 { grid-column: span 3; }
/* Nested address sections are also grid containers. */
#serviceAddressFields, #billingAddressFields { grid-column: span 12; }
h2.h5 { font-size: 1.25rem; margin: 8px 0 0; }
h3.h6 { font-size: 1.05rem; margin: 8px 0 0; }
.text-muted { color: #626d76; } .small { font-size: .875rem; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 4px; } .pt-2 { padding-top: 8px; } .pt-4 { padding-top: 22px; }
.form-label { display: block; margin-bottom: 5px; font-weight: 600; }
.form-label.required::after { content: ' *'; color: #b02727; }
.form-control, .form-select { width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid #aeb9c1; border-radius: 5px; font: inherit; background: white; color: inherit; }
textarea.form-control { min-height: 120px; resize: vertical; }
.form-control:focus, .form-select:focus { outline: 2px solid #387eac; outline-offset: 1px; }
.form-text { font-size: .8rem; color: #626d76; margin-top: 4px; }
.form-check { display: flex; align-items: center; gap: 9px; }
.form-check-input { width: 18px; height: 18px; margin: 0; }
.form-check-label { cursor: pointer; }
.btn { padding: 11px 20px; border: 0; border-radius: 5px; font: inherit; font-weight: 700; cursor: pointer; }
.btn-brand { background: #17638b; color: white; } .btn:disabled { background: #8797a2; cursor: not-allowed; }
.d-none { display: none !important; }
.alert { padding: 12px; border-radius: 5px; margin: 16px 0; }
.alert-danger { color: #802727; background: #ffe8e8; } .alert-info { color: #174b6a; background: #e4f3ff; }
.invalid-feedback { display: none; color: #a12828; font-size: .85rem; margin-top: 4px; }
.was-validated .form-control:invalid ~ .invalid-feedback, .was-validated .form-select:invalid ~ .invalid-feedback { display: block; }
.was-validated .form-control:invalid, .was-validated .form-select:invalid { border-color: #b02727; }
@media (max-width: 700px) {
  .page-wrap { margin: 16px auto; padding: 0 10px 30px; }
  .page-card { padding: 18px; }
  .col-md-8, .col-md-6, .col-md-5, .col-md-4, .col-md-3 { grid-column: span 12; }
  .site-header-inner { padding: 18px 20px; }
  .site-brand { font-size: 1.2rem; }
  .site-home { font-size: .9rem; text-align: right; }
}

.trap-field { position:absolute !important; left:-10000px !important; width:1px; height:1px; overflow:hidden; }
.alert-success { color:#165e37; background:#e3f6ea; }

/* Service Request confirmation screen (generated by script.js). */
#serviceRequestForm + section[role="status"],
.page-card > section[role="status"] { text-align: center; }
.page-card section[role="status"] .card { max-width: 650px; margin: 0 auto; }
.page-card section[role="status"] .card-body { padding: 28px; }
.page-card section[role="status"] .text-success { color: #165e37; }
.page-card section[role="status"] .h3 { font-size: 1.5rem; }
.page-card section[role="status"] .lead { font-size: 1.1rem; }
.page-card section[role="status"] .btn-primary { display: inline-block; background: #17638b; color: white; text-decoration: none; }

/* Confirmation screen layout, independent of any CSS framework. */
.submission-confirmation {
  padding: 32px 0;
  text-align: center;
  outline: none;
}
.submission-confirmation .card {
  max-width: 650px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #e1e6eb;
  border-radius: 8px;
}
.submission-confirmation .card-body { padding: 28px; }
.submission-confirmation .confirmation-check {
  font-size: 3rem;
  color: #165e37;
  line-height: 1;
  margin-bottom: 16px;
}
.submission-confirmation h1 { font-size: 1.5rem; margin: 0 0 20px; }
.submission-confirmation .lead { font-size: 1.1rem; }
.submission-confirmation p { margin: 0 0 20px; }
.submission-confirmation .btn-primary {
  display: inline-block;
  background: #17638b;
  color: white;
  text-decoration: none;
}
.submission-confirmation .btn-primary:hover { background: #134f70; }
@media (max-width: 700px) {
  .submission-confirmation { padding: 16px 0; }
  .submission-confirmation .card-body { padding: 22px 18px; }
}