/*
 * Gift finder block (hediyesahibi/gift-finder). Loaded only on pages with the block.
 * Colours, font, radii and corner smoothing come from the child theme's tokens
 * (style.css :root); the fallbacks keep the block usable without them (and in the
 * block editor).
 */
.hs-gift-finder {
  --hs-gf-ink: var(--hs-ink, #1f2547);
  --hs-gf-muted: var(--hs-muted, #5b6180);
  --hs-gf-accent: var(--hs-blue-600, #0070e0);
  --hs-gf-border: var(--hs-line, #e6e9f0);
  --hs-gf-button: var(--hs-orange-600, #e06c00);
  --hs-gf-button-hover: var(--hs-orange-700, #c2410c);

  /* Intro panel tint and the shapes behind the image (decorative). */
  --hs-gf-panel: #eaf3fe;
  --hs-gf-shape-glow: #cfe4fa;
  --hs-gf-shape-disc: #c9e1f9;
  --hs-gf-shape-disc-end: #f5f9ff;
  --hs-gf-shape-peach: #fde6cc;
  --hs-gf-shape-sparkle: var(--hs-orange, #f09820);
  --hs-gf-shape-sparkle-blue: var(--hs-blue, #3688c8);
  --hs-gf-shape-heart: #f27ea4;
  --hs-gf-shape-dot: #f6b36a;
  --hs-gf-shape-ring: #93c2ee;

  /*
   * Concentric corners: the card publishes its design radius and the inset of the
   * controls that sit in its corners (tablet and phone: the form is the bottom row).
   */
  --hs-parent-r: var(--hs-radius-xl, 28px);
  --hs-parent-p: 16px;

  container: hs-gift-finder / inline-size;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  overflow: clip; /* the intro panel ends at the card's (smoothed) corners */
  color: var(--hs-gf-ink);
  font-family: var(--hs-font, system-ui, sans-serif);
  background: var(--hs-surface, #fff);
  border: 1px solid var(--hs-gf-border);
  border-radius: var(--hs-r-xl, 28px);
  corner-shape: var(--hs-corner-shape, round);
  box-shadow: 0 18px 48px -12px rgba(31, 37, 71, 0.18);
}

/* Padding on an inner box: themes reset the padding of .alignwide/.alignfull blocks. */
.hs-gift-finder__inner {
  --hs-gf-pad-y: 1.5rem;
  --hs-gf-pad-x: 2rem;

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 1.5rem;
  padding: var(--hs-gf-pad-y) var(--hs-gf-pad-x);
}

.hs-gift-finder *,
.hs-gift-finder *::before,
.hs-gift-finder *::after {
  box-sizing: inherit;
}

/*
 * Intro: a tinted panel with the image, title and description. It reaches the card's
 * top, left and bottom edges (negative margins over the inner padding), so the image
 * can sit on the bottom edge; a short divider separates it from the form.
 */
.hs-gift-finder__intro {
  position: relative;
  display: flex;
  flex: 1 1 25rem;
  align-items: center;
  align-self: stretch;
  gap: 1.25rem;
  min-width: 0;
  margin: calc(-1 * var(--hs-gf-pad-y)) 0 calc(-1 * var(--hs-gf-pad-y)) calc(-1 * var(--hs-gf-pad-x));
  padding: 0 1.5rem 0 1rem;
  overflow: hidden;
  overflow: clip; /* cuts the image's lowest part at the edge */
  background: linear-gradient(
    90deg,
    var(--hs-gf-panel) 0%,
    color-mix(in srgb, var(--hs-gf-panel) 55%, transparent) 60%,
    transparent 100%
  );
}

.hs-gift-finder__intro:not(:has(.hs-gift-finder__media)) {
  padding-left: var(--hs-gf-pad-x);
}

.hs-gift-finder__intro::after {
  content: '';
  position: absolute;
  top: var(--hs-gf-pad-y);
  right: 0;
  bottom: var(--hs-gf-pad-y);
  width: 1px;
  background: var(--hs-gf-border);
}

/* The image sits on the bottom edge: 5 % of it is cut off, like a figure behind a counter. */
.hs-gift-finder__media {
  position: relative;
  flex: 0 0 auto;
  align-self: flex-end;
  width: 8.5rem;
  margin-top: 0.625rem;
  translate: 0 5%;
}

.hs-gift-finder__image {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
}

.hs-gift-finder__text {
  min-width: 0;
  padding-block: 1.25rem;
}

/* Shapes behind the image (Block::shapes()): drawn on the image's box, overflowing it. */
.hs-gift-finder__shapes {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.hs-gift-finder__stop-glow {
  stop-color: var(--hs-gf-shape-glow);
}

.hs-gift-finder__stop-disc {
  stop-color: var(--hs-gf-shape-disc);
}

.hs-gift-finder__stop-disc-end {
  stop-color: var(--hs-gf-shape-disc-end);
}

.hs-gift-finder__shape-peach {
  fill: var(--hs-gf-shape-peach);
}

.hs-gift-finder__shape-sparkle {
  fill: var(--hs-gf-shape-sparkle);
}

.hs-gift-finder__shape-sparkle-blue {
  fill: var(--hs-gf-shape-sparkle-blue);
  fill-opacity: 0.75;
}

.hs-gift-finder__shape-heart {
  fill: var(--hs-gf-shape-heart);
}

.hs-gift-finder__shape-dot {
  fill: var(--hs-gf-shape-dot);
}

.hs-gift-finder__shape-ring {
  stroke: var(--hs-gf-shape-ring);
}

.hs-gift-finder__shape-twinkle {
  transform-box: fill-box;
  transform-origin: center;
  animation: hs-gift-finder-twinkle 3.6s ease-in-out infinite;
}

.hs-gift-finder__shape-sparkle-blue.hs-gift-finder__shape-twinkle {
  animation-delay: -1.8s;
}

@keyframes hs-gift-finder-twinkle {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.5;
    transform: scale(0.7);
  }
}

.hs-gift-finder .hs-gift-finder__title {
  margin: 0 0 0.375rem;
  color: var(--hs-gf-accent);
  font-family: inherit;
  font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.hs-gift-finder .hs-gift-finder__description {
  margin: 0;
  color: var(--hs-gf-muted);
  font-size: 0.9375rem;
  line-height: 1.55;
}

/* Form: three selects and the button on one row. */
.hs-gift-finder__form {
  --hs-field-bg: var(--hs-surface, #fff);

  display: flex;
  flex: 1.6 1 43rem;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  margin: 0;
}

.hs-gift-finder__field {
  flex: 1 1 0;
  min-width: 0;
}

/* Large bold text: white on --hs-orange-600 meets WCAG AA for large text. */
.hs-gift-finder .hs-gift-finder__button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3.25rem;
  margin: 0;
  padding: 0.75rem 1.5rem;
  color: #fff;
  font: inherit;
  font-size: 1.1875rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  background: var(--hs-gf-button);
  border: 0;
  border-radius: var(--hs-r-pill, 999px); /* a pill on wide screens: not in a card corner */
  box-shadow: 0 10px 24px -8px rgba(224, 108, 0, 0.55);
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    transform 0.15s ease;
}

.hs-gift-finder .hs-gift-finder__button:hover {
  color: #fff;
  background: var(--hs-gf-button-hover);
}

.hs-gift-finder .hs-gift-finder__button:active {
  transform: translateY(1px);
}

.hs-gift-finder .hs-gift-finder__button:focus-visible {
  outline: 3px solid var(--hs-gf-accent);
  outline-offset: 2px;
}

.hs-gift-finder__button-icon {
  flex: none;
  --hs-icon-accent: currentColor;
}

/* Editor preview only: a missing product attribute, invalid budget ranges. */
.hs-gift-finder__notice {
  flex: 1 1 100%;
  margin: 0;
  padding: 0.5rem 0.75rem;
  color: #6b3a00;
  font-size: 0.8125rem;
  background: #fff4e5;
  border-radius: var(--hs-r-xs, 6px);
  corner-shape: var(--hs-corner-shape, round);
}

/*
 * The layout follows the card's own width (container queries), so the card fits both
 * the home page and the narrower catalogue column. Below 1200 px of card (one row
 * needs about that): intro above the form, which becomes the card's bottom row. Its first field and the button sit in the bottom
 * corners, so the fields and the button follow the card's corners: radius (R − p)
 * with p = the card padding.
 */
@container hs-gift-finder (max-width: 1199px) {
  .hs-gift-finder__inner {
    --hs-gf-pad-y: 1.25rem;
    --hs-gf-pad-x: var(--hs-parent-p);

    padding: var(--hs-parent-p);
    padding-top: var(--hs-gf-pad-y);
  }

  /*
   * The intro is the card's top band: the text on the left (aligned with the first
   * field), the image at the right end (aligned with the button), sitting on the
   * band's bottom line. The tint is strongest behind the image.
   */
  .hs-gift-finder__intro {
    flex-basis: 100%;
    margin: calc(-1 * var(--hs-gf-pad-y)) calc(-1 * var(--hs-gf-pad-x)) 0;
    padding: 0 var(--hs-gf-pad-x);
    background: linear-gradient(
      90deg,
      color-mix(in srgb, var(--hs-gf-panel) 40%, transparent) 0%,
      var(--hs-gf-panel) 100%
    );
    border-bottom: 1px solid var(--hs-gf-border);
  }

  .hs-gift-finder__intro::after {
    content: none;
  }

  .hs-gift-finder__text {
    flex: 1 1 auto;
  }

  .hs-gift-finder__media {
    order: 1;
    width: 8rem;
    margin-left: auto;
  }

  /* No room between the image and the card's right edge for these. */
  .hs-gift-finder__shape-edge {
    display: none;
  }

  .hs-gift-finder__form {
    flex-basis: 100%;
  }

  .hs-gift-finder .hs-field--outlined,
  .hs-gift-finder .hs-gift-finder__button {
    --hs-field-r: max(
      calc((var(--hs-parent-r) - var(--hs-parent-p)) * var(--hs-corner-scale, 1)),
      var(--hs-r-min, 4px)
    );
  }

  .hs-gift-finder .hs-gift-finder__button {
    border-radius: var(--hs-field-r);
    corner-shape: var(--hs-corner-shape, round);
  }
}

/* A narrow card (small tablets): the three fields on one row, the button full width below them. */
@container hs-gift-finder (max-width: 852px) {
  .hs-gift-finder__form {
    flex-wrap: wrap;
    gap: 1.125rem 0.75rem;
  }

  .hs-gift-finder .hs-gift-finder__button {
    flex: 1 1 100%;
  }
}

/* A phone-wide card: everything stacked, full-width button in the bottom corners. */
@container hs-gift-finder (max-width: 672px) {
  .hs-gift-finder__inner {
    gap: 1.25rem;
    padding-inline: var(--hs-parent-p);
  }

  .hs-gift-finder__intro {
    gap: 1rem;
  }

  .hs-gift-finder__media {
    width: 6.5rem;
    margin-top: 0.75rem;
  }

  .hs-gift-finder__text {
    padding-block: 1rem;
  }

  .hs-gift-finder__form {
    flex-direction: column;
    align-items: stretch;
    gap: 1.125rem;
  }

  .hs-gift-finder__field {
    flex: none;
  }

  .hs-gift-finder .hs-gift-finder__button {
    width: 100%;
    margin-top: 0.125rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hs-gift-finder .hs-gift-finder__button {
    transition: none;
  }

  .hs-gift-finder .hs-gift-finder__button:active {
    transform: none;
  }

  .hs-gift-finder__shape-twinkle {
    animation: none;
  }
}