Issue #22

[
  {
    "matches": 1,
    "score": 58,
    "selector": "#radix-_r_3l_ \u003e div \u003e div \u003e div \u003e div \u003e div:nth-of-type(1)",
    "strategy": "ancestor-path"
  },
  {
    "matches": 4,
    "score": 76,
    "selector": "div.space-y-4",
    "strategy": "class"
  },
  {
    "matches": 220,
    "score": 60,
    "selector": "div:nth-of-type(1)",
    "strategy": "nth-of-type"
  }
]

{
  "ancestorPath": [
    "#radix-_r_3l_",
    "div",
    "div",
    "div",
    "div"
  ],
  "ariaLabel": null,
  "className": "space-y-4",
  "href": null,
  "id": null,
  "name": null,
  "role": null,
  "tagName": "div",
  "textSample": "Refund Summary Total Paid 60,84 € Client Refund 53,04 € Services 52,00 € Insurance 1,04 € Service Fees 0,00 € VAT 0,00 €"
}

{
  "hasFiberInstance": true,
  "reactComponentStack": [
    "div",
    "R",
    "StandardDrawerBody",
    "Primitive.div",
    "DismissableLayer",
    "Primitive.div.SlotClone",
    "Primitive.div.Slot",
    "FocusScope",
    "Presence",
    "DialogContent",
    "Drawer.Content",
    "l"
  ],
  "reactOwnerStack": [],
  "source": "react-fiber"
}

bbox:
{
  "bottom": 1457,
  "height": 1931,
  "left": 447,
  "right": 1167,
  "top": -474,
  "width": 720,
  "x": 447,
  "y": -474
}

viewport:
{
  "height": 1000,
  "width": 1191
}

scroll:
{
  "x": 0,
  "y": 0
}

screenshotMarks:
[]

<div class="space-y-4" data-sentry-component="CancellationPreviewPanel" data-sentry-source-file="CancellationPreviewPanel.tsx"><div data-slot="card" class="bg-card text-card-foreground flex flex-col rounded-xl border py-6 gap-6 shadow-sm" data-testid="cancellation-preview-summary" data-sentry-element="Card" data-sentry-source-file="card.tsx" data-sentry-component="Card"><div data-slot="card-header" class="@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 pb-3" data-sentry-element="CardHeader" data-sentry-source-file="card.tsx" data-sentry-component="CardHeader"><div data-slot="card-title" class="font-semibold text-lg" data-sentry-element="CardTitle" data-sentry-source-file="card.tsx" data-sentry-component="CardTitle">Refund Summary</div></div><div data-slot="card-content" class="px-6 space-y-3" data-sentry-element="CardContent" data-sentry-source-file="card.tsx" data-sentry-component="CardContent"><div class="flex items-baseline justify-between gap-4"><div class="text-sm text-muted-foreground">Total Paid</div><div class="text-sm font-medium">60,84&nbsp;€</div></div><div class="flex items-baseline justify-between gap-4" data-testid="cancellation-preview-client-refund"><div class="text-sm text-muted-foreground">Client Refund</div><div class="text-xl font-semibold text-green-600">53,04&nbsp;€</div></div><div class="grid grid-cols-1 gap-2 text-sm sm:grid-cols-2" data-testid="cancellation-preview-summary-breakdown"><div class="flex items-center justify-between gap-3"><span class="text-muted-foreground">Services</span><span class="font-medium">52,00&nbsp;€</span></div><div class="flex items-center justify-between gap-3"><span class="text-muted-foreground">Insurance</span><span class="font-medium">1,04&nbsp;€</span></div><div class="flex items-center justify-between gap-3"><span class="text-muted-foreground">Service Fees</span><span class="font-medium">0,00&nbsp;€</span></div><div class="flex items-center justify-between gap-3"><span class="text-muted-foreground">VAT</span><span class="font-medium">0,00&nbsp;€</span></div><div class="flex items-center justify-between gap-3"><span class="text-muted-foreground">Non-refundable</span><span class="font-medium text-destructive">7,80&nbsp;€</span></div></div><div class="text-sm text-muted-foreground">Cancelled before 24h cutoff (87%)</div></div></div><div data-slot="card" class="bg-card text-card-foreground flex flex-col rounded-xl border py-6 gap-6 shadow-sm" data-testid="cancellation-preview-policy" data-sentry-component="Card" data-sentry-source-file="card.tsx"><div data-slot="card-header" class="@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 pb-3" data-sentry-component="CardHeader" data-sentry-source-file="card.tsx"><div data-slot="card-title" class="font-semibold text-base" data-sentry-component="CardTitle" data-sentry-source-file="card.tsx">Policy Details</div></div><div data-slot="card-content" class="px-6 space-y-1 text-sm" data-sentry-component="CardContent" data-sentry-source-file="card.tsx"><div class="flex items-center justify-between gap-3"><span class="text-muted-foreground">Policy Status</span><span class="font-medium">before cutoff</span></div><div class="flex items-center justify-between gap-3"><span class="text-muted-foreground">Cutoff Period</span><span class="font-medium">24 hours</span></div><div class="flex items-center justify-between gap-3"><span class="text-muted-foreground">Cancellation Time</span><span class="font-medium">2026-02-23T19:31:11.321Z</span></div><div class="flex items-baseline justify-between gap-3"><span class="text-muted-foreground">Applied Rule</span><span class="font-medium text-right">Cancelled before 24h cutoff</span></div></div></div><div data-slot="card" class="bg-card text-card-foreground flex flex-col rounded-xl border py-6 gap-6 shadow-sm" data-testid="cancellation-preview-scope" data-sentry-component="Card" data-sentry-source-file="card.tsx"><div data-slot="card-header" class="@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 pb-3" data-sentry-component="CardHeader" data-sentry-source-file="card.tsx"><div data-slot="card-title" class="font-semibold text-base" data-sentry-component="CardTitle" data-sentry-source-file="card.tsx">Scope</div></div><div data-slot="card-content" class="px-6" data-sentry-component="CardContent" data-sentry-source-file="card.tsx"><div class="relative w-full overflow-auto"><table class="w-full caption-bottom text-sm"><thead class="[&amp;_tr]:border-b"><tr class="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted"><th class="h-10 px-4 text-left align-middle font-medium text-muted-foreground [&amp;:has([role=checkbox])]:pr-0">Item</th><th class="h-10 px-4 align