/* css/store_locator.css */
.locator-main {
   padding: 2rem 5%;
   background-color: #f9fafb;
}

.locator-container {
   display: grid;
   grid-template-columns: 1fr;
   gap: 2rem;
   max-width: 1400px;
   margin: 0 auto;
}

@media(min-width: 1024px) {
   .locator-container {
      grid-template-columns: 350px 1fr;
   }
}

.locator-sidebar {
   background-color: #fff;
   padding: 1.5rem;
   border: 1px solid #e5e7eb;
   height: fit-content;
}

.locator-sidebar h2 {
   font-family: 'Lora', serif;
   font-size: 1.5rem;
   font-weight: bold;
   color: #3c3737;
}

.locator-sidebar p {
   color: #3c3737;
   margin-top: 0.5rem;
}

.map-placeholder {
   width: 100%;
   height: 400px;
   background-color: #e5e7eb;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #3c3737;
   border: 1px solid #d1d5db;
}

.store-results-list {
   margin-top: 2rem;
}

.store-card {
   display: grid;
   grid-template-columns: 150px minmax(0, 1fr) 150px;    
   gap: 1.5rem;
   align-items: center;
   background-color: #fff;
   padding: 1.5rem;
   border: 1px solid #e5e7eb;
   margin-bottom: 0;
}

.store-image {
   width: 100%;
   height: 120px;
   object-fit: cover;
   border-radius: 0.25rem;
}

.store-info h3 {
   font-weight: 600;
   font-size: 1.125rem;
   color: #3c3737;
}

.store-info p {
   color: #3c3737;
   font-size: 0.875rem;
}

.store-hours {
    /* Le damos un ancho fijo y alineamos el texto a la derecha */
    width: 150px; 
    text-align: right;
    flex-shrink: 0; /* Evita que se encoja */
}

.store-hours h4 {
   font-weight: 600;
   color: #3c3737;
   text-transform: uppercase;
}

.store-hours p {
   font-size: 0.875rem;
   color: #3c3737;
}

.store-hours ul {
    list-style: none; /* Quitamos las viñetas por defecto */
    padding: 0;
    margin: 0;
}

.store-hours li {
    font-size: 0.875rem;
    color: #3c3737;
}

@media(min-width: 768px) {
   .store-card {
      grid-template-columns: 150px 1fr auto;
   }

   .store-image {
      width: 150px;
      height: 100px;
   }
}

.search-form {
   margin-top: 2rem;
   border-top: 1px solid #e5e7eb;
   padding-top: 1.5rem;
}

.form-group {
   margin-bottom: 1rem;
}

.form-group label {
   display: block;
   font-weight: 500;
   margin-bottom: 0.5rem;
}

.form-group input {
   width: 100%;
   padding: 0.5rem 0.75rem;
   border: 1px solid #d1d5db;
   border-radius: 0.375rem;
}

.search-button {
   width: 100%;
   background-color: #3f1e1f;
   color: white;
   font-weight: bold;
   padding: 0.75rem;
   border: none;
   border-radius: 0.5rem;
   cursor: pointer;
   transition: background-color 0.2s ease;
}

.search-button:hover {
   background-color: #2c1516;
}