/* General Section Styles */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* Add this! */
}
.section1 {
  border: 2px solid gold; 
  border-radius: 8px;
  padding: 2px;
  background-color: #e8b009;
}

.section2 {
  border: 2px solid #8f0f03;
  border-radius: 8px;
  padding: 2px;
}

.section3 {
  border: 2px solid blue;
  border-radius: 8px;
  padding: 10px 10px 10px 10px;
}


.section4 {
  border: 2px solid #ff6f61; /* Vibrant coral border for emphasis */
  border-radius: 8px;        /* Soft rounded corners */
  padding: 20px 10px;        /* Adequate padding for content */
  margin: 10px 5px;          /* Space around the element */
  background-color: #ffe9e6; /* Soft coral background for contrast */
  color: #b71c1c;            /* Deep red text color for importance */
  font-weight: bold;         /* Bold text to draw attention */
  text-align: center;        /* Center the content */
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}


.section5 {
  border: 2px solid gold; 
  border-radius: 8px;
  padding: 2px;
  background-color: #34ba34;
}
/* Optional hover effect for interactivity */
.section4:hover {
  background-color: #ffd3d0; /* Slightly darker coral on hover */
  border-color: #e53935;     /* Deepen the border color */
  box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.15); /* Increase shadow intensity */
}

/* Printing adjustments */
@media print {
  .page-break {
    page-break-after: always;
  }
  
  /* Remove background color for .section1, .section2, .section3, and .section4 */
  .section1,
  .section2,
  .section3,
  .section4 {
    background-color: transparent !important;
  }
}

.form-group textarea.form-control {
  display: block;           /* Allows margin auto-centering */
  margin: 0 auto;           /* Centers the textarea horizontally */
  min-width: 300px !important;
  width: 75% !important;
  box-sizing: border-box;    /* Ensures padding doesn’t expand total width */
  text-align: left;          /* Keep the placeholder and entered text left-aligned */
}


/* If you also want to force .form-control (all inputs) the same way */
.form-control {
  min-width: 300px !important;
  width: 75% !important;
  box-sizing: border-box;
  
  /* Center the element itself */
  display: block;
  margin: 0 auto;
  
  /* Center the text */
  text-align: left;
}
#location {
    min-height: 40px; /* reserve space to avoid layout shift */
    padding: 8px 12px;
    background-color: #f4f4f4;
    border: 1px solid #ccc;
    border-radius: 6px;
    margin: 10px 0;
    overflow-wrap: anywhere;
    font-size: 14px;
}

/* Centered record field content */
.record-field {
  text-align: center;
  margin-bottom: 15px;
}

/* Style for clickable image used for copying to clipboard */
.clickable-image {
  display: block;
  margin: 10px auto;
  max-width: 280px;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: transform 0.2s;
}
.clickable-image:hover {
  transform: scale(1.03);
}

/* Call button (tel link) styling */
.record-field a[href^="tel:"] {
  display: inline-block;
  margin-top: 10px;
  padding: 10px 20px;
  background-color: #28a745;
  color: white !important;
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold;
}
.record-field a[href^="tel:"]:hover {
  background-color: #218838;
}

/* Container holding multiple records */
.record-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Optional: styling for each card/record */
.record-item {
  width: 100%;
  max-width: 800px;
}