/* Review Form Style */

html{font-size: 16px; font-family: "Montserrat", sans-serif; min-height: 100vh; min-width: 100%; background: #ecf1f1;}
body{text-align: center; width: 100%; background: transparent !important;}
h1{display: inline-block; margin-top: 60px; margin: 60px auto 20px; color: #0d3934;}
p{margin: 40px auto 8px; font-weight: 700; text-align: left; color: #0d3934;}

.product-info-container{margin: 40px auto 20px;}
.product-info-container #product-link{text-decoration: none; font-size: 1.25rem; font-weight: 700; color: #0d3934;}
.product-info-container #product-link #product-title{text-decoration: none; color: #0d3934; font-size: 1em; font-weight: 500; display: contents;}

.container{max-width: 768px; margin: 40px auto;}
.container input{background: #f9f9f9; border-width: 0; padding: 10px; width: calc(100% - 20px); font-size: 1rem; color: #333; letter-spacing: 0.5px;}
.container input[type="submit"]{width: 100%; margin-top: 40px; cursor: pointer; transition: 0.5s; padding: 16px 0 14px; color: #0d3934; font-weight: 700;}
.container input[type="submit"]:hover{background: #0d3934; color: #fff; border-radius: 25px;}
.container input#images{padding: 20px 10px 10px}
.container textarea{width: calc(100% - 20px); border-width: 0; padding:10px; font-size: 1rem; font-family: "Montserrat"; resize: none; #f9f9f9}
#uploadForm{max-width: 640px; margin: auto;}

.thumbnail-container { display: flex; flex-wrap: wrap; gap: 10px; padding: 10px 20px 20px; background: #f9f9f9;}     
.thumbnail { position: relative; width: 120px; height: 120px; border: 1px solid #ccc; border-radius: 5px; overflow: hidden;}
.thumbnail img { width: 100%; height: 100%; object-fit: cover;}
.remove-icon { position: absolute; top: 5px; right: 5px; background: red; color: white; border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 12px;}

.star-rating { font-size: 0; white-space: nowrap; display: inline-block; width: 250px; height: 50px; overflow: hidden; position: relative; background-size: contain !important; background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjREREREREIiBwb2ludHM9IjEwLDAgMTMuMDksNi41ODMgMjAsNy42MzkgMTUsMTIuNzY0IDE2LjE4LDIwIDEwLDE2LjU4MyAzLjgyLDIwIDUsMTIuNzY0IDAsNy42MzkgNi45MSw2LjU4MyAiLz48L3N2Zz4='); }
.star-rating i { opacity: 0; position: absolute; left: 0; top: 0; height: 100%; width: 20%; z-index: 1; background-size: contain !important; background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjRkZERjg4IiBwb2ludHM9IjEwLDAgMTMuMDksNi41ODMgMjAsNy42MzkgMTUsMTIuNzY0IDE2LjE4LDIwIDEwLDE2LjU4MyAzLjgyLDIwIDUsMTIuNzY0IDAsNy42MzkgNi45MSw2LjU4MyAiLz48L3N2Zz4=');}
.star-rating input { -moz-appearance: none; -webkit-appearance: none; opacity: 0; display: inline-block; width: 20%; height: 100%; margin: 0; padding: 0; z-index: 2; position: relative;}
.star-rating input:hover+i, .star-rating input:checked+i {  opacity: 1; }
.star-rating i~i { width: 40%; }
.star-rating i~i~i { width: 60%; }
.star-rating i~i~i~i { width: 80%; }
.star-rating i~i~i~i~i { width: 100%; }
.mt-3{margin-top: 5px;}