/* TCS PIR – Blazor WebAssembly (mirrors React client variables and layout) */
:root {
  --tcs-red: #C8102E;
  --tcs-red-dark: #A00D26;
  --tcs-grey-bg: #F5F5F5;
  --tcs-grey-light: #E8E8E8;
  --tcs-grey-medium: #CCCCCC;
  --tcs-grey-dark: #666666;
  --tcs-text-dark: #333333;
  --tcs-text-light: #FFFFFF;
  --tcs-border: #DDDDDD;
  --tcs-error: #D32F2F;
  --font-family: "Poppins", sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-size-base: 14px;
  --font-size-small: 12px;
  --font-size-large: 16px;
  --font-size-xxl: 28px;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 48px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --transition-base: 250ms ease-in-out;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--font-family); font-weight: var(--font-weight-regular); font-size: var(--font-size-base); line-height: 1.6; color: var(--tcs-text-dark); background-color: var(--tcs-grey-bg); }
h1, h2, h3 { font-family: var(--font-family); }
.skip-link { position: absolute; top: -40px; left: 0; background: var(--tcs-red); color: var(--tcs-text-light); padding: var(--spacing-sm) var(--spacing-md); text-decoration: none; z-index: 10000; }
.skip-link:focus { top: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.layout { min-height: 100vh; display: flex; flex-direction: column; }
.main-content { flex: 1; padding: var(--spacing-md) 0; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 var(--spacing-md); }

/* Header */
.tcs-header { width: 100%; position: sticky; top: 0; z-index: 1000; }
.header-top-bar { background: #000; color: #fff; padding: 8px 0; font-size: 12px; }
.header-top-content { max-width: 1400px; margin: 0 auto; padding: 0 20px; text-align: center; }
.header-main-nav { background: var(--tcs-red); color: #fff; padding: 0; }
.nav-container { max-width: 1400px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; min-height: 80px; flex-wrap: wrap; gap: 12px; }
.nav-logo { flex-shrink: 0; }
.logo-link { display: inline-block; text-decoration: none; }
.tascol-logo-img { width: auto; height: 40px; max-width: 160px; object-fit: contain; display: block; }
.nav-links { display: flex; align-items: center; gap: 20px; flex: 1; justify-content: center; flex-wrap: wrap; }
.nav-link { color: #fff; text-decoration: none; font-size: 14px; font-weight: 500; padding: 8px 0; }
.nav-link:hover { opacity: 0.9; }
.nav-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.nav-button { background: #fff; color: var(--tcs-red); padding: 8px 16px; border-radius: var(--radius-md); text-decoration: none; font-weight: 600; font-size: 14px; }
.nav-button:hover { opacity: 0.9; }

/* Footer */
.tcs-footer { margin-top: auto; }
.footer-top { background: var(--tcs-grey-dark); color: #fff; padding: 12px 0; font-size: 14px; text-align: center; }
.footer-top-content { max-width: 1400px; margin: 0 auto; padding: 0 20px; }
.footer-main { background: linear-gradient(180deg, #8B0000 0%, #6B0000 100%); color: #fff; padding: 32px 20px; }
.footer-container { max-width: 1400px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; }
.footer-left { display: flex; flex-direction: column; gap: 16px; }
.footer-logo-img { width: auto; height: 48px; max-width: 160px; object-fit: contain; }
.footer-buttons { display: flex; gap: 12px; flex-wrap: wrap; }
.footer-button { background: rgba(255,255,255,0.2); color: #fff; padding: 10px 20px; border-radius: var(--radius-md); text-decoration: none; font-weight: 600; }
.footer-button:hover { background: rgba(255,255,255,0.3); }
.footer-right { flex: 1; min-width: 200px; }
.footer-columns { display: flex; flex-wrap: wrap; gap: 24px; }
.footer-column { min-width: 140px; }
.footer-column-title { font-size: 16px; font-weight: var(--font-weight-medium); margin-bottom: 12px; }
.footer-links { list-style: none; padding: 0; }
.footer-links li { margin-bottom: 8px; }
.footer-links a { color: #fff; text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
.footer-address p { margin-bottom: 4px; font-size: 14px; }
.address-type { font-weight: 600; margin-top: 8px; }

/* Progress bar */
.progress-container { margin-bottom: var(--spacing-xl); }
.progress-header { margin-bottom: var(--spacing-sm); }
.progress-text { font-size: var(--font-size-base); color: var(--tcs-text-dark); font-weight: 500; }
.progress-bar { display: flex; gap: var(--spacing-xs); height: 4px; background: var(--tcs-grey-light); border-radius: var(--radius-sm); overflow: hidden; }
.progress-segment { flex: 1; background: var(--tcs-grey-medium); transition: background var(--transition-base); }
.progress-segment.active { background: var(--tcs-red); }

/* Buttons */
.btn { padding: var(--spacing-sm) var(--spacing-lg); font-size: var(--font-size-base); font-weight: 600; border: none; border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-base); display: inline-flex; align-items: center; justify-content: center; font-family: inherit; }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-primary { background: var(--tcs-red); color: var(--tcs-text-light); }
.btn-primary:hover:not(:disabled) { background: var(--tcs-red-dark); }
.btn-secondary { background: transparent; color: var(--tcs-red); border: 2px solid var(--tcs-red); }
.btn-secondary:hover:not(:disabled) { background: var(--tcs-red); color: var(--tcs-text-light); }
.btn-full-width { width: 100%; }
.dialog-button-spacing {
    margin-right: 10px;
}

/* Step layout */
.step-container { width: 100%; }
.step-content { background: #fff; padding: var(--spacing-lg); border-radius: var(--radius-lg); box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.step-title { font-size: var(--font-size-xxl); color: var(--tcs-red); font-weight: var(--font-weight-semibold); margin-bottom: var(--spacing-lg); line-height: 1.3; }
.section-heading { font-size: var(--font-size-large); color: var(--tcs-red); font-weight: var(--font-weight-medium); margin-bottom: var(--spacing-md); margin-top: var(--spacing-lg); }
.field-helper { font-size: var(--font-size-small); color: var(--tcs-grey-dark); margin-bottom: var(--spacing-md); line-height: 1.5; }
.form-section { margin-bottom: var(--spacing-xxl); }
.step-actions { display: flex; gap: var(--spacing-md); margin-top: var(--spacing-xxl); flex-wrap: wrap; align-items: center; }
.field { margin-bottom: var(--spacing-md); }
.field label { display: block; margin-bottom: 4px; font-weight: 500; }
.input { width: 100%; padding: 8px 12px; border: 1px solid var(--tcs-border); border-radius: var(--radius-sm); font-size: var(--font-size-base); }
.input.input-error { border-color: var(--tcs-error); border-width: 2px; }
.field-error { color: var(--tcs-error); font-size: var(--font-size-small); display: block; margin-top: 4px; }
.radio-group { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: var(--spacing-md); }
.radio-group label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.checkbox-field { margin-bottom: var(--spacing-md); }
.checkbox-field label { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; }
.error-banner { background: #FFEBEE; border: 2px solid var(--tcs-error); border-radius: var(--radius-md); padding: var(--spacing-md); margin-bottom: var(--spacing-lg); color: var(--tcs-error); font-weight: 500; }
.dvs-dialog-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); display: flex; align-items: center; justify-content: center; padding: var(--spacing-md); z-index: 1100; }
.dvs-dialog { width: min(420px, 100%); background: #fff; border-radius: var(--radius-lg); padding: var(--spacing-xl); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2); text-align: center; }
.dvs-dialog-title { margin-top: 0; margin-bottom: var(--spacing-md); }
.dvs-dialog-message { margin-bottom: 0; color: var(--tcs-text-dark); line-height: 1.6; }
.dvs-dialog-actions { margin-top: var(--spacing-xl); display: flex; justify-content: center; }
.dvs-dialog-spinner { width: 48px; height: 48px; margin: 0 auto var(--spacing-lg); border: 4px solid #f3f3f3; border-top: 4px solid var(--tcs-red); border-radius: 50%; animation: spin 1s linear infinite; }

/* Step1 */
.info-section p { margin-bottom: var(--spacing-md); line-height: 1.7; }
.service-options { margin-bottom: var(--spacing-xl); }
.service-card { border: 2px solid var(--tcs-border); border-radius: var(--radius-md); padding: var(--spacing-lg); margin-bottom: var(--spacing-md); background: #fff; }
.service-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--spacing-md); flex-wrap: wrap; gap: var(--spacing-sm); }
.service-title { font-size: var(--font-size-base); font-weight: var(--font-weight-medium); color: var(--tcs-text-dark); }
.service-price { font-size: var(--font-size-base); font-weight: 700; color: var(--tcs-red); }
.service-features { list-style: none; padding-left: 0; }
.service-features li { margin-bottom: var(--spacing-sm); padding-left: var(--spacing-lg); position: relative; }
.service-features li::before { content: "•"; position: absolute; left: 0; color: var(--tcs-red); font-weight: bold; }
.requirements-list { list-style: none; padding-left: 0; }
.requirements-list > li { margin-bottom: var(--spacing-md); line-height: 1.7; }
.requirements-list > li > p { margin-top: var(--spacing-xs); margin-bottom: var(--spacing-sm); }
.nested-list { list-style: disc; margin-left: var(--spacing-lg); margin-top: var(--spacing-xs); }
.support-note { background: var(--tcs-grey-light); padding: var(--spacing-md); border-radius: var(--radius-md); margin-bottom: var(--spacing-xl); border-left: 4px solid var(--tcs-red); }
.support-link { color: var(--tcs-red); text-decoration: none; font-weight: 600; }

/* Step4 payment */
.service-summary { margin-top: var(--spacing-lg); padding: var(--spacing-lg); background: var(--tcs-grey-light); border-radius: var(--radius-md); border-left: 4px solid var(--tcs-red); }
.service-selected { font-weight: 600; color: var(--tcs-text-dark); margin-bottom: var(--spacing-md); }
.delivery-info { color: var(--tcs-text-dark); line-height: 1.6; margin-bottom: var(--spacing-md); font-size: var(--font-size-small); }
.total-amount { display: flex; justify-content: space-between; align-items: center; padding-top: var(--spacing-md); border-top: 2px solid var(--tcs-border); font-weight: 600; }
.amount-value { font-size: var(--font-size-large); color: var(--tcs-red); font-weight: 700; }
.payment-description { color: var(--tcs-text-dark); line-height: 1.6; overflow-wrap: break-word; word-wrap: break-word; margin-bottom: var(--spacing-md); }
.eway-paynow-container { min-height: 44px; min-width: 160px; display: flex; align-items: center; margin: 0; }
.step-actions-primary { flex: 1; display: flex; align-items: center; min-height: 44px; }

/* Payment return */
.payment-return-container { display: flex; justify-content: center; align-items: center; min-height: 60vh; padding: 2rem; background: var(--tcs-grey-bg); }
.payment-return-content { background: #fff; border-radius: var(--radius-lg); padding: 3rem; max-width: 500px; width: 100%; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.payment-spinner { border: 4px solid #f3f3f3; border-top: 4px solid var(--tcs-red); border-radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite; margin: 0 auto 2rem; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.payment-success-icon { width: 60px; height: 60px; border-radius: 50%; background: var(--tcs-success, #2E7D32); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: bold; margin: 0 auto 2rem; }
.payment-error-icon { width: 60px; height: 60px; border-radius: 50%; background: var(--tcs-error); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 2rem; margin: 0 auto 2rem; }
.payment-return-content h1 { color: var(--tcs-text-dark); margin-bottom: 1rem; font-size: 1.75rem; }
.payment-return-content p { color: var(--tcs-grey-dark); margin-bottom: 1rem; line-height: 1.6; }
.transaction-id { font-family: monospace; background: var(--tcs-grey-light); padding: 0.5rem; border-radius: var(--radius-sm); font-size: 0.9rem; }
.redirect-message { color: var(--tcs-red); font-size: 0.9rem; margin-top: 1.5rem; }
.retry-button { background: var(--tcs-red); color: #fff; border: none; padding: 0.75rem 2rem; border-radius: var(--radius-md); font-size: 1rem; cursor: pointer; margin-top: 1.5rem; }

/* Payment success page */
.payment-success-page { min-height: 100vh; display: flex; flex-direction: column; background: var(--tcs-grey-bg); }
.payment-success-banner { background: var(--tcs-red); min-height: 8px; }
.payment-success-banner--bottom { min-height: 24px; position: relative; display: flex; align-items: center; justify-content: center; }
.payment-success-arrow { width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 10px solid #fff; margin-top: -2px; }
.payment-success-content { flex: 1; max-width: 640px; margin: 0 auto; padding: var(--spacing-xl) var(--spacing-md); text-align: center; }
.payment-success-title { color: var(--tcs-red); font-size: 1.5rem; font-weight: 700; margin-bottom: 1.5rem; }
.payment-success-body { color: var(--tcs-grey-dark); font-size: 0.9375rem; line-height: 1.6; margin-bottom: 1.5rem; }
.payment-success-body p { margin-bottom: 1rem; }
.payment-success-contact { color: var(--tcs-grey-dark); font-size: 0.9375rem; margin-bottom: 1.5rem; }
.payment-success-back { background: var(--tcs-red); color: #fff; border: none; padding: 0.75rem 1.5rem; border-radius: var(--radius-md); font-size: 1rem; cursor: pointer; }
.payment-success-back:hover { background: var(--tcs-red-dark); }

/* Step2/3 helpers */
.step-intro { margin-bottom: var(--spacing-lg); color: var(--tcs-text-dark); line-height: 1.6; }
.name-fields { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--spacing-md); }
.date-fields .date-row { display: flex; gap: var(--spacing-md); flex-wrap: wrap; }
.date-fields .date-row .input { flex: 1; min-width: 80px; }
.city-state-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-md); }
.verification-success { margin: var(--spacing-md) 0; padding: var(--spacing-md); background: #E8F5E9; border-radius: var(--radius-md); }
.success-message { color: var(--tcs-success, #2E7D32); font-weight: 600; }
.verification-id { font-size: var(--font-size-small); margin-top: 4px; }
.error-message { color: var(--tcs-error); margin: var(--spacing-sm) 0; }

/* DVS result on final page (Step 4) */
.dvs-result-section { margin-bottom: var(--spacing-lg); }
.dvs-result { padding: var(--spacing-md); border-radius: var(--radius-md); border: 2px solid; }
.dvs-result.dvs-pass { background: #E8F5E9; border-color: #2E7D32; color: #1B5E20; }
.dvs-result.dvs-fail { background: #FFEBEE; border-color: var(--tcs-error); color: #B71C1C; }
.dvs-label { font-weight: 600; margin-right: var(--spacing-sm); }
.dvs-value { font-weight: 700; }
.dvs-verification-id { font-size: var(--font-size-small); margin-top: var(--spacing-sm); margin-bottom: 0; opacity: 0.9; }

#app .loading { padding: 2rem; text-align: center; color: var(--tcs-grey-dark); }

@media (min-width: 768px) {
  .main-content { padding: var(--spacing-lg) 0; }
  .container { padding: 0 var(--spacing-lg); }
  .step-content { padding: var(--spacing-xl); }
  .name-fields { grid-template-columns: 1fr 1fr 1fr; }
}