/******************************************************************************
START Glitch hello-app default styles

The styles in this section do some minimal CSS resets, set default fonts and 
colors, and handle the layout for our footer and "Remix on Glitch" button. If
you're new to CSS they may seem a little complicated, but you can scroll down
to this section's matching END comment to see page-specific styles.
******************************************************************************/

/* Our default values set as CSS variables */
:root {
  --color-bg: #BDC9FF;
  --color-text-main: #000000;
  --color-primary: #AFECE0;
  --wrapper-height: 87vh;
  --image-max-width: 300px;
  --image-margin: 3rem;
  --font-family: "HK Grotesk";
  --font-family-header: "HK Grotesk";
}

/* Basic page style resets */
* {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}

/* Import fonts */
@font-face {
  font-family: HK Grotesk;
  src: url("https://cdn.glitch.me/605e2a51-d45f-4d87-a285-9410ad350515%2FHKGrotesk-Regular.otf?v=1603136326027") format("opentype");
}
@font-face {
  font-family: HK Grotesk;
  font-weight: bold;
  src: url("https://cdn.glitch.me/605e2a51-d45f-4d87-a285-9410ad350515%2FHKGrotesk-Bold.otf?v=1603136323437") format("opentype");
}

/* Our remix on glitch button */
.btn--remix {
  font-family: HK Grotesk;
  padding: 0.75rem 1rem;
  font-size: 1.1rem;
  line-height: 1rem;
  font-weight: 500;
  height: 2.75rem;
  align-items: center;
  cursor: pointer;
  background: #FFFFFF;
  border: 1px solid #000000;
  border-radius: 4px;
  text-decoration: none;
  color: #000;
  white-space: nowrap;
  margin-left: auto;
}
.btn--remix img {
  margin-right: 0.5rem;
}
.btn--remix:hover {
  background-color: #D0FFF1;
}

/* Navigation grid */
.footer {
  display: flex;
  justify-content: space-between;
  margin: 1rem auto 0;
  padding: 1rem 0 0.75rem 0;
  width: 100%;
  flex-wrap: wrap;
  border-top: 4px solid #fff;
}
.footer a:not(.btn--remix):link,
a:not(.btn--remix):visited {
  font-family: HK Grotesk;
  font-size: 1.1rem;
  color: #000;
  text-decoration: none;
  border-style: none;
}
.footer a:hover {
  background: var(--color-primary);
}
.footer .links {
  padding: 0.5rem 1rem 1.5rem;
  white-space: nowrap;
}
.divider {
  padding: 0 1rem;
}
/******************************************************************************
END Glitch hello-app default styles
******************************************************************************/
/* Basic responsive styles */
        body {
            font-family: 'Helvetica Neue', Arial, sans-serif;
            margin: 0;
            padding: 20px;
        }

        .form-wrapper {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }

        .form-container {
            width: 100%;
            max-width: 600px;
            background: #fff;
            padding: 30px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            border-radius: 10px;
            border: 1px solid #ddd;
        }

        .form-title {
            text-align: center;
            font-size: 26px;
            margin-bottom: 25px;
            color: #333;
            font-weight: 700;
            background-color: #007BFF;
            padding: 10px;
            color: white;
            border-radius: 8px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #444;
            font-size: 18px;
        }

        .form-group input[type="text"],
        .form-group input[type="email"] {
            width: 100%;
            padding: 12px;
            border: 2px solid #ccc;
            border-radius: 8px;
            font-size: 16px;
            box-sizing: border-box;
            transition: border-color 0.3s, box-shadow 0.3s;
        }

        .form-group input[type="text"]:focus,
        .form-group input[type="email"]:focus {
            border-color: #007BFF;
            outline: none;
            box-shadow: 0 0 8px rgba(0, 123, 255, 0.4);
        }

        .form-group.radio-group {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        .radio-container {
            flex: 1 1 45%;
            margin-bottom: 10px;
            background-color: #f8f9fa;
            border: 2px solid #007BFF;
            border-radius: 8px;
            padding: 10px;
            display: flex;
            align-items: center;
        }

        .radio-container input[type="radio"] {
            margin-right: 10px;
            height: 18px;
            width: 18px;
            margin-top: 0;
        }

        .radio-container label {
            font-size: 16px;
            color: #333;
            cursor: pointer;
            margin: 0;
            font-weight: 500;
        }

        .submit-container {
            text-align: center;
            margin-top: 20px;
        }

        .submit-container input {
            padding: 14px 28px;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 18px;
            font-weight: bold;
            transition: background-color 0.3s, transform 0.3s;
        }

        .submit-container input:hover {
            background-color: #0056b3;
            transform: scale(1.05);
        }

        .submit-container input:disabled {
            background-color: #ccc;
            cursor: not-allowed;
        }

        .mac-address-group {
            display: none;
            margin-top: 15px;
        }

        .mac-address-group input {
            border: 2px solid #dc3545;
        }

        .error-message {
            color: #dc3545;
            display: none;
            font-size: 14px;
            margin-top: 8px;
        }

        @media (max-width: 600px) {
            .form-container {
                padding: 20px;
            }

            .radio-container {
                flex: 1 1 100%;
            }
        }

body {
  font-family: HK Grotesk;
}

/* Page structure */
.wrapper {
  min-height: var(--wrapper-height);
  display: grid;
  place-items: center;
  margin: 0 1rem;
}
.content {
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: left;
}

p {
  font-size: 1.25rem;
}

/* Title h1 style */
.title {
  color: #2800FF;
  font-family: HK Grotesk;
  font-weight: bold;
  font-size: 100px;
  line-height: 105%;
  margin: 2rem 0 0;
}

/* Very light scaling for our illustration */
.illo-container {
  display: flex;
  justify-content: flex-end;
}
.illustration {
  max-width: 100%;
  max-height: 150px;
  margin-top: 1rem;
}

/* Styles for our custom color form and its results */
.color-info {
  margin-left: 5px;
}
.color-search {
  margin-top: 3rem;
}
.color-form {
  width: 90%;
  max-width: 500px;
  margin-left: 5px;
}
.color-form a:not(.btn--remix) {
  font-weight: bold;
  color: var(--color-text-main);
  margin-top: 8px;
}
.color-form button {
  margin-top: 8px;
}
.color-form button:hover {
  cursor: pointer;
  box-shadow: -8px 4px 20px #9BE7D8;
}
form {
  margin: 0.75rem 0;
}
button,
input {
  font-family: inherit;
  font-size: 100%;
  background: #FFFFFF;
  border: 1px solid #000000;
  border-radius: 4px;
  padding: 0.5rem 1rem;
}
label {
  color: #000000;
  font-weight: bold;
}

/* Instructions */
.instructions {
  margin: 1rem auto 0;
}
.instructions p {
  font-size: 1rem;
}
h2 {
  color: #2800FF;
}

/* Table styling */
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
  font-size: 16px;
}
th, td {
  padding: 12px;
  text-align: left;
  border: 1px solid #ddd;
  word-wrap: break-word;
}
th {
  background-color: #f4f4f4;
}
tr:nth-child(even) {
  background-color: #f9f9f9;
}
tr.sent {
  background-color: #d1ffd1; /* Light green background for sent rows */
}
tr.highlighted {
  background-color: #4CAF50;
  transition: background-color 0.3s ease;
}

/* Button styling */
button {
  padding: 8px 12px;
  margin: 0 5px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
}
button.delete {
  background-color: #e74c3c;
  color: white;
}
button.send-order {
  background-color: #3498db;
  color: white;
}
button.notify {
  background-color: #f39c12;
  color: white;
}
button:hover {
  opacity: 0.8;
}

/* Responsive table */
@media (max-width: 768px) {
  table {
    width: 100%;
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
  thead {
    display: none; /* Hide headers on mobile */
  }
  tbody, tr, td {
    display: block;
    width: 100%;
  }
  td {
    padding: 10px;
    text-align: right;
    position: relative;
  }
  td::before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    width: 50%;
    padding-left: 10px;
    font-weight: bold;
    text-align: left;
  }
  tr {
    margin-bottom: 15px;
    border: 1px solid #ddd;
  }
}

/* Add these styles to your CSS file */

/* Override default styles with more specific selectors */
table tr.sent {
    background-color: blue !important; /* Set background color */
    color: white !important; /* Set text color */
}

table tr.notified {
    background-color: orange !important; /* Set background color */
    color: black !important; /* Set text color */
}

/* Add these styles to your CSS file */
table tr.payment-done {
    background-color: green !important;
    color: white; /* Adjust text color if needed */
}

    .payment-done-button {
        display: inline-block;
        padding: 10px 20px;
        font-size: 16px;
        color: #ffffff;
        background-color: #4CAF50; /* Green color */
        border: none;
        border-radius: 5px;
        text-align: center;
        text-decoration: none;
        cursor: pointer;
        transition: background-color 0.3s ease, transform 0.3s ease;
    }

    .payment-done-button:hover {
        background-color: #45a049; /* Slightly darker green for hover effect */
        transform: scale(1.05); /* Slightly scale up on hover */
    }

    .payment-done-button:active {
        background-color: #388e3c; /* Even darker green for active state */
        transform: scale(1); /* Reset scale on click */
    }
/* Modal Styles */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 9999; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: hidden; /* Prevent scrolling */
    background-color: rgba(0, 0, 0, 0.5); /* Black with opacity */
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* Modal Content */
.modal-content {
    background-color: #fff;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 400px;
    border-radius: 10px;
    text-align: center;
}

/* Loader Styles (Spinner) */
.loader {
    border: 8px solid #f3f3f3; /* Light grey */
    border-top: 8px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px; /* Center the loader */
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}