body {
    font-family: sans-serif;
    line-height: 1.6;
    padding: 20px;
    max-width: 800px;
    margin: auto;
    background-color: #f4f4f4;
}

h1, h2 {
    color: #333;
}

#login-section, #brand-snippet-tool, #logged-in-section {
    background-color: #fff;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

label {
    display: block; /* Labels appear above their inputs */
    margin-bottom: 5px;
    font-weight: bold;
}

input[type="text"],
input[type="password"],
input[type="url"],
select,
textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px; /* Default bottom margin for form elements */
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* Include padding in width */
}

/* --- NEW/MODIFIED RULES for Brand Select Layout --- */

/* Container for the brand dropdown and its logo */
.brand-select-container {
    display: flex;         /* THIS IS CRUCIAL */
    align-items: center;   /* Aligns items vertically */
    margin-bottom: 15px;
}

.brand-select-group {
    flex-grow: 1;        /* Allows group to expand, pushing logo right */
    margin-right: 10px;  /* Space between select and logo */
}

.brand-select-group select {
     margin-bottom: 0;    /* Remove default select margin */
}

.brand-logo-container {
    margin-bottom: 10px; /* Keeps space below the logo */
    text-align: right;  /* THIS is the rule that centers the content */
}

/* Modify the existing rule for the image */
#brand-logo-preview {
    /* REMOVE max-width and max-height */
    /* max-height: 80px; */
    /* max-width: 160px; */

    /* ADD fixed width and height */
    width: 340px;        /* Set the fixed width for the logo box (adjust as needed) */
    height: 80px;        /* Set the fixed height for the logo box (adjust as needed) */

    /* ADD object-fit */
    object-fit: contain; /* Scales the image down to fit within the w/h above, preserving aspect ratio */
                         /* By default, centers the image within the unused space */

    display: block;      /* Keep this for layout */
    /* width: auto; */   /* Remove */
    /* height: auto; */  /* Remove */
}

/* --- End of NEW/MODIFIED RULES --- */


button {
    padding: 10px 15px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
}

button:hover {
    background-color: #0056b3;
}

#logout-button {
    background-color: #dc3545;
    margin-left: 15px;
}
#logout-button:hover {
    background-color: #c82333;
}

textarea {
    font-family: monospace;
    background-color: #e9e9e9;
}

.error-message {
    color: red;
    font-size: 0.9em;
    margin-top: 5px; /* Keep margin-top for spacing below the element it relates to */
}

/* Optional: If you want the label next to the select instead of above */
/*
.brand-select-group {
    display: flex;
    align-items: center;
    flex-grow: 1;
    margin-right: 10px;
}
.brand-select-group label {
    display: inline-block;  / Allow label to be inline /
    margin-bottom: 0;     / Remove bottom margin /
    margin-right: 5px;    / Add space between label and select /
    white-space: nowrap;  / Prevent label text wrapping /
}
.brand-select-group select {
    flex-grow: 1; / Allow select to take remaining space in the group /
    margin-bottom: 0;
}
*/

/* CSS for Manufacturer Info Widget - Part of Protero Tool Portal */
.manufacturer-info-widget {
    border: 1px solid #e0e0e0;
    padding: 15px;
    /*margin-bottom: 20px;*/ /* Or adjust as needed for spacing */
    margin-top: 10px;
    text-align: center;
    max-width: 400px;    /* Max width of the box */
    display: inline-block; /* Allows multiple boxes side-by-side if needed */
    vertical-align: top; /* Aligns boxes nicely if multiple are on one line */
    box-sizing: border-box;
    background-color: #fbfbfb;;
  }
  @media (max-width: 767px) {
    .manufacturer-info-widget {
      width: 100%;       /* Override width for mobile */
      max-width: none;   /* Override max-width for mobile */
      margin-left: 0;    /* Remove auto margin for full width */
      margin-right: 0;   /* Remove auto margin for full width */
      /* Keep display: block; from the default rules */
      /* Adjust vertical margins if needed for mobile spacing */
      /* margin-top: 30px; */
      /* margin-bottom: 30px; */
    }
  }
  .manufacturer-info-widget a {
    /* General link styling within the widget if needed */
    /* text-decoration: none;  You might want this globally */
  }
  
  .manufacturer-info-widget .manufacturer-logo {
    max-width: 100%;       /* Logo scales down if container is smaller */
    height: auto;          /* Maintain aspect ratio */
    max-height: 75px;      /* Maximum logo height */
    vertical-align: middle;/* Aligns logo nicely if text were next to it */
    margin-bottom: 5px;    /* Space between logo and text below */
  }
  
  .manufacturer-info-widget .manufacturer-link-text {
    margin-top: -0px; /* Pulls text closer to the logo */
    margin-bottom: 0;
    font-size: 1em !important; /* Slightly smaller font for the link text */
    line-height: 1.3; /* Adjust line height for readability */
    font-weight: bold !important;
  }
  
  .manufacturer-info-widget .manufacturer-product-link {
    color: #007bff;         /* Standard link blue, change if needed */
    text-decoration: underline; /* Make link obvious */
  }
  
  .manufacturer-info-widget .manufacturer-product-link:hover {
    color: #0056b3;         /* Darker blue on hover */
    text-decoration: none;  /* Optional: remove underline on hover */
  }
 /* Basic Modal Styles (Move to style.css for better organization) */
 .modal {
     display: none; /* Hidden by default */
     position: fixed; /* Stay in place */
     z-index: 1000; /* Sit on top */
     left: 0;
     top: 0;
     width: 100%; /* Full width */
     height: 100%; /* Full height */
     overflow: auto; /* Enable scroll if needed */
     background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
 }

 .modal-content {
     background-color: #fefefe;
     margin: 15% auto; /* 15% from the top and centered */
     padding: 20px;
     border: 1px solid #888;
     width: 80%; /* Could be more specific */
     max-width: 600px; /* Max width */
     position: relative; /* For positioning the close button */
     border-radius: 5px;
 }

 .close-button {
     color: #aaa;
     position: absolute; /* Position relative to modal-content */
     top: 10px;
     right: 20px;
     font-size: 28px;
     font-weight: bold;
 }

 .close-button:hover,
 .close-button:focus {
     color: black;
     text-decoration: none;
     cursor: pointer;
 }
/* Style for the user bar */
.user-bar {
    display: flex;                /* Enable flexbox layout */
    justify-content: space-between; /* Push welcome message and actions group apart */
    align-items: center;          /* Vertically align items in the middle */
    padding: 5px 0;               /* Optional: Add some vertical padding */
  }
  
  /* Style for the container holding the action buttons */
  .user-actions button {
    /* Add space BETWEEN the buttons in the group */
    margin-left: 10px; /* Adjust spacing as needed */
  }
  
  /* Optional: Remove margin from the first button if you want it flush */
  .user-actions button:first-child {
     margin-left: 0;
  }
  
  /* Style the welcome message span (usually no specific styles needed here) */
  .welcome-message {
    /* display: inline-flex; */ /* Not needed if logout button is not inside */
    /* align-items: center; */  /* Not needed if logout button is not inside */
  }
  
  /* --- REMOVE OR COMMENT OUT the previous #logout-button and #howto-button rules --- */
  /*
  #logout-button {
     margin-left: 10px;
  }
  #howto-button {
    margin-left: auto;
  }
  */
  /* Basic Styling for usability - Add to your style.css */
  .search-results-dropdown {
    border: 1px solid #ccc;
    max-height: 200px;
    overflow-y: auto;
    background-color: white;
    position: relative; /* Adjust if needed */
    z-index: 1000;
    margin-top: 5px;
}
.search-results-dropdown ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.search-results-dropdown li {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
}
.search-results-dropdown li:hover {
    background-color: #f0f0f0;
}
.search-results-dropdown li:last-child {
    border-bottom: none;
}
#selected-products-list li button {
    margin-left: 10px;
    cursor: pointer;
    color: red;
    border: none;
    background: none;
    font-size: 1.1em;
}
#selected-products-list li {
    margin-bottom: 5px;
    padding: 5px;
    background-color: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 3px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#apply-snippet-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.status-message {
    margin-top: 15px;
    font-weight: bold;
    padding: 10px;
    border-radius: 4px;
}
.status-success {
    color: #155724;
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
}
.status-error {
    color: #721c24;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
}
.status-info {
    color: #0c5460;
    background-color: #d1ecf1;
    border: 1px solid #bee5eb;
}
.status-warning { /* For multi-status */
    color: #856404;
    background-color: #fff3cd;
    border: 1px solid #ffeeba;
}
.company-logo {
    max-width: 500px; /* Adjust size as needed */
    height: auto;
    margin-bottom: -20px;
    .container {
        max-width: 900px; /* Adjust max width as needed */
        margin: auto;
        padding: 0 15px; /* Add some padding on the sides */
    }
    
    /* Style the list holding the tool cards */
    .tool-card-list {
        list-style: none;
        padding: 0;
        margin: 20px 0 0 0; /* Add some top margin */
        display: grid; /* Use grid for layout */
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsive columns */
        gap: 20px; /* Space between cards */
    }
    
    /* Individual list item (optional, mostly for grid spacing) */
    .tool-card-list li {
        /* No specific styles needed here if using grid gap */
    }
    
    /* The tool card itself */
    .tool-card {
        background-color: #ffffff;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        padding: 20px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
        height: 100%; /* Make cards in the same row equal height */
        display: flex;
        flex-direction: column; /* Stack title and description */
    }
    
    .tool-card:hover {
        transform: translateY(-5px); /* Slight lift effect */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }
    
    /* Card title */
    .tool-card h3 {
        margin-top: 0;
        margin-bottom: 10px;
        font-size: 1.2em;
    }
    
    /* Card link style */
    .tool-card h3 a {
        text-decoration: none;
        color: #007bff; /* Link color */
    }
    
    .tool-card h3 a:hover {
        text-decoration: underline;
        color: #0056b3;
    }
    
    /* Card description */
    .tool-card p {
        margin-bottom: 0; /* Remove default bottom margin */
        color: #555;
        font-size: 0.95em;
        flex-grow: 1; /* Allows description to push content down if needed */
    }
    
    /* Adjustments for smaller screens if needed */
    @media (max-width: 600px) {
        .tool-card-list {
            grid-template-columns: 1fr; /* Single column on small screens */
        }
    }
    
    /* Ensure login section also fits well */
    #login-section {
        max-width: 450px; /* Limit width of login form */
        margin-left: auto;
        margin-right: auto;
    }
}