/**
 * Gift Product Display Styles
 * Cart row and selection modal for Buy X Get Y free product gifts.
 *
 * Shadcn-style neutral palette. Every colour, size and reset is pinned on the
 * plugin's own classes so the look survives whatever the active theme does to
 * bare `button`, `input`, `h3`, `ul` and `a` elements. Tokens are scoped to the
 * plugin roots and can be overridden by a theme from a higher-level selector.
 */

.yaydp-gift-item,
.yaydp-gift-badge-small,
.yaydp-offer-panel,
.yaydp-modal-overlay {
  --yaydp-bg: #ffffff;
  --yaydp-fg: #09090b;
  --yaydp-muted: #f4f4f5;
  --yaydp-muted-fg: #71717a;
  --yaydp-border: #e4e4e7;
  --yaydp-primary: #18181b;
  --yaydp-primary-fg: #fafafa;
  --yaydp-ring: #a1a1aa;
  --yaydp-destructive: #ef4444;
  --yaydp-radius: 8px;
  --yaydp-gift-accent: #16a34a;
}

/* ------------------------------------------------------------------ */
/* Shared controls                                                    */
/* ------------------------------------------------------------------ */

/* Button. The trailing class repeat lifts specificity above the theme's
   `.entry-content button`-style rules without needing !important. */
.yaydp-btn.yaydp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  padding: 0 16px;
  margin: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--yaydp-fg);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    opacity 0.15s ease;
}

.yaydp-btn.yaydp-btn:focus {
  outline: none;
}

.yaydp-btn.yaydp-btn:focus-visible {
  outline: 2px solid var(--yaydp-ring);
  outline-offset: 2px;
}

.yaydp-btn.yaydp-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.yaydp-btn.yaydp-btn-primary {
  background: var(--yaydp-primary);
  border-color: var(--yaydp-primary);
  color: var(--yaydp-primary-fg);
}

.yaydp-btn.yaydp-btn-primary:hover {
  background: color-mix(in srgb, var(--yaydp-primary) 90%, transparent);
  border-color: transparent;
  color: var(--yaydp-primary-fg);
}

.yaydp-btn.yaydp-modal-save {
  background: var(--yaydp-primary-color);
  border-color: var(--yaydp-primary-color);
  color: #fff;
}

.yaydp-btn.yaydp-modal-save:hover {
  background: color-mix(in srgb, var(--yaydp-primary-color) 88%, #000);
  border-color: color-mix(in srgb, var(--yaydp-primary-color) 88%, #000);
  color: #fff;
}

.yaydp-btn.yaydp-btn-outline {
  background: var(--yaydp-bg);
  border-color: var(--yaydp-border);
  color: var(--yaydp-fg);
}

.yaydp-btn.yaydp-btn-outline:hover,
.yaydp-btn.yaydp-btn-ghost:hover {
  background: var(--yaydp-muted);
  color: var(--yaydp-fg);
}

.yaydp-btn.yaydp-btn-sm {
  height: 32px;
  padding: 0 12px;
  font-size: 13px;
}

.yaydp-btn.yaydp-btn-icon {
  width: 36px;
  padding: 0;
}

.yaydp-btn.yaydp-btn svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

/* ------------------------------------------------------------------ */
/* Cart row                                                           */
/* ------------------------------------------------------------------ */

.yaydp-gift-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  color: var(--yaydp-fg);
}

/* Badge */
.yaydp-gift-badge-small {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--yaydp-gift-accent);
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
}

.yaydp-gift-badge-small {
  padding: 0 8px;
  background: var(--yaydp-primary-color);
  font-size: 10px;
  margin-right: 6px;
}

.yaydp-gift-title {
  font-weight: 500;
  line-height: 1.4;
}

/* Selected items summary */
.yaydp-gift-selections {
  /* Themes reset lists from an id selector (Divi's #main-content ul), which
     no class chain can beat. */
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  max-width: 320px;
}

.yaydp-gift-selection-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  line-height: 1.4;
}

.yaydp-gift-selection-image {
  flex: 0 0 50px;
  width: 50px;
  height: 50px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--yaydp-muted);
}

/* Themes float, shrink and indent every image in a mini cart's product list
   (WooCommerce core and Storefront: `.product_list_widget li img`), which
   would pull the gift thumbnails out of their line. */
.yaydp-gift-item .yaydp-gift-selection-image img {
  display: block;
  float: none;
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0 !important;
  object-fit: cover;
  border-radius: 0;
  box-shadow: none;
}

/* Mini carts style every `li` of their product list (padding, borders,
   Storefront's remove-link gutter); the gift lines are list items too. */
.yaydp-gift-item .yaydp-gift-selections .yaydp-gift-selection-item {
  position: static;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Clearfix pseudo-elements on theme `li`s would become extra flex items. */
.yaydp-gift-item .yaydp-gift-selections .yaydp-gift-selection-item::before,
.yaydp-gift-item .yaydp-gift-selections .yaydp-gift-selection-item::after {
  content: none;
}

.yaydp-gift-selection-qty {
  min-width: 28px;
  color: var(--yaydp-muted-fg);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.yaydp-gift-selection-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.yaydp-gift-none-text {
  color: var(--yaydp-muted-fg);
  font-size: 13px;
}

/* Saving state: the row's items are replaced until the reload renders them. */
.yaydp-gift-selections-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--yaydp-muted-fg);
  font-size: 13px;
}

.yaydp-gift-selections-loading::before {
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid var(--yaydp-border);
  border-top-color: var(--yaydp-fg);
  border-radius: 50%;
  animation: yaydp-gift-spin 0.7s linear infinite;
}

@keyframes yaydp-gift-spin {
  to {
    transform: rotate(360deg);
  }
}

.yaydp-gift-manage-btn {
  margin-top: 2px;
}

.yaydp-btn.yaydp-gift-manage-btn,
.yaydp-btn.yaydp-gift-manage-btn:hover {
  background: var(--yaydp-primary-color);
  border-color: var(--yaydp-primary-color);
  color: #fff;
}

a:has(.yaydp-gift-icon) {
  text-decoration: none !important;
}

/* Gift icon in place of the product thumbnail: the same tile as the cart
   gift panel header, scaled to the thumbnail. */
.yaydp-gift-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 64px;
  height: 64px;
  margin: auto;
  border: 1px solid #cfe7d5;
  border-radius: 2px;
  background: #fff;
  color: #007017;
  line-height: 1;
}

.yaydp-gift-icon svg {
  display: block;
  width: 32px;
  height: 32px;
  fill: currentColor;
}

/* Classic mini cart (every theme rendering woocommerce_mini_cart()): it
   always lists each gift product on its own row, whatever the grouping
   setting, so only the title and price need to fit its narrow panel. */
.woocommerce-mini-cart .yaydp-gift-item {
  display: block;
}

.woocommerce-mini-cart .yaydp-gift-title {
  display: block;
  margin-bottom: 8px;
  line-height: 1.4;
}

.woocommerce-mini-cart .yaydp-gift-price {
  display: inline-block;
  margin-top: 8px;
}

.yaydp-gift-price {
  padding: 2px 10px;
  background: var(--yaydp-primary-color);
  border-radius: 3px;
  color: #fff;
}

.yaydp-gift-qty,
.yaydp-gift-qty-readonly {
  display: block;
  font-weight: 500;
  text-align: center;
}

/* ------------------------------------------------------------------ */
/* Modal                                                              */
/* ------------------------------------------------------------------ */

/* The offer panel's Choose Gift button and the picker's Save button share
   the plugin primary colour. The modal is appended to <body>, so it lives on
   :root. */
:root {
  --yaydp-gift-cta: var(--yaydp-primary-color);
  --yaydp-gift-cta-hover: color-mix(in srgb, var(--yaydp-primary-color) 88%, #000);
  --yaydp-gift-cta-fg: #fff;
}

/* The picker follows the cart design: square WordPress-style corners,
   neutral greys, the plugin primary colour for Save, the chosen ring and tick. */
.yaydp-modal-overlay {
  --yaydp-modal-fg: #1e1e1e;
  --yaydp-modal-muted-fg: #6b7280;
  --yaydp-modal-muted: #f3f4f6;
  --yaydp-modal-divider: #eeeeee;
  --yaydp-modal-line: #e5e7eb;
  --yaydp-modal-field: #d1d5db;
  --yaydp-modal-faint: #9ca3af;
  --yaydp-modal-primary: var(--yaydp-gift-cta);
  --yaydp-modal-primary-hover: var(--yaydp-gift-cta-hover);
  --yaydp-modal-primary-fg: var(--yaydp-gift-cta-fg);
  --yaydp-modal-free: #007017;
  --yaydp-modal-radius: 4px;
  --yaydp-modal-ctl-radius: 2px;

  display: none;
  position: fixed;
  inset: 0;
  padding: 24px;
  background: rgba(17, 17, 17, 0.5);
  z-index: 999999;
  justify-content: center;
  align-items: center;
  color: var(--yaydp-modal-fg);
  font-size: 14px;
  line-height: 1.5;
}

.yaydp-modal-overlay.active {
  display: flex;
  animation: yaydp-fade-in 0.15s ease-out;
}

.yaydp-modal-overlay *,
.yaydp-modal-overlay *::before,
.yaydp-modal-overlay *::after {
  box-sizing: border-box;
}

.yaydp-modal {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 880px;
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  border-radius: var(--yaydp-modal-radius);
  background: #fff;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.24);
  overflow: hidden;
}

.yaydp-modal-overlay.active .yaydp-modal {
  animation: yaydp-zoom-in 0.2s ease-out;
}

@keyframes yaydp-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes yaydp-zoom-in {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .yaydp-modal-overlay.active,
  .yaydp-modal-overlay.active .yaydp-modal {
    animation: none;
  }
}

/* Header: title and offer on the left, counter pill and close on the right. */
.yaydp-modal-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--yaydp-modal-divider);
}

.yaydp-modal-heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.yaydp-modal-header h3 {
  margin: 0;
  padding: 0;
  color: var(--yaydp-modal-fg);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
}

.yaydp-modal .yaydp-modal-description {
  margin: 0;
  padding: 0;
  color: var(--yaydp-modal-muted-fg);
  font-size: 14px;
  line-height: 1.5;
}

.yaydp-modal-counter {
  flex: none;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--yaydp-modal-muted);
  color: var(--yaydp-modal-fg);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.yaydp-modal .yaydp-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--yaydp-modal-ctl-radius);
  background: transparent;
  color: var(--yaydp-modal-fg);
  box-shadow: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.yaydp-modal .yaydp-modal-close:hover {
  background: var(--yaydp-modal-muted);
  color: var(--yaydp-modal-fg);
}

.yaydp-modal .yaydp-modal-close:focus {
  outline: none;
}

.yaydp-modal .yaydp-modal-close:focus-visible {
  outline: 2px solid var(--yaydp-modal-fg);
  outline-offset: 2px;
}

/* Body */
.yaydp-modal-body {
  flex: 1;
  min-height: 0;
  padding: 0 24px 28px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.yaydp-modal-body form {
  margin: 0;
}

/* Footer: guidance on the left, Clear / Cancel / Save on the right. */
.yaydp-modal-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px 24px;
  border-top: 1px solid var(--yaydp-modal-divider);
  background: #fff;
}

.yaydp-modal .yaydp-modal-hint {
  flex: 1 1 200px;
  min-width: 0;
  margin: 0;
  padding: 0;
  color: var(--yaydp-modal-muted-fg);
  font-size: 14px;
  line-height: 1.4;
}

.yaydp-modal-footer-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.yaydp-modal .yaydp-btn.yaydp-btn {
  height: 40px;
  padding: 0 18px;
  border-radius: var(--yaydp-modal-ctl-radius);
  font-size: 15px;
  font-weight: 400;
}

.yaydp-modal .yaydp-btn.yaydp-btn-ghost {
  padding: 0 12px;
  color: var(--yaydp-modal-fg);
}

.yaydp-modal .yaydp-btn.yaydp-btn-ghost:hover {
  background: var(--yaydp-modal-muted);
}

/* Clear stays in place when there is nothing to clear, just greyed. */
.yaydp-modal .yaydp-btn.yaydp-modal-clear:disabled {
  opacity: 1;
  color: #c4c4c4;
}

.yaydp-modal .yaydp-btn.yaydp-btn-outline {
  border-color: var(--yaydp-modal-field);
  background: #fff;
  color: var(--yaydp-modal-fg);
}

.yaydp-modal .yaydp-btn.yaydp-btn-outline:hover {
  border-color: var(--yaydp-modal-fg);
  background: #fff;
}

.yaydp-modal .yaydp-btn.yaydp-modal-save {
  padding: 0 22px;
  border-color: var(--yaydp-modal-primary);
  background: var(--yaydp-modal-primary);
  color: var(--yaydp-modal-primary-fg);
  font-weight: 500;
}

.yaydp-modal .yaydp-btn.yaydp-modal-save:hover {
  border-color: var(--yaydp-modal-primary-hover);
  background: var(--yaydp-modal-primary-hover);
  color: var(--yaydp-modal-primary-fg);
}

/* Search: sticky field with the magnifier drawn in. */
.yaydp-gift-search {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 20px 0 0;
  background: #fff;
}

.yaydp-modal .yaydp-gift-search-input {
  display: block;
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0 14px 0 42px;
  border: 1px solid var(--yaydp-modal-field);
  border-radius: var(--yaydp-modal-ctl-radius);
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4 4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 14px center;
  background-size: 18px 18px;
  color: var(--yaydp-modal-fg);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.5;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.yaydp-modal .yaydp-gift-search-input::placeholder {
  color: var(--yaydp-modal-muted-fg);
  opacity: 1;
}

.yaydp-modal .yaydp-gift-search-input:focus {
  outline: none;
  border-color: var(--yaydp-modal-fg);
  box-shadow: 0 0 0 1px var(--yaydp-modal-fg);
}

/* Native clear button: hidden until there is something to clear. */
.yaydp-modal .yaydp-gift-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E")
    center / 16px 16px no-repeat;
}

.yaydp-modal .yaydp-gift-search-empty {
  margin: 32px 0 8px;
  padding: 0;
  text-align: center;
  color: var(--yaydp-modal-muted-fg);
  font-size: 14px;
}

/* Selected / Available: small caps label with a rule running to the right. */
.yaydp-modal .yaydp-gift-section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0 14px;
  padding: 0;
  color: var(--yaydp-modal-muted-fg);
  /* 12px in the design's system font; themes such as Source Sans run smaller. */
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.yaydp-gift-section-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--yaydp-modal-divider);
}

/* Product grid */
.yaydp-gift-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 14px;
}

/* Fades while the next page is fetched. */
.yaydp-gift-available-grid.is-loading {
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.yaydp-gift-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--yaydp-modal-line);
  border-radius: var(--yaydp-modal-radius);
  background: #fff;
  text-align: center;
  transition: border-color 0.15s ease;
}

.yaydp-gift-card:hover {
  border-color: var(--yaydp-modal-faint);
}

.yaydp-gift-available-grid .yaydp-gift-card:not(.out-of-stock):hover {
  border-color: var(--yaydp-modal-primary);
}

/* Chosen cards: primary ring and a tick on the image. */
.yaydp-gift-selected-grid .yaydp-gift-card,
.yaydp-gift-selected-grid .yaydp-gift-card:hover {
  border-color: var(--yaydp-modal-primary);
  box-shadow: 0 0 0 0.5px var(--yaydp-modal-primary);
}

.yaydp-gift-card.out-of-stock {
  background: var(--yaydp-modal-muted);
  opacity: 0.55;
  pointer-events: none;
}

.yaydp-gift-card.out-of-stock .yaydp-gift-card-image img {
  filter: grayscale(1);
}

.yaydp-gift-card-image {
  position: relative;
  overflow: hidden;
  border-radius: var(--yaydp-modal-ctl-radius);
  background: var(--yaydp-modal-muted);
}

.yaydp-gift-card-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  margin: 0;
  object-fit: cover;
  border-radius: 0;
  box-shadow: none;
}

.yaydp-gift-card-check {
  display: none;
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--yaydp-modal-primary);
  color: var(--yaydp-modal-primary-fg);
  align-items: center;
  justify-content: center;
}

.yaydp-gift-selected-grid .yaydp-gift-card-check {
  display: flex;
}

.yaydp-gift-card-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 10px;
}

/* Long names clamp at two lines, and short ones still reserve both, so the
   button sits at the same height across the row. */
.yaydp-modal .yaydp-gift-card h4 {
  margin: 0;
  padding: 0;
  color: var(--yaydp-modal-fg);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  min-height: 2.8em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.yaydp-modal .yaydp-gift-card h4 a {
  color: inherit;
  text-decoration: none;
  box-shadow: none;
  border: 0;
}

.yaydp-modal .yaydp-gift-card h4 a:hover {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Struck-through value, then FREE. */
.yaydp-gift-card-price {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
  line-height: 1.3;
}

.yaydp-modal .yaydp-gift-card-price del {
  color: var(--yaydp-modal-faint);
  opacity: 1;
}

.yaydp-modal .yaydp-gift-card-price del .amount {
  color: inherit;
}

.yaydp-gift-card-free {
  color: var(--yaydp-modal-free);
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* Available cards show Add gift; chosen cards show the stepper instead. */
.yaydp-modal .yaydp-gift-add {
  display: block;
  width: 100%;
  height: 36px;
  margin: auto 0 0;
  padding: 0 12px;
  border: 1px solid var(--yaydp-modal-fg);
  border-radius: var(--yaydp-modal-ctl-radius);
  background: #fff;
  color: var(--yaydp-modal-fg);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  text-transform: none;
  box-shadow: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.yaydp-modal .yaydp-gift-add:hover:not(:disabled),
.yaydp-modal .yaydp-gift-add:focus-visible {
  border-color: var(--yaydp-modal-primary);
  background: var(--yaydp-modal-primary);
  color: var(--yaydp-modal-primary-fg);
}

.yaydp-modal .yaydp-gift-add:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.yaydp-gift-selected-grid .yaydp-gift-add,
.yaydp-gift-available-grid .yaydp-gift-card-qty {
  display: none;
}

/* Stepper: minus, count, plus in one bordered control. */
.yaydp-gift-card-qty {
  display: inline-flex;
  align-self: center;
  align-items: center;
  height: 36px;
  margin-top: auto;
  border: 1px solid var(--yaydp-modal-line);
  border-radius: var(--yaydp-modal-ctl-radius);
  background: #fff;
}

.yaydp-modal .yaydp-qty-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  min-width: 0;
  height: 34px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--yaydp-modal-muted-fg);
  font-family: inherit;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  box-shadow: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.yaydp-modal .yaydp-qty-step:hover:not(:disabled) {
  background: transparent;
  color: #000;
}

.yaydp-modal .yaydp-qty-step:focus {
  outline: none;
}

.yaydp-modal .yaydp-qty-step:focus-visible {
  outline: 2px solid var(--yaydp-modal-fg);
  outline-offset: -2px;
}

/* On the last unit, minus becomes a trash icon that removes the gift. */
.yaydp-qty-minus .yaydp-qty-remove-icon,
.yaydp-qty-minus.is-remove .yaydp-qty-minus-glyph {
  display: none;
}

.yaydp-qty-minus.is-remove .yaydp-qty-remove-icon {
  display: block;
}

.yaydp-modal .yaydp-qty-step:disabled {
  background: transparent;
  color: #c4c4c4;
  cursor: default;
}

.yaydp-modal .yaydp-gift-qty-input {
  width: 32px;
  height: 34px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--yaydp-modal-fg);
  /* Themes commonly put an inset shadow on inputs; the stepper wants a flat field. */
  box-shadow: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
  -webkit-appearance: none;
  appearance: none;
  -moz-appearance: textfield;
}

.yaydp-modal .yaydp-gift-qty-input:focus {
  outline: none;
  box-shadow: inset 0 -2px 0 var(--yaydp-modal-fg);
}

/* The buttons replace the native spinners. */
.yaydp-modal .yaydp-gift-qty-input::-webkit-outer-spin-button,
.yaydp-modal .yaydp-gift-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.yaydp-variation-select {
  width: 100%;
  margin-top: 8px;
}

.yaydp-out-of-stock-label {
  display: block;
  margin-top: auto;
  color: #cc1818;
  font-size: 13px;
  font-weight: 500;
}

/* Variation attributes inside a gift card */
.yaydp-gift-card-attributes {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  color: var(--yaydp-modal-muted-fg);
  font-size: 12px;
}

/* Pagination, under the Available grid. */
.yaydp-gift-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
}

.yaydp-gift-pagination .yaydp-page-info {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--yaydp-modal-muted-fg);
  font-size: 14px;
  font-weight: 400;
}

.yaydp-gift-pagination .yaydp-page-total {
  color: var(--yaydp-modal-fg);
  font-weight: 500;
}

.yaydp-modal .yaydp-gift-pagination .yaydp-btn.yaydp-btn-icon {
  width: 36px;
  height: 36px;
  padding: 0;
}

.yaydp-modal .yaydp-page-input {
  width: 52px;
  height: 36px;
  margin: 0;
  padding: 0 6px;
  border: 1px solid var(--yaydp-modal-field);
  border-radius: var(--yaydp-modal-ctl-radius);
  background: #fff;
  color: var(--yaydp-modal-fg);
  /* Themes commonly put an inset shadow on inputs; the field wants to be flat. */
  box-shadow: none;
  font-family: inherit;
  font-size: 14px;
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
  -webkit-appearance: none;
  appearance: none;
  -moz-appearance: textfield;
}

.yaydp-modal .yaydp-page-input:focus {
  outline: none;
  border-color: var(--yaydp-modal-fg);
  box-shadow: 0 0 0 1px var(--yaydp-modal-fg);
}

.yaydp-modal .yaydp-page-input::-webkit-outer-spin-button,
.yaydp-modal .yaydp-page-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ------------------------------------------------------------------ */
/* Responsive                                                         */
/* ------------------------------------------------------------------ */

@media (max-width: 768px) {
  .yaydp-gift-selections {
    max-width: none;
  }
}

/* Bottom sheet on phones. */
@media (max-width: 599px) {
  .yaydp-modal-overlay {
    padding: 0;
    align-items: flex-end;
  }

  .yaydp-modal {
    max-height: 92vh;
    max-height: 92dvh;
    border-radius: 8px 8px 0 0;
  }

  .yaydp-modal-header {
    gap: 12px;
    padding: 16px;
  }

  .yaydp-modal-header h3 {
    font-size: 18px;
  }

  /* The footer hint carries the count on phones. */
  .yaydp-modal-counter {
    display: none;
  }

  .yaydp-modal-body {
    padding: 0 16px 20px;
  }

  .yaydp-gift-search {
    padding-top: 16px;
  }

  .yaydp-modal-footer {
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  }

  .yaydp-modal .yaydp-modal-hint {
    flex-basis: 100%;
  }

  .yaydp-modal-footer-actions {
    flex: 1 1 100%;
    margin-left: 0;
  }

  .yaydp-modal .yaydp-btn.yaydp-modal-save {
    flex: 1 1 auto;
  }

  /* iOS zooms the page in on any field under 16px. */
  .yaydp-modal .yaydp-gift-search-input,
  .yaydp-modal .yaydp-page-input,
  .yaydp-modal .yaydp-gift-qty-input {
    font-size: 16px;
  }

  .yaydp-gift-grid {
    grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
    gap: 10px;
  }
}

/* ------------------------------------------------------------------ */
/* Offer panel (cart page, grouped mode)                              */
/* ------------------------------------------------------------------ */

/* The panel row carries no divider of its own so the panel reads as part
   of the line above, with a small gap below it. A spacer cell skips the
   remove column, and the theme's horizontal cell padding is kept, so the
   card lines up with the thumbnail on the left and the subtotal on the
   right. Cells are pinned so theme borders and zebra stripes don't paint
   them. */
.yaydp-offer-panel-row.yaydp-offer-panel-row.yaydp-offer-panel-row > td,
.yaydp-offer-panel-row.yaydp-offer-panel-row.yaydp-offer-panel-row:nth-child(n) > td {
  padding-top: 8px;
  padding-bottom: 24px;
  border-top: 0;
  background: transparent;
  text-align: left;
}

.yaydp-offer-orphan.yaydp-offer-orphan.yaydp-offer-orphan.yaydp-offer-orphan > td {
  padding-top: 24px;
}

.yaydp-offer-panel {
  --yaydp-offer-border: #dddddd;
  --yaydp-offer-divider: #f0f0f1;
  --yaydp-offer-fg: #1e1e1e;
  --yaydp-offer-muted: #757575;
  --yaydp-offer-faint: #949494;
  --yaydp-offer-icon: #1e1e1e;
  --yaydp-offer-accent: var(--yaydp-gift-cta);
  --yaydp-offer-free: #007017;
  --yaydp-offer-subtotal-bg: #f7f7f7;
  overflow: hidden;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--yaydp-offer-border);
  border-radius: 4px;
  color: var(--yaydp-offer-fg);
  font-size: 14px;
  line-height: 1.35;
}

.yaydp-offer-panel + .yaydp-offer-panel {
  margin-top: 12px;
}

/* Header: gift emoji, "Free gifts", count badge, Change. */
.yaydp-offer-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.yaydp-offer-heading {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  min-width: 0;
}

.yaydp-offer-icon {
  flex: none;
  margin-right: -4px;
  font-size: 16px;
  line-height: 1;
}

.yaydp-offer-title {
  font-size: 15px;
  font-weight: 600;
}

.yaydp-offer-count {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--yaydp-offer-divider);
  color: var(--yaydp-offer-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

.yaydp-offer-action {
  flex: none;
}

/* Header button: Choose gifts (solid primary) and Change (outlined). The extra parent class
   outranks the legacy .yaydp-gift-manage-btn fill. */
.yaydp-offer-panel .yaydp-btn.yaydp-gift-manage-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 32px;
  padding: 0 12px;
  margin: 0;
  border: 1px solid var(--yaydp-offer-accent);
  border-radius: 2px;
  background: var(--yaydp-offer-accent);
  color: var(--yaydp-gift-cta-fg);
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  white-space: nowrap;
}

.yaydp-offer-panel .yaydp-btn.yaydp-gift-manage-btn:hover {
  background: var(--yaydp-gift-cta-hover);
  border-color: var(--yaydp-gift-cta-hover);
  color: var(--yaydp-gift-cta-fg);
}

.yaydp-offer-panel .yaydp-btn.yaydp-offer-change-btn,
.yaydp-offer-panel .yaydp-btn.yaydp-offer-change-btn:hover {
  border-color: var(--yaydp-offer-accent);
  background: #fff;
  color: var(--yaydp-offer-accent);
}

.yaydp-offer-panel .yaydp-btn.yaydp-offer-change-btn:hover {
  background: color-mix(in srgb, var(--yaydp-offer-accent) 4%, #fff);
}

.yaydp-offer-panel .yaydp-btn.yaydp-gift-manage-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1.5px var(--yaydp-offer-accent);
}

/* Gift lines, divided from each other only. */
.yaydp-offer-panel .yaydp-offer-gifts {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}

.yaydp-offer-panel .yaydp-offer-gift {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 12px 0;
  border-top: 1px solid var(--yaydp-offer-divider);
  list-style: none;
}

/* "No gift selected yet". */
.yaydp-offer-panel .yaydp-offer-empty {
  margin: 0;
  padding: 6px 0;
  color: var(--yaydp-offer-muted);
  font-size: 13px;
  list-style: none;
}

.yaydp-offer-panel .yaydp-offer-gifts > li:first-child {
  border-top: 0;
}

.yaydp-offer-gift::before,
.yaydp-offer-gift::after,
.yaydp-offer-empty::before,
.yaydp-offer-empty::after {
  content: none;
}

.yaydp-offer-gift.is-removing {
  opacity: 0.5;
}

/* Updating placeholder that stands in for the gift list: pad it like a gift
   line so the spinner lines up with the thumbnails instead of the panel edge. */
.yaydp-offer-panel .yaydp-gift-selections-loading {
  gap: 10px;
  min-height: 56px;
  margin-top: 10px;
  padding: 12px 0;
  box-sizing: border-box;
  line-height: 1;
}

.yaydp-offer-panel .yaydp-gift-selections-loading::before {
  flex: none;
  box-sizing: border-box;
}

.yaydp-offer-gift-thumb {
  display: block;
  box-sizing: border-box;
  width: 42px;
  height: 42px;
  border: 1px solid #e0e0e0;
  border-radius: 2px;
  background: #fff;
  overflow: hidden;
}

.yaydp-offer-gift-thumb img {
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  object-fit: contain;
}

.yaydp-offer-gift-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.yaydp-offer-gift-name {
  font-size: 14px;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.yaydp-offer-panel .yaydp-offer-gift-name.yaydp-offer-gift-name a {
  color: var(--yaydp-offer-fg);
  text-decoration: none;
}

.yaydp-offer-panel .yaydp-offer-gift-name.yaydp-offer-gift-name a:hover {
  text-decoration: underline;
}

.yaydp-offer-gift-qty {
  color: var(--yaydp-offer-muted);
  font-size: 13px;
}

/* ~~Regular price~~ FREE. */
.yaydp-offer-gift-price {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--yaydp-offer-muted);
  font-size: 13px;
  white-space: nowrap;
}

.yaydp-offer-gift-price del,
.yaydp-offer-subtotal-price del {
  color: var(--yaydp-offer-faint);
  font-size: 13px;
  font-weight: 400;
}

.yaydp-offer-gift-free {
  color: var(--yaydp-offer-free);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Remove: pinned like .yaydp-btn so theme button styles don't leak in. */
.yaydp-offer-gift-remove.yaydp-offer-gift-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  color: var(--yaydp-offer-faint);
  line-height: 1;
  cursor: pointer;
}

.yaydp-offer-gift-remove.yaydp-offer-gift-remove:hover {
  background: var(--yaydp-offer-divider);
  color: var(--yaydp-offer-fg);
}

.yaydp-offer-gift-remove.yaydp-offer-gift-remove:focus-visible {
  outline: 2px solid var(--yaydp-offer-accent);
  outline-offset: 1px;
}

.yaydp-offer-gift-remove.yaydp-offer-gift-remove:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Gift subtotal footer. */
.yaydp-offer-subtotal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 8px -16px -14px;
  padding: 12px 16px;
  background: var(--yaydp-offer-subtotal-bg);
  font-size: 13px;
}

.yaydp-offer-subtotal-label {
  color: var(--yaydp-offer-muted);
}

.yaydp-offer-subtotal-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
}

.yaydp-offer-subtotal-price strong {
  font-size: 15px;
  font-weight: 600;
}

@media (max-width: 768px) {
  /* shop_table_responsive stacks the cells: drop the data-title label
     WooCommerce adds before each cell. */
  .shop_table_responsive .yaydp-offer-panel-row.yaydp-offer-panel-row.yaydp-offer-panel-row > td.yaydp-offer-panel-cell {
    display: block;
    padding: 4px 12px 16px;
    text-align: left !important;
  }

  /* Stacked cells have no columns to align with. */
  .shop_table_responsive .yaydp-offer-panel-row > td.yaydp-offer-panel-spacer {
    display: none;
  }

  .shop_table_responsive .yaydp-offer-panel-cell::before {
    content: none !important;
    display: none !important;
  }

  .yaydp-offer-panel {
    padding: 12px;
  }

  .yaydp-offer-panel .yaydp-gift-selections-loading {
    min-height: 44px;
    padding: 10px 0;
  }

  .yaydp-offer-subtotal {
    margin: 8px -12px -12px;
    padding: 10px 12px;
  }
}