 /* Variables */
 :root {
     --primary-green: #00583d;
     --light-green: #007c56;
     --dark-green: #003f2c;
     --pale-green: #e6f2ef;
     --green-gradient-start: #00583d;
     --green-gradient-end: #007c56;
     --accent-green: #00a67e;
     --light-mint: #e6f2ef;
     --dark-mint: #007c56;
 }

 .store-drawer-container {
     position: fixed;
     inset: 0;
     display: none;
     z-index: 9999;
 }

 .store-drawer-container.active {
     display: block;
 }

 .store-drawer__overlay {
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, 0.5);
     opacity: 0;
     transition: opacity 0.3s ease;
 }

 .store-drawer {
     position: fixed;
     top: 0;
     right: -550px;
     width: 550px;
     max-width: 87%;
     height: 100vh;
     background: #fff;
     display: flex;
     flex-direction: column;
     box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
     transition: right 0.3s ease;
     overflow-y: auto;
     /* font-family: poppins; */
 }

 .store-drawer-container.active .store-drawer__overlay {
     opacity: 1;
 }

 .store-drawer-container.active .store-drawer {
     right: 0;
 }

 .store-drawer__header {
     padding-left: 24px;
     padding-right: 24px;
     background: linear-gradient(to right, var(--green-gradient-start), var(--green-gradient-end));
     color: white;
 }

 .store-drawer__title {
     font-size: 24px;
     font-weight: 600;
     margin-bottom: 8px;
     color: whitesmoke;
     /* font-family: poppins; */
 }

 .store-drawer__subtitle {
     font-size: 16px;
     opacity: 0.9;
 }

 .store-drawer__close {
     position: absolute;
     top: 24px;
     right: 24px;
     cursor: pointer;
     width: 24px;
     height: 24px;
     color: white;
 }

 .store-drawer__search-container {
     padding: 16px;
     border-bottom: 1px solid #eee;
     display: flex;
     gap: 8px;
 }

 .store-drawer__search-wrapper {
     position: relative;
     flex-grow: 1;
 }

 .store-drawer__search-icon {
     position: absolute;
     left: 16px;
     top: 55%;
     transform: translateY(-50%);
     color: #9ca3af;
 }

 .store-drawer__search-input {
     width: 100%;
     padding: 12px 12px 12px 40px;
     border: 1px solid #e5e7eb;
     border-radius: 8px;
     font-size: 14px;
     outline: none;
 }

 .store-drawer__search-input:focus {
     border-color: var(--primary-green);
     box-shadow: 0 0 0 2px rgba(0, 88, 61, 0.2);
 }

 .store-drawer__filter-button {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 40px;
     height: 40px;
     background-color: var(--pale-green);
     border: none;
     border-radius: 8px;
     cursor: pointer;
     color: var(--primary-green);
 }

 .store-drawer__filter-button.active {
     background-color: var(--pale-green);
     color: var(--primary-green);
 }

 .store-drawer__filter-button:hover:not(.active) {
     background-color: #d7e9e4;
 }

 .store-drawer__filters {
     padding: 16px;
     background-color: #f9fafb;
     border-bottom: 1px solid #e5e7eb;
     display: none;
 }

 .store-drawer__filters.active {
     display: block;
 }

 .store-drawer__filter-chips {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
 }

 .store-drawer__filter-chip {
     padding: 6px 16px;
     background-color: #f3f4f6;
     color: #4b5563;
     border: none;
     border-radius: 9999px;
     font-size: 14px;
     font-weight: 500;
     cursor: pointer;
 }

 .store-drawer__filter-chip:hover {
     background-color: #e5e7eb;
 }

 .store-drawer__filter-chip.active {
     background-color: var(--pale-green);
     color: var(--dark-green);
 }

 .store-drawer__list {
     padding: 16px;
     overflow-y: auto;
     flex-grow: 1;
 }

 .store-list {
     display: flex;
     flex-direction: column;
     gap: 16px;
 }

 .store-item {
     border-radius: 8px;
     overflow: hidden;
     transition: all 0.2s ease;
     cursor: pointer;
     border: 1px solid #e5e7eb;
 }

 .store-item:hover:not(.selected) {
     border-color: #b3d4c7;
 }

 .store-item.selected {
     border: 2px solid var(--primary-green);
 }

 .store-item__content {
     padding: 16px;
 }

 .store-item__header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 12px;
 }

 .store-item__name-wrapper {
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .store-item__availability-dot {
     width: 8px;
     height: 8px;
     border-radius: 50%;
 }

 .store-item__availability-dot.available {
     background-color: #10b981;
 }

 .store-item__availability-dot.unavailable {
     background-color: #f59e0b;
 }

 .store-item__name {
     font-weight: 500;
     color: #111827;
     font-size: 16px;
 }

 .store-item__actions {
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .store-item__favorite {
     color: #f59e0b;
     fill: #f59e0b;
 }

 /* New styles for the warehouse button */
 .store-item__warehouse-button {
     padding: 6px 12px;
     border-radius: 6px;
     font-size: 12px;
     font-weight: 500;
     border: none;
     cursor: pointer;
     white-space: nowrap;
     transition: all 0.2s ease;
 }

 .store-item__warehouse-button.set {
     background-color: var(--pale-green);
     color: var(--primary-green);
 }

 .store-item__warehouse-button.set:hover {
     background-color: #d7e9e4;
 }

 .store-item__warehouse-button.selected {
     background-color: var(--primary-green);
     color: white;
 }

 .store-item__address-line {
     display: flex;
     align-items: flex-start;
     font-size: 14px;
     color: #4b5563;
     margin-bottom: 6px;
     gap: 4px;
 }

 .store-item__address-icon {
     flex-shrink: 0;
     margin-top: 2px;
     color: #6b7280;
 }

 .store-item__city {
     font-size: 14px;
     color: #6b7280;
     margin-bottom: 12px;
     margin-left: 20px;
     /* Align with address icon */
 }

 .store-item__footer {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-top: 12px;
 }

 .store-item__tags {
     display: flex;
     align-items: center;
     gap: 12px;
 }

 .store-item__tag {
     padding: 2px 8px;
     border-radius: 4px;
     font-size: 12px;
 }

 .store-item__tag.inStock {
     background-color: #d1fae5;
     color: #065f46;
 }

 .store-item__tag.lowStock {
     background-color: #fef3c7;
     color: #92400e;
 }

 .store-item__tag.notAvailable {
     background-color: #f7f7f7;
     color: #6b7280;
 }

 .store-item__distance {
     font-size: 12px;
     color: #6b7280;
     margin-left: auto;
 }

 .store-item__view-map {
     font-size: 12px;
     color: var(--primary-green);
     display: flex;
     align-items: center;
     background: none;
     border: none;
     cursor: pointer;
     padding: 0;
 }

 .store-item-detail-toggle {
     display: flex;
     font-size: 12px;
     color: var(--primary-green);
     display: flex;
     cursor: pointer;
     margin-left: auto;
 }

 .store-item__view-map:hover {
     color: var(--dark-green);
 }

 .store-item__view-map-icon {
     margin-top: 2px;
     margin-right: 4px;
     color: var(--primary-green);
 }

 .store-item__selected-footer {
     padding: 12px 16px;
     background-color: var(--pale-green);
     border-top: 1px solid #b3d4c7;
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .store-item__selected-text {
     font-size: 14px;
     color: var(--dark-green);
 }

 .store-item__confirm-button {
     padding: 6px 16px;
     background-color: var(--primary-green);
     color: white;
     border: none;
     border-radius: 6px;
     font-size: 14px;
     font-weight: 500;
     cursor: pointer;
 }

 .store-item__confirm-button:hover {
     background-color: var(--dark-green);
 }

 .store-drawer__footer {
     padding: 16px;
     background-color: #f9fafb;
     border-top: 1px solid #e5e7eb;
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .store-drawer__view-map {
     font-size: 14px;
     color: #4b5563;
     background: none;
     border: none;
     cursor: pointer;
     padding: 0;
 }

 .store-drawer__view-map:hover {
     color: #111827;
 }

 .store-drawer__set-store {
     padding: 8px 24px;
     border-radius: 8px;
     font-weight: 500;
     border: none;
     cursor: pointer;
 }

 .store-drawer__set-store.active {
     background-color: var(--primary-green);
     color: white;
 }

 .store-drawer__set-store.active:hover {
     background-color: var(--dark-green);
 }

 .store-drawer__set-store.disabled {
     background-color: #e5e7eb;
     color: #9ca3af;
     cursor: not-allowed;
 }

 .store-item__map {
     height: 0;
     overflow: hidden;
     transition: height 0.3s ease-in-out;
 }

 .store-item__map.expanded {
     height: 200px;
     margin-top: 12px;
 }

 .store-item__map iframe {
     width: 100%;
     height: 100%;
     border: none;
     border-radius: 4px;
 }

 .store-item__detail {
     height: 0;
     overflow: hidden;
     transition: height 0.3s ease-in-out;
 }

 .store-item__detail.expanded {
    height: fit-content;
     margin-top: 15px;
 }

 /* Loading animation styles */
 .store-loading {
     padding: 15px;
 }

 .store-loading-item {
     padding: 15px;
     margin-bottom: 15px;
     border-radius: 8px;
     background: #fff;
     border: 1px solid #e5e7eb;
 }

 .loading-animation {
     background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
     background-size: 200% 100%;
     animation: shimmer 1.5s infinite;
 }

 .loading-header {
     display: flex;
     justify-content: space-between;
     margin-bottom: 12px;
 }

 .loading-line {
     height: 15px;
     border-radius: 4px;
     margin-bottom: 10px;
 }

 .loading-circle {
     width: 20px;
     height: 20px;
     border-radius: 50%;
 }

 .loading-line.title {
     width: 60%;
     height: 20px;
 }

 .loading-line.address {
     width: 90%;
 }

 .loading-line.city {
     width: 70%;
 }

 .loading-footer {
     display: flex;
     justify-content: space-between;
     margin-top: 16px;
 }

 .loading-tag {
     width: 60px;
     height: 20px;
     border-radius: 9999px;
 }

 .loading-button {
     width: 80px;
     height: 24px;
     border-radius: 4px;
 }

 @keyframes shimmer {
     0% {
         background-position: 200% 0;
     }

     100% {
         background-position: -200% 0;
     }
 }

 /* Error state styles */
 .store-error {
     padding: 20px;
     text-align: center;
     color: #dc3545;
     background: #fff;
     border-radius: 8px;
     margin: 15px;
     border: 1px solid #f8d7da;
 }

 .store-error-icon {
     width: 40px;
     height: 40px;
     margin-bottom: 10px;
     display: inline-block;
 }

 .store-error-message {
     font-size: 16px;
     margin-bottom: 10px;
 }

 .store-error-action {
     background: none;
     border: 1px solid #dc3545;
     color: #dc3545;
     padding: 8px 16px;
     border-radius: 4px;
     cursor: pointer;
     margin-top: 10px;
 }

 .store-error-action:hover {
     background: #dc3545;
     color: #fff;
 }

 @media (max-width: 480px) {
     .store-drawer {
         width: 100%;
         right: -100%;
     }
 }