/* Fullscreen modal overlay - shared by every fullscreen modal (floorplan/image viewer, virtual tour, my account,
   request access) so they all get the same backdrop. Kept identical to the copy in coordsUpdateStyle.css because
   login.php loads this file but not that one (index.php loads both). */
.fullScreenModalWindow,
.virtualTourModalWindow {
  display: none; /* Hidden by default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent black background */
  z-index: 200000; /* above #viewerController's bottom row buttons (99999), below .logoOverlay (300000) */
  overflow: hidden;
}
/* login.php's #requestAccessModal toggles visibility via classList.add/remove('open') instead of jQuery
   .show()/.hide() (which the index.php modals use, and which doesn't need this rule) - keep this so that
   still works. */
.fullScreenModalWindow.open,
.virtualTourModalWindow.open {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Modal card */
.myAccountModal-content {
  background: #fff;
  border-radius: 12px;
  width: 680px;
  max-width: 95vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}

/* Header */
.mac-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px 16px;
  border-bottom: 1px solid #eee;
}
.mac-title { font-size: 16px; font-weight: 600; color: #111; }
.mac-close {
  font-size: 20px; cursor: pointer;
  color: #888; line-height: 1; padding: 2px 6px;
  border-radius: 6px;
}
.mac-close:hover { background: #f3f3f3; color: #333; }

/* Body */
.mac-body { display: flex; flex: 1; overflow: hidden; }

/* Avatar panel */
.mac-avatar-panel {
  width: 180px; min-width: 180px;
  padding: 28px 18px;
  /*background: #f8f8f8;*/
  border-right: 1px solid #eee;
  display: flex; flex-direction: column;
  align-items: center; gap: 14px;
}
.mac-avatar {
  width: 88px; height: 88px;
  border-radius: 50%;
  background: #dbeafe;
  color: #1d4ed8;
  font-size: 28px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.mac-avatar-info { text-align: center; }
.mac-avatar-name  { margin: 0 0 2px; font-size: 14px; font-weight: 600; color: #111; }
.mac-avatar-username { margin: 0; font-size: 12px; color: #888; }

.mac-upload-btn {
  display: flex; align-items: center; gap: 6px;
  justify-content: center; width: 100%;
  padding: 7px 0;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 12px; color: #555;
  cursor: pointer; background: #fff;
  box-sizing: border-box;
}
.mac-upload-btn:hover { background: #f0f0f0; }
.mac-upload-btn input[type="file"] { display: none; }

.mac-role-badge {
  font-size: 11px;
  padding: 4px 12px;
  border-radius: 20px;
  background: #fef3c7; color: #92400e;
  font-weight: 500;
}

/* Form panel */
.mac-form-panel {
  flex: 1; padding: 24px;
  overflow-y: auto;
}
.mac-section-label {
  margin: 0 0 16px;
  font-size: 11px; font-weight: 600;
  color: #888; letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mac-field { display: flex; flex-direction: column; gap: 5px; }
.mac-field.full-width { margin-bottom: 14px; }
.mac-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; margin-bottom: 14px; }

.mac-field label { font-size: 12px; color: #666; font-weight: 500; }
.mac-field input {
  padding: 8px 10px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px; color: #111;
  outline: none; transition: border-color 0.15s;
}
.mac-field input:focus { border-color: #6366f1; }
.mac-field input:disabled {
  background: #f5f5f5; color: #aaa;
  cursor: not-allowed; border-color: #e5e5e5;
}
.mac-hint { 
	margin: 6px 0 0; 
	/*
	font-size: 11px; color: #aaa;
	*/
}

/* Footer */

.mac-btn-cancel {
  padding: 8px 18px; border-radius: 8px;
  border: 1px solid #d1d5db;
  background: #fff; font-size: 14px; color: #555;
  cursor: pointer;
}
.mac-btn-cancel:hover { background: #f3f3f3; }
.mac-btn-save {
  padding: 8px 20px; border-radius: 8px;
  border: 1px solid #4f46e5;
  background: #4f46e5; color: #fff;
  font-size: 14px; font-weight: 500;
  cursor: pointer;
}
.mac-btn-save:hover { background: #4338ca; }

/* Base avatar circle */
.mac-avatar {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: #dbeafe;
    color: #1d4ed8;
    font-size: 28px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;              /* clips the image to the circle */
    border: 2px solid #e5e7eb;
    position: relative;
}

/* Image inside avatar — fills circle, no stretching */
.mac-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;             /* crops to fill, never stretches */
    object-position: center top;   /* favour face over chest on portrait shots */
    display: block;                /* removes inline baseline gap */
    border-radius: 50%;            /* belt-and-suspenders for some browsers */
    image-rendering: -webkit-optimize-contrast;  /* sharper on high-DPI screens */
    image-rendering: crisp-edges;
}

.mac-footer {
    display: flex;
    justify-content: space-between;   /* logout left, cancel+save right */
    align-items: center;
    gap: 10px;
    padding: 4px 24px;
    border-top: 1px solid #eee;
    background: #f8f8f8;
}

.mac-footer-actions {
    display: flex;
    gap: 10px;
}

.mac-btn-logout {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid #fca5a5;
    background: #fff;
    color: #dc2626;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.mac-btn-logout:hover {
    background: #fef2f2;
    border-color: #dc2626;
}