/* Jost Font*/
        @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css');
        @import url('https://fonts.googleapis.com/css2?family=Marcellus&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');
        :root {
          --animate-duration: 2s;
          --animate-delay: 2s;
          --redColor:red;
         --orangeColor:#FCA311;
         --beigeColor:#DBCC8F;
          --boxShadow: 0 5px 5px 0 rgba(0,0,0,0.2);
         --boxShadow2: 0 5px 5px 5px rgba(0,0,0,0.1);
         --darkgrayColor: #222222;
         --formgrayColor:#F3F3F3;
         --blackColor:#000000;
         --whiteColor: #ffffff;
         --newgrayColor:#E5E5E5;
         --grayColor: rgb(88, 87, 87);
        }
        
         *{
            box-sizing:border-box;
            transition: all .3s linear;
            text-decoration:none;
            outline:none;
            border:none;
            margin:0;
            padding:0;
            list-style-type:none;
            font-family: "Marcellus", serif;
            font-family: "Jost", Arial, Helvetica, sans-serif;
            font-weight:400;
            font-size: 16px;
            }
        
            html {
            scroll-padding-top:10px;
            scroll-behavior:smooth;
            overflow-x:hidden;
            scroll-padding-top:10px;
            }
            ul li {
                list-style: none;
            }
        
            a {
            text-decoration: none;
            color:darkblue;
            }
        
            body {
            background:var( --formgrayColor);
            }
            ::-webkit-scrollbar {
            width: 8px;
            }
            ::-webkit-scrollbar-track {
            background-color:var(--formgrayColor);
            }
            ::-webkit-scrollbar-thumb {
            background: linear-gradient(to top, var(--blackColor), var(--orangeColor));
            border-radius:5px;
            }  
            .form-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-bottom: 1px solid var(--newgrayColor);
                color: var(--redColor);
                padding: 0.6rem;
                text-align: center;
                flex-wrap: wrap;
            }
            
         h1 {
             color:var(--redColor);
             font-weight:700;
             font-size:22px;
             padding:0;
        }
    .allauth-form {
        background:var(--whiteColor);
        border:1px solid var(--newgrayColor);
        max-width:650px;
        width:100%;
        padding:20px;
        margin:20px auto;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
    }
     .allauth-form p {
         padding:10px 0;
         font-size:15px;
         font-weight:400;
     }
     .allauth-form label {
         display:block;
         padding-bottom:10px;
         font:15px;
         color:var(--blackColor);
         font-weight:400;
     }
     .allauth-form input,
     .allauth-form select {
         
         padding:10px;
         border-radius:1px;
         font:15px;
         color:var(--blackColor);
         margin-bottom: 10px;
         background:var(--formgrayColor);
         outline:none;
         border:none;
         width:100%;
     }
     .allauth-form textarea {
         padding:10px;
         border-radius:1px;
         font:15px;
         color:var(--blackColor);
         margin-bottom: 10px;
         background:var(--formgrayColor);
         outline:none;
         width:100%;
         resize:vertical;
     }
     
     button {
         padding:12px 24px;
         width:100%;
         color:#ffffff;
         background:var(--blackColor);
         border-radius:1px;
         font-size:16px;
         outline:none;
         border:none;
         transition:0.3s linear;
         margin:15px 0;
         position: relative;
     }
     button:hover {
         background:var(--orangeColor);
         transform: translateY(-3px);
         cursor: pointer;
     }
     .errorlist li {
         color: rgb(231, 59, 21);
         text-decoration: none;
         padding: 0.5rem;
         padding-left: 1rem;
         border-left: 5px solid rgb(212, 54, 19);
         margin-bottom: 1rem;
     }
         /* Add this to your CSS file */
     .alert-danger {
         color: #ee061d;
         background:rgb(239, 170, 170);
         padding:12px 16px;
         font-size: 0.9em;
     }
 
     .alert {
         background:rgb(255, 143, 143);
         padding:12px 16px;
         margin-bottom: 20px;
         border: 1px solid transparent;
         border-radius: 4px;
     }
 
     .deletebtn {
         background: red;
         color: var(--whiteColor);
         padding: 10px 10px;
         border-radius: 2px;
         cursor: pointer;
         width:40%;
     }
     .abortbtn {
         background: var(--blackColor);
         color: var(--whiteColor);
         padding:10px 30px;
         width:40%;
         text-align: center;
         border-radius: 2px;
         cursor: pointer;
     }
 /*Delete product form */
     .image-to-delete-container {
         width: 200px;
         height: 200px;
         margin: 0 auto;
         display: block;
         overflow: hidden;
         border-radius: 5px;
     }
     .image-to-delete-container img {
         width: 100%;
         height: 100%;
         object-fit: contain;
         border-radius: 5px;
         transition: transform 0.3s ease-in-out;
     }
     .delete-btns-container {
         display:flex;
         flex-wrap: wrap;
         gap:10px;
         justify-content:center;
         align-items:center;
     }
     /* create product form*/
     .create-form p {
         display: flex;
         align-items: flex-start;
         margin-bottom: 15px;
     }
     .create-form p label {
         flex: 0 0 150px;
         margin-right: 10px;
     }
     .create-form p input[type="checkbox"] {
         margin-top: 5px;
     }
     @media screen and (max-width: 500px) {
         .create-form p {
             display: block;
         }
         .delete-btns-container {
            flex-direction:column;
            gap:5px;
            justify-content:center;
            align-items:center;
         }
         .deletebtn {
             width:100%;
         }
         .abortbtn {
             width:100%;
         }
     }
 
     /*MPESA FORM*/
     #mpesa-form p {
         margin-bottom: 8px;
         font-size: 16px;
         color: var(--grayColor);
     }
     #mpesa-form p>span {
         color: var(--blackColor);
         font-weight:500;
     }
     .pay-via-mpesa-heading-container {
         display: flex;
         justify-content:center;
         margin:10px 0;
     }
     .pay-via-mpesa-heading-container img {
        width:180px;
        height:auto;
        object-fit: contain;
     }
     .pay-via-mpesa-heading {
         text-align: start; 
         font-size:17px; 
         font-weight:500;
         color:var(--blackColor);
         display:flex;
         gap:5px;
         justify-content:center;
         align-items: center;
         margin:6px 0;
     }
     .pay-via-mpesa-heading .checked-mark-icon {
         color:green;
     }
     .mpesa-submit-btn {
        padding:10px;
        background:var(--blackColor);
        color:var(--whiteColor);
        font-size:16px;
        border:none;
        position: relative;
    }
    .mpesa-submit-btn .mpesa-submit-btn-loader {
        position: absolute;
        left:0;
        top:0;
        height:100%;
        width: 100%;
        display:none;
        justify-content: center;
        align-items: center;
        background:rgba(219, 190, 136, 0.8);
        z-index: 10;
    }
    .mpesa-submit-btn .mpesa-submit-btn-loader .loading-spinner {
        border: 1.2px solid rgba(219, 190, 136, 0.3);
        border-left-color: #000000;
        border-radius: 50%;
        width: 28px;
        height: 28px;
        animation: spin 0.3s linear infinite;
       
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
   .MPESA-container .mpesa-footer {
         display:flex;
         flex-direction: column;
         align-items:center;
         text-align: center;
         color:var(--blackColor);
     }
 
     .MPESA-container .mpesa-footer p>a,
     .MPESA-container .mpesa-footer span>a {
         color:green;
         opacity:0.7;
     }
 
     /* Order Processing page styling */
     .processing-container {
         max-width:600px;
         width:100%;
         display: flex;
         align-items: center;
         justify-content: center;
         padding: 20px;
     }
     .progress-bar-container {
         width: 100%;
         height: 4px;
         background-color: #eee;
         border-radius: 4px;
         margin-bottom: 2rem;
         overflow: hidden;
     }
 
     .progress-bar {
         width: 0%;
         height: 100%;
         background-color: #fbbf24;
         border-radius: 4px;
         transition: width 0.5s ease-in-out;
     }
     .spinner {
         width: 48px;
         height: 48px;
         border: 4px solid #eee;
         border-top-color: #fbbf24;
         border-radius: 50%;
         animation: spin 1s linear infinite;
         margin: 0 auto 2rem;
     }
 
     .processing-title {
         font-size: 1.5rem;
         color: #1f2937;
         margin-bottom: 1rem;
         font-weight: 600;
         text-align: center;
     }
 
     .processing-description {
         color: #555b67;
         margin-bottom: 1.5rem;
         font-size: 1rem;
         line-height: 1.5;
         text-align: center;
     }
 
     .status-message {
         font-size: 0.875rem;
         color: #696f7a;
         margin-top: 1rem;
         min-height: 1.25rem;
     }
 
     .status-steps {
         display: flex;
         flex-direction: column;
         gap: 0.5rem;
         margin-top: 1.5rem;
         text-align: left;
     }
 
     .status-step {
         display: flex;
         align-items: center;
         gap: 0.5rem;
         color: #6b7280;
         font-size: 0.875rem;
     }
 
     .status-step.active {
         color: #1f2937;
         color: #059669;
         font-weight: 700;
     }
 
     .status-step.completed {
         color:#fbbf24;
     }
 
     .step-icon {
         width: 16px;
         height: 16px;
         border-radius: 50%;
         border: 2px solid currentColor;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         position: relative;
     }
    
     .step-icon.completed::after {
         position: absolute;
         left:0;
         top:0;
         width: 100%;
         height: 100%;
         display: flex;
         align-items: center;
         justify-content: center;
         color: #fbbf24;
         content: "✓";
         font-size: 0.75rem;
     }
 
     @keyframes spin {
         to { transform: rotate(360deg); }
     }
 
     @keyframes fadeIn {
         from { opacity: 0; }
         to { opacity: 1; }
     }