/*
 *   @copyright   Copyright (C) 2026 Dynamowebs Private Limited. All rights reserved.
 *   @license     Proprietary and Confidential. Unauthorized copying, distribution, or modification
 *                via any medium is strictly prohibited.
 *   @author      Faisal mehmood awan <faisal.aqurz@gmail.com> | Imran Khan <imran@dynamowebs.com>
 *   @file        utr-step1-self-assessment.css
 *   @modified    23/09/2026
 *   @package     Dynamowebs
 *
 *   PROBLEM: the dedicated self-assessment-registration step-1 module
 *   (module-step1-self-assessment-registration.php) is the same design family as the sole-trader
 *   page, so it reuses the shared `utr1-` classes (utr-step1-redesign.css) AND the shared
 *   `utr1-st-` blocks (utr-step1-sole-trader.css). But its design adds ONE block that neither
 *   stylesheet has classes for: the "Registration vs Filing" two-card comparison (design's
 *   .rvf-card active + .rvf-card, yes-list/no-list, and a note below).
 *   SOLUTION: this file supplies ONLY those new `utr1-st-rvf-` blocks, scoped under .utr1-root
 *   so they cannot leak into the site header/footer. Everything else is already covered by the
 *   two shared stylesheets it loads alongside.
 */

/* ===================== REGISTRATION vs FILING (2-card) ===================== */
.utr1-root .utr1-st-rvf { background: #EBF4FB; }          /* design's .rvf-sec bg4 */
.utr1-root .utr1-st-rvf-inner { max-width: 1160px; margin: 0 auto; }
.utr1-root .utr1-st-rvf-intro { margin-bottom: 32px; }
.utr1-root .utr1-st-rvf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.utr1-root .utr1-st-rvf-card {
  background: #FFFFFF;
  border-radius: 16px;
  padding: 28px 24px;
  border: 1px solid #D6E8F3;
  box-shadow: 0 2px 8px rgba(0,0,0,.07);
}
.utr1-root .utr1-st-rvf-active {
  border-color: #1B75BC;
  border-width: 2px;
  background: #FAFCFF;
}
.utr1-root .utr1-st-rvf-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.utr1-root .utr1-st-rvf-badge {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .04em;
  border-radius: 6px;
  padding: 3px 9px;
  flex-shrink: 0;
}
.utr1-root .utr1-st-rvf-badge-reg { background: rgba(27,117,188,.12); color: #1B75BC; }
.utr1-root .utr1-st-rvf-badge-fil { background: rgba(107,122,141,.12); color: #6B7A8D; }
.utr1-root .utr1-st-rvf-title { font-size: 15px; font-weight: 800; color: #0D2240; }
.utr1-root .utr1-st-rvf-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 0;
  margin: 0;
}
.utr1-root .utr1-st-rvf-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #3D4F63;
  line-height: 1.55;
}
.utr1-root .utr1-st-rvf-list li::before {
  flex-shrink: 0;
  margin-top: 2px;
  font-size: 13px;
}
.utr1-root .utr1-st-rvf-yes li::before { content: '\2713'; color: #22AA6F; font-weight: 800; }
.utr1-root .utr1-st-rvf-no  li::before { content: '\2192'; color: #6B7A8D; font-weight: 700; }
.utr1-root .utr1-st-rvf-note {
  margin-top: 24px;
  background: rgba(27,117,188,.06);
  border-left: 3px solid #1B75BC;
  border-radius: 0 10px 10px 0;
  padding: 14px 18px;
  font-size: 13px;
  font-weight: 600;
  color: #2E4D6A;
  line-height: 1.6;
}
.utr1-root .utr1-st-rvf-note a { color: #1B75BC; text-decoration: none; font-weight: 700; }
.utr1-root .utr1-st-rvf-list a {
  color: #1B75BC;
  text-decoration: none;
  font-weight: 700;
  white-space: nowrap;
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 768px) {
  .utr1-root .utr1-hp-tp { display: flex; }
  .utr1-root .utr1-st-rvf-grid { grid-template-columns: 1fr; gap: 16px; }
  .utr1-root .utr1-st-rvf { padding: 44px 20px; }
}