/*add this to avoid flickering*/
.plk-dd-inprogess > * {
    pointer-events: none;
}

/*dropzone style style*/
.plk-dd-dropzone {
    min-height: 50px;
}

/*drag drop styles*/
.plk-dd-spacing {
    height: 0.5em;
}

.plk-dd-spacing-dragged-over {
    padding: 25px;
}

.plk-dd-dragged-over {
    background-color: lightgray;
    opacity: 0.6;
    animation: blinker 1s linear infinite;
}

    .plk-dd-dragged-over > div {
        background-color: lightgray;
        opacity: 0.6;
        animation: blinker 1s linear infinite;
    }

.plk-dd-dragged-over-denied {
    background-color: red;
    opacity: 0.6;
    animation: blinker 1s linear infinite;
}

.plk-dd-in-transit {
    opacity: 0;
}

    .plk-dd-in-transit > div {
        opacity: 1;
    }

@keyframes blinker {
    50% {
        opacity: 0;
    }
}

.blink_me {
    animation: blinker 1s linear infinite;
}

/*for flex demo*/
.plk-flex .plk-dd-spacing {
    width: 20px;
    height: auto;
}

.plk-flex .plk-dd-dragged-over {
    background-color: lightgray;
    opacity: 0.6;
    animation: blinker 1s linear infinite;
}

    .plk-flex .plk-dd-dragged-over > div {
        background-color: lightgray;
        opacity: 0.9;
        animation: blinker 1s linear infinite;
    }

.plk-flex .plk-dd-in-transit {
    background-color: orangered;
}

    .plk-flex .plk-dd-in-transit > div {
        background-color: orangered;
    }

.plk-dd-noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

/* -------------------------------------------------------------------------
  VERTICAL STEPPERS - MODIFIED
-------------------------------------------------------------------------- */

:root {
    /*
    !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
    !!! CRITICAL: SET THIS TO THE MUD BLazor BACKGROUND COLOR VARIABLE       !!!
    !!! THAT IS DIRECTLY BEHIND YOUR STEPPER CIRCLES FOR THE CUTOUT EFFECT.  !!!
    !!! Common options:                                                      !!!
    !!!   var(--mud-palette-surface)                                         !!!
    !!!   var(--mud-palette-background-paper)                                !!!
    !!!   var(--mud-palette-background)                                      !!!
    !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
    */
    --stepper-cutout-bg-color: var(--mud-palette-surface); /* <<< ADJUST THIS AS NEEDED */
    /* Stepper Geometry (can remain as is or be based on --mud-spacing if desired) */
    --circle-size: 24px;
    --line-thickness: 2px;
    --circle-area-width: 30px;
    --circle-content-gap: 15px;
    /* Stepper Colors using MudBlazor Variables */
    --line-color-default: var(--mud-palette-divider);
    --circle-bg-default: var(--mud-palette-action-disabled-background); /* Greyish bg for default circle */
    --circle-text-default: var(--mud-palette-action-disabled); /* Greyish text for default circle */

    --line-color-active: var(--mud-palette-primary);
    --circle-bg-active: var(--mud-palette-primary);
    --circle-text-active: var(--mud-palette-primary-text); /* Text color for on-primary background */
    --title-color-active: var(--mud-palette-primary); /* Active title color */
}

/*
   The .plk-dd-dropzone and .plk-dd-spacing should ideally match the
   --stepper-cutout-bg-color so the line is properly occluded by them.
*/
.plk-dd-dropzone {
    background-color: var(--stepper-cutout-bg-color); /* Or its own appropriate MudBlazor background */
    position: relative;
}

.plk-dd-spacing {
    background-color: var(--stepper-cutout-bg-color);
    /* Height is auto-managed by your other component */
}

/* Styles for the draggable item ONLY when it contains a .step */
.plk-dd-draggable:has(> .step) {
    position: relative;
}

.step {
    display: flex;
    align-items: flex-start;
    position: relative;
}

    /* Circle's column wrapper */
    .step > div:first-child {
        position: relative;
        flex-shrink: 0;
        width: var(--circle-area-width);
        margin-right: var(--circle-content-gap);
        display: flex;
        justify-content: center;
        /* Adjust padding-top to align circle with the top of your card content */
        padding-top: 5px; /* Example, fine-tune this */
    }

.circle {
    width: var(--circle-size);
    height: var(--circle-size);
    line-height: var(--circle-size);
    border-radius: 50%;
    background-color: var(--circle-bg-default);
    text-align: center;
    font-size: calc(var(--circle-size) * 0.55);
    font-weight: bold;
    position: relative;
    z-index: 2;
    /* Shadow "cuts out" the line. Color MUST match --stepper-cutout-bg-color */
    box-shadow: 0 0 0 3px var(--stepper-cutout-bg-color);
}

/* The Vertical Connecting Line */
.step > div:first-child::before {
    content: '';
    position: absolute;
    top: calc(var(--circle-size) / 2);
    left: 50%;
    transform: translateX(-50%);
    width: var(--line-thickness);
    background-color: var(--line-color-default);
    /*height: 1000px;*/
    z-index: 1;
}

.step-content {
    flex-grow: 1;
    position: relative;
    z-index: 2;
    /* .mud-card within this will use --mud-palette-surface or --mud-palette-background-paper */
}

/* Hide the line for the LAST .plk-dd-draggable that contains a .step */
.plk-dd-dropzone > .plk-dd-draggable:has(> .step):last-of-type .step > div:first-child::before {
    display: none;
}

/* --- Active Step Styling (applied if .step has .step-active class) --- */
.step.step-active .circle {
    background-color: var(--circle-bg-active);
    color: var(--circle-text-active);
    box-shadow: 0 0 0 3px var(--stepper-cutout-bg-color); /* Keep cutout */
    /* Optional: add a more prominent shadow for active state if desired,
       e.g., using var(--mud-palette-primary-darken) or var(--mud-palette-primary-hover)
       box-shadow: 0 0 0 3px var(--stepper-cutout-bg-color), 0 0 0 5px var(--mud-palette-primary-hover);
    */
}

.step.step-active > div:first-child::before {
    background-color: var(--line-color-active);
}

/* Titles/Captions inside .step-content (if you have specific classes for them) */
/* MudBlazor's Typography components will handle their own colors,
   but you can override if needed for the active state. */
.step.step-active .step-content .mud-typography-h6, /* Example for a title */
.step.step-active .step-content .mud-typography-caption { /* Example for caption */
    /* color: var(--title-color-active); /* Uncomment if you want to force active title color */
}