/* Seven Segment Display Styling */
.shirinqalam-container .seven-segment-display {
    display: flex;
    align-items: center;
    gap: 2.7px;
    padding: 10px;
    background: transparent !important;
    border-radius: 1px;
    direction: ltr;
}

.shirinqalam-container .seven-segment-digit {
    position: relative;
    width: 48px;
    height: 85px;
    background: transparent;
}

.shirinqalam-container .segment {
    position: absolute;
    background-color: transparent; /* White for off segments */
    opacity: 1;
	border-radius: 100px; /* Added radius for all segments */
}

.shirinqalam-container .segment.on {
    background-color: #0000ff; /* Red for on segments */
    opacity: 1;
	border-radius: 100px; /* Added radius for on segments */
}

.shirinqalam-container .segment-a { width: 31px; height: 12px; top: 0; left: 8.5px; }
.shirinqalam-container .segment-b { width: 12px; height: 28px; top: 12px; right: 0; }
.shirinqalam-container .segment-c { width: 12px; height: 28px; bottom: 10px; right: 0; }
.shirinqalam-container .segment-d { width: 28px; height: 12px; bottom: 0;left: 10px; }
.shirinqalam-container .segment-e { width: 12px; height: 28px; bottom: 10px; left: 0; }
.shirinqalam-container .segment-f { width: 12px; height: 28px; top: 10px; left: 0; }
.shirinqalam-container .segment-g { width: 28px; height: 12px; top: 37px; left: 10px; }

.shirinqalam-container .seven-segment-colon {
    font-size: 65px;
    color: #0000ff;
    line-height: 90px;
    padding: 0 0px;
    animation: blink 1s step-end infinite;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}