.sydney-pattern-library-modal {
  --border-color: #0000001a;
  --border-color-hover: #0000004d;
  --color-heading: #1D2327;
}

.sydney-pattern-library-modal > div > div {
  height: 100%;
}

.sydney-pattern-library-modal .components-base-control__field {
  margin: 0;
}

.sydney-pattern-library-modal .components-modal__content {
  padding: 0;
  margin-bottom: 0;
}

/* Modal layout */
.sydney-pattern-library-modal-container {
  height: 100%;
}

/* The auto-open toggle sits just before the close button. */
.sydney-pattern-library-modal-header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* The Color scheme sits in its own footer, pinned under the categories. */
.sydney-pattern-library-sidebar-footer {
  flex-shrink: 0;
  width: 100%;
  padding: 16px 28px;
  border-top: 1px solid var(--border-color);
  background: #fff;
}

/* Color scheme swatches: White, Grey, Dark, after an inline label. The
   selected one gets a ring. */
.sydney-pattern-library-color-scheme {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.sydney-pattern-library-color-scheme-label {
  color: var(--color-heading);
  font-size: 13px;
  white-space: nowrap;
}
.sydney-pattern-library-color-scheme-swatches {
  display: flex;
  gap: 8px;
}
.sydney-pattern-library-swatch {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid #c3c4c7;
  border-radius: 50%;
  cursor: pointer;
}
.sydney-pattern-library-swatch.is-white {
  background: #fff;
}
.sydney-pattern-library-swatch.is-grey {
  background: #e2e4e9;
}
.sydney-pattern-library-swatch.is-dark {
  background: #1d2327;
  border-color: #1d2327;
}
.sydney-pattern-library-swatch.is-selected {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1d2327;
}
.sydney-pattern-library-swatch:focus-visible {
  outline: 2px solid var(--wp-admin-theme-color, #3858e9);
  outline-offset: 4px;
}

.sydney-pattern-library-modal-sidebar {
  width: 240px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100%;
}

.sydney-pattern-library-modal-content {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--border-color);
}

.sydney-pattern-library-modal-content h4 {
  color: var(--color-heading);
  font-size: 14px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  margin: 0;
}

.sydney-pattern-library-modal-content button[role="combobox"] {
  border-color: #C3C4C7 !important;
  border-radius: 4px;
  padding: 8px 10px;
  height: 36px !important;
  min-width: 120px !important;
}

.sydney-pattern-library-modal-content button[role="combobox"][aria-expanded="true"] ~ span svg {
  transform: rotate(180deg);
}

.sydney-pattern-library-modal-content .components-custom-select-control .components-input-control__backdrop,
.sydney-pattern-library-modal-content .components-custom-select-control .components-flex {
  border-color: #C3C4C7 !important;
  border-radius: 4px;
}

.sydney-pattern-library-modal-content .components-base-control__label {
  display: none;
}

.sydney-pattern-library-modal-content [data-dialog] {
  border: none !important;
}
.sydney-pattern-library-modal-content[data-dialog] .components-custom-select-control__item {
  padding: 16px;
  line-height: 1.1;
}
.sydney-pattern-library-modal-content [data-dialog] [data-active-item] {
  background-color: #F5F5F5;
}

.sydney-pattern-library-modal-content .components-custom-select-control svg {
  stroke: #A7AAAD;
  transition: transform 0.3s ease;
}

.sydney-pattern-library-modal-header {
  padding: 0 28px 0 28px;
  position: sticky;
  height: 80px;
  top: 0;
  background: #fff;
  z-index: 10;
  border-bottom: 1px solid var(--border-color);
}
.sydney-pattern-library-modal-title-container {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border-bottom: 1px solid var(--border-color);
  padding: 0 28px;
  width: 100%;
}
.sydney-pattern-library-modal-title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sydney-pattern-library-modal-title svg {
  width: 20px;
  height: 20px;
}

/* The sidebar content scrolls on its own, so a short window never gives the
   modal an outer scrollbar. */
.sydney-pattern-library-modal-sidebar-content {
  padding: 28px;
  width: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.sydney-pattern-library-modal-sidebar-content .sydney-pattern-library-modal-search {
  margin-bottom: 28px;
}

.sydney-pattern-library-type-filter .components-button {
  font-weight: 400;
  height: 32px;
}

/* The row-gap override needs the extra ancestor to outweigh the emitted Flex gap class. */
.sydney-pattern-library-modal-sidebar-content .sydney-pattern-library-type-filter {
  row-gap: 0;
}

/* Grid container — must be position:relative so the overlay can fill it */
.sydney-pattern-library-modal-grid-container {
  position: relative;
  flex: 1;
  overflow-y: auto;
}

/* Full-area loading overlay — mirrors Extendify's ModalContent pattern */
.sydney-pattern-library-loading-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.85);
}

/* Spinner — CSS-only, no external dependencies */
.sydney-pattern-library-spinner {
  display: block;
  width: 28px;
  height: 28px;
  border: 3px solid #ddd;
  border-top-color: #007cba;
  border-radius: 50%;
  animation: sydney-pattern-library-spin 0.7s linear infinite;
}

@keyframes sydney-pattern-library-spin {
  to {
    transform: rotate(360deg);
  }
}

.sydney-pattern-library-no-patterns {
  padding: 40px;
}

.sydney-pattern-library-pattern-grid {
  position: relative;
  column-count: 2;
  column-gap: 28px;
  padding: 28px;
  background-color: #fff;
  min-height: 100%;
}
.sydney-pattern-library-pattern-item {
  position: relative;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  background: #fff;
  transition: box-shadow 0.15s ease;
  padding: 0;
  width: 100%;
  text-align: left;
  break-inside: avoid;
  margin-bottom: 28px;
  transition: all 0.3s ease;
}
.sydney-pattern-library-pattern-item:hover {
  border-color: var(--border-color-hover);
  outline: none;
}
.sydney-pattern-library-pattern-item:focus-within {
  box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
  outline: none;
}
.sydney-pattern-library-pattern-item__action {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.sydney-pattern-library-pattern-item__action:focus {
  outline: none;
}
.sydney-pattern-library-pro-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #f0b849;
  color: #1d2327;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 2px;
  z-index: 12;
  pointer-events: none;
}

/* Locked Pro cards (free sites): preview only, with an Upgrade link shown on
   hover or when the link has keyboard focus. */
.sydney-pattern-library-pattern-item.is-locked {
  cursor: default;
}
.sydney-pattern-library-upgrade-overlay {
  position: absolute;
  inset: 0;
  z-index: 11;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px;
  text-align: center;
  background: rgba(29, 35, 39, 0.8);
  opacity: 0;
  transition: opacity 0.15s ease;
}
.sydney-pattern-library-upgrade-text {
  margin: 0;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
}
.sydney-pattern-library-pattern-item.is-locked:hover .sydney-pattern-library-upgrade-overlay,
.sydney-pattern-library-pattern-item.is-locked:focus-within .sydney-pattern-library-upgrade-overlay {
  opacity: 1;
}

/* Heart toggle in top-left of each pattern card.
   Hidden until the card is hovered/focused; always visible when favorited
   so users can find their favorites to un-heart them. */
.sydney-pattern-library-favorite-toggle {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 11;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  margin: 0;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 50%;
  color: #1d2327;
  cursor: pointer;
  line-height: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.sydney-pattern-library-pattern-item:hover .sydney-pattern-library-favorite-toggle,
.sydney-pattern-library-pattern-item:focus-within .sydney-pattern-library-favorite-toggle,
.sydney-pattern-library-favorite-toggle.is-favorited,
.sydney-pattern-library-favorite-toggle:focus-visible {
  opacity: 1;
  pointer-events: auto;
}
.sydney-pattern-library-favorite-toggle:hover {
  background: #fff;
  transform: scale(1.08);
}
.sydney-pattern-library-favorite-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #007cba;
}
.sydney-pattern-library-favorite-toggle.is-favorited {
  color: #e0245e;
}
.sydney-pattern-library-favorite-toggle svg {
  display: block;
  pointer-events: none;
}

/* Top-bar Favorites toggle (modal header strip).
   Plain <button> styled as a compact text link so it aligns vertically
   with the icon-only close button to its right. Hover/active states use
   the WP admin theme color so the toggle visually matches whatever
   accent the user has configured in their profile. */
.sydney-pattern-library-modal-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sydney-pattern-library-recently-used-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  padding: 4px 6px;
  margin: 0;
  font: inherit;
  color: var(--color-heading);
  cursor: pointer;
  border-radius: 2px;
}
.sydney-pattern-library-recently-used-filter svg {
  flex-shrink: 0;
}
.sydney-pattern-library-recently-used-filter:hover,
.sydney-pattern-library-recently-used-filter.is-active {
  color: var(--wp-admin-theme-color, #3858e9);
}
.sydney-pattern-library-recently-used-filter:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--wp-admin-theme-color, #3858e9);
}
.sydney-pattern-library-favorites-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  padding: 4px 6px;
  margin: 0;
  font: inherit;
  color: var(--color-heading);
  cursor: pointer;
  border-radius: 2px;
}
.sydney-pattern-library-favorites-filter svg {
  flex-shrink: 0;
}
.sydney-pattern-library-favorites-filter:hover,
.sydney-pattern-library-favorites-filter.is-active {
  color: var(--wp-admin-theme-color, #3858e9);
}
.sydney-pattern-library-favorites-filter:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--wp-admin-theme-color, #3858e9);
}
/* Per-card skeleton shown while the BlockPreview iframe is loading */
.sydney-pattern-library-pattern-item:not(.is-loaded) {
  min-height: 180px;
}
/* Show the whole pattern: lift core's 2000px preview cap (inline max-height) but keep a finite backstop, so a pattern whose vh/svh heights feed back into the iframe height cannot grow without end. */
.sydney-pattern-library-pattern-item .block-editor-block-preview__content,
.sydney-pattern-library-pattern-item .block-editor-block-preview__content iframe {
  max-height: 20000px !important;
}
.sydney-pattern-library-pattern-skeleton {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    #f0f0f0 25%,
    #e4e4e4 50%,
    #f0f0f0 75%
  );
  background-size: 200% 100%;
  animation: sydney-pattern-library-shimmer 1.5s ease-in-out infinite;
  border-radius: 4px;
}

@keyframes sydney-pattern-library-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.sydney-pattern-library-toolbar-btn {
  cursor: pointer;
  height: 36px !important;
  min-width: 36px;
  padding: 0 12px;
  display: flex;
  align-items: center;
}
.sydney-pattern-library-toolbar-btn-text {
  margin-left: 8px;
}
/* Keyboard focus gets the standard focus ring; a mouse click shows none, as before. */
.components-button.sydney-pattern-library-toolbar-btn:focus:not(:focus-visible) {
  box-shadow: none;
  outline: none;
}
@media (max-width: 1200px) {
  .sydney-pattern-library-pattern-grid {
    column-count: 2;
  }
}
@media (max-width: 782px) {
  .sydney-pattern-library-pattern-grid {
    column-count: 1;
  }
}
@media (max-width: 960px) {
  .sydney-pattern-library-toolbar-btn-text {
    display: none;
  }
}

/* Short viewports: tighten the sidebar padding and the gaps around the Color
   scheme control. The thresholds were measured before that control existed,
   when they let the full category list fit. With it, the sidebar fits whole
   only in windows 904px and taller. Below that its content scrolls on its own
   and the modal wrapper still never gains a scrollbar. The category spacing is
   compact at every height. */
@media (max-height: 871px) {
  .sydney-pattern-library-modal-sidebar-content {
    padding: 20px 28px;
  }
  .sydney-pattern-library-modal-sidebar-content .sydney-pattern-library-modal-search {
    margin-bottom: 20px;
  }
}

@media (max-height: 747px) {
  .sydney-pattern-library-modal-sidebar-content {
    padding: 12px 28px 8px;
  }
  .sydney-pattern-library-modal-sidebar-content .sydney-pattern-library-modal-search {
    margin-bottom: 12px;
  }
  .sydney-pattern-library-type-filter .components-button {
    height: 30px;
  }
}

/* Patterns | Pages tabs, shown when at least one Full page is available. */
.sydney-pattern-library-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  padding: 4px;
  background: #f0f0f1;
  border-radius: 4px;
}
.sydney-pattern-library-tabs .components-button {
  flex: 1;
  justify-content: center;
  height: 32px;
  color: var(--color-heading);
}
.sydney-pattern-library-tabs .components-button[aria-selected="true"] {
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Full page cards show the top of the page and scroll the rest into view on
   hover, at the speed the card sets in --sydney-page-scroll-duration. */
.sydney-pattern-library-pattern-item.is-page {
  height: 420px;
}
.sydney-pattern-library-page-scroll {
  transition: transform 0.4s ease;
}
.sydney-pattern-library-pattern-item.is-page:hover .sydney-pattern-library-page-scroll,
.sydney-pattern-library-pattern-item.is-page:focus-within .sydney-pattern-library-page-scroll {
  transform: translateY(calc(-1 * var(--sydney-page-scroll, 0px)));
  transition: transform var(--sydney-page-scroll-duration, 0s) linear;
}