/********************************************************
 * Fixed, Site-Wide Button to request to join the TnT Movie Club
 * Kept above normal page content but below the modal layer.
 ********************************************************/
.mc-join-trigger
{
    position      : fixed;
    right         : 22px;
    bottom        : 22px;
    z-index       : 9990;
    padding       : 13px 20px;
    border        : 0;
    border-radius : 999px;
    background    : var(--TntMovieClubPrimaryColorDark);
    color         : #fff;
    font-weight   : 700;
    cursor        : pointer;
    box-shadow    : 0 8px 24px rgba(0,0,0,.35);
}

/* Behavior on hover */
.mc-join-trigger:hover
{
    background : var(--TntMovieClubPrimaryColorLight);
    transform  : translateY(-2px);
}

/* Ensure that these things are not visible when not in use */
.mc-join-overlay[hidden],
.mc-join-trigger[hidden]
{
    display : none !important;
}

/********************************************************
 * Window Backdrop and Dialog Shell
 ********************************************************/

/* Overlay over the whole page when the window is open */
.mc-join-overlay
{
    position    : fixed;
    inset       : 0;
    z-index     : 10000;
    display     : grid;
    place-items : center;
    padding     : 20px;
    background  : rgba(0,0,0,.76);
}

/* The whole box that contains the form, close button, etc */
.mc-join-dialog
{
    position      : relative;
    width         : min(100%, 470px);
    max-height    : calc(100vh - 40px);
    overflow-y    : auto;
    padding       : 32px;
    border        : 1px solid rgba(255,255,255,.1);
    border-radius : 16px;
    background    : linear-gradient(145deg, #1a1a20, #08080c);
    color         : #fff;
    box-shadow    : 0 18px 55px rgba(0,0,0,.55);
}

/* User for any h2 element inside the dialog */
.mc-join-dialog h2
{
    margin     : 0 0 8px;
    text-align : center;
}

/* Introductory paragraph on the window */
.mc-join-intro
{
    margin     : 0 0 22px;
    color      : rgba(255,255,255,.72);
    text-align : center;
}

/* The close button */
.mc-join-close
{
    position   : absolute;
    top        : 10px;
    right      : 14px;
    border     : 0;
    background : none;
    color      : #fff;
    font-size  : 30px;
    cursor     : pointer;
}

/********************************************************
 * Form Controls and Feedback States
 ********************************************************/

 /* Used on every label inside the dialog */
.mc-join-dialog label
{
    display     : block;
    margin      : 14px 0 6px;
    font-weight : 600;
}

/* Used on every input inside the dialog */
.mc-join-dialog input
{
    width         : 100%;
    padding       : 12px 14px;
    box-sizing    : border-box;
    border        : 1px solid rgba(255,255,255,.15);
    border-radius : 9px;
    background    : rgba(255,255,255,.07);
    color         : #fff;
}

/* Used when an input is focused by a click or tabbing to it */
.mc-join-dialog input:focus
{
    outline      : 0;
    border-color : #c7374a;
    box-shadow   : 0 0 0 3px rgba(199,55,74,.22);
}

/* Checkbox below the password field that switches between masked and visible text */
.mc-join-password-visibility
{
    display     : flex;
    align-items : center;
    gap         : 8px;
    margin-top  : 9px;
}

/* Override the full-width form-input rules for this small checkbox */
.mc-join-dialog .mc-join-password-visibility input
{
    width        : auto;
    margin       : 0;
    padding      : 0;
    box-shadow   : none;
    accent-color : #c7374a;
    cursor       : pointer;
}

.mc-join-dialog .mc-join-password-visibility label
{
    display     : inline;
    margin      : 0;
    color       : rgba(255,255,255,.78);
    font-size   : 14px;
    font-weight : 400;
    cursor      : pointer;
}

/* Password guidance */
.mc-join-dialog small
{
    display    : block;
    margin-top : 6px;
    color      : rgba(255,255,255,.6);
}

/* Submit button for the form */
.mc-join-submit
{
    width         : 100%;
    margin-top    : 22px;
    padding       : 13px;
    border        : 0;
    border-radius : 9px;
    background    : #c7374a;
    color         : #fff;
    font-weight   : 700;
    cursor        : pointer;
}

/* Used when the submit button is disabled */
.mc-join-submit:disabled
{
    opacity : .65;
    cursor  : wait;
}

/* Feedback paragraph section */
.mc-join-feedback
{
    min-height : 22px;
    margin     : 16px 0 0;
    text-align : center;
}

/* Feedback for a success */
.mc-join-feedback.is-success
{
    color : #73d99b;
}

/* Feedback for an error */
.mc-join-feedback.is-error
{
    color : #ff8797;
}

/* Class temporarily added to the page's <body>? */
body.mc-join-open
{
    overflow : hidden;
}

/********************************************************
 * Rules for when the screen is less than 600px wide (phones)
 ********************************************************/
@media (max-width: 600px)
{
    .mc-join-trigger
    {
        right  : 14px;
        bottom : 14px;
    }

    .mc-join-dialog
    {
        padding : 28px 20px 22px;
    }
}