/*==================== INVITATION PAGE STYLES ======================*/
:root{
    --invite-card-bg: light-dark(#121215, #f4f4f4);
    --invite-input-bg: light-dark(#000000, #ffffff);
}

/*-------------------- ICONS --------------------*/
/* style.css sets `color` on every element, which breaks `currentColor` inside SVG */
svg, svg * {color: inherit;}

/*-------------------- PAGE BANNER --------------------*/
:where(.page-invitation) .page-banner {
    display: flex;
    align-items: center;
    overflow: hidden;
}

/*-------------------- FORM CARD --------------------*/
:where(.page-invitation) .form-card {background-color: var(--invite-card-bg);padding: 48px;}
:where(.page-invitation) .form-card-icon {
    min-width: 56px;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-golden);
    color: var(--color-golden);
}

/*-------------------- FORM FIELDS --------------------*/
:where(.page-invitation) .invite-form .form-label {color: var(--color-white) !important;margin-bottom: 8px;}
:where(.page-invitation) .invite-form input.form-control,
:where(.page-invitation) .invite-form select.form-select,
:where(.page-invitation) .invite-form textarea.form-control {
    background-color: var(--invite-input-bg);
    border: 1px solid var(--invite-input-bg);
    border-radius: 0;
    color: var(--color-white);
    padding: 14px 16px;
}
:where(.page-invitation) .invite-form input.form-control,
:where(.page-invitation) .invite-form select.form-select {height: 48px;}
:where(.page-invitation) .invite-form textarea.form-control {height: 132px;}
:where(.page-invitation) .invite-form input.form-control:hover,
:where(.page-invitation) .invite-form input.form-control:focus,
:where(.page-invitation) .invite-form select.form-select:hover,
:where(.page-invitation) .invite-form select.form-select:focus,
:where(.page-invitation) .invite-form textarea.form-control:hover,
:where(.page-invitation) .invite-form textarea.form-control:focus {
    background-color: var(--invite-input-bg);
    border-color: var(--color-golden);
    color: var(--color-white);
}
:where(.page-invitation) .invite-form input.form-control::placeholder,
:where(.page-invitation) .invite-form textarea.form-control::placeholder {color: var(--color-content-same);}
:where(.page-invitation) .invite-form select.form-select option {color: var(--color-black-same);}
:where(.page-invitation) .invite-form .form-control.is-invalid,
:where(.page-invitation) .invite-form .form-select.is-invalid {border-color: red;background-image: none;}
:where(.page-invitation) .invite-form .field-error {display: none;color: red;margin-top: 4px;}
:where(.page-invitation) .invite-form .field-error.show {display: block;}

:where(.page-invitation) .invite-form .form-check-input {
    background-color: transparent !important;
    border-color: var(--color-white-same);
    border-radius: 0;
    margin-top: 0;
    box-shadow: none !important;
    outline: none !important;
}
:where(.page-invitation) .invite-form .form-check-label {color: var(--color-content-same);}

/*-------------------- FORM MESSAGE --------------------*/
:where(.page-invitation) .form-message {display: none;border: 1px solid var(--color-golden);padding: 14px 18px;color: var(--color-golden);}
:where(.page-invitation) .form-message.show {display: block;}

/*-------------------- MEDIA QUERY --------------------*/
@media screen and (max-width: 1200px) {
    :where(.page-invitation) .form-card {padding: 36px;}
}
@media screen and (max-width: 767px) {
    :where(.page-invitation) .form-card {padding: 24px 20px;}
}