/* CSS main file updated to use the requested palette:
   Palette:
   - #e02b8d (pink)
   - #ef7123 (orange)
   - #f6aa16 (yellow)
   - #db959e (rose)

   I added CSS variables (hex + rgb) and replaced the prominent accent colors found in this file
   so the carousel, heart, overlays, and RSVP button use the new palette.
*/

:root {
  /* Primary palette */
  --mm-pink: #e02b8d;
  --mm-pink-rgb: 224, 43, 141;

  --mm-magenta: #e91e63;
  --mm-magenta-rgb: 233, 30, 99;

  --mm-orange: #ef7123;
  --mm-orange-rgb: 239, 113, 35;

  --mm-yellow: #f6aa16;
  --mm-yellow-rgb: 246, 170, 22;

  --mm-rose: #db959e;
  --mm-rose-rgb: 219, 149, 158;

  /* Utility colors */
  --mm-white: #ffffff;
  --mm-white-rgb: 255, 255, 255;

  /* Semantic aliases */
  --mm-primary: var(--mm-pink);
  --mm-accent: var(--mm-orange);
  --mm-highlight: var(--mm-yellow);
  --mm-muted: var(--mm-rose);
}

/* Font faces (local files in assets/fonts) */
@font-face {
  font-family: 'Raleway-light';
  src: url('../assets/fonts/raleway-light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'black-mango-regular';
  src: url('../assets/fonts/black-mango-regular.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: 'Raleway-light', sans-serif; }

/* Home Page Style */
.ww-home-page {
  background: url("../assets/savethedate/savethedate03.png") no-repeat center center;
  background-size: cover;
  /* background-position: 70%; */
  height: 100vh;
  min-height: 480px;
  max-height: 1080px; }
  .ww-home-page .ww-wedding-announcement {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    height: 100%;
    color: var(--mm-white);
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
    letter-spacing: 2px; }
    .ww-home-page .ww-wedding-announcement .ww-announcement-container {
      max-width: 600px;
      text-align: center;
      margin-left: 0;
      z-index: 999; }
    .ww-home-page .ww-wedding-announcement img {
      max-height: 350px;
      width: auto; }
      @media (max-width: 480px) {
        .ww-home-page .ww-wedding-announcement img {
          max-height: 250px;
          width: auto; } }
    .ww-home-page .ww-wedding-announcement .ww-couple-name {
      font-size: 70px; }
      @media (max-width: 576px) {
        .ww-home-page .ww-wedding-announcement .ww-couple-name {
          font-size: 50px; } }
@media (orientation: landscape) and (min-width: 1024px) {
  .ww-home-page {
    background-size: 100% cover;
    background-position: center center;
  }
}

@media (orientation: portrait), (max-width: 1023px) {
  .ww-home-page {
    background-size: cover;
    background-position: center center;
  }
}

.ww-home-page:before {
  content: "";
  /* overlay uses accent orange (translucent) */
  background-color: rgba(var(--mm-orange-rgb), 0.2);
  width: 100%;
  height: 100%;
  height: 100vh;
  min-height: 480px;
  max-height: 1080px;
  position: absolute;
  left: 0;
  top: 0; }

/* Nav Bar Style */
.ww-nav-bar .heart {
  /* heart icon uses accent orange */
  fill: var(--mm-accent);
  position: relative;
  top: 2px;
  width: 64px;
  height: auto;
  display: inline-block;
  /* -webkit-animation: pulse 1s ease infinite;
          animation: pulse 1s ease infinite; } */
}

@-webkit-keyframes pulse {
  0% {
    transform: scale(1); }
  50% {
    transform: scale(1.3); }
  100% {
    transform: scale(1); } }

@keyframes pulse {
  0% {
    transform: scale(1); }
  50% {
    transform: scale(1.3); }
  100% {
    transform: scale(1); } }

.ww-nav-bar .nav-item {
  font-size: 18px;
  padding: 5px 0 5px 16px;
  font-weight: 500; }

/* Wedding Event Style */
.ww-wedding-event .row {
    display: flex;
    align-items: center;
    margin-bottom: 3rem;
}

.ww-wedding-event .my-3 {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ww-wedding-event .h4 {
    text-align: center;
    margin-bottom: 1.5rem;
}

.ww-wedding-event ul {
    list-style: none;
    padding: 0;
    text-align: center;
}

.ww-wedding-event p {
    text-align: center;
    margin-top: 1.5rem;
}

.ww-wedding-event img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .ww-wedding-event .row {
        flex-direction: column-reverse;
        text-align: center;
    }
    
    .ww-wedding-event .my-3 {
        margin: 1.5rem 0;
    }
}

/* Couple Friends Style  */
.ww-couple-friends .carousel {
  padding: 40px 0; }

.ww-couple-friends .carousel-indicators {
  bottom: 0px; }
  .ww-couple-friends .carousel-indicators li {
    /* non-active indicator uses muted/rose color from palette */
    background-color: var(--mm-muted); }
  .ww-couple-friends .carousel-indicators .active {
    /* active indicator uses accent color (orange) */
    background-color: var(--mm-accent); }

/* Photo Gallery Style */
.ww-photo-gallery .ww-category-filter a {
  display: inline-block;
  margin: 0 10px 6px 0;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 3px; }

.ww-photo-gallery .ww-gallery {
  min-height: 500px; }

.ww-photo-gallery .card-columns .card {
  border: none;
  margin-bottom: 15px;
  border-radius: none; }

@media (max-width: 992px) {
  .ww-photo-gallery .card-columns {
    -moz-column-count: 2;
         column-count: 2; } }

@media (max-width: 576px) {
  .ww-photo-gallery .card-columns {
    -moz-column-count: 1;
         column-count: 1; } }

/* RSVP Style */
.ww-rsvp-detail {
  background: url("../assets/rsvp/rsvp.png") no-repeat center center;
  background-size: cover;
  min-height: 500px;
  position: relative; }
  .ww-rsvp-detail .ww-rsvp-form {
    padding-left: 20%; }
    @media (max-width: 768px) {
      .ww-rsvp-detail .ww-rsvp-form {
        padding-left: 10%; } }
    @media (max-width: 576px) {
      .ww-rsvp-detail .ww-rsvp-form {
        padding-left: 0%; } }
    .ww-rsvp-detail .ww-rsvp-form .form-control {
      /* input background: slight tint using muted rose for a softer look */
      background-color: rgba(var(--mm-rose-rgb), 0.12);
      color: var(--mm-white);
      border: 1px solid rgba(255, 255, 255, 0.6); }
    .ww-rsvp-detail .ww-rsvp-form .form-control::-moz-placeholder {
      color: rgba(var(--mm-white-rgb), 0.85); }
    .ww-rsvp-detail .ww-rsvp-form .form-control:-ms-input-placeholder {
      color: rgba(var(--mm-white-rgb), 0.85); }
    .ww-rsvp-detail .ww-rsvp-form .form-control::placeholder {
      color: rgba(var(--mm-white-rgb), 0.85); }
    .ww-rsvp-detail .ww-rsvp-form select.form-control option {
      background: rgba(0, 0, 0, 0.3);
      color: var(--mm-white); }
    .ww-rsvp-detail .ww-rsvp-form .btn-submit {
      /* RSVP button uses accent orange (translucent) */
      background-color: rgba(var(--mm-orange-rgb), 0.8);
      padding: 0.45rem 1.5rem;
      border: 0; }

.ww-rsvp-detail:before {
  content: "";
  background-color: rgba(0, 0, 0, 0.3);
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0; }

/* RSVP – Guest list theming over dark section */
.ww-rsvp-detail #guests-list {
  background: transparent !important;              /* quitar fondo blanco */
  border-color: rgba(255, 255, 255, 0.25);         /* borde tenue como el resto */
  color: #fff;
}

.ww-rsvp-detail .guest-item {
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.ww-rsvp-detail .guest-item:last-child {
  border-bottom: 0;
}

.ww-rsvp-detail .guest-name,
.ww-rsvp-detail .form-check-label,
.ww-rsvp-detail label[for="same-phone-toggle"] {
  color: #fff;
}

.ww-rsvp-detail .form-check-input:checked {
  background-color: var(--mm-primary, #F07A2B);
  border-color: var(--mm-primary, #F07A2B);
}

.ww-rsvp-detail .guest-phone-input {
  background: rgba(255, 255, 255, 0.92);
  color: #222;
  border-color: transparent;
}

.ww-rsvp-detail .guest-phone-input:focus {
  border-color: var(--mm-primary, #F07A2B);
  box-shadow: 0 0 0 .2rem rgba(240, 122, 43, 0.25);
}

/* RSVP guests table alignment + theme */
.ww-rsvp-detail .rsvp-guests-table td { 
  padding: .5rem .75rem; 
  border-top: 0;
}
.ww-rsvp-detail .rsvp-guests-table .form-check-label { 
  margin-left: .25rem; 
}
.ww-rsvp-detail .rsvp-guests-table .form-check-input { 
  margin-top: 0; 
}

/* RSVP: responsive guest rows & stacked buttons on mobile */
@media (max-width: 767.98px) {
  /* Make guest table rows stack */
  .ww-rsvp-detail .rsvp-guests-table tbody,
  .ww-rsvp-detail .rsvp-guests-table tr,
  .ww-rsvp-detail .rsvp-guests-table td {
    display: block;
    width: 100%;
    padding: .35rem 0;
    text-align: left;
  }

  /* Keep checkbox + name aligned horizontally on top */
  .ww-rsvp-detail .rsvp-guests-table .form-check {
    display: flex;
    align-items: center;
  }
  .ww-rsvp-detail .rsvp-guests-table .guest-name {
    margin-left: .5rem;
  }

  /* Phone label should appear above the input and use same styling as guest name */
  .ww-rsvp-detail .rsvp-guests-table .form-check-label[for^="phone-"] {
    display: block;
    margin: .5rem 0 .25rem 0;
    color: #fff; /* same as guest name */
    font-weight: 700;
  }

  /* Make phone input full width and normal size */
  .ww-rsvp-detail .guest-phone-input {
    width: 100% !important;
    box-sizing: border-box;
    font-size: 1rem;
    padding: .5rem .6rem;
  }

  /* Buttons: stack, centered and with max width */
  .ww-rsvp-detail .rsvp-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    padding: .75rem 0 0;
  }
  .ww-rsvp-detail .rsvp-buttons .btn {
    width: 100%;
    max-width: 320px;
  }
}

/* Styles for "No podré Asistir" button (moved from inline to CSS) */
.btn-no-asistir {
  width: 196px;
  margin-left: 1rem;
}

/* Ensure the btn-no-asistir plays nicely with mobile stacked buttons */
@media (max-width: 767.98px) {
  .btn-no-asistir {
    width: 100% !important;
    margin-left: 0 !important;
  }
}

/* Footer Style */
.ww-footer a.credit {
  color: inherit;
  border-bottom: 1px dashed;
  text-decoration: none;
  cursor: pointer; }

.ww-title {
  font-family: 'black-mango-regular', serif; }

.ww-section {
  padding: 100px 0; }

.btn-primary {
  color: var(--mm-white); }

.btn-outline-primary:hover {
  color: var(--mm-white); }

.ww-countdown {
    text-align: center;
}

.ww-countdown .row {
    max-width: 600px;
    margin: 0 auto;
}

.ww-countdown p {
    color: #484848;
    font-size: 1.2rem;
    margin-top: 0.5rem;
}

.ww-countdown .h2 {
    color: #2f3640;
}

#phrase {
    background-color: rgba(var(--mm-magenta-rgb), 0.8); /* Using the pink color with 10% opacity */
    padding: 4rem 0;
}

#invitation {
    background-color: rgba(var(--mm-magenta-rgb), 0.8); /* Using the rose color with 10% opacity */
    padding: 4rem 0;
}

#phrase .ww-title {
    color: var(--mm-white); /* Using the pink color for the quote text */
}

/* Wedding Party Passport Style */
.passport-card {
    background: var(--mm-white);
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    margin: 20px;
    overflow: hidden;
    max-width: 400px;
    margin: 0 auto;
}

.passport-header {
    background: var(--mm-primary);
    color: var(--mm-white);
    padding: 15px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.passport-photo {
    padding: 20px;
    background: #f8f9fa;
    text-align: center;
}

.passport-photo img {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 50%;
    border: 5px solid var(--mm-white);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.passport-details {
    padding: 20px;
}

.detail-row {
    margin-bottom: 10px;
    border-bottom: 1px dashed #eee;
    padding-bottom: 5px;
}

.detail-row .label {
    font-weight: bold;
    color: var(--mm-primary);
}

.detail-row .value {
    float: right;
}

/* Carousel Customization */
.carousel {
    padding: 20px 0;
}

.carousel-control-prev,
.carousel-control-next {
    width: 10%;
}

/* Wedding Party Section Styles */
.party-section {
    display: none;
    transition: opacity 0.5s ease-in-out;
    opacity: 0;
}

.party-section.active {
    display: block;
    opacity: 1;
}

.party-member-card {
    background: var(--mm-white);
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    margin: 15px;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* Portrait mode (mobile) */
@media (orientation: portrait) {
    .party-member-card {
        max-width: 150px;
        margin: 8px;
    }

    .party-member-photo {
        height: 150px;
    }

    .party-member-info {
        padding: 10px;
        text-align: center;
    }

   .party-member-name {
        font-size: 1rem;
        color: var(--mm-primary);
        margin-bottom: 3px;
        
    }
    .party-member-role,
    .party-member-relationship {
        font-size: 0.8rem;
        margin-bottom: 3px;
    }
    .party-member-role{
        color: var(--mm-accent);
    }
    .party-member-relationship{
      color: var(--mm-muted);
      font-weight: bold;
    }

    #groomsmen-container,
    #bridesmaids-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }
}

/* Landscape mode (desktop) */
@media (orientation: landscape) {
    .party-member-card {
        max-width: 300px;
        margin: 15px;
    }

    .party-member-photo {
        width: 100%;
        height: 300px;
        object-fit: cover;
    }

    .party-member-info {
        padding: 20px;
        text-align: center;
    }

    .party-member-name {
        font-size: 1.5rem;
        color: var(--mm-primary);
        margin-bottom: 5px;
    }

    .party-member-role {
        font-size: 1.1rem;
        color: var(--mm-accent);
        margin-bottom: 10px;
    }

    .party-member-relationship {
        color: var(--mm-muted);
        font-style: italic;
    }

    #groomsmen-container,
    #bridesmaids-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* Common styles for both orientations */
.party-member-photo {
    object-fit: cover;
    width: 100%;
}

/* Navigation buttons responsiveness */
@media (max-width: 576px) {
    .btn-group {
        width: 100%;
    }
    
    .btn-group .btn {
        flex: 1;
        padding: 8px;
        font-size: 0.9rem;
    }
}

/* Monograma: tamaño más grande y responsivo */
/* Nav */
.ww-nav-bar .heart {
  width: 800px;
  height: auto;
  display: inline-block;
}

/* Hero / home announcement (usa alt="Heart" o clase .heart si la añades) */
.ww-wedding-announcement img[alt="Heart"],
.ww-wedding-announcement img.heart {
  width: 800px;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0.5rem auto 0;
}

/* Small screens (portrait / mobile) */
@media (max-width: 576px) {
  .ww-nav-bar .heart {
    width: 400px;
  }

  .ww-wedding-announcement img[alt="Heart"],
  .ww-wedding-announcement img.heart {
    width: 800px;
    max-width: 100%;
  }
}

/* Large screens (desktop / landscape) */
@media (min-width: 992px) {
  .ww-nav-bar .heart {
    width: 800px;
  }

  .ww-wedding-announcement img[alt="Heart"],
  .ww-wedding-announcement img.heart {
    width: 400px;
    max-width: 100%;
    margin-left: 0; /* keep original alignment if needed */
  }
}

/* Monogram styles */
.ww-announcement-container img[alt="Heart"] {
    width: 500px;
    height: 500px;
    object-fit: contain;
    max-width: 100%;
    max-height: 100vh;
    margin: 0 auto;
    display: block;
}

.ww-nav-bar .heart {
    width: 100px;
    height: 100px;
    object-fit: contain;
}

/* Responsive adjustments */
@media (orientation: portrait), (max-width: 768px) {
    .ww-announcement-container img[alt="Heart"] {
        width: 400px;
        height: 400px;
        object-fit: contain;
    }

    .ww-nav-bar .heart {
        width: 60px;
        height: 60px;
    }
}

/* Extra small devices */
@media (max-width: 576px) {
    .ww-announcement-container img[alt="Heart"] {
        width: 400px;
        height: 400px;
        object-fit: contain;
    }

    .ww-nav-bar .heart {
        width: 40px;
        height: 40px;
    }
}

/* Dress Code Table Styles */
#dresscode .table {
    margin-bottom: 2rem;
}

#dresscode .table th,
#dresscode .table td {
    vertical-align: middle;
    border: none;
    padding: 1rem;
}

#dresscode .dress-icons {
    margin-top: 1rem;
}

/* Naranja del timeline para íconos del dress code */
#dresscode .dress-icons i {
  color: var(--mm-primary, #F07A2B) !important; /* usa tu primario; fallback al naranja */
}

/* (opcional) títulos de columnas del dress code con el mismo naranja */
#dresscode .table th.h4 {
  color: var(--mm-primary, #F07A2B);
}

@media (max-width: 768px) {
    #dresscode .table th {
        font-size: 1rem;
    }
    
    #dresscode .table i {
        font-size: 2em;
    }
    
    #dresscode .dress-icons {
        margin-top: 0.5rem;
    }
}

/* No Kids Section Styles */
.no-kids-section {
    padding: 2rem;
    margin-top: 2rem;
    border-top: 1px solid rgba(0,0,0,0.1);
}

.no-kids-section i {
    opacity: 0.6;
}

.no-kids-section h4 {
    font-weight: 500;
}

.no-kids-section p {
    max-width: 600px;
    margin: 1rem auto 0;
    font-size: 0.95rem;
}

/* Dress Code Suggestions Styles */
.dress-code-suggestions {
    padding: 2rem;
    margin-top: 2rem;
    border-top: 1px solid rgba(0,0,0,0.1);
}

.dress-code-suggestions .table {
    max-width: 800px;
    margin: 0 auto;
}

.dress-code-suggestions .table td {
    vertical-align: middle;
    padding: 1rem;
}

.dress-code-suggestions i {
    opacity: 0.6;
}

/* Dress code suggestions: use primary orange for icons */
.dress-code-suggestions .fa-info,
.no-kids-section .fa-child {
  color: var(--mm-primary, #F07A2B) !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal;
}

/* Center all texts in the recommendations table */
.dress-code-suggestions .table thead th,
.dress-code-suggestions .table tbody td {
  text-align: center !important;
  vertical-align: middle;
}

.col-sm-6.aos-init{
  width: 45%!important;
}

/* Overlay Envelope */
.overlay-env{
  position:FIXED;
  z-index: 10000;
  width: 100vw;
  height: 100vh;
  background-image: url('../assets/landing/sobre.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  cursor: pointer;
  transition: opacity 3s ease-in-out;
  opacity: 1;
  background-color: #e02b8d;
}

@media (max-width: 700px){
  .overlay-env{
    background-image: url('../assets/landing/sobre.png');
  }
}
.fade-overlay{
  opacity: 0;
  transition: opacity 3s ease-in-out;
}
.hide-overlay{
  display: none;
}

/* Timeline: full-bleed inside a container */
.timeline-bleed {
  /* Center like .container — limit ancho y aplicar padding lateral */
  max-width: 1140px;       /* coincide con ancho de .container en pantallas grandes */
  margin: 1.5rem auto;     /* separación vertical y centrado horizontal */
  padding: 0 15px;         /* padding lateral similar a columnas */
  position: relative;
  left: 0;
  right: 0;
  width: auto;
}

.timeline-bleed img {
  display: block;
  margin: 0 auto;
  width: 100%;
  height: auto;
  border-radius: 0; /* opcional: mantener sin bordes */
}

/* Opcional: ajustar ligeramente el spacing en mobile */
@media (max-width: 767.98px) {
  .timeline-bleed {
    margin: 1rem auto;
    padding: 0 12px;
  }
}

/* Asegurar que la barra de paginación no se desborde en dispositivos móviles */
#gallery-pagination {
    display: flex; /* Usar flexbox para alinear los elementos */
    justify-content: center; /* Centrar los elementos */
    overflow-x: auto; /* Permitir desplazamiento horizontal si es necesario */
    white-space: nowrap; /* Evitar que los elementos se envuelvan */
    padding: 10px 0; /* Espaciado superior e inferior */
}

#gallery-pagination .page-item {
    display: inline-block; /* Asegurar que los elementos de la página se alineen horizontalmente */
    margin: 0 5px; /* Espaciado entre los elementos */
}

/* Asegurar que los enlaces de paginación no se desborden */
.page-link {
    padding: 10px 15px; /* Espaciado interno para los enlaces */
    text-decoration: none; /* Sin subrayado */
}