/*
 * Gallery and Form widgets (stand-ins for Elementor Pro's, see src/Elementor/). Mirrors the
 * rendering of Elementor Pro 4.3 on bravobridals.com; values marked "Pro" are Pro's defaults, used
 * when a setting is not saved. The device breakpoints are appended inline from Elementor's settings.
 */

/* ---------- Gallery ---------- */

/* The widget fills its column, as Pro's does (its masonry items are positioned absolutely, so the
   widget would otherwise shrink to nothing inside a centred flex container). Custom widths set in
   Elementor (Advanced → Width) are more specific and still apply. */
.elementor-widget-gallery {
  width: 100%;
}

.bravo-gallery {
  --bg-cols: var(--bg-cols-d);
  --bg-gap: var(--bg-gap-d);
  position: relative;
}

.bravo-gallery .e-gallery-item {
  display: block;
  position: relative;
  overflow: hidden;
  margin: 0;
  color: inherit;
}

.bravo-gallery .e-gallery-image {
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Grid: equal cells at the saved aspect ratio, images cropped to fill (Pro: 3:2). */
.bravo-gallery--grid {
  display: grid;
  grid-template-columns: repeat(var(--bg-cols), minmax(0, 1fr));
  gap: var(--bg-gap);
}

.bravo-gallery--grid .e-gallery-image {
  height: auto;
  aspect-ratio: var(--bg-ratio, 3 / 2);
}

/* Masonry: placed by the inline script (shortest column first, as Pro). Until then, or without
   JavaScript, CSS columns give the same look in reading order. */
.bravo-gallery--masonry:not(.is-placed) {
  columns: var(--bg-cols);
  column-gap: var(--bg-gap);
}

.bravo-gallery--masonry:not(.is-placed) .e-gallery-item {
  break-inside: avoid;
  margin-bottom: var(--bg-gap);
}

.bravo-gallery--masonry:not(.is-placed) .e-gallery-image {
  height: auto;
}

/* Hover overlay (Pro: transparent → rgba(0, 0, 0, .5) over 800 ms). */
.bravo-gallery .elementor-gallery-item__overlay {
  position: absolute;
  inset: 0;
  background-color: transparent;
  transition: background-color 0.8s, opacity 0.8s;
  pointer-events: none;
}

.bravo-gallery .e-gallery-item:hover .elementor-gallery-item__overlay,
.bravo-gallery .e-gallery-item:focus-visible .elementor-gallery-item__overlay {
  background-color: rgba(0, 0, 0, 0.5);
}

.bravo-gallery a.e-gallery-item:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}

/* ---------- Form ---------- */

.bravo-form.elementor-form {
  --_col: var(--bf-col-gap, 10px);
  --_row: var(--bf-row-gap, 10px);
  position: relative;
}

.bravo-form.elementor-form .elementor-form-fields-wrapper {
  display: flex;
  flex-wrap: wrap;
  margin: 0 calc(var(--_col) / -2) calc(var(--_row) * -1);
}

.bravo-form.elementor-form .elementor-field-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  position: relative;
  width: 100%;
  min-height: 1px;
  margin: 0 0 var(--_row);
  padding: 0 calc(var(--_col) / 2);
}

/* The invisible reCAPTCHA field takes no room (Pro). */
.bravo-form.elementor-form .elementor-field-group.elementor-field-type-recaptcha_v3 {
  min-height: 0;
  margin-bottom: 0;
}

.bravo-form.elementor-form .elementor-field-group.elementor-col-100 { width: 100%; }
.bravo-form.elementor-form .elementor-field-group.elementor-col-80 { width: 80%; }
.bravo-form.elementor-form .elementor-field-group.elementor-col-75 { width: 75%; }
.bravo-form.elementor-form .elementor-field-group.elementor-col-70 { width: 70%; }
.bravo-form.elementor-form .elementor-field-group.elementor-col-66 { width: 66.666%; }
.bravo-form.elementor-form .elementor-field-group.elementor-col-60 { width: 60%; }
.bravo-form.elementor-form .elementor-field-group.elementor-col-50 { width: 50%; }
.bravo-form.elementor-form .elementor-field-group.elementor-col-40 { width: 40%; }
.bravo-form.elementor-form .elementor-field-group.elementor-col-33 { width: 33.333%; }
.bravo-form.elementor-form .elementor-field-group.elementor-col-30 { width: 30%; }
.bravo-form.elementor-form .elementor-field-group.elementor-col-25 { width: 25%; }
.bravo-form.elementor-form .elementor-field-group.elementor-col-20 { width: 20%; }

.bravo-form.elementor-form .elementor-field-group > .elementor-field,
.bravo-form.elementor-form .elementor-field-group > .elementor-select-wrapper,
.bravo-form.elementor-form .elementor-field-group > .elementor-field-subgroup {
  flex-basis: 100%;
  width: 100%;
  max-width: 100%;
}

.bravo-form.elementor-form .elementor-field-label {
  display: block;
  width: 100%;
  padding-bottom: 0;
  color: var(--bf-label-color, inherit);
  font-family: var(--bf-label-font, inherit);
  font-size: var(--bf-label-size, inherit);
  font-weight: var(--bf-label-weight, inherit);
  line-height: var(--bf-label-lh, inherit);
}

.bravo-form.elementor-form .elementor-screen-only,
.bravo-form__hp {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Input sizes (Pro). */
.bravo-form.elementor-form .elementor-size-xs { --_fs: 13px; --_pad: 4px 12px; --_mh: 33px; --_r: 2px; }
.bravo-form.elementor-form .elementor-size-sm { --_fs: 15px; --_pad: 5px 14px; --_mh: 40px; --_r: 3px; }
.bravo-form.elementor-form .elementor-size-md { --_fs: 16px; --_pad: 6px 16px; --_mh: 47px; --_r: 4px; }
.bravo-form.elementor-form .elementor-size-lg { --_fs: 18px; --_pad: 7px 20px; --_mh: 59px; --_r: 5px; }
.bravo-form.elementor-form .elementor-size-xl { --_fs: 20px; --_pad: 8px 24px; --_mh: 72px; --_r: 6px; }

.bravo-form.elementor-form .elementor-field-textual {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-height: var(--_mh);
  margin: 0;
  padding: var(--_pad);
  font-family: var(--bf-field-font, inherit);
  font-size: var(--bf-field-size, var(--_fs));
  font-weight: var(--bf-field-weight, inherit);
  line-height: var(--bf-field-lh, 1.4);
  color: var(--bf-field-color, #1f2124);
  background-color: var(--bf-field-bg, #fff);
  border-style: solid;
  border-color: var(--bf-field-border-color, #69727d);
  border-width: var(--bf-field-border-width, 1px);
  border-radius: var(--bf-field-radius, var(--_r));
  box-shadow: none;
  outline: 0;
  vertical-align: middle;
  flex-grow: 1;
}

.bravo-form.elementor-form .elementor-field-textual:focus {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.bravo-form.elementor-form .elementor-field-textual:focus-visible {
  outline: 1px solid var(--bf-field-border-color, #69727d);
  outline-offset: 0;
}

/* The live site's Additional CSS shows placeholders at full strength. */
.bravo-form.elementor-form .elementor-field-textual::placeholder {
  color: inherit;
  font-family: inherit;
  opacity: 1;
}

.bravo-form.elementor-form .elementor-select-wrapper {
  position: relative;
}

.bravo-form.elementor-form .elementor-select-wrapper select {
  appearance: none;
  padding-inline-end: 2.5em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75em center;
  background-size: 1em;
}

.bravo-form.elementor-form .elementor-field-subgroup {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25em 1em;
}

.bravo-form.elementor-form .elementor-field-option {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}

/* Submit button (Pro). */
.bravo-form.elementor-form .e-form__buttons {
  display: flex;
  flex-wrap: wrap;
}

.bravo-form.elementor-form.elementor-button-align-center .e-form__buttons { justify-content: center; }
.bravo-form.elementor-form.elementor-button-align-start .e-form__buttons { justify-content: flex-start; }
.bravo-form.elementor-form.elementor-button-align-end .e-form__buttons { justify-content: flex-end; }

.bravo-form.elementor-form .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--_mh);
  padding: var(--bf-btn-padding, var(--_pad-btn));
  font-family: var(--bf-btn-font, inherit);
  font-size: var(--bf-btn-size, var(--_fs));
  font-weight: var(--bf-btn-weight, 500);
  line-height: var(--bf-btn-lh, 1);
  color: var(--bf-btn-color, #fff);
  background-color: var(--bf-btn-bg, var(--e-global-color-accent, #69727d));
  border: 0;
  border-radius: var(--bf-btn-radius, var(--_r));
  box-shadow: none;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s;
}

.bravo-form.elementor-form .elementor-button.elementor-size-xs { --_pad-btn: 10px 20px; }
.bravo-form.elementor-form .elementor-button.elementor-size-sm { --_pad-btn: 12px 24px; }
.bravo-form.elementor-form .elementor-button.elementor-size-md { --_pad-btn: 15px 30px; }
.bravo-form.elementor-form .elementor-button.elementor-size-lg { --_pad-btn: 20px 40px; }
.bravo-form.elementor-form .elementor-button.elementor-size-xl { --_pad-btn: 25px 50px; }

.bravo-form.elementor-form.elementor-button-align-stretch .e-form__buttons .elementor-button {
  flex-basis: 100%;
}

.bravo-form.elementor-form .elementor-button:hover,
.bravo-form.elementor-form .elementor-button:focus-visible {
  color: var(--bf-btn-color-hover, var(--bf-btn-color, #fff));
  background-color: var(--bf-btn-bg-hover, var(--bf-btn-bg, var(--e-global-color-accent, #69727d)));
}

.bravo-form.elementor-form .elementor-button:focus-visible {
  outline: 2px solid var(--bf-btn-bg, #000);
  outline-offset: 2px;
}

.bravo-form.elementor-form .elementor-button-content-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

/* Sending: the button keeps its size; a small spinner sits before the label. */
.bravo-form.elementor-form.is-busy .elementor-button {
  cursor: wait;
}

.bravo-form.elementor-form.is-busy .elementor-button-content-wrapper::before {
  content: "";
  width: 0.9em;
  height: 0.9em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: bravo-form-spin 0.75s linear infinite;
}

@keyframes bravo-form-spin {
  to { transform: rotate(360deg); }
}

/* Messages (Pro, with this site's saved colours and typography). */
.bravo-form.elementor-form .elementor-message {
  width: 100%;
  margin: 10px 0;
  font-family: var(--bf-msg-font, inherit);
  font-size: var(--bf-msg-size, 1em);
  font-weight: var(--bf-msg-weight, inherit);
  line-height: 1;
}

.bravo-form.elementor-form .elementor-message-success {
  color: var(--bf-msg-success, #5cb85c);
}

.bravo-form.elementor-form .elementor-message-success::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-inline-end: 5px;
  vertical-align: middle;
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxMSIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDE0IDExIj48cGF0aCBmaWxsPSIjMDA4YTIwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00Ljc1IDguMTUgMS42IDUgLjU1IDYuMDVsNC4yIDQuMiA5LTlMMTIuNy4yeiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+") 50% / contain no-repeat;
}

.bravo-form.elementor-form .elementor-message-danger {
  color: var(--bf-msg-error, #d9534f);
}

.bravo-form.elementor-form .elementor-message.elementor-help-inline {
  margin: 5px 0 0;
  color: var(--bf-msg-inline, #d9534f);
}

.bravo-form.elementor-form .elementor-error .elementor-field-textual,
.bravo-form.elementor-form .elementor-error .elementor-acceptance-field {
  border-color: #d9534f;
}

@media (prefers-reduced-motion: reduce) {
  .bravo-gallery .elementor-gallery-item__overlay,
  .bravo-form.elementor-form .elementor-button {
    transition: none;
  }

  .bravo-form.elementor-form.is-busy .elementor-button-content-wrapper::before {
    animation-duration: 2s;
  }
}

/* ---------- Posts (Elementor Pro "Posts", Classic skin) ---------- */

/* .elementor-grid (free Elementor's frontend CSS) sets its own gaps; these win. */
.elementor-posts-container.bravo-posts {
  --bp-cols: var(--bp-cols-d);
  --bp-ratio: var(--bp-ratio-d);
  --bp-title-fs: var(--bp-title-size, 18px);
  --bp-meta-fs: var(--bp-meta-size, 12px);
  --bp-more-fs: var(--bp-more-size, 12px);
  --grid-row-gap: var(--bp-row-gap, 35px);
  --grid-column-gap: var(--bp-col-gap, 30px);
  display: grid;
  grid-template-columns: repeat(var(--bp-cols), minmax(0, 1fr));
  column-gap: var(--bp-col-gap, 30px);
  row-gap: var(--bp-row-gap, 35px);
}

.bravo-posts .elementor-post {
  display: flex;
  flex-direction: column;
  min-width: 0;
  text-align: var(--bp-align, left);
}

.bravo-posts--thumbnail-left .elementor-post { flex-direction: row; }
.bravo-posts--thumbnail-right .elementor-post { flex-direction: row-reverse; }

.bravo-posts .elementor-post__thumbnail__link {
  display: block;
  position: relative;
  flex-shrink: 0;
  width: var(--bp-img-w, 100%);
  margin-bottom: var(--bp-img-gap, 20px);
}

.bravo-posts--thumbnail-left .elementor-post__thumbnail__link { margin: 0 var(--bp-img-gap, 20px) 0 0; }
.bravo-posts--thumbnail-right .elementor-post__thumbnail__link { margin: 0 0 0 var(--bp-img-gap, 20px); }

.bravo-posts .elementor-post__thumbnail {
  position: relative;
  overflow: hidden;
  padding-bottom: calc(var(--bp-ratio, 0.66) * 100%);
}

.bravo-posts .elementor-post__thumbnail img {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
}

.bravo-posts .elementor-post__text {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-width: 0;
}

.bravo-posts .elementor-post__title {
  margin: 0 0 var(--bp-title-gap, 10px);
  font-family: var(--bp-title-family, inherit);
  font-size: var(--bp-title-fs);
  font-weight: var(--bp-title-weight, 600);
  line-height: var(--bp-title-lh, 1.2);
  color: var(--bp-title-color, inherit);
}

.bravo-posts .elementor-post__title a {
  color: inherit;
  text-decoration: none;
}

.bravo-posts .elementor-post__meta-data {
  margin-bottom: var(--bp-meta-gap, 13px);
  font-family: var(--bp-meta-family, inherit);
  font-size: var(--bp-meta-fs);
  font-weight: var(--bp-meta-weight, 400);
  line-height: 1.3;
  color: var(--bp-meta-color, #adadad);
}

.bravo-posts .elementor-post__meta-separator {
  margin: 0 0.25em;
  color: var(--bp-sep-color, currentColor);
}

.bravo-posts .elementor-post__excerpt p {
  margin: 0 0 var(--bp-excerpt-gap, 20px);
  font-family: var(--bp-excerpt-family, inherit);
  font-size: var(--bp-excerpt-size, 14px);
  line-height: var(--bp-excerpt-lh, 1.5);
  color: var(--bp-excerpt-color, #777);
}

.bravo-posts .elementor-post__read-more {
  font-family: var(--bp-more-family, inherit);
  font-size: var(--bp-more-fs);
  font-weight: var(--bp-more-weight, 700);
  line-height: var(--bp-more-lh, 1.5);
  color: var(--bp-more-color, inherit);
  text-decoration: none;
}

.bravo-posts .elementor-post__title a:hover,
.bravo-posts .elementor-post__read-more:hover {
  opacity: 0.8;
}

/* ---------- Products (Elementor Pro "Products") ---------- */

.bravo-products {
  --bpr-cols: var(--bpr-cols-d);
  --bpr-gap: var(--bpr-gap-d, 20px);
  --bpr-row-gap: var(--bpr-row-gap-d, 40px);
}

.bravo-products .product-grid,
.bravo-products ul.products {
  display: grid;
  grid-template-columns: repeat(var(--bpr-cols), minmax(0, 1fr));
  column-gap: var(--bpr-gap);
  row-gap: var(--bpr-row-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* As the live loop (Additional CSS + the widget's Custom CSS): photos 400px tall (300px up to
   1024px wide, 250px on phones), aligned to the top; result count 14px above the grid. */
.bravo-products .card__media {
  aspect-ratio: auto;
  height: 400px;
}

.bravo-products .card__img {
  object-position: top center;
}

.bravo-products .collection__toolbar {
  margin-bottom: 14px;
  line-height: 1.5;
}

@media (max-width: 1024px) {
  .bravo-products .card__media { height: 300px; }
}

@media (max-width: 767px) {
  .bravo-products .card__media { height: 250px; }
}

/* Long galleries: photos after the first page stay folded until "Show more" (GalleryRenderer). */
.js .bravo-gallery > [data-gallery-more] {
  display: none;
}
.bravo-gallery-more {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}
.no-js .bravo-gallery-more {
  display: none;
}

/* Videos (GalleryRenderer): a play mark on the cover photo. */
.bravo-gallery__video::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border-radius: 50%;
  background: rgb(0 0 0 / 0.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5v14l11-7z'/%3E%3C/svg%3E") 55% 50% / 26px no-repeat;
  pointer-events: none;
}
/* Elementor's lightbox leaves a portrait video at the left of its frame. */
.elementor-lightbox .elementor-video-portrait video {
  display: block;
  margin-inline: auto;
}