/* userAccount.css */

/* The modal panel that appears when the user clicks the settings (cog) icon */
.user-modal {
  position: absolute;
  top: 70px; /* Increased top to give more space from header */
  right: 15px; /* Increased right for better spacing */
  width: 320px; /* Slightly wider */
  background: var(--neutral-50, #f8fafc); /* Use CSS variable for background */
  border: 1px solid var(--neutral-200, #e2e8f0); /* Softer border color */
  border-radius: 0.75rem; /* Larger border radius for a softer look */
  box-shadow: var(--shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1)); /* Enhanced shadow */
  padding: 1.5rem; /* Increased padding */
  z-index: 1000;
  display: none;
  color: var(--neutral-700, #334155); /* Default text color for the modal */
}

#userAccountMessage {
  margin-top: 1rem; /* Increased margin */
  padding: 0.75rem; /* Increased padding */
  border-radius: 0.375rem; /* Consistent with other elements */
  text-align: center;
  font-size: 0.9rem;
  display: none; /* Hidden by default */
  /* Specific message styles (e.g., error, success) can be added here or via JS */
}

.user-modal.active {
  display: block;
  animation: fadeInScaleModal 0.2s ease-out forwards; /* Add subtle animation */
}

/* Keyframes for modal animation */
@keyframes fadeInScaleModal {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Styling for text inside the modal */
.user-modal h3 {
  font-size: 1.35rem; /* Slightly larger */
  margin-top: 0; /* Remove default top margin */
  margin-bottom: 1rem; /* Increased bottom margin */
  color: var(--primary-dark, #1e40af);
  font-weight: 600; /* Ensure heading is bold */
}

.user-modal p {
  font-size: 0.95rem; /* Slightly larger paragraph text */
  margin-bottom: 0.65rem; /* Adjusted margin */
  line-height: 1.6; /* Improved line height for readability */
  color: var(--neutral-700, #334155);
}

.user-modal p strong {
  font-weight: 500; /* Medium weight for strong text */
  color: var(--neutral-700, #334155); /* Ensure strong text also uses variable */
}

/* Links within the modal */
.user-modal .user-links a,
.user-modal .user-enterprise-options a {
  color: var(--primary, #2563eb);
  text-decoration: none;
  transition: color 0.2s ease;
}

.user-modal .user-links a:hover,
.user-modal .user-enterprise-options a:hover {
  color: var(--primary-dark, #1e40af);
  text-decoration: underline;
}

.user-modal .user-links p,
.user-modal .user-enterprise-options p {
    margin-bottom: 0.75rem; /* Spacing for link paragraphs */
}


/* Enterprise-specific options */
.user-enterprise-options {
  margin-top: 1.5rem; /* Increased margin */
  padding-top: 1.5rem; /* Increased padding */
  border-top: 1px solid var(--neutral-200, #e2e8f0);
  display: none;
}

.user-enterprise-options.active {
  display: block;
}

.user-enterprise-options h4 {
  font-size: 1.1rem; /* Style for subheadings like "Enterprise Options" */
  color: var(--primary-dark, #1e40af);
  margin-bottom: 0.75rem;
  font-weight: 600;
}


/* Subscription details section */
.user-subscription-details {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--neutral-200, #e2e8f0);
}

.user-subscription-details h4 {
    font-size: 1.1rem;
    color: var(--primary-dark, #1e40af);
    margin-bottom: 0.75rem;
    font-weight: 600;
}

.user-subscription-details p span {
    color: var(--neutral-700, #334155); /* Ensure spans also inherit color */
    font-weight: 500;
}


/* Input and Button styling (if used within this specific modal - currently not) */
.user-input {
  width: 100%;
  padding: 0.6rem; /* Adjusted padding */
  border: 1px solid var(--neutral-300, #cbd5e1); /* Slightly darker border for inputs */
  margin-bottom: 0.75rem; /* Adjusted margin */
  border-radius: 0.375rem; /* Rounded corners */
  box-sizing: border-box; /* Ensure padding doesn't expand width */
  transition: border-color 0.2s ease;
}
.user-input:focus {
  outline: none;
  border-color: var(--primary, #2563eb);
  box-shadow: 0 0 0 2px var(--primary-light, #60a5fa);
}

.user-btn {
  width: 100%;
  padding: 0.75rem; /* Larger padding for buttons */
  background-color: var(--primary, #2563eb);
  color: #fff;
  border: none;
  border-radius: 0.375rem; /* Rounded corners */
  cursor: pointer;
  font-weight: 500; /* Button text weight */
  transition: background-color 0.2s ease;
}

.user-btn:hover {
  background-color: var(--primary-dark, #1e40af);
}

/* Close button styles (already added in the previous step, shown for completeness) */
.user-close-modal {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: var(--neutral-700, #334155);
  font-size: 1.5rem;
  line-height: 1;
  padding: 0;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.user-close-modal:hover {
  background-color: var(--neutral-100, #f1f5f9);
  color: var(--primary-dark, #1e40af);
}

.user-close-modal:focus {
  outline: 2px solid var(--primary-light, #60a5fa);
  outline-offset: 2px;
}