/**
 * @file: CiviCRM Stylesheet
 *
 * NOTE: The main civicrm container has both class and id of crm-container
 * Other civi blocks outside the main container also have the class crm-container (but not the id)
 * All styles should start with .crm-container unless they are specific to the main div only
 */

#editrow-onbehalf_contact_sub_type {
  display: none;
}

/* Use this class to hide text that should only be there for screen readers */
.crm-container fieldset {
  display: contents;
}
.crm-container.crm-public .select2-container {
  width: 75% !important;
}
#crm-container.crm-public input[type="text"] {
  width: 75%;
}
#crm-container.crm-public .crm-container fieldset legend {
  background-color: #cde8fe;
  font-size: 18px;
  font-weight: bold;
  color: #121a2d;
  padding: 4px 6px;
  margin: 0 0 0.3em;
}
.crm-container .description {
  background-color: floralwhite;
}
@media (min-width: 480px) {
  .crm-container .crm-section .label {
    width: 25%;
  }
}
@media (min-width: 480px) {
  .crm-container .crm-section .content {
    margin-left: 28%;
  }
}
.crm-container .description {
  margin-right: 17%;
}
#crm-container.crm-public .crm-container .help {
  font-size: 18px;
}
#crm-container.crm-public .crm-container th {
  font-size: 18px;
}
#crm-container.crm-public .crm-container table {
  font-size: 18px;
}
#crm-container.crm-public .overflow-table-div{
  overflow:auto !important;
  font-size: 18px;
}
.crm-container .crm-multiple-checkbox-radio-options {
  display: flex;
  --gap: 0.5em;
}
.crm-option-label-pair {
  flex-basis: 100%;
}
/* Age field in individual membership*/
#custom_216 {
  pointer-events: none;
  background-color: #f0f0f0;
  background-image: none;
}
/* Post help text as popup on hover from a question mark bubble */
.helprow-post {
    display: inline-block;
    position: relative;
    width: 20px;
    height: 20px;
    background-color: #0073aa;
    color: white !important;
    border-radius: 50%;
    text-align: center;
    line-height: 20px;
    cursor: help;
    font-size: 18px;
    font-weight: bold;
    transform: translateY(-31px);
}

.form-item .content {
  margin-left: 10%;
}

@media (min-width: 480px) {
  .helprow-post {
    transform: translateY(-50px);
  }

  .form-item .label {
    margin-left: 2%;
    text-align: left !important;
  }
  .form-item .content {
    margin-left: 29% !important;
  }
}

/* Add the question mark inside the circle */
.helprow-post::before {
    content: "?";
}

/* 2. Target the specific CiviCRM content div */
.helprow-post .content.description {
    /* ADD THIS: Create a "hit area" that extends upward to the circle */
    margin-top: -20px; 
    margin-left: -20px;
    border-top: 15px solid transparent; /* This acts as an invisible bridge */
    background-clip: padding-box;     /* Keeps the white background from filling the transparent border */
    
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 25px; /* Positions the text below the question mark */
    left: 7vw;
    width: 60vw; /* Fixed width prevents the "one letter per row" issue */
    background: #ffffff;
    color: #333333;
    padding: 15px;
    border: 1px solid #cccccc;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    font-weight: normal;
    font-size: 18px;
    line-height: 1.4;
    z-index: 999;
    transition: opacity 0.3s ease, visibility 0s linear 3s;
    text-align: left; /* Resets the centering from the circle */
}

@media (min-width: 480px) {
  .helprow-post .content.description {
      left: 1.2vw;
  }
}

/* 3. Show the content on Hover or Tap */
.helprow-post:hover .content.description,
.helprow-post:active .content.description {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0s;
}

/* 1. Ensure the fieldsets don't "clip" the tooltips */
fieldset {
    overflow: visible !important;
    position: relative;
    z-index: 1;
}

/* 2. The Secret Sauce: Higher Z-Index on Hover */
/* When you hover over a row, we "lift" that entire row 
   above the next fieldset so the tooltip can overlap it. */
.crm-section:hover, 
.helprow-post:hover {
    z-index: 1000 !important;
}

/* If the help icon is at the very bottom of a fieldset: */
fieldset:hover {
    z-index: 100;
}
/* END - Post help text as popup on hover from a question mark bubble*/

/*Font sizes*/
/* --- FIXED: Strictly Frontend Only --- */

/* 1. Use the ID specifically from your HTML for extra safety */
#crm-container.crm-public small {
    font-size: 90% !important;
}

/* 2. Grouped content and labels */
#crm-container.crm-public .content,
#crm-container.crm-public .label {
    font-size: 18px !important;
}

/* 3. Headers */
#crm-container.crm-public .crm-container h3 {
    font-size: 20px !important;
}

/* 4. Select2 Dropdowns - Fixed the leaked .select2-results */
#crm-container.crm-public .select2-container .select2-choice,
#crm-container.crm-public .select2-container, 
#crm-container.crm-public .select2-results {
    font-size: 18px !important;
}

/* 5. Buttons - Notice every line now starts with the public prefix */
#crm-container.crm-public a.button, 
#crm-container.crm-public a.button:link, 
#crm-container.crm-public a.button:visited, 
#crm-container.crm-public .ui-dialog-buttonset .ui-button, 
#crm-container.crm-public .crm-button {
    font-size: 18px !important;
}

/* 6. Footer */
#crm-container.crm-public #civicrm-footer.crm-public-footer {
    display: none !important;
}

/*Remove pay later group and discount code from assign additional EEN Member*/
div.crm-contribution-page-id-6.crm-block.crm-contribution-main-form-block > fieldset.crm-public-form-item.crm-group.pay_later-group {
  display: none;
}

.crm-contribution-page-id-6 .cividiscount-section {
    display: none !important;
}