/*
 * Public evento microsite styles.
 * Ported from debodas-kreatif style.css ("Single Boda" block), adapted:
 * .single.boda .{theme}  ->  .single-evento.theme-{theme}
 * Themes: base, hojas, manantial, flores, marfil.
 * Assumes html { font-size: 62.5% } (1rem = 10px), as in the parent theme.
 */

/* ---------------------------------------------------------------------------
 * Wrapper base (variables + typography)
 * ------------------------------------------------------------------------- */

.single-evento {
  --evento-main-font: "Montserrat", sans-serif;
  --evento-secondary-font: "Dancing Script", cursive;
  --evento-tertiary-font: "Playfair Display", serif;
  --evento-main-color: #ded4c5;
  --evento-green-color: #6cc39e;
  --evento-color-elegant: #ba9c5f;
  --evento-color-profesional: #373736;
  --evento-color-calm: #ddd0c0;
  --evento-color-tech: #06263a;

  color: var(--evento-color-tech);
  font-size: 1.5rem;
  font-weight: 400;
  font-family: var(--evento-tertiary-font);
  -webkit-font-smoothing: antialiased;
  background: #fff;
}

/* Per-theme body fonts (Google Fonts links echoed from the template). */
.single-evento.theme-hojas {
  font-family: "Lora", serif;
  color: #413f3f;
}

.single-evento.theme-manantial {
  font-family: "Tangerine", cursive;
}

.single-evento.theme-flores {
  font-family: "Josefin Sans", sans-serif;
  color: #303433;
}

.single-evento.theme-marfil {
  font-family: "Josefin Slab", serif;
}

.single-evento img {
  max-width: 100%;
  height: auto;
}

.single-evento ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.single-evento a,
.single-evento a:hover,
.single-evento a:focus {
  color: inherit;
  text-decoration: none;
  transition: 0.3s all;
}

.single-evento a:hover {
  color: var(--evento-color-calm);
}

.single-evento h1,
.single-evento h2,
.single-evento h3,
.single-evento h4,
.single-evento h5,
.single-evento h6 {
  font-weight: 500;
  line-height: 1.2;
}

.single-evento h3.title {
  font-size: 5rem;
  position: relative;
  margin-bottom: 25px;
}

.single-evento.theme-hojas h3.title {
  color: #6d6a6a;
  letter-spacing: 0.75rem;
  font-size: 5rem;
  text-transform: uppercase;
}

.single-evento.theme-flores h3.title {
  text-transform: uppercase;
}

.single-evento.theme-manantial h3.title {
  font-size: 8rem;
}

.single-evento.theme-marfil .title {
  font-size: 8rem;
  font-family: "Pinyon Script", cursive;
  color: #102638;
  text-shadow: 0px 4px 4px #00000080;
}

@media screen and (max-width: 768px) {
  .single-evento.theme-hojas h3.title {
    font-size: 2.6rem;
  }
  .single-evento.theme-manantial h3.title {
    font-size: 4rem;
  }
  .single-evento.theme-flores h3.title {
    font-size: 3rem;
  }
}

/* Centered sections helper (ported from .single.boda .center .content). */
.single-evento .center .content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* Sections on marfil share the ivory background. */
.single-evento.theme-marfil section {
  background-color: #f7f6f2;
}

/* ---------------------------------------------------------------------------
 * Buttons
 * ------------------------------------------------------------------------- */

.single-evento .btn {
  min-width: 200px;
  padding: 0 32px;
  font-size: 15px;
  font-weight: 400;
  line-height: 41px;
  border-width: 2px;
  font-family: var(--evento-main-font);
}

@media screen and (max-width: 992px) {
  .single-evento .btn {
    min-width: 137px;
    font-size: 12px;
  }
}

.single-evento .btn:focus,
.single-evento .btn:not(:disabled):not(.disabled):active:focus {
  box-shadow: none !important;
}

.single-evento .btn-primary {
  background: var(--evento-main-color);
  border-color: var(--evento-main-color);
  border-radius: 8px;
  padding: 0 10px;
  color: var(--evento-color-tech);
}

.single-evento .btn-primary:hover,
.single-evento .btn-primary:focus,
.single-evento .btn-primary:not([disabled]):not(.disabled):active {
  color: var(--evento-main-color);
  background: transparent;
  font-weight: 700;
  border-color: var(--evento-main-color);
}

/* Theme button skins (ported verbatim). */
.single-evento.theme-hojas .btn {
  background: #303433;
  color: white;
  border: 0.05rem solid #707070;
  border-radius: 0.1rem;
}

.single-evento.theme-flores .btn {
  background: transparent;
  color: #102638;
  border: 0.1rem solid #815eae;
  border-radius: 1.6rem;
}

.single-evento.theme-manantial .btn {
  background: #fff;
  color: #102638;
  border: 0.2rem solid #b59a68;
  border-radius: 2.2rem;
}

.single-evento.theme-marfil .btn {
  background: #fff;
  color: #102638;
  border: 0.5px solid #707070;
  border-radius: 0;
}

/* Keep destructive buttons red on every theme (modal guest rows). */
.single-evento .btn-danger,
.single-evento.theme-hojas .btn-danger,
.single-evento.theme-flores .btn-danger,
.single-evento.theme-manantial .btn-danger,
.single-evento.theme-marfil .btn-danger {
  background: #dc3545;
  border-color: #dc3545;
  color: #fff;
  border-radius: 0.375rem;
}

/* ---------------------------------------------------------------------------
 * Hero banner
 * ------------------------------------------------------------------------- */

.single-evento .banner {
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  color: white;
  position: relative;
}

.single-evento .banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #00000012;
}

@media screen and (max-width: 992px) {
  .single-evento .banner {
    background-position: left, center;
  }
}

.single-evento.theme-manantial .banner {
  color: #000;
  background-position: center;
  background-color: rgba(0, 0, 0, 0.05);
}

.single-evento.theme-manantial .banner .navbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  color: #102638;
}

.single-evento .banner .content {
  position: relative;
  z-index: 5;
  height: 75vh;
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: center;
}

.single-evento .banner .content .title {
  font-size: 12rem;
  font-family: var(--evento-secondary-font);
}

.single-evento .banner .content .names {
  font-size: 5rem;
}

.single-evento .banner .content .date {
  font-size: 4rem;
}

.single-evento.theme-hojas .banner .content .title,
.single-evento.theme-manantial .banner .content .title,
.single-evento.theme-flores .banner .content .title,
.single-evento.theme-marfil .banner .content .title {
  font-family: inherit;
}

.single-evento.theme-manantial .banner .content {
  justify-content: end;
}

.single-evento.theme-manantial .banner .content .title {
  font-size: 15rem;
  font-weight: 700;
  margin-bottom: -5rem;
  color: #cbf1f5;
  padding-bottom: 10rem;
}

.single-evento.theme-marfil .banner .content .title {
  font-family: "Pinyon Script", cursive;
  font-size: 12rem;
  color: #fff;
}

.single-evento.theme-manantial .banner .content .names {
  font-weight: 700;
  font-size: 5rem;
  margin-bottom: -2.5rem;
  font-family: "Raleway", sans-serif;
}

.single-evento.theme-manantial .banner .content .date {
  font-family: "Raleway", sans-serif;
  font-size: 4rem;
}

.single-evento.theme-marfil .banner .content .date {
  font-size: 4rem;
}

.single-evento.theme-flores .banner .content {
  color: #805fac;
}

.single-evento.theme-flores .banner .content .title {
  font-size: 6rem;
  text-transform: uppercase;
}

.single-evento.theme-flores .banner .content .names {
  font-size: 5rem;
  font-family: "Times New Roman", sans-serif;
}

.single-evento.theme-flores .banner .content .date {
  font-family: "Times New Roman", sans-serif;
  font-size: 4rem;
}

@media screen and (max-width: 992px) {
  .single-evento .banner .content .title {
    font-size: 6rem;
  }
  .single-evento .banner .content .names {
    font-size: 3rem;
  }
  .single-evento .banner .content .date {
    font-size: 2.5rem;
  }
  .single-evento.theme-manantial .banner .content {
    justify-content: end;
  }
  .single-evento.theme-manantial .banner .content .title {
    font-size: 7rem;
    margin-bottom: 1rem;
  }
  .single-evento.theme-manantial .banner .content .names {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    font-family: "Raleway", sans-serif;
  }
  .single-evento.theme-marfil .banner .content .title {
    font-size: 7rem;
  }
  .single-evento.theme-marfil .banner .content .names {
    font-size: 2.5rem;
  }
}

/* Hero anchor nav. */
.single-evento .banner #evento-nav {
  justify-content: center;
  font-size: 2.2rem;
  font-family: var(--evento-main-font);
}

.single-evento .banner .navbar {
  position: relative;
  z-index: 5;
}

.single-evento .banner .navbar-toggler {
  font-size: 2rem;
  margin: 0 auto;
}

/* ---------------------------------------------------------------------------
 * Countdown
 * ------------------------------------------------------------------------- */

.single-evento .cuenta-regresiva {
  padding: 3rem 0;
  max-width: 78rem;
  margin: 0 auto;
}

.single-evento.theme-marfil .contenedor-cuenta {
  background-color: #f7f6f2;
  color: #707070;
}

.single-evento .cuenta-regresiva ul {
  list-style-type: none;
}

.single-evento .cuenta-regresiva ul::after {
  content: "";
  display: table;
  clear: both;
}

.single-evento .cuenta-regresiva ul li {
  text-transform: uppercase;
  font-size: 2rem;
  text-align: center;
}

.single-evento.theme-hojas .cuenta-regresiva ul li {
  color: #bd9e5d;
}

.single-evento.theme-manantial .cuenta-regresiva ul li {
  font-size: 2rem;
  font-family: "Raleway", sans-serif;
  color: #a98c5b;
}

.single-evento.theme-marfil .cuenta-regresiva ul li {
  font-size: 2rem;
}

@media only screen and (min-width: 768px) {
  .single-evento .cuenta-regresiva ul li {
    width: 25%;
    float: left;
  }
}

.single-evento div.cuenta-regresiva p.numero {
  display: block;
  margin: 0;
  font-size: 7rem;
}

.single-evento.theme-hojas div.cuenta-regresiva p.numero {
  font-size: 5rem;
}

.single-evento.theme-manantial div.cuenta-regresiva p.numero {
  font-size: 4.5rem;
}

.single-evento.theme-flores div.cuenta-regresiva p.numero {
  font-size: 4.5rem;
  font-weight: 700;
}

.single-evento.theme-marfil div.cuenta-regresiva p.numero {
  font-size: 4.5rem;
  font-weight: 700;
}

/* ---------------------------------------------------------------------------
 * Our story
 * ------------------------------------------------------------------------- */

.single-evento .our-story {
  padding: 12rem 0.6rem;
  background-size: cover;
  background-position: right;
}

@media screen and (min-width: 768px) {
  .single-evento .our-story {
    padding: 12.4rem;
  }
}

.single-evento.theme-hojas .our-story {
  background-color: #ded4c5;
  background-image: url(../img/eventos/themes/our_story_bg_hojas.svg);
}

.single-evento.theme-flores .our-story {
  background-color: #ebe0d1;
  background-image: url(../img/eventos/themes/our_story_bg_flores.svg);
  background-position: left;
}

.single-evento.theme-manantial .our-story {
  background-color: #fff;
  background-image: url(../img/eventos/themes/our_story_bg_manantial.svg);
}

.single-evento.theme-marfil .our-story {
  background-color: #f7f6f2;
}

.single-evento .our-story .title {
  font-size: 5rem;
}

.single-evento .our-story .story {
  font-size: 1.8rem;
}

.single-evento .our-story .separator {
  max-width: 28rem;
  margin: 0 auto;
}

.single-evento .our-story hr {
  width: 12rem;
  margin: 2rem auto;
  opacity: 0.35;
}

.single-evento.theme-manantial .our-story .title {
  font-size: 8rem;
  color: #102638;
}

.single-evento.theme-manantial .our-story .story {
  font-size: 2rem;
  color: #102638;
  font-family: "Raleway", sans-serif;
}

.single-evento.theme-marfil .our-story .story {
  font-size: 2rem;
  color: #303433;
}

/* ---------------------------------------------------------------------------
 * Album / gallery
 * ------------------------------------------------------------------------- */

.single-evento .album {
  padding: 4rem 0 20rem;
}

.single-evento.theme-hojas .album {
  background-color: #ded4c5;
}

.single-evento.theme-flores .album {
  background-color: #ebe0d1;
}

.single-evento.theme-manantial .album {
  background-color: #7bdee249;
}

.single-evento .galeria-imagenes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 2rem;
}

.single-evento .galeria-imagenes .box {
  min-height: 30.1rem;
  background-size: cover;
  background-position: center;
  border: 1px solid black;
}

@media screen and (max-width: 768px) {
  .single-evento .galeria-imagenes {
    grid-template-columns: repeat(2, 1fr);
  }
  .single-evento .galeria-imagenes .box {
    min-height: 15rem;
  }
}

/* ---------------------------------------------------------------------------
 * Schedule / información
 * ------------------------------------------------------------------------- */

.single-evento .schedule {
  background-size: cover;
  padding: 5rem 0;
  position: relative;
}

.single-evento.theme-hojas .schedule {
  background-image: url(../img/eventos/themes/hojas-informacion.svg);
}

.single-evento.theme-flores .schedule {
  background-image: url(../img/eventos/themes/flores-informacion.svg);
}

.single-evento.theme-manantial .schedule {
  background-image: url(../img/eventos/themes/manantial-informacion.svg);
}

.single-evento.theme-manantial .schedule .title {
  color: #a98c5b;
  font-size: 10rem;
}

.single-evento .schedule h5 {
  padding-bottom: 1rem;
  font-size: 2.4rem;
}

.single-evento.theme-hojas .schedule h5 {
  font-size: 2.4rem !important;
  color: #303433;
  font-weight: 800;
}

.single-evento.theme-manantial .schedule h5 {
  font-size: 4.4rem !important;
  color: #303433;
  font-weight: 800;
}

.single-evento .schedule p {
  font-size: 1.6rem;
}

.single-evento .schedule p.time {
  font-weight: 700;
}

.single-evento.theme-manantial .schedule p {
  font-size: 1.8rem !important;
  color: #707070;
  font-family: "Raleway", sans-serif;
}

.single-evento .time-line {
  position: absolute;
  left: calc(50% - 18px);
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: auto;
  padding: 0;
}

.single-evento .schedule .box {
  max-width: 50%;
  padding: 2rem 0;
}

.single-evento .schedule .row .col-6 {
  padding: 0 5rem;
}

.single-evento .schedule .col-icon {
  display: flex;
  align-items: center;
}

.single-evento .schedule .col-icon img {
  max-width: 9rem;
}

.single-evento .schedule .col-icon:nth-child(odd) {
  justify-content: end;
}

.single-evento .schedule .col-icon:nth-child(even) {
  justify-content: start;
}

@media screen and (max-width: 768px) {
  .single-evento .time-line {
    display: none;
  }
  .single-evento .schedule .row .col-6 {
    padding: 0 1rem;
  }
  .single-evento .schedule .box {
    max-width: 100%;
    padding: 5rem 0;
  }
  .single-evento .schedule .col-icon:nth-child(odd),
  .single-evento .schedule .col-icon:nth-child(even) {
    justify-content: center;
  }
}

/* ---------------------------------------------------------------------------
 * Actions / ubicación
 * ------------------------------------------------------------------------- */

.single-evento .actions {
  padding: 10rem 0;
}

.single-evento .actions .title {
  font-size: 7rem;
  margin-bottom: 0;
}

.single-evento.theme-flores .actions .title {
  font-size: 4rem;
  margin-bottom: 0;
}

.single-evento.theme-manantial .actions {
  font-size: 2.4rem;
}

.single-evento.theme-manantial .actions p {
  font-family: "Raleway", sans-serif;
}

.single-evento .actions p {
  margin-bottom: 0.6rem;
}

.single-evento .actions .event {
  padding: 5rem 0;
  border-bottom: 1px solid black;
}

.single-evento .actions .event:last-child {
  border-bottom: none;
}

.single-evento.theme-hojas .actions {
  background-color: #ded4c5;
}

.single-evento.theme-flores .actions {
  background-color: #ebe0d1;
}

.single-evento.theme-manantial .actions {
  background-color: #e6f3f4;
}

.single-evento .actions .content .box {
  padding: 3rem 0;
  max-width: 31rem;
  margin: 0 auto;
}

/* ---------------------------------------------------------------------------
 * RSVP
 * ------------------------------------------------------------------------- */

.single-evento .rsvp {
  padding: 9rem 0 9rem;
}

.single-evento .rsvp p {
  font-size: 1.8rem;
}

.single-evento.theme-hojas .rsvp {
  background: #6cc39e;
}

.single-evento.theme-hojas .rsvp p {
  font-size: 2.4rem;
  color: #303433;
  padding-bottom: 7rem;
}

.single-evento.theme-manantial .rsvp p {
  font-family: "Raleway", sans-serif;
  font-size: 1.8rem;
}

/* ---------------------------------------------------------------------------
 * Spotify
 * ------------------------------------------------------------------------- */

.single-evento .spotify {
  padding: 3rem 0 2rem;
}

.single-evento.theme-hojas .spotify {
  background: #fff;
}

.single-evento.theme-hojas .spotify h3.title {
  font-size: 3.7rem;
}

.single-evento.theme-flores .spotify {
  background: #ebe0d1;
}

.single-evento.theme-manantial .spotify {
  background: #e6f3f4;
}

.single-evento .spotify .player > iframe {
  min-height: 24.8rem;
  width: 97.6rem;
  max-width: 100%;
}

@media screen and (max-width: 1000px) {
  .single-evento .spotify .player > iframe {
    width: auto;
  }
}

/* ---------------------------------------------------------------------------
 * Password gate
 * ------------------------------------------------------------------------- */

.single-evento .password-gate {
  min-height: 75vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6rem 1.5rem;
}

.single-evento .password-gate .gate-box {
  width: 100%;
  max-width: 46rem;
  text-align: center;
  padding: 4rem 3rem;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.single-evento.theme-marfil .password-gate .gate-box {
  background: #f7f6f2;
}

.single-evento.theme-hojas .password-gate .gate-box {
  background: #ded4c5;
}

.single-evento.theme-flores .password-gate .gate-box {
  background: #ebe0d1;
}

.single-evento.theme-manantial .password-gate .gate-box {
  background: #e6f3f4;
}

.single-evento .password-gate .gate-box h1.title {
  font-size: 3.6rem;
  margin-bottom: 1.5rem;
}

.single-evento .password-gate .gate-box p {
  font-size: 1.6rem;
  margin-bottom: 2.5rem;
}

.single-evento .password-gate .form-control {
  min-height: 46px;
  font-size: 15px;
  text-align: center;
  margin-bottom: 1.5rem;
}

/* ---------------------------------------------------------------------------
 * Confirm-assistance modal
 * ------------------------------------------------------------------------- */

.single-evento .modal {
  z-index: 9999;
  color: var(--evento-color-tech);
}

.single-evento .modal .modal-content {
  border: 0;
  border-radius: 0;
}

.single-evento .modal h1.modal-title {
  font-size: 2rem;
}

.modal-confirm-assistance {
  font-size: 1.5rem;
}

.modal-confirm-assistance label {
  font-size: 15px;
  margin-bottom: 0.4rem;
}

.modal-confirm-assistance .form-control,
.modal-confirm-assistance .form-select {
  min-height: 46px;
  font-size: 15px;
  border-radius: 0.375rem;
}

.modal-confirm-assistance .form-control:focus,
.modal-confirm-assistance .form-select:focus {
  box-shadow: none !important;
}

.modal-confirm-assistance .rsvp-guest {
  padding-top: 1.5rem;
  margin-top: 1.5rem;
  border-top: 1px dashed rgba(0, 0, 0, 0.15);
}

.modal-confirm-assistance .rsvp-guest:first-child {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

.modal-confirm-assistance .rsvp-guest .guest-title {
  font-size: 1.8rem;
  margin-bottom: 1rem;
}

.modal-confirm-assistance .modal-footer .btn {
  min-width: auto;
}

/* SweetAlert2 must sit above the Bootstrap modal. */
.swal2-container.swal2-top,
.swal2-container.swal2-center,
.swal2-container.swal2-bottom {
  z-index: 99999;
}