/* Contact modal overlay and content replicate TND modal look */
#tnrcm-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999999;
    display: flex;
    justify-content: center;
    align-items: center;
}
#tnrcm-modal-overlay .tnrcm-modal-content {
    background: #ffffff;
    width: 80%;
    max-width: 800px;
    padding: 30px;
    border-radius: 8px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
#tnrcm-modal-overlay .tnrcm-close {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 24px;
    background: #ffffff;
    color: #283EFF;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    line-height: 32px;
    text-align: center;
    cursor: pointer;
    padding: 0;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
}
#tnrcm-modal-overlay .tnrcm-close:hover {
    background: #E9ECFF;
}
/* Form fields styling inspired by the registration form */
#tnrcm-modal-overlay .tnrcm-field input,
#tnrcm-modal-overlay .tnrcm-field textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 5px;
    margin-bottom: 15px;
    font-family: 'Inter', sans-serif;
    background: #fff;
    font-size: 1rem;
}
#tnrcm-modal-overlay .tnrcm-field label {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: #000000;
}
#tnrcm-modal-overlay h2.title-tnd {
    /* Inherit the theme’s typography but apply plugin‑specific accents.
       We do not set font size or weight here so the element uses the
       site’s heading style.  The color and italics are enforced via
       !important to override conflicting rules. */
    color: #283EFF !important;
    font-style: italic !important;
    margin-top: 0 !important;
	font-size: 1.75rem !important;
    margin-bottom: 20px !important;
}
/* Copy button styling from TND plugin so our buttons look consistent */
.tnr-button {
    background-color: #283EFF !important;
    color: #ffffff !important;
    padding: 12px 25px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    font-size: 1rem;
    width: 100%;
    transition: background-color 0.2s ease;
}
.tnr-button:hover {
    background-color: #1a2fb8 !important;
    color: #ffffff !important;
}

/* Override for the contact button to match the smaller action button style seen on the site.
   When the button has the tnrcm-open class, shrink its width to fit content and use uppercase text.
   Padding is slightly wider to balance the shorter width. */
/*
 * Adjust the contact trigger button (tnrcm-open) to mirror the call‑to‑action buttons
 * used elsewhere on the site (e.g., the “Submit an entry” button).  We use
 * width:auto so the button only wraps its content, uppercase text and
 * consistent padding and border radius.  These overrides apply on top of
 * the GoodLayers button classes assigned in the shortcode output.
 */
/*
 * Force the contact button to use a rectangular style, overriding any button
 * styles from the theme or other plugins.  We set width to auto so it
 * encloses its content, remove corner rounding and box shadows, and
 * enforce consistent padding and uppercase lettering.  The !important
 * flags ensure these values win against more specific rules or inline
 * styles applied elsewhere.
 */
.tnrcm-open {
    width: auto !important;
    display: inline-block !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 12px 25px !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/*
 * Layout adjustments: group the email and organization fields in a single row
 * on larger screens.  Each field takes 49% of the available width with a
 * 2% gap between them, aligning the fields flush against the left and right
 * edges of the row.  On smaller screens the fields stack vertically.
 */
#tnrcm-modal-overlay .tnrcm-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2%;
}
#tnrcm-modal-overlay .tnrcm-row .tnrcm-field {
    flex: 0 0 49%;
    margin-bottom: 15px;
}
@media (max-width: 600px) {
    #tnrcm-modal-overlay .tnrcm-row {
        flex-direction: column;
        gap: 15px;
    }
    #tnrcm-modal-overlay .tnrcm-row .tnrcm-field {
        flex: 0 0 100%;
    }
}