/*
 * Typography and performance overrides for the RSVP iframe (painel.casar.com Vue app).
 */

html.rsvp-loading #app {
  min-height: 240px;
}

html.rsvp-loading #app::before {
  content: "Carregando confirmação...";
  display: block;
  padding: 2.5rem 1rem;
  color: #5d758d;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.4;
}

html.rsvp-ready #app::before {
  content: none;
  display: none;
}

.c-invite__header:before,
.c-invite--step2 .c-invite__header:before,
.c-banner-shopping,
.c-modal-create-site__img-background:before,
.shopping-card-banner,
.convincing-partner-stores,
.filtered-img[data-v-e5a94eb0] {
  background-image: none !important;
  content: none !important;
}

.c-invite__header {
  height: auto !important;
  min-height: 0 !important;
}

:root {
  --font-title: "Dreamline", cursive;
  --font-body: "Comfortaa", sans-serif;
  --rsvp-accent: #A51217;
  --rsvp-accent-hover: #8f1015;
  --rsvp-accent-active: #7a0e12;
  --rsvp-control-radius: 8px;
}

body,
button,
input,
optgroup,
select,
textarea,
.label,
.input,
.textarea,
.select select,
.button,
.field,
.control,
.help,
.tag,
.notification,
.modal,
.dropdown-item,
.tabs a,
.table,
.c-rsvp-invite,
.c-rsvp-invite__form,
.c-rsvp-invite__actions,
.c-guests,
.c-guests__label,
.c-guests__guest-description,
.c-guests__guest-description-title,
.c-list-guests,
.c-list-guests-tab,
.c-list-guests-tab__header-label,
.c-list-guests-tab__no-result,
.c-list-guests__title,
.c-base-modal,
.convite-label,
p,
span,
a,
li,
label {
  font-family: var(--font-body) !important;
  font-weight: 300 !important;
}

.c-rsvp-invite__title,
.title,
.subtitle,
h1,
h2,
h3,
h4,
.is-family-secondary {
  font-family: var(--font-title) !important;
  font-weight: 400 !important;
}

.button,
.convite-label,
.c-guests__guest-description-title,
.label {
  font-weight: 400 !important;
}

/* RSVP confirmation UX overrides (rsvp.js) */

.c-invite-confirmation .description:not(.final),
.c-invite-confirmation .count-tag,
.c-invite-confirmation .field.add-guest:has(.error-label),
.c-invite-confirmation > div:not(:has(.description.final)) > .title {
  display: none !important;
}

.rsvp-field-hidden {
  display: none !important;
}

.c-invite-confirmation .c-responsability-box.mt-4 {
  display: none !important;
}

.rsvp-select-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.rsvp-status-field > .c-label {
  display: none !important;
}

.rsvp-name-field > .c-label {
  display: none !important;
}

.rsvp-name-field .c-box-bottom {
  display: none !important;
}

.rsvp-guest-name {
  margin: 0 0 1rem;
  font-family: var(--font-title) !important;
  font-size: 1.375rem;
  font-weight: 400 !important;
  line-height: 1.3;
  color: #404951;
}

.rsvp-separator {
  border: 0;
  border-top: 1px solid #b4c5d680;
  margin: 1.5rem 0;
}

.rsvp-radio-group {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.rsvp-radio-option {
  display: flex;
  flex: 1 1 calc(50% - 0.375rem);
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 8rem;
  padding: 0.875rem 1rem;
  border: 1px solid #b4c5d680;
  border-radius: var(--rsvp-control-radius);
  cursor: pointer;
  color: #5d758d;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.rsvp-radio-option:hover {
  box-shadow: 0 0 3px 0 #b4c5d6;
}

.rsvp-radio-option input[type="radio"] {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  accent-color: #3dafb0;
  cursor: pointer;
}

.rsvp-radio-label {
  font-size: 1rem;
  line-height: 1.25;
}

.rsvp-radio-option:has(input:checked) {
  border-color: #3dafb0;
  background-color: #f0fafafa;
  box-shadow: 0 0 0 1px #3dafb040;
}

.button.is-primary {
  background-color: var(--rsvp-accent) !important;
  border-color: transparent !important;
  border-radius: var(--rsvp-control-radius) !important;
  color: #ffffff !important;
}

.button.is-primary:hover,
.button.is-primary.is-hovered {
  background-color: var(--rsvp-accent-hover) !important;
  border-color: transparent !important;
  color: #ffffff !important;
}

.button.is-primary:active,
.button.is-primary.is-active {
  background-color: var(--rsvp-accent-active) !important;
  border-color: transparent !important;
  color: #ffffff !important;
}

.button.is-primary:focus:not(:active),
.button.is-primary.is-focused:not(:active) {
  box-shadow: 0 0 0 0.125em rgba(165, 18, 23, 0.25) !important;
}

.button.is-primary[disabled],
fieldset[disabled] .button.is-primary {
  background-color: var(--rsvp-accent) !important;
  border-color: transparent !important;
  opacity: 0.5;
}