/* ============================================================
   NET RENTALS — INDEPENDENT RENTAL BUSINESSES
   /css/marketing/solutions/independent-rental-businesses.css

   DEPENDS ON:
   /css/marketing/rentals-marketing-ui.css

   DESIGN LANGUAGE:
   - Net Rentals Owner OS
   - Risk / Requirements / Money / Protection
   - Bookings + Post-Trip Charges DNA
   - dark graphite operating environment
   - business green dominant
   - blue = active / review
   - amber = attention / dispute
   - red = failure / exposure
   - matte surfaces
   - no gradients
   ============================================================ */


/* ============================================================
   01. TOKENS
   ============================================================ */

.independent-page {
  --ir-bg: #09090b;
  --ir-bg-2: #0b0b0d;

  --ir-surface: #111113;
  --ir-surface-2: #18181b;
  --ir-surface-3: rgba(255,255,255,0.04);

  --ir-border: rgba(255,255,255,0.06);
  --ir-border-2: rgba(255,255,255,0.10);
  --ir-border-3: rgba(255,255,255,0.15);

  --ir-text: #fafafa;
  --ir-text-2: #e4e4e7;
  --ir-muted: #71717a;
  --ir-dim: #52525b;

  --ir-green: #4ade80;
  --ir-green-bg: rgba(74,222,128,0.08);
  --ir-green-border: rgba(74,222,128,0.20);

  --ir-blue: #60a5fa;
  --ir-blue-bg: rgba(96,165,250,0.08);
  --ir-blue-border: rgba(96,165,250,0.20);

  --ir-amber: #fbbf24;
  --ir-amber-bg: rgba(251,191,36,0.08);
  --ir-amber-border: rgba(251,191,36,0.20);

  --ir-red: #f87171;
  --ir-red-bg: rgba(248,113,113,0.08);
  --ir-red-border: rgba(248,113,113,0.20);

  --ir-purple: #a78bfa;
  --ir-purple-bg: rgba(167,139,250,0.08);
  --ir-purple-border: rgba(167,139,250,0.22);

  --ir-sidebar-w: 260px;

  --ir-font:
    "DM Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  --ir-mono:
    "DM Mono",
    "SFMono-Regular",
    Consolas,
    monospace;

  min-height: 100vh;

  background: var(--ir-bg);
  color: var(--ir-text);

  font-family: var(--ir-font);
}


/* ============================================================
   02. BASE
   ============================================================ */

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;

  margin: 0;

  overflow-x: hidden;

  background: #09090b;
}

.independent-page,
.independent-page * {
  box-sizing: border-box;
}

.independent-page a {
  text-decoration: none;
}

.independent-page button {
  font: inherit;

  -webkit-tap-highlight-color: transparent;
}

.independent-page ::selection {
  background: rgba(74,222,128,0.22);
  color: #ffffff;
}

.independent-page .is-green {
  color: var(--ir-green) !important;
}

.independent-page .is-blue {
  color: var(--ir-blue) !important;
}

.independent-page .is-amber {
  color: var(--ir-amber) !important;
}

.independent-page .is-red {
  color: var(--ir-red) !important;
}


/* ============================================================
   03. SIDEBAR
   ============================================================ */

.independent-sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;

  z-index: 100;

  width: var(--ir-sidebar-w);

  display: flex;
  flex-direction: column;

  padding: 24px 16px;

  border-right: 1px solid var(--ir-border);

  background: var(--ir-surface);
}

.independent-sidebar-brand {
  min-height: 50px;

  display: flex;
  align-items: center;

  margin-bottom: 18px;
  padding: 0 4px;
}

.independent-sidebar-brand-copy {
  display: block;
  min-width: 0;
}

.independent-sidebar-brand-copy strong {
  display: block;

  color: var(--ir-text);

  font-size: 15px;
  font-weight: 800;

  letter-spacing: -0.025em;
}

.independent-sidebar-brand-copy span {
  display: block;

  margin-top: 2px;

  color: var(--ir-muted);

  font-size: 11px;
  font-weight: 500;
}


/* ============================================================
   04. SIDEBAR NAV
   ============================================================ */

.independent-sidebar-nav {
  min-height: 0;

  display: flex;
  flex: 1;
  flex-direction: column;

  gap: 2px;

  overflow-y: auto;

  scrollbar-width: none;
}

.independent-sidebar-nav::-webkit-scrollbar {
  display: none;
}

.independent-sidebar-label {
  padding: 19px 12px 8px;

  color: var(--ir-dim);

  font-size: 10px;
  font-weight: 700;

  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.independent-sidebar-nav a {
  min-height: 40px;

  display: flex;
  align-items: center;

  gap: 10px;

  padding: 0 12px;

  border-radius: 8px;

  color: var(--ir-muted);

  font-size: 13px;
  font-weight: 500;

  transition:
    color 140ms ease,
    background 140ms ease;
}

.independent-sidebar-nav a svg {
  width: 18px;
  height: 18px;

  flex: 0 0 auto;

  opacity: 0.48;
}

.independent-sidebar-nav a:hover {
  background: var(--ir-surface-3);
  color: var(--ir-text);
}

.independent-sidebar-nav a.active {
  background: var(--ir-surface-2);
  color: var(--ir-text);

  font-weight: 600;
}

.independent-sidebar-nav a.active svg {
  opacity: 1;
}


/* ============================================================
   05. SIDEBAR FOOTER
   ============================================================ */

.independent-sidebar-footer {
  margin-top: auto;
  padding-top: 16px;

  border-top: 1px solid var(--ir-border);
}

.independent-sidebar-business {
  display: flex;
  align-items: center;

  gap: 10px;

  padding: 8px 4px;
}

.independent-sidebar-avatar {
  width: 34px;
  height: 34px;

  flex: 0 0 auto;

  display: grid;
  place-items: center;

  border: 1px solid var(--ir-border);
  border-radius: 8px;

  background: var(--ir-surface-2);
  color: var(--ir-muted);

  font-size: 10px;
  font-weight: 800;
}

.independent-sidebar-business > div:last-child {
  min-width: 0;
}

.independent-sidebar-business strong {
  display: block;

  overflow: hidden;

  color: var(--ir-text);

  font-size: 12px;
  font-weight: 600;

  white-space: nowrap;
  text-overflow: ellipsis;
}

.independent-sidebar-business span {
  display: block;

  margin-top: 2px;

  color: var(--ir-muted);

  font-size: 10px;
}

.independent-sidebar-footer-link {
  min-height: 36px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-top: 5px;
  padding: 0 10px;

  border-radius: 7px;

  color: var(--ir-dim);

  font-size: 10px;
  font-weight: 650;
}

.independent-sidebar-footer-link:hover {
  background: var(--ir-surface-3);
  color: var(--ir-green);
}

.independent-sidebar-footer-link span {
  font-size: 13px;
}


/* ============================================================
   06. SIDEBAR OVERLAY
   ============================================================ */

.independent-sidebar-overlay {
  display: none;
}


/* ============================================================
   07. MAIN
   ============================================================ */

.independent-main {
  min-width: 0;
  min-height: 100vh;

  margin-left: var(--ir-sidebar-w);

  background: var(--ir-bg);
}

.independent-operations {
  min-width: 0;
}


/* ============================================================
   08. TOPBAR
   ============================================================ */

.independent-topbar {
  position: sticky;
  top: 0;

  z-index: 50;

  min-height: 64px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  padding: 0 32px;

  border-bottom: 1px solid var(--ir-border);

  background: rgba(9,9,11,0.90);

  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.independent-topbar-left,
.independent-topbar-actions {
  display: flex;
  align-items: center;

  gap: 10px;
}

.independent-topbar-title {
  color: var(--ir-text);

  font-size: 13px;
  font-weight: 700;
}

.independent-topbar-sub {
  margin-top: 2px;

  color: var(--ir-muted);

  font-family: var(--ir-mono);
  font-size: 8px;
}

.independent-topbar-badge {
  min-height: 24px;

  display: inline-flex;
  align-items: center;

  padding: 0 9px;

  border: 1px solid var(--ir-border);
  border-radius: 6px;

  background: var(--ir-surface-3);
  color: var(--ir-muted);

  font-size: 9px;
  font-weight: 750;

  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.independent-topbar-badge.is-green {
  border-color: var(--ir-green-border);

  background: var(--ir-green-bg);
}

.independent-topbar-link {
  color: var(--ir-muted);

  font-size: 11px;
  font-weight: 600;
}

.independent-topbar-link:hover {
  color: var(--ir-text);
}

.independent-topbar-primary {
  min-height: 34px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0 12px;

  border-radius: 7px;

  background: #fafafa;
  color: #09090b;

  font-size: 11px;
  font-weight: 750;
}

.independent-topbar-primary:hover {
  background: #e5e5e5;
}

.independent-menu-toggle {
  width: 36px;
  height: 36px;

  display: none;
  align-items: center;
  justify-content: center;

  padding: 0;

  border: 0;

  background: transparent;
  color: var(--ir-text);

  cursor: pointer;
}

.independent-menu-toggle svg {
  width: 20px;
  height: 20px;
}


/* ============================================================
   09. CONTENT WIDTH
   ============================================================ */

.independent-overview,
.independent-responsibility-strip,
.independent-section,
.independent-control-principles,
.independent-final,
.independent-solution-switcher,
.independent-footer {
  padding-right: 32px;
  padding-left: 32px;
}

.independent-overview > *,
.independent-responsibility-strip > *,
.independent-section > *,
.independent-control-principles > *,
.independent-final > *,
.independent-solution-switcher > *,
.independent-footer > * {
  width: min(100%, 1320px);

  margin-right: auto;
  margin-left: auto;
}


/* ============================================================
   10. HERO
   ============================================================ */

.independent-overview {
  scroll-margin-top: 80px;

  display: grid;
  grid-template-columns:
    minmax(0, 0.82fr)
    minmax(520px, 1.18fr);

  gap: 64px;

  align-items: center;

  padding-top: 72px;
  padding-bottom: 72px;

  border-bottom: 1px solid var(--ir-border);

  background: var(--ir-bg);
}

.independent-overview > * {
  width: auto;

  margin: 0;
}

.independent-hero-copy {
  max-width: 650px;
}

.independent-kicker {
  display: block;

  margin-bottom: 14px;

  color: var(--ir-green);

  font-size: 9px;
  font-weight: 800;

  letter-spacing: 0.11em;
}

.independent-hero-copy h1 {
  margin: 0;

  color: var(--ir-text);

  font-size:
    clamp(
      3.3rem,
      5.5vw,
      5.8rem
    );

  line-height: 0.94;
  font-weight: 800;

  letter-spacing: -0.065em;
}

.independent-hero-copy p {
  max-width: 620px;

  margin: 24px 0 0;

  color: var(--ir-muted);

  font-size: 1rem;
  line-height: 1.72;
}

.independent-hero-actions {
  display: flex;
  flex-wrap: wrap;

  gap: 8px;

  margin-top: 30px;
}


/* ============================================================
   11. BUTTONS
   ============================================================ */

.independent-button-primary,
.independent-button-secondary {
  min-height: 44px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0 15px;

  border-radius: 8px;

  font-size: 12px;
  font-weight: 700;

  white-space: nowrap;
}

.independent-button-primary {
  border: 1px solid #fafafa;

  background: #fafafa;
  color: #09090b;
}

.independent-button-primary:hover {
  background: #e5e5e5;
}

.independent-button-secondary {
  border: 1px solid var(--ir-border-2);

  background: var(--ir-surface);
  color: var(--ir-text);
}

.independent-button-secondary:hover {
  border-color: var(--ir-border-3);

  background: var(--ir-surface-2);
}


/* ============================================================
   12. HERO BOOKING CONSOLE
   ============================================================ */

.independent-booking-console {
  overflow: hidden;

  border: 1px solid var(--ir-border-2);
  border-radius: 16px;

  background: var(--ir-surface);
}

.independent-booking-console-head {
  min-height: 86px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 18px;

  padding: 0 20px;

  border-bottom: 1px solid var(--ir-border);
}

.independent-booking-console-head > div:first-child > span {
  display: block;

  color: var(--ir-dim);

  font-family: var(--ir-mono);
  font-size: 8px;

  letter-spacing: 0.07em;
}

.independent-booking-console-head > div:first-child > strong {
  display: block;

  margin-top: 5px;

  color: var(--ir-text);

  font-size: 16px;
  font-weight: 800;
}

.independent-booking-console-head > div:first-child > small {
  display: block;

  margin-top: 3px;

  color: var(--ir-muted);

  font-size: 9px;
}

.independent-booking-state {
  padding: 6px 9px;

  border: 1px solid var(--ir-green-border);
  border-radius: 6px;

  background: var(--ir-green-bg);
  color: var(--ir-green);

  font-size: 7px;
  font-weight: 800;

  letter-spacing: 0.08em;
  white-space: nowrap;
}


/* ============================================================
   13. HERO BOOKING TIMELINE
   ============================================================ */

.independent-booking-timeline {
  display: grid;
  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  padding: 17px 20px;

  border-bottom: 1px solid var(--ir-border);

  background: #0f0f11;
}

.independent-booking-timeline > div {
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 6px;
}

.independent-booking-timeline > div:not(:last-child)::after {
  content: "";

  position: absolute;
  top: 5px;
  left: calc(50% + 8px);
  right: calc(-50% + 8px);

  height: 1px;

  background: var(--ir-border-2);
}

.independent-booking-timeline i {
  position: relative;

  z-index: 2;

  width: 11px;
  height: 11px;

  border: 2px solid var(--ir-border-2);
  border-radius: 50%;

  background: var(--ir-surface-2);
}

.independent-booking-timeline span {
  color: var(--ir-dim);

  font-size: 7px;
  font-weight: 700;

  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.independent-booking-timeline .done i,
.independent-booking-timeline .active i {
  border-color: var(--ir-green);
  background: var(--ir-green);
}

.independent-booking-timeline .done span,
.independent-booking-timeline .active span {
  color: var(--ir-green);
}


/* ============================================================
   14. HERO CLEARANCE GRID
   ============================================================ */

.independent-clearance-grid {
  display: grid;
  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  border-bottom: 1px solid var(--ir-border);
}

.independent-clearance-grid article {
  min-height: 92px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  padding: 12px 14px;

  border-right: 1px solid var(--ir-border);
  border-bottom: 1px solid var(--ir-border);

  background: var(--ir-surface);
}

.independent-clearance-grid article:nth-child(4n) {
  border-right: 0;
}

.independent-clearance-grid article:nth-last-child(-n + 4) {
  border-bottom: 0;
}

.independent-clearance-grid span {
  color: var(--ir-dim);

  font-size: 7px;
  font-weight: 800;

  letter-spacing: 0.08em;
}

.independent-clearance-grid strong {
  margin-top: 8px;

  color: var(--ir-green);

  font-family: var(--ir-mono);
  font-size: 9px;
  font-weight: 500;
}

.independent-clearance-grid small {
  margin-top: 4px;

  color: var(--ir-muted);

  font-size: 7px;
}


/* ============================================================
   15. HERO CONSOLE FOOTER
   ============================================================ */

.independent-booking-console-footer {
  min-height: 76px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 18px;

  padding: 0 18px;

  background: rgba(74,222,128,0.025);
}

.independent-booking-console-footer > div {
  min-width: 0;

  display: flex;
  align-items: center;

  gap: 11px;
}

.independent-console-check {
  width: 30px;
  height: 30px;

  flex: 0 0 auto;

  display: grid;
  place-items: center;

  border: 1px solid var(--ir-green-border);
  border-radius: 8px;

  background: var(--ir-green-bg);
  color: var(--ir-green);

  font-size: 10px;
  font-weight: 800;
}

.independent-booking-console-footer strong {
  display: block;

  color: #bbf7d0;

  font-size: 10px;
  font-weight: 700;
}

.independent-booking-console-footer > div > div span {
  display: block;

  margin-top: 3px;

  color: #6d8f76;

  font-size: 8px;
}

.independent-booking-console-footer button {
  min-height: 34px;

  flex: 0 0 auto;

  padding: 0 11px;

  border: 1px solid var(--ir-green-border);
  border-radius: 6px;

  background: var(--ir-green-bg);
  color: var(--ir-green);

  font-size: 8px;
  font-weight: 750;

  cursor: pointer;
}


/* ============================================================
   16. RESPONSIBILITY STRIP
   ============================================================ */

.independent-responsibility-strip {
  display: grid;
  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  padding-top: 0;
  padding-bottom: 0;

  border-bottom: 1px solid var(--ir-border);

  background: #0b0b0d;
}

.independent-responsibility-strip > div {
  min-height: 100px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  padding: 0 22px;

  border-right: 1px solid var(--ir-border);
}

.independent-responsibility-strip > div:last-child {
  border-right: 0;
}

.independent-responsibility-strip span {
  color: var(--ir-green);

  font-size: 7px;
  font-weight: 800;

  letter-spacing: 0.09em;
}

.independent-responsibility-strip strong {
  margin-top: 7px;

  color: var(--ir-text-2);

  font-size: 11px;
  font-weight: 650;
}


/* ============================================================
   17. GENERIC SECTION
   ============================================================ */

.independent-section,
.independent-control-principles {
  scroll-margin-top: 78px;

  padding-top: 72px;
  padding-bottom: 72px;

  border-bottom: 1px solid var(--ir-border);

  background: var(--ir-bg);
}

.independent-section-heading {
  width: min(100%, 1320px);

  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 44px;

  margin: 0 auto 32px;
}

.independent-section-heading > div:first-child {
  max-width: 790px;
}

.independent-section-label {
  display: block;

  margin-bottom: 9px;

  color: var(--ir-green);

  font-size: 9px;
  font-weight: 800;

  letter-spacing: 0.11em;
}

.independent-section-heading h2,
.independent-release-copy h2,
.independent-dispute-copy h2,
.independent-case-file-copy h2 {
  margin: 0;

  color: var(--ir-text);

  font-size:
    clamp(
      2.3rem,
      4.3vw,
      4.1rem
    );

  line-height: 0.98;
  font-weight: 800;

  letter-spacing: -0.055em;
}

.independent-section-heading p,
.independent-release-copy > p,
.independent-dispute-copy > p,
.independent-case-file-copy > p {
  max-width: 690px;

  margin: 16px 0 0;

  color: var(--ir-muted);

  font-size: 13px;
  line-height: 1.68;
}

.independent-section-link {
  display: inline-flex;
  align-items: center;

  gap: 8px;

  color: var(--ir-muted);

  font-size: 10px;
  font-weight: 650;

  white-space: nowrap;
}

.independent-section-link:hover {
  color: var(--ir-green);
}


/* ============================================================
   18. PANEL HEAD
   ============================================================ */

.independent-panel-head {
  min-height: 66px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 16px;

  padding: 0 18px;

  border-bottom: 1px solid var(--ir-border);
}

.independent-panel-head > div > span {
  display: block;

  color: var(--ir-dim);

  font-size: 7px;
  font-weight: 800;

  letter-spacing: 0.09em;
}

.independent-panel-head > div > strong {
  display: block;

  margin-top: 4px;

  color: var(--ir-text);

  font-size: 12px;
  font-weight: 700;
}


/* ============================================================
   19. STATE PILLS
   ============================================================ */

.independent-state-pill {
  display: inline-flex;
  align-items: center;

  padding: 5px 7px;

  border: 1px solid var(--ir-border);
  border-radius: 5px;

  background: var(--ir-surface-3);
  color: var(--ir-muted);

  font-size: 7px;
  font-weight: 800;

  letter-spacing: 0.05em;
  white-space: nowrap;
}

.independent-state-pill.is-green {
  border-color: var(--ir-green-border);

  background: var(--ir-green-bg);
}

.independent-state-pill.is-blue {
  border-color: var(--ir-blue-border);

  background: var(--ir-blue-bg);
}

.independent-state-pill.is-amber {
  border-color: var(--ir-amber-border);

  background: var(--ir-amber-bg);
}


/* ============================================================
   20. CLEARANCE LAYOUT
   ============================================================ */

.independent-clearance-layout {
  width: min(100%, 1320px);

  display: grid;
  grid-template-columns:
    minmax(300px, 0.85fr)
    minmax(460px, 1.15fr);

  gap: 14px;

  margin-inline: auto;
}

.independent-booking-menu,
.independent-identity-panel,
.independent-release-panel,
.independent-payment-panel,
.independent-return-panel,
.independent-settlement-panel,
.independent-charge-panel,
.independent-collection-panel,
.independent-dispute-panel,
.independent-case-file-panel {
  overflow: hidden;

  border: 1px solid var(--ir-border);
  border-radius: 12px;

  background: var(--ir-surface);
}


/* ============================================================
   21. BOOKING MENU
   ============================================================ */

.independent-booking-menu article {
  min-height: 70px;

  display: grid;
  grid-template-columns:
    34px
    minmax(0, 1fr)
    auto;

  gap: 11px;

  align-items: center;

  padding: 10px 16px;

  border-bottom: 1px solid var(--ir-border);
}

.independent-booking-menu article:last-child {
  border-bottom: 0;
}

.independent-menu-icon {
  width: 32px;
  height: 32px;

  display: grid;
  place-items: center;

  border: 1px solid var(--ir-border);
  border-radius: 8px;

  background: var(--ir-surface-2);
  color: var(--ir-muted);

  font-family: var(--ir-mono);
  font-size: 7px;
  font-weight: 500;
}

.independent-booking-menu article > div:nth-child(2) {
  min-width: 0;
}

.independent-booking-menu article > div:nth-child(2) strong {
  display: block;

  overflow: hidden;

  color: var(--ir-text-2);

  font-size: 10px;
  font-weight: 650;

  white-space: nowrap;
  text-overflow: ellipsis;
}

.independent-booking-menu article > div:nth-child(2) span {
  display: block;

  overflow: hidden;

  margin-top: 3px;

  color: var(--ir-muted);

  font-size: 8px;

  white-space: nowrap;
  text-overflow: ellipsis;
}

.independent-booking-menu article > small {
  font-size: 7px;
  font-weight: 800;

  letter-spacing: 0.05em;
}


/* ============================================================
   22. DRIVER PROFILE
   ============================================================ */

.independent-driver-profile {
  min-height: 94px;

  display: grid;
  grid-template-columns:
    44px
    minmax(0, 1fr)
    auto;

  gap: 12px;

  align-items: center;

  padding: 0 18px;

  border-bottom: 1px solid var(--ir-border);
}

.independent-driver-avatar {
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  border: 1px solid var(--ir-green-border);
  border-radius: 10px;

  background: var(--ir-green-bg);
  color: var(--ir-green);

  font-size: 10px;
  font-weight: 800;
}

.independent-driver-profile > div:nth-child(2) strong {
  display: block;

  color: var(--ir-text);

  font-size: 12px;
  font-weight: 700;
}

.independent-driver-profile > div:nth-child(2) span {
  display: block;

  margin-top: 3px;

  color: var(--ir-muted);

  font-size: 8px;
}

.independent-driver-score {
  text-align: right;
}

.independent-driver-score span {
  display: block;

  color: var(--ir-dim);

  font-size: 7px;
  font-weight: 800;
}

.independent-driver-score strong {
  display: block;

  margin-top: 4px;

  color: var(--ir-green);

  font-size: 9px;
  font-weight: 700;
}


/* ============================================================
   23. IDENTITY GRID
   ============================================================ */

.independent-identity-grid {
  display: grid;
  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  border-bottom: 1px solid var(--ir-border);
}

.independent-identity-grid > div {
  min-height: 76px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  padding: 10px 14px;

  border-right: 1px solid var(--ir-border);
}

.independent-identity-grid > div:last-child {
  border-right: 0;
}

.independent-identity-grid span {
  color: var(--ir-dim);

  font-size: 7px;
  font-weight: 800;

  letter-spacing: 0.06em;
}

.independent-identity-grid strong {
  margin-top: 7px;

  color: var(--ir-text-2);

  font-family: var(--ir-mono);
  font-size: 8px;
  font-weight: 500;
}


/* ============================================================
   24. DOCUMENT LIST
   ============================================================ */

.independent-document-list {
  display: grid;

  padding: 0 18px 8px;
}

.independent-document-list > div {
  min-height: 52px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 16px;

  border-bottom: 1px solid var(--ir-border);
}

.independent-document-list > div:last-child {
  border-bottom: 0;
}

.independent-document-list span {
  color: var(--ir-muted);

  font-size: 9px;
}

.independent-document-list strong {
  color: var(--ir-green);

  font-size: 8px;
  font-weight: 700;
}


/* ============================================================
   25. PROTECTION SECTION
   ============================================================ */

.independent-protection-section {
  background: var(--ir-bg-2);
}

.independent-protection-grid {
  width: min(100%, 1320px);

  display: grid;
  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap: 14px;

  margin-inline: auto;
}

.independent-protection-card {
  min-width: 0;

  padding: 20px;

  border: 1px solid var(--ir-border);
  border-radius: 12px;

  background: var(--ir-surface);
}

.independent-protection-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;
}

.independent-protection-card-head > span {
  color: var(--ir-dim);

  font-size: 7px;
  font-weight: 800;

  letter-spacing: 0.09em;
}

.independent-protection-card-head > small {
  font-size: 7px;
  font-weight: 800;
}

.independent-protection-card h3 {
  margin: 26px 0 18px;

  color: var(--ir-text);

  font-size: 22px;
  line-height: 1;
  font-weight: 800;

  letter-spacing: -0.04em;
}

.independent-protection-card > p {
  margin: 18px 0 0;

  color: var(--ir-muted);

  font-size: 10px;
  line-height: 1.6;
}


/* ============================================================
   26. PROTECTION LIST
   ============================================================ */

.independent-protection-list {
  display: grid;

  border-top: 1px solid var(--ir-border);
}

.independent-protection-list > div {
  min-height: 45px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 14px;

  border-bottom: 1px solid var(--ir-border);
}

.independent-protection-list span {
  color: var(--ir-muted);

  font-size: 8px;
}

.independent-protection-list strong {
  color: var(--ir-text-2);

  font-size: 8px;
  font-weight: 650;

  text-align: right;
}


/* ============================================================
   27. INSURANCE PREVIEW
   ============================================================ */

.independent-insurance-preview {
  display: grid;
  grid-template-columns:
    38px
    minmax(0, 1fr);

  gap: 12px;

  align-items: center;

  margin-bottom: 18px;
  padding: 14px;

  border: 1px solid var(--ir-green-border);
  border-radius: 10px;

  background: var(--ir-green-bg);
}

.independent-insurance-icon {
  width: 36px;
  height: 36px;

  display: grid;
  place-items: center;

  border: 1px solid var(--ir-green-border);
  border-radius: 8px;

  color: var(--ir-green);

  font-size: 11px;
  font-weight: 800;
}

.independent-insurance-preview strong {
  display: block;

  color: #bbf7d0;

  font-size: 10px;
  font-weight: 700;
}

.independent-insurance-preview span {
  display: block;

  margin-top: 3px;

  color: #71937b;

  font-size: 8px;
  line-height: 1.45;
}


/* ============================================================
   28. DEPOSIT
   ============================================================ */

.independent-deposit-meter {
  display: grid;
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  margin-top: 24px;

  border-top: 1px solid var(--ir-border);
  border-left: 1px solid var(--ir-border);
}

.independent-deposit-meter > div {
  min-height: 90px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  padding: 12px 14px;

  border-right: 1px solid var(--ir-border);
  border-bottom: 1px solid var(--ir-border);
}

.independent-deposit-meter span {
  color: var(--ir-dim);

  font-size: 7px;
}

.independent-deposit-meter strong {
  margin-top: 7px;

  color: var(--ir-text);

  font-size: 16px;
  font-weight: 800;
}


/* ============================================================
   29. RELEASE LAYOUT
   ============================================================ */

.independent-release-layout {
  width: min(100%, 1320px);

  display: grid;
  grid-template-columns:
    minmax(300px, 0.72fr)
    minmax(520px, 1.28fr);

  gap: 70px;

  align-items: center;

  margin-inline: auto;
}

.independent-release-copy {
  max-width: 590px;
}

.independent-release-principle {
  margin-top: 30px;
  padding: 18px;

  border-left: 2px solid var(--ir-green);

  background: var(--ir-green-bg);
}

.independent-release-principle > span {
  color: var(--ir-green);

  font-size: 7px;
  font-weight: 800;

  letter-spacing: 0.09em;
}

.independent-release-principle > strong {
  display: block;

  margin-top: 8px;

  color: #bbf7d0;

  font-size: 12px;
  font-weight: 700;
}

.independent-release-principle p {
  margin: 7px 0 0;

  color: #789282;

  font-size: 10px;
  line-height: 1.6;
}


/* ============================================================
   30. RELEASE SUMMARY
   ============================================================ */

.independent-release-summary {
  display: grid;
  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  border-bottom: 1px solid var(--ir-border);
}

.independent-release-summary > div {
  min-height: 80px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  padding: 12px 14px;

  border-right: 1px solid var(--ir-border);
}

.independent-release-summary > div:last-child {
  border-right: 0;
}

.independent-release-summary span {
  color: var(--ir-dim);

  font-size: 7px;
  font-weight: 800;
}

.independent-release-summary strong {
  margin-top: 6px;

  color: var(--ir-text-2);

  font-size: 9px;
  font-weight: 650;
}


/* ============================================================
   31. RELEASE PHOTOS
   ============================================================ */

.independent-photo-section {
  padding: 18px;

  border-bottom: 1px solid var(--ir-border);
}

.independent-photo-head {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 14px;

  margin-bottom: 12px;
}

.independent-photo-head strong {
  display: block;

  color: var(--ir-text);

  font-size: 10px;
  font-weight: 700;
}

.independent-photo-head span {
  display: block;

  margin-top: 2px;

  color: var(--ir-muted);

  font-size: 8px;
}

.independent-photo-head small {
  font-size: 7px;
  font-weight: 800;
}

.independent-photo-grid {
  display: grid;
  grid-template-columns:
    repeat(
      6,
      minmax(0, 1fr)
    );

  gap: 7px;
}

.independent-photo-grid > div {
  min-height: 82px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 9px;

  border: 1px solid var(--ir-green-border);
  border-radius: 8px;

  background: rgba(74,222,128,0.025);
}

.independent-photo-grid span {
  color: var(--ir-dim);

  font-size: 6px;
  font-weight: 800;
}

.independent-photo-grid strong {
  color: var(--ir-green);

  font-size: 11px;
  font-weight: 800;
}


/* ============================================================
   32. RELEASE READY
   ============================================================ */

.independent-release-ready {
  min-height: 74px;

  display: flex;
  align-items: center;

  gap: 11px;

  padding: 0 18px;

  background: rgba(74,222,128,0.025);
}

.independent-release-ready-icon {
  width: 30px;
  height: 30px;

  flex: 0 0 auto;

  display: grid;
  place-items: center;

  border: 1px solid var(--ir-green-border);
  border-radius: 8px;

  background: var(--ir-green-bg);
  color: var(--ir-green);

  font-size: 10px;
  font-weight: 800;
}

.independent-release-ready strong {
  display: block;

  color: #bbf7d0;

  font-size: 10px;
  font-weight: 700;
}

.independent-release-ready span:not(.independent-release-ready-icon) {
  display: block;

  margin-top: 3px;

  color: #6d8f76;

  font-size: 8px;
}


/* ============================================================
   33. MONEY SECTION
   ============================================================ */

.independent-money-section {
  background: var(--ir-bg-2);
}

.independent-money-layout {
  width: min(100%, 1320px);

  display: grid;
  grid-template-columns:
    340px
    minmax(0, 1fr);

  gap: 14px;

  margin-inline: auto;
}

.independent-money-summary {
  display: grid;

  border-top: 1px solid var(--ir-border);
  border-left: 1px solid var(--ir-border);
}

.independent-money-summary article {
  min-height: 105px;

  display: flex;
  flex-direction: column;

  padding: 15px;

  border-right: 1px solid var(--ir-border);
  border-bottom: 1px solid var(--ir-border);

  background: var(--ir-surface);
}

.independent-money-summary span {
  color: var(--ir-dim);

  font-size: 7px;
  font-weight: 800;

  letter-spacing: 0.08em;
}

.independent-money-summary strong {
  margin-top: 18px;

  color: var(--ir-text);

  font-size: 21px;
  font-weight: 800;

  letter-spacing: -0.04em;
}

.independent-money-summary small {
  margin-top: auto;

  color: var(--ir-muted);

  font-size: 7px;
  font-weight: 700;
}


/* ============================================================
   34. PAYMENT PANEL
   ============================================================ */

.independent-payment-row {
  min-height: 50px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 16px;

  padding: 0 18px;

  border-bottom: 1px solid var(--ir-border);
}

.independent-payment-row span {
  color: var(--ir-muted);

  font-size: 9px;
}

.independent-payment-row strong {
  color: var(--ir-text-2);

  font-family: var(--ir-mono);
  font-size: 9px;
  font-weight: 500;
}

.independent-payment-card-status {
  display: grid;
  grid-template-columns:
    42px
    minmax(0, 1fr)
    auto;

  gap: 11px;

  align-items: center;

  margin: 14px;
  padding: 13px;

  border: 1px solid var(--ir-green-border);
  border-radius: 10px;

  background: var(--ir-green-bg);
}

.independent-payment-card-icon {
  width: 40px;
  height: 28px;

  display: grid;
  place-items: center;

  border: 1px solid var(--ir-green-border);
  border-radius: 7px;

  color: var(--ir-green);

  font-size: 9px;
  font-weight: 800;

  letter-spacing: 0.08em;
}

.independent-payment-card-status > div:nth-child(2) strong {
  display: block;

  color: #bbf7d0;

  font-size: 9px;
  font-weight: 700;
}

.independent-payment-card-status > div:nth-child(2) span {
  display: block;

  margin-top: 3px;

  color: #6d8f76;

  font-size: 8px;
  line-height: 1.45;
}

.independent-payment-card-status small {
  font-size: 7px;
  font-weight: 800;
}


/* ============================================================
   35. RETURN LAYOUT
   ============================================================ */

.independent-return-layout {
  width: min(100%, 1320px);

  display: grid;
  grid-template-columns:
    minmax(0, 1.25fr)
    minmax(300px, 0.75fr);

  gap: 14px;

  margin-inline: auto;
}

.independent-return-grid {
  display: grid;
  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  border-bottom: 1px solid var(--ir-border);
}

.independent-return-grid > div {
  min-height: 90px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  padding: 12px 15px;

  border-right: 1px solid var(--ir-border);
}

.independent-return-grid > div:last-child {
  border-right: 0;
}

.independent-return-grid span {
  color: var(--ir-dim);

  font-size: 7px;
  font-weight: 800;
}

.independent-return-grid strong {
  margin-top: 8px;

  color: var(--ir-text);

  font-family: var(--ir-mono);
  font-size: 14px;
  font-weight: 500;
}


/* ============================================================
   36. RETURN EVIDENCE
   ============================================================ */

.independent-return-evidence {
  display: grid;
  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  padding: 14px;

  gap: 8px;
}

.independent-return-evidence article {
  min-height: 82px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  padding: 12px;

  border: 1px solid var(--ir-border);
  border-radius: 8px;

  background: var(--ir-surface-2);
}

.independent-return-evidence span {
  color: var(--ir-dim);

  font-size: 7px;
  font-weight: 800;
}

.independent-return-evidence strong {
  margin-top: 8px;

  font-size: 9px;
  font-weight: 700;
}


/* ============================================================
   37. RETURN SETTLEMENT
   ============================================================ */

.independent-settlement-panel {
  align-self: start;
}

.independent-settlement-amount {
  padding: 28px 18px 6px;

  color: var(--ir-green);

  font-size: 36px;
  line-height: 1;
  font-weight: 900;

  letter-spacing: -0.055em;
}

.independent-settlement-panel > p {
  margin: 8px 18px 20px;

  color: var(--ir-muted);

  font-size: 9px;
  line-height: 1.6;
}

.independent-settlement-panel > button {
  width: calc(100% - 36px);
  min-height: 40px;

  display: block;

  margin: 8px 18px;

  border-radius: 8px;

  font-size: 9px;
  font-weight: 750;

  cursor: pointer;
}

.independent-settlement-panel > button:last-child {
  margin-bottom: 18px;
}

.independent-settlement-panel button.is-release {
  border: 1px solid var(--ir-green-border);

  background: var(--ir-green-bg);
  color: var(--ir-green);
}

.independent-settlement-panel button.is-partial {
  border: 1px solid var(--ir-amber-border);

  background: var(--ir-amber-bg);
  color: var(--ir-amber);
}

.independent-settlement-panel button.is-hold {
  border: 1px solid var(--ir-red-border);

  background: var(--ir-red-bg);
  color: var(--ir-red);
}


/* ============================================================
   38. CHARGES SECTION
   ============================================================ */

.independent-charges-section {
  background: var(--ir-bg-2);
}

.independent-charge-layout {
  width: min(100%, 1320px);

  display: grid;
  grid-template-columns:
    minmax(360px, 0.85fr)
    minmax(500px, 1.15fr);

  gap: 14px;

  margin-inline: auto;
}


/* ============================================================
   39. CHARGE FORM
   ============================================================ */

.independent-charge-form-row {
  display: grid;
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 10px;

  padding: 18px 18px 0;
}

.independent-charge-form-row label,
.independent-charge-form-field label {
  display: block;

  margin-bottom: 6px;

  color: var(--ir-muted);

  font-size: 7px;
  font-weight: 800;

  letter-spacing: 0.08em;
}

.independent-fake-input,
.independent-fake-textarea {
  width: 100%;

  border: 1px solid var(--ir-border);
  border-radius: 8px;

  background: var(--ir-surface-2);
  color: var(--ir-text);

  font-size: 10px;
}

.independent-fake-input {
  min-height: 42px;

  display: flex;
  align-items: center;

  padding: 0 12px;
}

.independent-charge-form-field {
  padding: 14px 18px 0;
}

.independent-fake-textarea {
  min-height: 84px;

  padding: 12px;

  line-height: 1.5;
}


/* ============================================================
   40. CHARGE EVIDENCE
   ============================================================ */

.independent-charge-evidence {
  padding: 18px;
}

.independent-charge-evidence-head {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  margin-bottom: 9px;
}

.independent-charge-evidence-head > span {
  color: var(--ir-muted);

  font-size: 7px;
  font-weight: 800;

  letter-spacing: 0.08em;
}

.independent-charge-evidence-head > small {
  color: var(--ir-dim);

  font-size: 7px;
}

.independent-charge-evidence-grid {
  display: grid;
  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap: 8px;
}

.independent-charge-evidence-grid article {
  min-height: 94px;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  padding: 11px;

  border: 1px solid var(--ir-border);
  border-radius: 8px;

  background: var(--ir-surface-2);
}

.independent-charge-evidence-grid article > span {
  color: var(--ir-dim);

  font-size: 6px;
  font-weight: 800;
}

.independent-charge-evidence-grid article > strong {
  margin-top: 5px;

  color: var(--ir-text-2);

  font-size: 8px;
  font-weight: 650;
}

.independent-charge-evidence-grid article.add {
  align-items: center;
  justify-content: center;

  border-style: dashed;

  color: var(--ir-muted);
}

.independent-charge-evidence-grid article.add strong {
  color: var(--ir-muted);

  font-size: 20px;
  font-weight: 400;
}

.independent-charge-evidence-grid article.add span {
  margin-top: 5px;

  color: var(--ir-dim);
}

.independent-charge-button {
  width: calc(100% - 36px);
  min-height: 42px;

  margin: 0 18px 18px;

  border: 1px solid #fafafa;
  border-radius: 8px;

  background: #fafafa;
  color: #09090b;

  font-size: 10px;
  font-weight: 750;

  cursor: pointer;
}


/* ============================================================
   41. COLLECTION GRID
   ============================================================ */

.independent-collection-grid {
  display: grid;
  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  gap: 8px;

  padding: 14px;
}

.independent-collection-grid article {
  min-width: 0;
  min-height: 96px;

  display: flex;
  flex-direction: column;

  padding: 12px;

  border: 1px solid var(--ir-border);
  border-radius: 8px;

  background: var(--ir-surface-2);
}

.independent-collection-grid span {
  color: var(--ir-muted);

  font-size: 6px;
  line-height: 1.3;
  font-weight: 800;

  letter-spacing: 0.05em;
}

.independent-collection-grid strong {
  margin-top: 13px;

  color: var(--ir-text);

  font-size: 16px;
  font-weight: 800;

  letter-spacing: -0.035em;
}

.independent-collection-grid small {
  margin-top: auto;

  color: var(--ir-dim);

  font-size: 7px;
}

.independent-collection-grid article.active {
  border-color: var(--ir-blue-border);

  background: var(--ir-blue-bg);
}

.independent-collection-grid article.active strong {
  color: var(--ir-blue);
}

.independent-collection-grid article.pending {
  border-color: var(--ir-amber-border);

  background: var(--ir-amber-bg);
}

.independent-collection-grid article.pending strong {
  color: var(--ir-amber);
}

.independent-collection-grid article.disputed {
  border-color: var(--ir-purple-border);

  background: var(--ir-purple-bg);
}

.independent-collection-grid article.disputed strong {
  color: var(--ir-purple);
}

.independent-collection-grid article.ready {
  border-color: var(--ir-red-border);

  background: var(--ir-red-bg);
}

.independent-collection-grid article.ready strong {
  color: var(--ir-red);
}


/* ============================================================
   42. ATTEMPT LIST
   ============================================================ */

.independent-attempt-list {
  position: relative;

  display: grid;

  padding: 4px 18px 14px;
}

.independent-attempt-list::before {
  content: "";

  position: absolute;
  top: 25px;
  bottom: 34px;
  left: 23px;

  width: 1px;

  background: var(--ir-border-2);
}

.independent-attempt-list > div {
  position: relative;

  display: grid;
  grid-template-columns:
    12px
    minmax(0, 1fr)
    auto;

  gap: 11px;

  align-items: center;

  min-height: 58px;
}

.independent-attempt-list i {
  position: relative;

  z-index: 2;

  width: 11px;
  height: 11px;

  border: 3px solid var(--ir-surface);
  border-radius: 50%;

  background: var(--ir-muted);

  box-shadow: 0 0 0 1px var(--ir-border-2);
}

.independent-attempt-list i.failed {
  background: var(--ir-red);
}

.independent-attempt-list i.current {
  background: var(--ir-amber);
}

.independent-attempt-list strong {
  display: block;

  color: var(--ir-text-2);

  font-size: 9px;
  font-weight: 650;
}

.independent-attempt-list span {
  display: block;

  margin-top: 3px;

  color: var(--ir-muted);

  font-size: 7px;
}

.independent-attempt-list small {
  font-size: 7px;
  font-weight: 800;
}


/* ============================================================
   43. DISPUTE SECTION
   ============================================================ */

.independent-dispute-section {
  background: #08080a;
}

.independent-dispute-layout {
  width: min(100%, 1320px);

  display: grid;
  grid-template-columns:
    minmax(300px, 0.72fr)
    minmax(520px, 1.28fr);

  gap: 70px;

  align-items: center;

  margin-inline: auto;
}

.independent-dispute-copy {
  max-width: 600px;
}

.independent-dispute-rule {
  margin-top: 30px;
  padding: 18px;

  border: 1px solid var(--ir-amber-border);
  border-radius: 10px;

  background: var(--ir-amber-bg);
}

.independent-dispute-rule > span {
  color: var(--ir-amber);

  font-size: 7px;
  font-weight: 800;

  letter-spacing: 0.09em;
}

.independent-dispute-rule > strong {
  display: block;

  margin-top: 8px;

  color: #fde68a;

  font-size: 11px;
  font-weight: 700;
}

.independent-dispute-rule p {
  margin: 7px 0 0;

  color: #948152;

  font-size: 9px;
  line-height: 1.55;
}


/* ============================================================
   44. DISPUTE PANEL
   ============================================================ */

.independent-dispute-summary {
  display: grid;
  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  border-bottom: 1px solid var(--ir-border);
}

.independent-dispute-summary > div {
  min-height: 82px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  padding: 12px 15px;

  border-right: 1px solid var(--ir-border);
}

.independent-dispute-summary > div:last-child {
  border-right: 0;
}

.independent-dispute-summary span {
  color: var(--ir-dim);

  font-size: 7px;
  font-weight: 800;
}

.independent-dispute-summary strong {
  margin-top: 7px;

  color: var(--ir-text);

  font-size: 11px;
  font-weight: 700;
}

.independent-dispute-explanation,
.independent-dispute-evidence {
  padding: 17px 18px;

  border-bottom: 1px solid var(--ir-border);
}

.independent-dispute-explanation > span,
.independent-dispute-evidence > span {
  color: var(--ir-dim);

  font-size: 7px;
  font-weight: 800;

  letter-spacing: 0.08em;
}

.independent-dispute-explanation p {
  margin: 9px 0 0;
  padding: 13px;

  border: 1px solid var(--ir-border);
  border-radius: 8px;

  background: var(--ir-surface-2);
  color: var(--ir-text-2);

  font-size: 9px;
  line-height: 1.6;
}

.independent-dispute-evidence > div {
  display: grid;
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 8px;

  margin-top: 10px;
}

.independent-dispute-evidence article {
  min-height: 76px;

  display: flex;
  align-items: flex-end;

  padding: 10px;

  border: 1px solid var(--ir-border);
  border-radius: 8px;

  background: var(--ir-surface-2);
  color: var(--ir-muted);

  font-size: 8px;
}


/* ============================================================
   45. DISPUTE ACTIONS
   ============================================================ */

.independent-dispute-actions {
  display: grid;
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 8px;

  padding: 14px;
}

.independent-dispute-actions button {
  min-height: 42px;

  border-radius: 8px;

  font-size: 9px;
  font-weight: 750;

  cursor: pointer;
}

.independent-dispute-actions button.approve {
  border: 1px solid var(--ir-green-border);

  background: var(--ir-green-bg);
  color: var(--ir-green);
}

.independent-dispute-actions button.reject {
  border: 1px solid var(--ir-red-border);

  background: var(--ir-red-bg);
  color: var(--ir-red);
}


/* ============================================================
   46. CASE FILE
   ============================================================ */

.independent-case-file-layout {
  width: min(100%, 1320px);

  display: grid;
  grid-template-columns:
    minmax(520px, 1.2fr)
    minmax(300px, 0.8fr);

  gap: 70px;

  align-items: center;

  margin-inline: auto;
}

.independent-case-file-copy {
  max-width: 600px;
}


/* ============================================================
   47. CASE FILE DOCUMENT
   ============================================================ */

.independent-case-file-document {
  margin: 14px;

  overflow: hidden;

  border: 1px solid var(--ir-border);
  border-radius: 9px;

  background: #0d0d0f;
}

.independent-case-file-document-head {
  min-height: 72px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 16px;

  padding: 0 16px;

  border-bottom: 1px solid var(--ir-border);
}

.independent-case-file-document-head > div > span {
  display: block;

  color: var(--ir-green);

  font-family: var(--ir-mono);
  font-size: 7px;
}

.independent-case-file-document-head > div > strong {
  display: block;

  margin-top: 5px;

  color: var(--ir-text);

  font-size: 17px;
  font-weight: 800;
}

.independent-case-file-document-head > small {
  padding: 5px 7px;

  border: 1px solid var(--ir-border);
  border-radius: 5px;

  background: var(--ir-surface-2);
  color: var(--ir-muted);

  font-size: 6px;
  font-weight: 800;
}

.independent-case-file-sections {
  display: grid;
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );
}

.independent-case-file-sections > div {
  min-height: 74px;

  display: grid;
  grid-template-columns:
    26px
    minmax(0, 1fr);

  grid-template-areas:
    "number title"
    "number meta";

  gap:
    2px
    8px;

  align-content: center;

  padding: 10px 14px;

  border-right: 1px solid var(--ir-border);
  border-bottom: 1px solid var(--ir-border);
}

.independent-case-file-sections > div:nth-child(2n) {
  border-right: 0;
}

.independent-case-file-sections > div:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.independent-case-file-sections > div > span {
  grid-area: number;

  align-self: center;

  color: var(--ir-green);

  font-family: var(--ir-mono);
  font-size: 7px;
}

.independent-case-file-sections > div > strong {
  grid-area: title;

  color: var(--ir-text-2);

  font-size: 9px;
  font-weight: 650;
}

.independent-case-file-sections > div > small {
  grid-area: meta;

  color: var(--ir-dim);

  font-size: 7px;
}


/* ============================================================
   48. CASE FILE FOOTER
   ============================================================ */

.independent-case-file-footer {
  min-height: 62px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 16px;

  padding: 0 14px;

  border-top: 1px solid var(--ir-border);
}

.independent-case-file-footer > span {
  color: var(--ir-dim);

  font-size: 7px;
}

.independent-case-file-footer button {
  min-height: 32px;

  padding: 0 10px;

  border: 1px solid var(--ir-green-border);
  border-radius: 6px;

  background: var(--ir-green-bg);
  color: var(--ir-green);

  font-size: 7px;
  font-weight: 750;

  cursor: pointer;
}


/* ============================================================
   49. CASE FILE OPTIONS
   ============================================================ */

.independent-case-file-options {
  display: grid;

  margin-top: 28px;

  border-top: 1px solid var(--ir-border);
}

.independent-case-file-options > div {
  min-height: 72px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  border-bottom: 1px solid var(--ir-border);
}

.independent-case-file-options strong {
  color: var(--ir-text-2);

  font-size: 10px;
  font-weight: 700;
}

.independent-case-file-options span {
  margin-top: 4px;

  color: var(--ir-muted);

  font-size: 9px;
  line-height: 1.5;
}


/* ============================================================
   50. CONTROL PRINCIPLES
   ============================================================ */

.independent-control-principles {
  background: #08080a;
}

.independent-principles-grid {
  width: min(100%, 1320px);

  display: grid;
  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  border-top: 1px solid var(--ir-border);
  border-left: 1px solid var(--ir-border);

  margin-inline: auto;
}

.independent-principles-grid article {
  min-height: 190px;

  display: flex;
  flex-direction: column;

  padding: 20px;

  border-right: 1px solid var(--ir-border);
  border-bottom: 1px solid var(--ir-border);

  background: var(--ir-surface);
}

.independent-principles-grid article > span {
  color: var(--ir-green);

  font-family: var(--ir-mono);
  font-size: 8px;
}

.independent-principles-grid article > strong {
  margin-top: 40px;

  color: var(--ir-text);

  font-size: 13px;
  font-weight: 700;
}

.independent-principles-grid article > p {
  margin: 8px 0 0;

  color: var(--ir-muted);

  font-size: 9px;
  line-height: 1.6;
}


/* ============================================================
   51. FINAL
   ============================================================ */

.independent-final {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    auto;

  gap: 60px;

  align-items: end;

  padding-top: 78px;
  padding-bottom: 78px;

  border-bottom: 1px solid var(--ir-border);

  background: var(--ir-bg);
}

.independent-final > div:first-child {
  max-width: 830px;
}

.independent-final > div:first-child > span {
  display: block;

  margin-bottom: 13px;

  color: var(--ir-green);

  font-size: 8px;
  font-weight: 800;

  letter-spacing: 0.11em;
}

.independent-final h2 {
  margin: 0;

  color: var(--ir-text);

  font-size:
    clamp(
      3rem,
      5.5vw,
      5.5rem
    );

  line-height: 0.95;
  font-weight: 800;

  letter-spacing: -0.065em;
}

.independent-final p {
  max-width: 670px;

  margin: 20px 0 0;

  color: var(--ir-muted);

  font-size: 12px;
  line-height: 1.7;
}

.independent-final-actions {
  min-width: 180px;

  display: flex;
  flex-direction: column;

  gap: 8px;
}


/* ============================================================
   52. SOLUTION SWITCHER
   ============================================================ */

.independent-solution-switcher {
  padding-top: 40px;
  padding-bottom: 62px;

  border-bottom: 1px solid var(--ir-border);

  background: var(--ir-bg-2);
}

.independent-solution-switcher > span {
  display: block;

  width: min(100%, 1320px);

  margin: 0 auto 12px;

  color: var(--ir-dim);

  font-size: 8px;
  font-weight: 800;

  letter-spacing: 0.10em;
}

.independent-solution-switcher > div {
  width: min(100%, 1320px);

  display: grid;
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  margin-inline: auto;

  border-top: 1px solid var(--ir-border);
  border-left: 1px solid var(--ir-border);
}

.independent-solution-switcher > div > a {
  min-height: 108px;

  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    auto;

  grid-template-areas:
    "small arrow"
    "strong arrow";

  gap:
    5px
    18px;

  align-content: center;

  padding: 20px;

  border-right: 1px solid var(--ir-border);
  border-bottom: 1px solid var(--ir-border);

  background: var(--ir-surface);
}

.independent-solution-switcher > div > a:hover {
  background: var(--ir-surface-2);
}

.independent-solution-switcher small {
  grid-area: small;

  color: var(--ir-dim);

  font-size: 8px;
  font-weight: 800;

  letter-spacing: 0.08em;
}

.independent-solution-switcher strong {
  grid-area: strong;

  color: var(--ir-text);

  font-size: 13px;
  font-weight: 700;
}

.independent-solution-switcher a > span {
  grid-area: arrow;

  align-self: center;

  color: var(--ir-muted);

  font-size: 16px;
}


/* ============================================================
   53. FOOTER
   ============================================================ */

.independent-footer {
  padding-top: 62px;
  padding-bottom: 28px;

  background: var(--ir-bg);
}

.independent-footer-top {
  display: grid;
  grid-template-columns:
    minmax(220px, 0.7fr)
    minmax(0, 1.3fr);

  gap: 70px;
}

.independent-footer-brand {
  color: var(--ir-text);

  font-size: 16px;
  font-weight: 800;
}

.independent-footer-top > div:first-child p {
  max-width: 330px;

  margin: 12px 0 0;

  color: var(--ir-muted);

  font-size: 10px;
  line-height: 1.65;
}

.independent-footer-links {
  display: grid;
  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  gap: 24px;
}

.independent-footer-links > div {
  display: flex;
  flex-direction: column;

  gap: 8px;
}

.independent-footer-links strong {
  margin-bottom: 5px;

  color: #d4d4d8;

  font-size: 9px;
  font-weight: 700;
}

.independent-footer-links a {
  color: var(--ir-muted);

  font-size: 9px;
}

.independent-footer-links a:hover {
  color: var(--ir-text);
}

.independent-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  margin-top: 52px;
  padding-top: 20px;

  border-top: 1px solid var(--ir-border);
}

.independent-footer-bottom > span {
  color: var(--ir-dim);

  font-size: 9px;
}

.independent-footer-bottom nav {
  display: flex;
  flex-wrap: wrap;

  gap: 14px;
}

.independent-footer-bottom nav a {
  color: var(--ir-dim);

  font-size: 9px;
}

.independent-footer-bottom nav a:hover {
  color: var(--ir-text);
}


/* ============================================================
   54. LARGE TABLET
   ============================================================ */

@media (max-width: 1180px) {

  .independent-overview {
    grid-template-columns: 1fr;

    gap: 44px;
  }

  .independent-hero-copy {
    max-width: 850px;
  }

  .independent-booking-console {
    max-width: 900px;
  }

  .independent-protection-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .independent-protection-card:last-child {
    grid-column: 1 / -1;
  }

  .independent-release-layout,
  .independent-dispute-layout,
  .independent-case-file-layout {
    grid-template-columns: 1fr;

    gap: 42px;
  }

  .independent-release-copy,
  .independent-dispute-copy,
  .independent-case-file-copy {
    max-width: 760px;
  }

  .independent-release-panel,
  .independent-dispute-panel,
  .independent-case-file-panel {
    max-width: 900px;
  }

  .independent-money-layout {
    grid-template-columns: 1fr;
  }

  .independent-money-summary {
    grid-template-columns:
      repeat(
        4,
        minmax(0, 1fr)
      );
  }

  .independent-charge-layout {
    grid-template-columns: 1fr;
  }

  .independent-principles-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }
}


/* ============================================================
   55. SIDEBAR COLLAPSE
   ============================================================ */

@media (max-width: 900px) {

  .independent-main {
    margin-left: 0;
  }

  .independent-sidebar {
    width: 280px;

    transform: translateX(-100%);

    transition:
      transform 260ms cubic-bezier(0.16,1,0.3,1);
  }

  .independent-sidebar.open {
    transform: translateX(0);
  }

  .independent-sidebar-overlay {
    position: fixed;
    inset: 0;

    z-index: 90;

    display: block;

    background: rgba(0,0,0,0.60);

    opacity: 0;
    pointer-events: none;

    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);

    transition: opacity 180ms ease;
  }

  .independent-sidebar-overlay.show {
    opacity: 1;
    pointer-events: auto;
  }

  body.independent-nav-open {
    overflow: hidden;
  }

  .independent-menu-toggle {
    display: flex;
  }

  .independent-topbar {
    padding: 0 20px;
  }

  .independent-topbar-actions .independent-topbar-link:first-child,
  .independent-topbar-actions .independent-topbar-link:nth-child(2) {
    display: none;
  }

  .independent-clearance-layout {
    grid-template-columns: 1fr;
  }

  .independent-return-layout {
    grid-template-columns: 1fr;
  }

  .independent-final {
    grid-template-columns: 1fr;

    gap: 30px;
  }

  .independent-final-actions {
    min-width: 0;

    flex-direction: row;
  }

  .independent-footer-top {
    grid-template-columns: 1fr;

    gap: 40px;
  }
}


/* ============================================================
   56. MOBILE
   ============================================================ */

@media (max-width: 700px) {

  .independent-overview,
  .independent-responsibility-strip,
  .independent-section,
  .independent-control-principles,
  .independent-final,
  .independent-solution-switcher,
  .independent-footer {
    padding-right: 14px;
    padding-left: 14px;
  }

  .independent-topbar {
    min-height: 56px;

    padding: 0 14px;
  }

  .independent-topbar-sub {
    display: none;
  }

  .independent-topbar-actions .independent-topbar-link {
    display: none;
  }

  .independent-topbar-primary {
    min-height: 32px;

    padding-inline: 10px;

    font-size: 10px;
  }

  .independent-overview {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .independent-hero-copy h1 {
    font-size:
      clamp(
        3rem,
        14vw,
        4.7rem
      );
  }

  .independent-hero-copy p {
    font-size: 0.92rem;
  }

  .independent-hero-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .independent-button-primary,
  .independent-button-secondary {
    width: 100%;
  }

  .independent-booking-console-head {
    align-items: flex-start;
    flex-direction: column;

    min-height: 0;

    padding: 17px;
  }

  .independent-booking-state {
    align-self: flex-start;
  }

  .independent-booking-timeline {
    padding-inline: 10px;
  }

  .independent-clearance-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .independent-clearance-grid article:nth-child(4n) {
    border-right: 1px solid var(--ir-border);
  }

  .independent-clearance-grid article:nth-child(2n) {
    border-right: 0;
  }

  .independent-clearance-grid article:nth-last-child(-n + 4) {
    border-bottom: 1px solid var(--ir-border);
  }

  .independent-clearance-grid article:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .independent-booking-console-footer {
    align-items: flex-start;
    flex-direction: column;

    padding: 15px;
  }

  .independent-booking-console-footer button {
    width: 100%;
  }

  .independent-responsibility-strip {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .independent-responsibility-strip > div {
    min-height: 88px;

    border-right: 1px solid var(--ir-border);
    border-bottom: 1px solid var(--ir-border);
  }

  .independent-responsibility-strip > div:nth-child(2n) {
    border-right: 0;
  }

  .independent-responsibility-strip > div:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .independent-section,
  .independent-control-principles {
    padding-top: 58px;
    padding-bottom: 58px;
  }

  .independent-section-heading {
    align-items: flex-start;
    flex-direction: column;

    gap: 18px;
  }

  .independent-section-heading h2,
  .independent-release-copy h2,
  .independent-dispute-copy h2,
  .independent-case-file-copy h2 {
    font-size:
      clamp(
        2.4rem,
        11vw,
        3.6rem
      );
  }

  .independent-identity-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .independent-identity-grid > div {
    border-bottom: 1px solid var(--ir-border);
  }

  .independent-identity-grid > div:nth-child(2n) {
    border-right: 0;
  }

  .independent-identity-grid > div:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .independent-protection-grid {
    grid-template-columns: 1fr;
  }

  .independent-protection-card:last-child {
    grid-column: auto;
  }

  .independent-release-summary {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .independent-release-summary > div {
    border-bottom: 1px solid var(--ir-border);
  }

  .independent-release-summary > div:nth-child(2n) {
    border-right: 0;
  }

  .independent-release-summary > div:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .independent-photo-grid {
    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );
  }

  .independent-money-summary {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .independent-return-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .independent-return-grid > div {
    border-bottom: 1px solid var(--ir-border);
  }

  .independent-return-grid > div:nth-child(2n) {
    border-right: 0;
  }

  .independent-return-grid > div:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .independent-return-evidence {
    grid-template-columns: 1fr;
  }

  .independent-collection-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .independent-dispute-summary {
    grid-template-columns: 1fr;
  }

  .independent-dispute-summary > div {
    min-height: 66px;

    border-right: 0;
    border-bottom: 1px solid var(--ir-border);
  }

  .independent-dispute-summary > div:last-child {
    border-bottom: 0;
  }

  .independent-case-file-sections {
    grid-template-columns: 1fr;
  }

  .independent-case-file-sections > div,
  .independent-case-file-sections > div:nth-child(2n),
  .independent-case-file-sections > div:nth-last-child(-n + 2) {
    border-right: 0;
    border-bottom: 1px solid var(--ir-border);
  }

  .independent-case-file-sections > div:last-child {
    border-bottom: 0;
  }

  .independent-principles-grid {
    grid-template-columns: 1fr;
  }

  .independent-final {
    padding-top: 58px;
    padding-bottom: 58px;
  }

  .independent-final h2 {
    font-size:
      clamp(
        2.8rem,
        13vw,
        4.1rem
      );
  }

  .independent-final-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .independent-solution-switcher > div {
    grid-template-columns: 1fr;
  }

  .independent-footer-links {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    gap:
      30px
      20px;
  }

  .independent-footer-bottom {
    align-items: flex-start;
    flex-direction: column;
  }
}


/* ============================================================
   57. SMALL MOBILE
   ============================================================ */

@media (max-width: 520px) {

  .independent-topbar-left {
    gap: 7px;
  }

  .independent-topbar-title {
    font-size: 11px;
  }

  .independent-topbar-badge {
    display: none;
  }

  .independent-clearance-grid {
    grid-template-columns: 1fr;
  }

  .independent-clearance-grid article,
  .independent-clearance-grid article:nth-child(2n),
  .independent-clearance-grid article:nth-last-child(-n + 2) {
    border-right: 0;
    border-bottom: 1px solid var(--ir-border);
  }

  .independent-clearance-grid article:last-child {
    border-bottom: 0;
  }

  .independent-responsibility-strip {
    grid-template-columns: 1fr;
  }

  .independent-responsibility-strip > div,
  .independent-responsibility-strip > div:nth-child(2n),
  .independent-responsibility-strip > div:nth-last-child(-n + 2) {
    border-right: 0;
    border-bottom: 1px solid var(--ir-border);
  }

  .independent-responsibility-strip > div:last-child {
    border-bottom: 0;
  }

  .independent-driver-profile {
    grid-template-columns:
      42px
      minmax(0, 1fr);
  }

  .independent-driver-score {
    grid-column: 2;

    text-align: left;
  }

  .independent-identity-grid {
    grid-template-columns: 1fr;
  }

  .independent-identity-grid > div,
  .independent-identity-grid > div:nth-child(2n),
  .independent-identity-grid > div:nth-last-child(-n + 2) {
    border-right: 0;
    border-bottom: 1px solid var(--ir-border);
  }

  .independent-identity-grid > div:last-child {
    border-bottom: 0;
  }

  .independent-deposit-meter {
    grid-template-columns: 1fr;
  }

  .independent-photo-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .independent-money-summary {
    grid-template-columns: 1fr;
  }

  .independent-payment-card-status {
    grid-template-columns:
      40px
      minmax(0, 1fr);
  }

  .independent-payment-card-status small {
    grid-column: 2;
  }

  .independent-return-grid {
    grid-template-columns: 1fr;
  }

  .independent-return-grid > div,
  .independent-return-grid > div:nth-child(2n),
  .independent-return-grid > div:nth-last-child(-n + 2) {
    border-right: 0;
    border-bottom: 1px solid var(--ir-border);
  }

  .independent-return-grid > div:last-child {
    border-bottom: 0;
  }

  .independent-charge-form-row {
    grid-template-columns: 1fr;
  }

  .independent-charge-evidence-grid {
    grid-template-columns: 1fr;
  }

  .independent-collection-grid {
    grid-template-columns: 1fr;
  }

  .independent-dispute-evidence > div,
  .independent-dispute-actions {
    grid-template-columns: 1fr;
  }

  .independent-case-file-document-head {
    align-items: flex-start;
    flex-direction: column;

    padding: 15px;
  }

  .independent-case-file-footer {
    align-items: flex-start;
    flex-direction: column;

    padding: 14px;
  }

  .independent-case-file-footer button {
    width: 100%;
  }

  .independent-footer-links {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   58. FOCUS
   ============================================================ */

.independent-page a:focus-visible,
.independent-page button:focus-visible {
  outline: 2px solid var(--ir-green);
  outline-offset: 3px;
}


/* ============================================================
   59. REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  .independent-sidebar,
  .independent-sidebar-overlay,
  .independent-sidebar-nav a {
    transition: none;
  }
}