/* Consolidated CSS for the entire event system. */
.event-form-response { margin-top: 0;
  padding: 8px 15px;
  border-radius: 4px;
  border: 1px solid transparent;
  margin-bottom: 20px;
  font-size: 14px;}
.event-form-response.success { background-color: #d4edda; border-color: #c3e6cb; color: #155724; }
.event-form-response.error { background-color: #f8d7da; border-color: #f5c6cb; color: #721c24; }
#urs-event-registration-form label { display: block; margin-bottom: 5px; font-weight: 600; }

#urs-event-registration-form input[type="text"], #urs-event-registration-form input[type="email"] { width: 100%; padding: 8px 15px; margin-bottom: 25px; border: 1px solid #ccc; border-radius: 10px;    background: #F7F7F7;}

#urs-event-registration-form select
{ width: 100%; padding: 0 15px 0 15px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 4px; }

.add-school-toggle .actions { display: none; }
.add-school-toggle.is-editing .actions { display: inline-flex; gap: 10px; }
.add-school-toggle .school-contact span { display: block; }
.add-school-toggle .school-contact input { display: none; }
.add-school-toggle.is-editing .school-contact input { display: block; }
.action-icon { cursor: pointer; color: #1DAFC2; font-size: 16px; }
.action-icon:hover { opacity: 0.7; }
button:disabled, .action-icon.disabled { cursor: not-allowed; opacity: 0.5; }

.top-left-cancel {
    position: absolute;
    top: 5px;   /* Position from the top edge of the parent row */
    left: 15px; /* Position from the left edge */
    font-size: 20px; /* Make it a bit larger and easier to click */
    color: #F05562; /* A reddish color for cancel/delete actions */
    display: none; /* Hide it by default */
}
.add-school-toggle:not(.is-editing) .top-left-cancel {
    display: none;
}
.add-school-toggle.is-editing .top-left-cancel {
    display: block;
}

/* 3. Also in edit mode, add padding to the contact info block. */
/* This prevents the long email address from running underneath the repositioned icons. */
.add-school-toggle.is-editing .school-contact {
    padding-right: 120px; /* Add space for the icons. Adjust if needed. */
}

/* 4. Ensure the pencil icon takes up no space when hidden. */
.add-school-toggle.is-editing .edit-icon {
    display: none;
}
div.added-school {
    padding-left: 0;
}
/*
 * Rule to hide options in the Add School Select2 dropdown
 * when they correspond to an already-attached school.
 */
.select2-results__option[aria-disabled='true'] {
    display: none;
}

/* A wrapper to keep the two links and text together */
.create-venue-wrapper {
    display: flex;
    align-items: center;
    gap: 8px; /* Adds a little space between the main link and the instruction text */
}

/* Style for the instruction text */
.create-venue-instruction {
    font-size: 12px;
    color: #666;
    margin-top: 4px;
}

/*
 * Style the refresh button to look like an inline icon within the text.
 * This overrides the default .action-icon styles in this specific context.
*/
.create-venue-instruction #refresh-venues-btn {
    display: inline-block; /* Allows it to sit within the text flow */
    text-decoration: none;
    font-size: inherit; /* Makes the icon the same size as the surrounding text */
    vertical-align: middle; /* Aligns the icon nicely */
    margin-top: 4px;
    position: relative;
    top: -1px; /* Minor vertical adjustment */
}

/*
 * Full Page Spinner Overlay
 * =========================================
 * Used on pages with AJAX actions like "Add School".
*/

/* The semi-transparent background */
.spinner-overlay {
    position: fixed; /* Covers the entire viewport */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7); /* White with 70% opacity */
    z-index: 9999; /* Ensures it's on top of everything */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* The custom spinner element */
.custom-spinner {
    width: 100px;  /* External diameter */
    height: 100px; /* External diameter */

    /* The border thickness is (External - Internal Diameter) / 2 = (100 - 80) / 2 = 10px */
    border: 10px solid #cccccc; /* This is the 3/4 grey part */

    /* This colors the top quarter of the border black */
    border-top-color: #333333;

    border-radius: 50%; /* Makes it a perfect circle */

    /* The animation that makes it spin */
    animation: spin 1s linear infinite;
}

/* The keyframe animation for the spinning effect */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Styling for Google Maps Address Autocomplete */
/* Styling for input box */
#gmaps-autocomplete-element {
    width: 100%;
    padding: 18px 20px;
    border: 0;
    border-radius: 0;
    font-size: 16px;
    font-family: inherit;
    box-sizing: border-box;
    border-bottom: 1px solid #1DAFC2;
}

/* Suggestions container */
#autocomplete-suggestions {
  position: absolute;
  background: #fff;
  border: none;
  border-top: none;
  z-index: 1000;
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  font-family: inherit;
  
}

/* Each suggestion item */
#autocomplete-suggestions div.suggestion-item {
    padding: 5px 20px;
    cursor: pointer;
    display: block;
    line-height: initial;
}
#autocomplete-suggestions div.suggestion-item:hover,
#autocomplete-suggestions div.suggestion-item.active {
    background-color: none;
}
/*
 * Styling for the "Days Remaining" indicator on the dashboard
 * =============================================================
*/


.event-title-wrapper {
    display: block;
    align-items: center; /* Vertically aligns the title and the (draft) text */
    flex-wrap: nowrap;   /* Prevents wrapping to a new line */
}

.event-title-wrapper .draft-status {
    color: #888;
    font-weight: normal;
    font-style: italic;
    margin-left: 8px;      /* Adds a little space after the title */
    white-space: nowrap;   /* Ensures "(draft)" doesn't break into two lines */
    flex-shrink: 0;        /* Prevents the (draft) text from being squished */
}

/*
 * Styling for the WYSIWYG Confirmation Modal
 * ==========================================================
*/

.confirm-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.confirm-modal-content {
    background-color: #fff;
    padding: 40px 30px;
    border-radius: 10px;
    width: 90%;
    max-width: 450px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.confirm-modal-content h4 {
    margin-top: 0;
    color: inherit!important;
    margin-bottom:10px;
    font-weight: bold;
}

.confirm-modal-actions {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 15px;
}


.confirm-modal-actions button:hover {
  box-shadow:none;
}


.tool-tip a {
    color:#1DAFC2;
}


  @media only screen and (max-width: 767px) {
        #urs-event-registration-form input[type="text"], #urs-event-registration-form input[type="email"] {
          margin-bottom:15px;
        }
        
        #urs-event-registration-form .select-wrapper {
          margin-bottom: 15px;
        }

}