html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  background-color:#fff;
  color:#000; margin: 0; padding: 0;}
.container-1{width: 100%; height: auto;}
.container-2{width:100%; max-width: 810px; background-color:none; height:auto; margin-left: auto;
  margin-right: auto;}
.content{width: 70%; max-width: 100%; height:auto; background-color:none; margin-left: auto; margin-right: auto;}
.back-link-container {margin: 15px 0; text-align: left;}
.back-link {color: #449666; text-decoration: none; font-size: 16px; font-weight: 500;
    transition: color 0.3s ease;}
.back-link:hover {color: #3d865d; text-decoration: underline;}
/* You can also use a simple arrow */
.back-link::before {content: '\2190'; margin-right: 5px;}
.product-header {display: flex; align-items: center; justify-content: space-between;}
.order-name-container{margin-bottom: 10px;}
.status-badge {padding: 4px 8px; border-radius: 4px; font-size: 14px; font-weight: bold; margin-left: 10px;}
.status-badge.available {background-color: #28a745; color: #fff;}
.status-badge.sold-out {background-color: #dc3545; /* Red */color: #fff; }
.posted-time {font-size: 14px; color: #666; margin-top: 10px; font-style: italic; text-align: right; /* Aligns the text to the right side */
    border-top: 1px solid #eee; padding-top: 10px;}
.adimages-slide { display: flex; overflow-x: auto; white-space: nowrap; padding: 0; list-style: none;
    margin: 10px auto; max-width: 400px;}
.adimages-slide li {flex-shrink: 0;  margin-right: 8px;}
.thumbnail-img {width: 80px; height: 80px; object-fit: cover; cursor: pointer; border: 1px solid #ddd; 
  transition: transform 0.2s ease;}
.thumbnail-img:hover {transform: scale(1.05);}
.thumbnail-slide a.active img {border: 2px solid #449666; padding: 2px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);}
/* Main image styling for reference */
.picture-wrapper {width: 90%; max-width: 400px; height: auto; margin: 0 auto 10px auto; overflow: hidden;}
.order-img {width: 100%; height: 250px; object-fit: contain; display: block; background-color: #f8f8f8;}
.small-video-container {width: 90%; max-width: 320px; height: 200px; margin: 20px auto;
  position: relative; overflow: hidden; }
.product-video {width: 100%; height: 100%; object-fit: cover; display: block;}
.order-name{font-size: 20px; font-weight: 300; margin: 0;}
.order-price{color: #45b77d; font-weight: 600; line-height:18px; font-size:24px;}
.greetings{font-size: 14px; line-height:21px; word-break: break-word;}
.social-links strong{margin-right: 20px;}
.social-links a{width: 32px; height: 32px; display: inline-block; border-radius: 50%;}
.fa{padding: 5px;}
.whatsapp{background-color:#449666; }
.facebook{background-color: #305891;}
.modal-form{background-color:#fff; height: auto;}
.form-header{font-size: 28px; color: #5e5e5e; text-align: center;}
table { width: 100%; padding: 0; margin: 0; height: auto; }
table tbody { height: 100%; }
table tr { height: auto; display: block; margin-bottom: 2px; }
table th { font-size: 14px; font-weight: 500; text-align: left; padding-bottom: 2px; }
table td { display: block; margin-bottom: 0px; }
.form-field { width: 100%; box-sizing: border-box; color: #555; height: 34px; padding: 5px; font-size: 14px; border: 1px solid #CED1D9; box-shadow: inset 0 1px 1px rgb(0 0 0 / .075); outline: none; margin: 0; }
.form-area-field { resize: none; height: 100%; }
.form-field-label { font-size: 12px; color: #a94442; }
.danger { color: #a94442; }
.submit-btn { background-color: #449666; border-radius: 6px; border: none; padding: 12px 24px; cursor: pointer; width: 100%; transition: background-color 0.3s ease; }
.submit-btn span { color: #fff; font-size: 14px; font-weight: 600; text-transform: uppercase; }
.submit-btn:hover { background-color: #3d865d; }
.hidden { display: none; }
.help{font-size:24px; margin-top:30px; text-align: center;}
a{text-decoration: none; color: inherit;}
.chat-btn-container{width: 100%; margin: 10px 0px; }
.chat-button{width: 295px; max-width: 100%; height: 48px; display: flex; margin-left: auto; margin-right: auto;}
.copy{font-size: 12px; text-align: center;}
.site-footer {padding-top: 80px; text-align: center;}
.footer-links {margin-bottom: 10px;}
.footer-links a {color: #5e5e5e; text-decoration: none; font-size: 14px; margin: 0 10px;}
.footer-links a:hover {text-decoration: underline;}
.message-area-success { background-color: #dcfce7; color: #16a34a; padding: 1rem; border-radius: 0.5rem; text-align: center; }
.message-area-error { background-color: #fee2e2; color: #dc2626; padding: 1rem; border-radius: 0.5rem; text-align: center; }
@media (max-width: 799px) {
  .content{width: 100%; padding: 0px 8px; box-sizing: border-box;} 
}