* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* Added globally */
}

.main {
  box-sizing: border-box; /* Add box-sizing to handle padding and border correctly */
}

div.element-selector {
  padding-top: 0;
  padding-bottom: 0;
}

p {
  font-size: 0.875rem; /* Use rem for better scalability */
}

.app-title {
  text-align: center;
  font-size: 1.5rem; /* Give the title a bit more emphasis */
}

.currentDate {
  display: flex;
  justify-content: flex-end; /* Align to the right */
  padding-inline-end: 1rem;
}

.container {
  display: flex;
  flex-direction: row;
  margin: 1.5rem 0;
  padding: 0 1rem; /* Symmetrical padding */
  justify-content: center;
}

.inputSection {
  padding-top: 2.5rem;
  min-width: 250px;
}

.inputSection, .displaySection {
  margin-bottom: 0; /* Removed negative margin */
}

.purpose-wrap, .domainSection, .p-serverSection, .s-serverSection, .nameSection, .addressSection, .registerCompanyName, .phoneSection, .logoSection {
  display: flex;
  flex-direction: column;
}

.tabs {
  display: flex;
  border-bottom: 2px solid #ddd; /* Added bottom border for tab separation */
}

.tab {
  background-color: #f0f0f0;
  cursor: pointer;
  flex-grow: 1;
  padding: 10px;
  text-align: center;
}

.tab.active {
  background-color: #ddd;
  font-weight: bold;
  border-bottom: 2px solid #333; /* Emphasize the active tab */
}

input#domain, input#primaryServer, input#secondaryServer, input#name, select#purpose, input#registerCompanyName, input#phone, input#logo {
  height: 2rem;
  padding-left: 5px;
}

input:focus {
  outline: none; /* Removes the default blue outline on focus */
}

textarea#address {
  max-width: 250px;
  padding-top: 5px;
  padding-left: 5px;
  height: 2rem;
}

input.clearButton {
  position: relative;
  left: 85px;
}

.submitButton, .clearButton {
  background-color: #ffffff;
  padding: 15px 25px;
  margin-top: 5px;
  border: 1px solid #b8b8b8;
  border-radius: 5px;
}

.active-logoSection {
  display: none; /* Ensure this class is toggled correctly */
}

.displaySection {
  background-color: #eef0f1;
  margin-left: 1rem;
  padding: 4rem;
}

/* Cross (remove) Button Styles */
#removeLogoBtn {
  background-color: transparent;
  color: red;
  border: none;
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  display: inline-block;
}

#removeLogoBtn:hover {
  color: red;
}

/* Adjust button positioning if necessary */
button#removeLogoBtn {
  position: relative;
  float: right;
  top: -30px;
}

.introStart {
  display: inline-block; /* Ensures block-level behavior, so spacing works properly */
  margin-left: 45px;     /* Adds the space at the beginning */
  white-space: normal;   /* Allows wrapping of the text */
}

.intro p {
  word-wrap: break-word; /* Ensures long words wrap properly if needed */
}

.signature {
  color: #bbbbbb;
  padding-bottom: 20px;
  font-style: italic;
}


#domain_name, #under_name {
  display: inline; /* Ensures inline behavior for dynamic content */
  white-space: normal; /* Prevents breaking issues and ensures text flow */
}

main#wp--skip-link--target {
  margin: 0 !important;
}

.wp-block-group.alignwide.is-content-justification-space-between.is-layout-flex.wp-container-core-group-is-layout-2.wp-block-group-is-layout-flex {
  padding: 0 !important;
}

.wp-site-blocks {
  padding: 0 !important;
}

h1.wp-block-post-title {
  margin-bottom: 10px !important;
  font-size: 1rem;
}

/* Define A4 page size for print */
@page {
  size: A4;
  margin: 10mm;
}

/* Hide everything except the displaySection during printing */
@media print {
  body * {
    visibility: hidden;
  }
  .displaySection, .displaySection * {
    visibility: visible;
  }
  .displaySection {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    max-height: 100vh;
    padding: 10mm;
    overflow: hidden;
    page-break-inside: avoid;
  } 

  img {
    margin-left: 270px !important;
  }

  .sincerely {
    margin-top: 3rem;
  }

  .headingSection {
    margin-top: 5.5rem !important;
}
  
  /* Remove headers and footers */
  @page {
    margin: 0; /* Remove default margins */
    padding: 0;
  }

  .background, .header, .footer, .signature {
    display: none; /* Ensure these are hidden during print */
  }

  /* Ensure text is properly formatted */
  p {
    font-size: 13pt; /* Adjust font size as needed for readability */
  }
}