/*
 * boxes.css
 * Theme-specific styles for boxes (Light Theme).
 * Structural styles are imported from box-common.css (or should be included in HTML).
 */

.box {
  background: #efe9f5;
  padding: 0.875rem;
  border-radius: 0.75rem;
  box-shadow: 0 8px 22px rgba(91,64,46,0.06);
  border: 1px solid rgba(107,79,59,0.12);
  transition: transform .18s cubic-bezier(.2,.9,.2,1), box-shadow .18s;
}

.box h3 { margin: 0 0 0.5rem 0; font-size: 1rem; color: #3b2f2f; }
.box .muted {
  color: #6b5a4a;
  font-size: 0.95rem;
  margin: 0;
}

.box:hover, .box:focus-within { transform: translateY(-0.375rem); box-shadow: 0 18px 40px rgba(2,6,23,0.08); }

.box.selected { position: relative; z-index: 110; transform: translateY(-0.375rem); border: 0.125rem solid #0b6bff; pointer-events: none; }


/* modal/overlay for showing details */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 1000; display: none; }
.overlay[aria-hidden="false"] { display: block; }

/* Hide modal by default; show only when aria-hidden is false. Modal must sit
   above the overlay so its content remains interactive and visible. */
.modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: 1100; }
.modal[aria-hidden="false"] { display: flex; pointer-events: auto; }

.modal-inner {
  background: #FBF5EE;
  color: #111;
  border-radius: 0.625rem;
  padding: 1.125rem;
  max-width: 61.25rem;
  width: 92%;
  box-shadow: 0 14px 40px rgba(2,6,23,0.12);
  position: relative;
  z-index: 1101; /* ensure it paints above overlay */
}

/* Make the close control highly visible across themes and ensure it's clickable */
.modal-close {
  position: absolute;
  right: 0.75rem;
  top: 0.75rem;
  border: 0;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 1.125rem;
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1101;
}

/* light variant when modal-inner is dark-themed (useful for home2.css) */
.modal-inner.dark-theme .modal-close {
  background: rgba(255,255,255,0.08);
  color: #eef6ff;
}