/**

 * HS Umrah Steps Widget Styles

 * Version: 1.0.0

 */



/* Container */

.hs-umrah-steps-container {

    width: 100%;

}



/* Vertical Layout */

.hs-layout-vertical {

    display: flex;

    flex-direction: column;

}



.hs-layout-vertical .hs-umrah-step {

    display: flex;

    align-items: flex-start;

    gap: 20px; /* Default gap between number and content */

}



/* Horizontal/Grid Layout */

.hs-layout-horizontal {

    display: grid;

    grid-template-columns: repeat(2, 1fr); /* Default 2 columns */

    gap: 30px; /* Default gap between grid items */

}



.hs-layout-horizontal .hs-umrah-step {

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

}



/* Step Number */

.hs-step-number {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 50px;

    height: 50px;

    min-width: 50px;

    background: #4A90E2;

    color: #ffffff;

    font-size: 18px;

    font-weight: 700;

    border-radius: 50%;

    flex-shrink: 0;

    transition: all 0.3s ease;

}



.hs-umrah-step:hover .hs-step-number {

    transform: scale(1.1);

}



/* Step Content */

.hs-step-content {

    flex: 1;

    width: 100%;

}



/* Step Title */

.hs-step-title {

    margin: 0 0 8px 0;

    font-size: 20px;

    font-weight: 600;

    color: #333333;

    line-height: 1.4;

}



/* Step Description */

.hs-step-description {

    margin: 0 0 15px 0;

    font-size: 14px;

    color: #666666;

    line-height: 1.6;

}



/* Step Details */

.hs-step-details {

    padding: 15px 20px;

    background: #f8f9fa;

    border-left: 4px solid #4A90E2;

    border-radius: 6px;

    font-size: 14px;

    color: #555555;

    line-height: 1.6;

}



.hs-step-details p {

    margin: 0 0 10px 0;

}



.hs-step-details p:last-child {

    margin-bottom: 0;

}



.hs-step-details ul,

.hs-step-details ol {

    margin: 10px 0;

    padding-left: 20px;

}



.hs-step-details li {

    margin-bottom: 5px;

}



/* Animation */

.hs-umrah-step {

    animation: fadeInUp 0.6s ease both;

}



.hs-umrah-step:nth-child(1) { animation-delay: 0.1s; }

.hs-umrah-step:nth-child(2) { animation-delay: 0.2s; }

.hs-umrah-step:nth-child(3) { animation-delay: 0.3s; }

.hs-umrah-step:nth-child(4) { animation-delay: 0.4s; }

.hs-umrah-step:nth-child(5) { animation-delay: 0.5s; }

.hs-umrah-step:nth-child(6) { animation-delay: 0.6s; }



@keyframes fadeInUp {

    from {

        opacity: 0;

        transform: translateY(20px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



/* Responsive Design */

@media (max-width: 768px) {

    .hs-layout-horizontal {

        grid-template-columns: 1fr;

    }

    

    .hs-layout-vertical .hs-umrah-step {

        flex-direction: column;

        align-items: flex-start;

    }

    

    .hs-layout-vertical .hs-step-number {

        margin-bottom: 15px;

    }

}



@media (max-width: 480px) {

    .hs-step-title {

        font-size: 18px;

    }

    

    .hs-step-description,

    .hs-step-details {

        font-size: 13px;

    }

    

    .hs-step-number {

        width: 40px;

        height: 40px;

        min-width: 40px;

        font-size: 16px;

    }

}



/* Print Styles */

@media print {

    .hs-umrah-step {

        animation: none;

        page-break-inside: avoid;

    }

    

    .hs-step-number {

        background: #4A90E2 !important;

        color: white !important;

        -webkit-print-color-adjust: exact;

        print-color-adjust: exact;

    }

}



/* Accessibility */

.hs-umrah-step:focus-within {

    outline: 2px solid #4A90E2;

    outline-offset: 4px;

}



/* Dark Mode Support */

@media (prefers-color-scheme: dark) {

    .hs-step-title {

        color: #f0f0f0;

    }

    

    .hs-step-description {

        color: #cccccc;

    }

    

    .hs-step-details {

        background: #2a2a2a;

        color: #e0e0e0;

    }

}