/* styles.css */

/* Reset */
html, body {
  margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden;
  font-family: Arial, sans-serif;
}

#v3d-container {
  /*pointer-events: none; */
  width: 100%; height: 100%;
  position: absolute; top: 0; left: 0; z-index: 0;
}

#v3d-container canvas {
  pointer-events: auto;
}

/* Control Panel */
#controlPanel {
  position: fixed; bottom: 0; left: 0; width: 100%; height: 60px;
  background: #222; display: flex; align-items: center;
  padding: 0 12px; gap: 12px; z-index: 100;
}

button {
  padding: 8px 16px; background: #0078ff; border: none;
  color: #fff; border-radius: 4px; cursor: pointer; font-size: 14px;
}

/* Popup Overlay */
#popupOverlay {
  position: fixed;
  inset: 0;
  display: block;
  z-index: 1000;
  pointer-events: none; 
}

#popupBox {
  font-family: Arial, sans-serif;
  font-size: 12px;
  color: #4d4d4d;
  position: absolute; top: 15px; left: 15px;
  width: 90vw; max-width: 170px;   /* max-width: 150px <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<  */ 
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(6px);
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,.25);
  pointer-events: auto;
}

/* Close button (store only) */
#popupCloseCircle {
  display: none; 
  position: absolute; top: 8px; right: 8px;
  width: 28px; height: 28px;
  background: rgba(0,0,0,0.15); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-weight: bold; font-size: 16px; color: #4d4d4d;
  line-height: 10px; z-index: 10;
}

/*
#popupCloseCircle {
  position: static;    
  width: 28px;
  height: 28px;
  background: rgba(0,0,0,0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-weight: bold;
  font-size: 16px;
  color: #4d4d4d;
}*/

/* Mall Logo */
#mallLogo {
  width: 90%;          /* control size here */
  height: auto;        /* keeps proportions */
  display: block;
  margin: 0 auto 10px; /* center it */
}

/* Search */
#storeSearch {
  display: block;
  width: 100%;
  box-sizing: border-box;  /* VERY IMPORTANT */
  padding: 6px;
  font-size: 13px;
  border-radius: 4px;
  border: 1px solid #ccc;
  margin-bottom: 6px;
}

#storeHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;   /* vertically align with title */
  margin-bottom: 6px;
}

#searchResults {
  position: absolute;       /* position relative to input */
  top: 100%;                /* right below the input */
  left: 0;
  width: 100%;
  background: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  max-height: 150px;        /* 200px scroll if needed */
  overflow-y: auto;
  z-index: 100;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  display: none;            /* hide by default */
}

#searchResults div {
  cursor: pointer;
  padding: 4px 0;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}

#popupSeparator {
  width: 100%;
  height: 1px;
  background: rgba(0,0,0,0.15);
  margin: 6px 0 8px 0;
}

#hoursLabel {
  font-weight: bold;     /* makes "Hours" bold */
  font-size: 14px;       /* same size as before */
  margin-bottom: 4px;    /* space below the label for clarity */
}



#storeMeta {
  margin-top: 8px;
  font-size: 14px;
  
}

#storeMeta .metaRow {
  margin-bottom: 20px;  /* space between phone / other rows if you have more */
}

#popupImg {
  width: 50%;        /* or less if you want */
  max-height: 120px;  /* control image height */
  object-fit: contain; /* keep proportions */
  margin-bottom: 15px; /* spacing below image --------------------------------------------------  */
  display: block;     /* ensure it’s visible */
}

.metaRow {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0;
}

.metaIcon {
  width: 16px;        /* icon size */
  height: 16px;
  object-fit: contain; /* maintain aspect ratio */
}

#storePhone {
  color: #4d4d4d;
  text-decoration: none;
  font-weight: bold;
  cursor: default;
  display: inline-block;  /* better than flex */
  line-height: 1.2;       /* match icon */
}

#hoursText {
  font-weight: normal;  /* actual hours are normal */
  margin: 0;             /* remove extra spacing */
  padding: 0;
}


#fullscreen-button {
  position: fixed;
  pointer-events: auto;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  background: rgba(0, 0, 0, 0.5) url('fullscreen-icon.png') no-repeat center center;
  background-size: 60%; /* scale the icon */
  border-radius: 4px;
  cursor: pointer;
  z-index: 200;
}

.hourLine {
  margin: 0 0 6px 0;   /* bottom spacing between lines */
  font-size: 13px;   /* slightly smaller than 14px */
}

.hourLine:last-child {
  margin-bottom: 0;    /* removes extra space after last line */
}




.metaLabel {
  font-size: 14px;
  display: inline-block;    /* ensures it has width/height */
  vertical-align: middle;
  margin-right: 4px;
}

.metaLabel::before {
  content: "📞";
  color: #2dc01a;
  font-size: 16px;
  display: inline-flex;      /* changed from inline-block */
  align-items: center;       /* vertically center with text */
  line-height: 1;            /* prevent extra spacing */
  vertical-align: middle;
}

.openStatus {
  color: #0a8f3c;
  font-weight: bold;
}

#storePageBtn {
  margin-top: 8px;
  width: 100%;
  padding: 8px;
  background: #537158;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
}

#descContainer {
  display: flex;
  align-items: center;
  gap: 6px; /* space between desc, divider, and square */
  margin-bottom: 24px; /* optional spacing below ------------------------------------------  */
}

#popupDesc {
  display: inline-block;
  font-size: 14px;
  color: #4d4d4d;
}

.descDivider {
  font-weight: bold;
  color: #999;
}

#popupColorSquare {
  width: 10px;          /* your desired square size */
  height: 10px;
  border-radius: 2px;   /* small rounded corners, optional */
  background-color: gray; /* default color, will be set by JS */
}


.openStatus {
  font-weight: bold;
}

.openStatus:contains("Closed") {
  color: #c0392b;
}


/* Store Content */
/*#storeContent img { width: 100%; height: 80px; object-fit: contain; margin-bottom: 4px; }*/
/*#storeContent img { display:none; }*/

#storeContent h2 {
  margin: 0 0 0px; /* smaller bottom margin                                 between  tittle and description */
}
#storeContent p {
  margin: 0 0 5px; /* keep bottom margin for                             spacing below hours  */
}

/* Collapsible Hours */
#hoursContainer { margin-top: 6px; font-size: 14px; color: #4d4d4d; }
#hoursHeader {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
  font-weight: bold;  /* make "Hours" bold */
 }
#hoursArrow { transition: transform 0.2s ease; }
#hoursHeader.open #hoursArrow { transform: rotate(180deg); }
#hoursContent {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: 
    max-height 0.35s ease,
    opacity 0.25s ease,
    margin-top 0.25s ease;
  margin-top: 0;
  padding-bottom: 0;
}

#hoursHeader.open + #hoursContent {
  max-height: 200px;   /* big enough for your content */
  opacity: 1;
  margin-top: 6px;     /*  space when opened */
}



/* ---------- MOBILE: 50% WIDTH ---------- */
@media (max-width: 768px) {
  #popupBox {
    width: 50vw;   max-width: 90px;       /* half the screen width */
    /*max-width: 50vw; 
    left: 15%; */
     /* transform: translateX(-50%);  center horizontally */
    transform: none; /* remove centering */
  }
.metaRow {
    flex-direction: column;      /* stack items vertically */
    align-items: flex-start;     /* align left (or center if you want) */
    gap: 2px;                    /* smaller gap vertically */
  }

  .metaIcon {
    margin-bottom: 2px;          /* optional spacing between icon and text */
  }

  #storePhone {
     font-size: 12px;             /* smaller text for mobile */
    white-space: normal;          /* allow wrapping */
    word-break: break-word;       /* prevent overflow */
  }
    /* Make popup description smaller too */
  #popupDesc {
    font-size: 12px;             /* smaller description */
  }
  /* Optionally shrink title */
  #popupTitle {
    font-size: 14px;             /* smaller title */
  }
    /* Hours label and open/closed status */
  #hoursLabel, #storeStatus, #hoursText {
    font-size: 12px;  /* smaller text for mobile */
  }
  /* Hours arrow */
  #hoursArrow {
    font-size: 12px;  /* smaller arrow */
  }
  /* Button */
  #storePageBtn {
    font-size: 12px;  /* smaller button text */
    padding: 6px;     /* reduce padding for mobile */
  }
  #storeSearch {
  font-size: 10px;
}


}






</style>