/*
 *   @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-redesign.css
 *   @modified    09/08/2026
 *   @package     Dynamowebs
 *
 *   PROBLEM: New step-1 design for /utr/utr-number (and sibling pages) needs a
 *   distinct look, but the legacy v2 stylesheet (utr-form-step1-min.css) bleeds
 *   onto it — forcing its own body font (Segoe/Roboto) and a 46px min-height +
 *   gradient background ``!important`` onto every form input, which breaks the new
 *   Montserrat typography and the form-card layout.
 *   SOLUTION: This is a self-contained stylesheet for the new design. Every class
 *   is prefixed ``utr1-`` and font-family is explicitly set on the ``utr1-root``
 *   scope so the site's other fonts can't override it. The v4 template no longer
 *   loads the legacy step-1 css, so only this file + Bootstrap + the modal css
 *   apply to the page. NEW cards created for this design are flagged with
 *   ``/* NEW CARD * /`` comments.
 */

/* ===================== DESIGN TOKENS ===================== */
.utr1-root {
  --utr1-blue: #1B75BC;
  --utr1-cyan: #00AEEF;
  --utr1-navy: #0D2240;
  --utr1-white: #FFFFFF;
  --utr1-light-bg: #F5F8FC;
  --utr1-grey: #555E68;
  --utr1-border: #D9E3EC;
  --utr1-green: #16A34A;
  --utr1-amber: #D97706;
  --utr1-red: #DC2626;
  --utr1-stars: #F59E0B;
  color: #1a1a1a;
}
/* Global reset — faithful replica of the HTML's `* { margin:0; padding:0;
   box-sizing:border-box }`, but scoped to .utr1-root so it cannot disturb the
   site's header / footer / navigation (which live outside the new design). */
.utr1-root, .utr1-root * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* Font: force Montserrat across the whole new design scope */
.utr1-root,
.utr1-root *,
.utr1-root input,
.utr1-root button,
.utr1-root select {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ===================== HERO ===================== */
.utr1-hero {
  background: linear-gradient(130deg, #091828 0%, #0D2B4A 45%, #1B5090 100%);
  padding: 56px 72px 68px;
  display: flex;
  gap: 56px;
  align-items: flex-start;
  position: relative;
  overflow: hidden;
}
.utr1-hero::after {
  content: '';
  position: absolute;
  top: -120px; right: -80px;
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(0,174,239,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.utr1-hero-content { flex: 1; min-width: 0; padding-top: 4px; }
.utr1-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0,174,239,0.12);
  border: 1px solid rgba(0,174,239,0.28);
  color: #00AEEF;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 13px;
  border-radius: 100px;
  margin-bottom: 18px;
}
.utr1-hero-badge::before {
  content: '';
  display: inline-block;
  width: 5px; height: 5px;
  background: #00AEEF;
  border-radius: 50%;
}
.utr1-hero h1 {
  font-size: 38px;
  font-weight: 800;
  color: #fff;
  line-height: 1.18;
  margin-bottom: 16px;
}
.utr1-hero-sub {
  font-size: 15px;
  font-weight: 500;
  color: rgba(255,255,255,0.78);
  line-height: 1.65;
  margin-bottom: 26px;
  max-width: 500px;
}
.utr1-hero-trust { display: flex; gap: 20px; flex-wrap: wrap; }
.utr1-trust-item {
  display: flex;
  align-items: center;
  gap: 7px;
  color: rgba(255,255,255,0.82);
  font-size: 12px;
  font-weight: 600;
}
.utr1-ti-icon {
  width: 18px; height: 18px;
  background: rgba(0,174,239,0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: #00AEEF;
  font-weight: 900;
}

/* ===================== HERO PROOF ===================== */
.utr1-hero-proof {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.utr1-hp-tp { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.utr1-hp-stars { color: #00B67A; font-size: 18px; letter-spacing: 3px; line-height: 1; }
.utr1-hp-score { font-size: 13px; color: rgba(255,255,255,0.65); font-weight: 500; }
.utr1-hp-score strong { color: #fff; font-weight: 700; }
.utr1-hp-includes { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 20px; }
.utr1-hp-includes span {
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 7px;
}
.utr1-hp-includes span::before {
  content: '✓';
  display: inline-flex;
  width: 16px; height: 16px;
  background: rgba(0,174,239,0.18);
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 900;
  color: #00AEEF;
  flex-shrink: 0;
}
.utr1-hero-proof-mob { display: none; }

/* ===================== FORM CARD ===================== */
.utr1-form-card {
  width: 388px;
  flex-shrink: 0;
  background: #fff;
  border-radius: 12px;
  padding: 28px 30px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.35);
  position: relative;
  z-index: 1;
}
.utr1-fc-title { font-size: 17px; font-weight: 800; color: #0D2240; margin-bottom: 4px; }
.utr1-fc-price { font-size: 13px; color: #555E68; margin-bottom: 18px; }
.utr1-fc-price strong { color: #1B75BC; font-weight: 700; }
.utr1-f-field { margin-bottom: 11px; }
.utr1-f-field label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #555E68;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}
.utr1-f-field input,
.utr1-f-field select {
  width: 100%;
  padding: 10px 13px;
  border: 1.5px solid #D9E3EC;
  border-radius: 6px;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  color: #1a1a1a;
  background: #fff;
  -webkit-appearance: none;
  appearance: none;
}
/* NEW CARD: select arrow caret (no site equivalent — custom for this design) */
.utr1-f-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%23555E68' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
  cursor: pointer;
}
/* EDIT (09 Sep 2026): field validation error text in the step-1 form card was inheriting
   the site-wide .error colour (default dark) at a large size, so it looked like body copy
   instead of an inline validation message. PROBLEM: form-field errors should be red and
   compact so the user spots them against the white card. SOLUTION: colour the validator's
   inline error labels red (#DC2626) and shrink them to 12px, scoped to .utr1-form-card so
   other error styling on the page is untouched. */
.utr1-form-card label.error,
.utr1-form-card .error {
  color: #DC2626 !important;
  font-size: 12px !important;
  font-weight: 500;
  display: block;
  margin-top: 4px;
  line-height: 1.3;
}
.utr1-f-btn {
  width: 100%;
  padding: 13px;
  background: #1B75BC;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 4px;
  transition: background 0.15s;
}
.utr1-f-btn:hover { background: #155a94; }
.utr1-f-note { text-align: center; font-size: 11px; color: #888; margin-top: 9px; }

/* ===================== TRUST BAR ===================== */
/* NEW CARD: full-width light trust strip (no direct site equivalent) */
.utr1-trust-bar {
  background: var(--utr1-light-bg);
  border-bottom: 1px solid #E8EDF2;
  padding: 13px 72px;
  display: flex;
  align-items: center;
  gap: 40px;
  overflow-x: auto;
}
.utr1-tb-item {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  color: #0D2240;
  flex-shrink: 0;
}
.utr1-tb-icon { font-size: 16px; }

/* ===================== SECTION BASE ===================== */
.utr1-section { padding: 60px 72px; }
.utr1-section-alt { background: var(--utr1-light-bg); }
.utr1-s-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #1B75BC;
  margin-bottom: 8px;
}
.utr1-s-title {
  font-size: 28px;
  font-weight: 800;
  color: #0D2240;
  line-height: 1.2;
  margin-bottom: 10px;
}
.utr1-s-sub {
  font-size: 14px;
  color: #555E68;
  line-height: 1.65;
  margin-bottom: 36px;
  max-width: 620px;
}

/* ===================== STATS ROW ===================== */
/* NEW CARD: numeric stat boxes */
.utr1-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 44px;
}
.utr1-stat-box {
  background: #fff;
  border: 1.5px solid #E8EDF2;
  border-radius: 10px;
  padding: 20px 16px;
  text-align: center;
}
.utr1-stat-val { font-size: 28px; font-weight: 800; color: #1B75BC; display: block; line-height: 1; margin-bottom: 5px; }
.utr1-stat-val.utr1-stat-red { color: #DC2626; }
.utr1-stat-lbl { font-size: 12px; color: #555E68; font-weight: 600; line-height: 1.35; }

/* ===================== INFO GRID ===================== */
/* NEW CARD: info card with left accent border */
.utr1-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.utr1-info-card {
  background: #fff;
  border: 1.5px solid #E8EDF2;
  border-radius: 10px;
  padding: 22px;
  border-left: 4px solid #1B75BC;
}
.utr1-ic-title { font-size: 14px; font-weight: 700; color: #0D2240; margin-bottom: 7px; }
.utr1-ic-text { font-size: 13px; color: #555E68; line-height: 1.62; }

/* ===================== STEPS ===================== */
.utr1-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.utr1-step-card {
  background: #fff;
  border: 1.5px solid #E8EDF2;
  border-radius: 12px;
  padding: 26px;
}
/* NEW CARD: square-rounded step number chip (not a circle) */
.utr1-step-num {
  width: 42px; height: 42px;
  background: #1B75BC;
  color: #fff;
  border-radius: 10px;
  font-size: 18px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.utr1-step-title { font-size: 15px; font-weight: 700; color: #0D2240; margin-bottom: 7px; }
.utr1-step-text { font-size: 13px; color: #555E68; line-height: 1.6; }

/* ===================== FAQ ===================== */
.utr1-faq-list { display: flex; flex-direction: column; gap: 10px; }
.utr1-faq-item {
  background: #fff;
  border: 1.5px solid #E8EDF2;
  border-radius: 10px;
  overflow: hidden;
}
.utr1-faq-q {
  padding: 16px 22px;
  font-size: 14px;
  font-weight: 700;
  color: #0D2240;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  cursor: pointer;
}
.utr1-faq-arr { color: #1B75BC; font-size: 16px; flex-shrink: 0; }
.utr1-faq-item.open .utr1-faq-arr { transform: rotate(180deg); }
.utr1-faq-a { padding: 0 22px 16px; font-size: 13px; color: #555E68; line-height: 1.65; }
.utr1-faq-a { display: none; }
.utr1-faq-item.open .utr1-faq-a { display: block; }

/* ===================== REVIEWS ===================== */
.utr1-reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.utr1-rv-card {
  background: #fff;
  border: 1.5px solid #E8EDF2;
  border-radius: 10px;
  padding: 18px;
}
.utr1-rv-stars { color: var(--utr1-stars); font-size: 13px; margin-bottom: 9px; letter-spacing: 2px; }
.utr1-rv-text { font-size: 13px; color: #555E68; line-height: 1.6; margin-bottom: 11px; }
.utr1-rv-author { font-size: 12px; font-weight: 700; color: #0D2240; }
.utr1-rv-date { font-size: 11px; color: #999; margin-top: 1px; }

/* ===================== CTA BAND ===================== */
/* NEW CARD: full-width gradient CTA band */
.utr1-cta-band {
  background: linear-gradient(130deg, #0D2240 0%, #1B5090 100%);
  padding: 64px 72px;
  text-align: center;
}
.utr1-cta-band h2 { font-size: 30px; font-weight: 800; color: #fff; margin-bottom: 10px; }
.utr1-cta-band p { font-size: 15px; color: rgba(255,255,255,0.75); margin-bottom: 28px; }
.utr1-cta-btn {
  display: inline-block;
  background: #00AEEF;
  color: #fff;
  padding: 15px 44px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}
.utr1-cta-sub { font-size: 12px; color: rgba(255,255,255,0.5); margin-top: 12px; }

/* ===================== DEADLINE ALERT + PENALTY GRID ===================== */
/* EDIT (09 Sep 2026): NEW OPTIONAL blocks — deadline alert (amber) + penalty grid
   (register-for-utr design "What Happens If You Miss the Deadline"). */
.utr1-deadline-alert {
  background: #FFFBEB; border: 2px solid #F59E0B; border-radius: 10px;
  padding: 18px 22px; display: flex; gap: 14px; align-items: center; margin-bottom: 32px;
}
.utr1-da-icon { font-size: 26px; flex-shrink: 0; }
.utr1-da-title { font-size: 14px; font-weight: 700; color: #92400E; margin-bottom: 3px; }
.utr1-da-text { font-size: 13px; color: #78350F; line-height: 1.5; }
.utr1-penalty-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 8px; }
.utr1-pen-card { background: #fff; border: 1.5px solid #E8EDF2; border-radius: 10px; padding: 18px 14px; text-align: center; }
.utr1-pen-red { border-color: #FECACA; background: #FEF2F2; }
.utr1-pen-amber { border-color: #FDE68A; background: #FFFBEB; }
.utr1-pen-dark-red { border-color: #FCA5A5; background: #FEF2F2; }
.utr1-pen-timing { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #888; margin-bottom: 8px; }
.utr1-pen-amt { font-size: 20px; font-weight: 800; color: #0D2240; display: block; margin-bottom: 4px; }
.utr1-pen-red .utr1-pen-amt { color: #DC2626; }
.utr1-pen-amber .utr1-pen-amt { color: #D97706; }
.utr1-pen-dark-red .utr1-pen-amt { color: #B91C1C; }
.utr1-pen-lbl { font-size: 11px; color: #555E68; font-weight: 600; line-height: 1.4; }

/* ===================== LAYOUT HELPERS ===================== */
/* Generic two/three-column builders included in the HTML design system (kept for
   sibling pages + consistency with the original design tokens). */
.utr1-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: start;
}
.utr1-three-col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}


/* ===================== COMPARISON TABLE ===================== */
/* EDIT (09 Sep 2026): NEW OPTIONAL block — comparison table (used by hmrc-utr-number
   "Tax2u vs Applying Direct to HMRC"). Mirrors the supplied design: navy header row,
   zebra body, green (.utr1-cmp-yes) / red (.utr1-cmp-no) accent cells. */
.utr1-cmp-title {
  font-size: 18px;
  font-weight: 700;
  color: #0D2240;
  margin: 44px 0 18px;
}
.utr1-cmp-scroll { overflow-x: auto; }
.utr1-cmp-table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 20px rgba(0,0,0,0.08);
}
.utr1-cmp-table th {
  background: #0D2240;
  color: #fff;
  padding: 13px 18px;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
}
.utr1-cmp-table td {
  padding: 12px 18px;
  font-size: 13px;
  color: #1a1a1a;
  border-bottom: 1px solid #E8EDF2;
  vertical-align: top;
  line-height: 1.5;
}
.utr1-cmp-table tr:nth-child(even) td { background: #F5F8FC; }
.utr1-cmp-table tr:last-child td { border-bottom: none; }
.utr1-cmp-table td.utr1-cmp-yes { color: #16A34A; font-weight: 700; }
.utr1-cmp-table td.utr1-cmp-no { color: #DC2626; font-weight: 600; }
.utr1-cmp-table th:first-child { width: 28%; }
/* ===================== CHECKLIST + HIGHLIGHT BOX ===================== */
/* EDIT (09 Sep 2026): NEW OPTIONAL block — checklist (documents required) + highlight
   box (common mistakes), used by apply-for-utr-number. Matches the supplied design. */
.utr1-checklist { display: flex; flex-direction: column; gap: 10px; }
.utr1-cl-item {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 14px 18px; background: #fff;
  border: 1.5px solid #E8EDF2; border-radius: 8px;
}
.utr1-cl-icon {
  width: 20px; height: 20px; background: #1B75BC; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 10px; font-weight: 800; flex-shrink: 0; margin-top: 2px;
}
.utr1-cl-text { font-size: 13px; color: #1a1a1a; line-height: 1.55; }
.utr1-cl-text strong { font-weight: 700; color: #0D2240; display: block; margin-bottom: 1px; }
.utr1-hl-box {
  background: #EBF5FF; border: 1.5px solid #BFDBFE; border-radius: 10px;
  padding: 20px 22px; display: flex; gap: 14px; align-items: flex-start;
}
.utr1-hl-icon { font-size: 24px; flex-shrink: 0; line-height: 1; }
.utr1-hl-title { font-size: 14px; font-weight: 700; color: #0D2240; margin-bottom: 6px; }
.utr1-hl-text { font-size: 13px; color: #555E68; line-height: 1.6; }

/* ===================== HL-BOXES STACK (get-utr-number design) ===================== */
/* EDIT (09 Sep 2026): NEW OPTIONAL block — stacked highlight boxes, used on the right
   column of a two-col (paired with the timeline). Each is a re-used .utr1-hl-box. */
.utr1-hl-boxes { display: flex; flex-direction: column; gap: 16px; }

/* ===================== TIMELINE (get-utr-number design) ===================== */
/* EDIT (09 Sep 2026): NEW OPTIONAL block — vertical timeline with numbered dots and a
   connecting rail, used by /utr/get-utr-number "From Application to Letterbox - Day by Day".
   Each item = [dot-label, dot-done(''|'done'), label, title, text]. */
.utr1-timeline { display: flex; flex-direction: column; position: relative; }
.utr1-timeline::before {
  content: '';
  position: absolute;
  left: 23px; top: 28px; bottom: 28px;
  width: 2px;
  background: #E8EDF2;
}
.utr1-tl-item {
  display: flex; gap: 18px; align-items: flex-start; padding-bottom: 26px; position: relative;
}
.utr1-tl-item:last-child { padding-bottom: 0; }
.utr1-tl-dot {
  width: 46px; height: 46px;
  background: #1B75BC; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12px; font-weight: 800;
  flex-shrink: 0; z-index: 1;
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px #1B75BC;
}
.utr1-tl-dot-done { background: #16A34A; box-shadow: 0 0 0 2px #16A34A; }
.utr1-tl-body { padding-top: 9px; flex: 1; }
.utr1-tl-lbl {
  font-size: 11px; font-weight: 700; color: #1B75BC;
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 3px;
}
.utr1-tl-title { font-size: 14px; font-weight: 700; color: #0D2240; margin-bottom: 3px; }
.utr1-tl-text { font-size: 13px; color: #555E68; line-height: 1.55; }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 768px) {
  .utr1-hero { padding: 28px 20px 36px; flex-direction: column; gap: 24px; }
  .utr1-hero h1 { font-size: 24px; }
  .utr1-hero-sub { font-size: 13px; margin-bottom: 18px; }
  .utr1-hero-content .utr1-hero-proof { display: none; }
  .utr1-hero-proof-mob { display: block; }
  .utr1-hp-includes { grid-template-columns: 1fr; gap: 7px; }
  .utr1-form-card { width: 100%; }
  .utr1-trust-bar { padding: 12px 20px; gap: 20px; }
  .utr1-section { padding: 36px 20px; }
  .utr1-s-title { font-size: 20px; }
  .utr1-s-sub { font-size: 13px; margin-bottom: 24px; }
  .utr1-stats-row { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 28px; }
  .utr1-info-grid { grid-template-columns: 1fr; gap: 14px; }
  .utr1-steps-grid { grid-template-columns: 1fr; gap: 16px; }
  .utr1-reviews-grid { grid-template-columns: 1fr; gap: 12px; }
  .utr1-cta-band { padding: 40px 20px; }
  .utr1-cta-band h2 { font-size: 20px; }
  .utr1-cta-band p { font-size: 13px; margin-bottom: 20px; }
  .utr1-cta-btn { padding: 13px 28px; font-size: 13px; }
  .utr1-cmp-title { margin: 28px 0 14px; font-size: 16px; }
  .utr1-cmp-table th, .utr1-cmp-table td { padding: 10px 12px; font-size: 12px; }
  .utr1-penalty-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .utr1-timeline::before { left: 19px; }
  .utr1-tl-dot { width: 38px; height: 38px; font-size: 10px; }
  .utr1-two-col { grid-template-columns: 1fr; gap: 20px; }
  .utr1-three-col { grid-template-columns: 1fr; gap: 14px; }
}