body { font-family: Roboto, Arial; color: rgb(33, 33, 33); /* The element has a default margin of 8px on all sides. This removes the default margins. */ margin: 0; } /*

elements have a default margin on the top and bottom. This removes the default margins. */ p { margin: 0; } button { cursor: pointer; } select { cursor: pointer; } input, select, button { font-family: Roboto, Arial; } .button-primary { color: rgb(33, 33, 33); background-color: rgb(255, 216, 20); border: 1px solid rgb(252, 210, 0); border-radius: 8px; cursor: pointer; box-shadow: 0 2px 5px rgba(213, 217, 217, 0.5); } .button-primary:hover { background-color: rgb(247, 202, 0); border: 1px solid rgb(242, 194, 0); } .button-primary:active { background: rgb(255, 216, 20); border-color: rgb(252, 210, 0); box-shadow: none; } .button-secondary { color: rgb(33, 33, 33); background: white; border: 1px solid rgb(213, 217, 217); border-radius: 8px; cursor: pointer; box-shadow: 0 2px 5px rgba(213, 217, 217, 0.5); } .button-secondary:hover { background-color: rgb(247, 250, 250); } .button-secondary:active { background-color: rgb(237, 253, 255); box-shadow: none; } /* These styles will limit text to 2 lines. Anything beyond 2 lines will be replaced with "..." You can find this code by using an A.I. tool or by searching in Google. https://css-tricks.com/almanac/properties/l/line-clamp/ */ .limit-text-to-2-lines { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .link-primary { color: rgb(1, 124, 182); cursor: pointer; } .link-primary:hover { color: rgb(196, 80, 0); } /* Styles for dropdown selectors. */ select { color: rgb(33, 33, 33); background-color: rgb(240, 240, 240); border: 1px solid rgb(213, 217, 217); border-radius: 8px; padding: 3px 5px; font-size: 15px; cursor: pointer; box-shadow: 0 2px 5px rgba(213, 217, 217, 0.5); } select:focus, input:focus { outline: none; /* Remove default outline */ border: 1px solid rgb(255, 153, 0); /* Custom border */ box-shadow: 0 0 8px rgba(255, 153, 0, 0.7); /* Glow effect */ transition: all 0.3s ease; /* Smooth transition */ background-color: rgba(255, 153, 0, 0.1); /* Subtle background change */ /* Optional: Change text color */ } /* Hide the default radio appearance */ .delivery-option-input { appearance: none; /* Remove default styling */ width: 20px; height: 20px; border: 2px solid rgb(255, 153, 0); /* Orange border */ border-radius: 50%; /* Circular shape */ outline: none; cursor: pointer; transition: all 0.3s ease; /* Smooth transition for effects */ position: relative; } /* Checked state */ .delivery-option-input:checked { background-color: rgb(255, 153, 0); /* Orange fill when checked */ border-color: rgb(255, 102, 0); /* Darker border */ box-shadow: 0 0 8px rgba(255, 153, 0, 0.7); /* Glow effect */ } /* Hover effect */ .delivery-option-input:hover { border-color: rgb(255, 102, 0); /* Darker border on hover */ box-shadow: 0 0 8px rgba(255, 153, 0, 0.5); /* Subtle glow */ } /* Add a dot inside the circle for the checked state */ .delivery-option-input:checked::before { content: ''; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; background-color: #fff; border-radius: 50%; transform: translate(-50%, -50%); transition: all 0.3s ease; } /* Styling the middle section */ .amazon-header-middle-section { display: flex; align-items: center; gap: 10px; /* Space between search bar and button */ padding: 5px; background-color: #f3f3f3; /* Light background color */ border-radius: 8px; /* Rounded edges */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */ } /* Search bar styling */ .search-bar { flex: 1; /* Take all available width */ padding: 1px 5px; font-size: 16px; border: 2px solid #ccc; /* Light border */ border-radius: 6px; /* Rounded edges */ outline: none; transition: border-color 0.3s ease, box-shadow 0.3s ease; } /* Focused state for search bar */ .search-bar:focus { border-color: rgb(255, 153, 0); /* Highlight border */ box-shadow: 0 0 6px rgba(255, 153, 0, 0.5); /* Glowing effect */ } /* Search button styling */ .search-button { background-color: rgb(255, 153, 0); /* Amazon-style orange */ border: none; border-radius: 6px; /* Match the search bar */ padding: 10px 15px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background-color 0.3s ease, transform 0.2s ease; } /* Search button hover effect */ .search-button:hover { background-color: rgb(255, 102, 0); /* Darker orange */ transform: scale(1.05); /* Slight enlargement */ } /* Search button active effect */ .search-button:active { transform: scale(1); /* Reset size */ } /* Search icon styling */ .search-icon { width: 20px; height: 20px; filter: brightness(0) invert(1); /* Make the icon white */ } .quantity-input { width: 40px; display: none; } .save-quantity-link { display: none; } .is-editing-quantity .quantity-input { display: initial; } .is-editing-quantity .save-quantity-link { display: initial; } .is-editing-quantity .update-quantity-link { display: none; }