/*.lightbox-overlay {*/
/*  position: fixed;*/
/*  top: 0;*/
/*  left: 0;*/
/*  width: 100%;*/
/*  height: 100%;*/
/*  background-color: rgba(0, 0, 0, 0.8);*/
/*  display: grid;*/
/*  place-items: center;*/

/*  opacity: 0;*/
/*  visibility: hidden;*/
/*  transition: opacity 0.3s ease, visibility 0.3s ease;*/
/*}*/

/*.lightbox-overlay.active {*/
/*  opacity: 1;*/
/*  visibility: visible;*/
/*}*/

/*.lightbox-container {*/
/*  background: white;*/
/*  border: 2px solid #ccccff;*/
/*  border-radius: 12px;*/
/*  box-shadow: 0 20px 40px rgba(114, 114, 255, 0.15);*/
/*  max-width: 500px;*/
/*  min-width: 320px;*/
/*  width: 90%;*/
/*  max-height: 90vh;*/
/*  margin-top: 100px;*/
/*  overflow-y: auto;*/
/*  position: relative;*/
/*  transform: scale(0.7);*/
/*  transition: transform 0.3s ease;*/
/*}*/

/* 
CONTAINER ACTIVE STATE
Purpose: Animates the lightbox appearing with a "pop" effect
*/
/*.lightbox-overlay.active .lightbox-container {*/
/*  transform: scale(1);*/
/*}*/

/* 
CLOSE BUTTON
Purpose: Provides a clear way to close the lightbox
Why absolute positioning: Allows it to float in the top-right corner
Custom: Uses primary color scheme
*/
/*.lightbox-close {*/
/*  position: absolute;*/
/*  top: 10px;*/
/*  right: 10px;*/
/*  background: #f8f9fa;*/
/*  border: none;*/
/*  font-size: 28px;*/
  /*color: white !important;*/
/*  color: #7272ff !important;*/
/*  background: white !important;*/
/*  width: 40px;*/
/*  height: 40px;*/
/*  border-radius: 50%;*/
/*  display: flex;*/
/*  align-items: center;*/
/*  justify-content: center;*/
/*  cursor: pointer;*/
/*  padding: 0;*/
/*  line-height: 1;*/
/*  transition: all 0.2s ease;*/
/*  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);*/
/*  z-index: 10;*/
/*}*/

/*.lightbox-close:hover {*/
/*  background: #7272ff !important;*/
/*  color: white !important;*/
/*  transform: scale(1.1);*/
/*}*/

/* 
CONTENT AREA
Purpose: Provides proper spacing inside the lightbox
Why padding: Creates breathing room around content
*/
/*.lightbox-content-wrapper {*/
/*  padding: 40px 30px 30px;*/
/*}*/

/* 
TITLE STYLING
Purpose: Makes the main heading stand out with brand colors
*/
/*.lightbox-content h2 {*/
/*  color: #7272ff;*/
/*  margin-bottom: 25px;*/
/*  font-size: 24px;*/
/*  font-weight: 700;*/
/*  text-align: center;*/
/*}*/

/* 
FORM STYLING
Purpose: Makes the form look professional and easy to use
Modern approach: Uses consistent spacing and visual hierarchy
Custom: Implements the #ccccff border color scheme
*/
/*.lightbox-form .form-group {*/
/*  margin-bottom: 20px;*/
/*}*/

/*.lightbox-form label {*/
/*  display: block;*/
/*  margin-bottom: 5px;*/
/*  font-weight: 600;*/
/*  color: #333;*/
/*}*/

/*.lightbox-form input[type="text"],*/
/*.lightbox-form input[type="email"],*/
/*.lightbox-form input[type="tel"],*/
/*.lightbox-form textarea {*/
/*  width: 100%;*/
/*  padding: 12px;*/
/*  border: 2px solid #ccccff;*/
/*  border-radius: 6px;*/
/*  font-size: 16px;*/
/*  transition: border-color 0.2s ease, box-shadow 0.2s ease;*/
/*  box-sizing: border-box;*/
/*}*/

/*.lightbox-form input:focus,*/
/*.lightbox-form textarea:focus {*/
/*  outline: none;*/
/*  border-color: #7272ff;*/
/*  box-shadow: 0 0 0 3px rgba(114, 114, 255, 0.1);*/
/*}*/

/* 
PLACEHOLDER STYLING
Purpose: Makes placeholder text more subtle and professional
*/
/*.lightbox-form input::placeholder,*/
/*.lightbox-form textarea::placeholder {*/
/*  color: #999;*/
/*  font-style: italic;*/
/*}*/

/* 
FORM ACTIONS
Purpose: Styles the submit and cancel buttons
Why flexbox: Allows easy alignment and spacing of buttons
Custom: Uses primary color for submit button
*/
/*.form-actions {*/
/*  display: flex;*/
/*  gap: 12px;*/
/*  margin-top: 25px;*/
/*  margin-bottom: 30px;*/
/*}*/

/*.form-submit {*/
  /*background-color: #7272ff;*/
/*  text-align: center;*/
  /*color: white;*/
  /*border: #5a4f7c !important;*/
  /*padding: 12px 24px;*/
  /*border-radius: 6px;*/
/*  cursor: pointer;*/
/*  font-weight: 600;*/
  /*transition: background-color 0.2s ease, transform 0.1s ease;*/
/*  flex: 1;*/
/*}*/

/*.form-submit:hover {*/
  /*background-color: #5555dd;*/
/*  transform: translateY(-1px);*/
/*}*/

/*.form-submit:active {*/
/*  transform: translateY(0);*/
/*}*/

/*.form-cancel {*/
/*  background-color: transparent;*/
/*  color: #666;*/
/*  border: 2px solid #ccccff;*/
/*  padding: 12px 24px;*/
/*  border-radius: 6px;*/
/*  cursor: pointer;*/
/*  font-weight: 600;*/
/*  transition: all 0.2s ease;*/
/*}*/

/*.form-cancel:hover {*/
/*  border-color: #7272ff;*/
/*  color: #7272ff;*/
/*  background-color: rgba(114, 114, 255, 0.05);*/
/*}*/

/* 
CONTACT DETAILS SECTION
Purpose: Displays additional contact information at the bottom
Design: Clean, organized layout with subtle styling
*/
/*.contact-details {*/
/*  border-top: 2px solid #ccccff;*/
/*  padding-top: 25px;*/
/*  margin-top: 20px;*/
/*}*/

/*.contact-details h3 {*/
/*  color: #7272ff;*/
/*  font-size: 18px;*/
/*  font-weight: 600;*/
/*  margin-bottom: 15px;*/
/*  text-align: center;*/
/*}*/

/*.contact-info {*/
/*  display: flex;*/
/*  flex-direction: column;*/
/*  gap: 10px;*/
/*}*/

/*.contact-item {*/
/*  display: flex;*/
/*  align-items: center;*/
/*  font-size: 14px;*/
/*  color: #555;*/
/*}*/

/*.contact-item strong {*/
/*  color: #333;*/
/*  min-width: 70px;*/
/*  margin-right: 10px;*/
/*}*/

/*.contact-item a {*/
/*  color: #7272ff;*/
/*  text-decoration: none;*/
/*  transition: color 0.2s ease;*/
/*}*/

/*.contact-item a:hover {*/
/*  color: #5555dd;*/
/*  text-decoration: underline;*/
/*}*/

/* 
RESPONSIVE DESIGN
Purpose: Ensures the lightbox works well on mobile devices
Why different padding: Mobile screens need tighter spacing
*/
/*@media (max-width: 768px) {*/
/*  .lightbox-container {*/
/*    width: 95%;*/
/*    min-width: auto;*/
/*  }*/
  
/*  .lightbox-content-wrapper {*/
/*    padding: 30px 20px 20px;*/
/*  }*/
  
/*  .form-actions {*/
/*    flex-direction: column;*/
/*  }*/
  
/*  .contact-info {*/
/*    gap: 12px;*/
/*  }*/
  
/*  .contact-item {*/
/*    flex-direction: column;*/
/*    align-items: flex-start;*/
/*    gap: 2px;*/
/*  }*/
  
/*  .contact-item strong {*/
/*    min-width: auto;*/
/*    margin-right: 0;*/
/*  }*/
/*}*/

/* 
TRIGGER BUTTON ENHANCEMENT
Purpose: Makes lightbox trigger buttons more discoverable
Optional: Add this class to buttons that open the lightbox for better UX
Custom: Uses brand colors for the hover effect
*/
/*.lightbox-trigger {*/
/*  position: relative;*/
/*  overflow: hidden;*/
  /*background-color: #7272ff !important;*/
  /*border-color: #7272ff !important;*/
/*}*/

/*.lightbox-trigger::after {*/
/*  content: '';*/
/*  position: absolute;*/
/*  top: 50%;*/
/*  left: 50%;*/
/*  width: 0;*/
/*  height: 0;*/
/*  background: rgba(204, 204, 255, 0.3);*/
/*  border-radius: 50%;*/
/*  transform: translate(-50%, -50%);*/
/*  transition: width 0.3s ease, height 0.3s ease;*/
/*}*/

/*.lightbox-trigger:hover {*/
  /*background-color: #5555dd !important;*/
  /*border-color: #5555dd !important;*/
/*}*/

/*.lightbox-trigger:hover::after {*/
/*  width: 300px;*/
/*  height: 300px;*/
/*}*/

/* 
ACCESSIBILITY ENHANCEMENTS
Purpose: Improves experience for users with disabilities
*/
/*.lightbox-overlay:focus {*/
/*  outline: 3px solid #7272ff;*/
/*  outline-offset: -3px;*/
/*}*/

/* 
LOADING STATE (Optional Enhancement)
Purpose: Shows a subtle loading state when form is being submitted
*/
/*.lightbox-form.loading .form-submit {*/
/*  background-color: #ccccff;*/
/*  cursor: not-allowed;*/
/*  position: relative;*/
/*}*/

/*.lightbox-form.loading .form-submit::after {*/
/*  content: '';*/
/*  position: absolute;*/
/*  top: 50%;*/
/*  left: 50%;*/
/*  width: 16px;*/
/*  height: 16px;*/
/*  margin: -8px 0 0 -8px;*/
/*  border: 2px solid transparent;*/
/*  border-top: 2px solid white;*/
/*  border-radius: 50%;*/
/*  animation: spin 1s linear infinite;*/
/*}*/

/*@keyframes spin {*/
/*  0% { transform: rotate(0deg); }*/
/*  100% { transform: rotate(360deg); }*/
/*}*/