/* Reuse Fabric modal styles for consistency */
.wl-fabric-picker { display:flex; align-items:center; gap:.75rem; margin-bottom:.75rem; }
.wl-fabric-chip { display:inline-flex; align-items:center; gap:.5rem; padding:.25rem .5rem; border:1px solid #e5e5e5; border-radius:9999px; font-size:.9rem; }
.wl-fabric-chip img { width:24px; height:24px; border-radius:50%; }
.wl-option-icon {font-size:40px; padding-bottom:10px; width:100%}

.wl-modal[aria-hidden="true"] { display:none; }
.wl-modal { position:fixed; inset:0; z-index:9999; }
.wl-modal__overlay { position:absolute; inset:0; background:rgba(0,0,0,.5); }
.wl-modal__dialog { position:relative; background:#fff; width:min(980px,96%); margin:6vh auto; border-radius:10px; box-shadow:0 10px 40px rgba(0,0,0,.2); max-height:80vh; display:flex; flex-direction:column; }
.wl-modal__header, .wl-modal__footer { padding:14px 18px; border-bottom:1px solid #eee; }
.wl-modal__footer { border-top:1px solid #eee; border-bottom:0; }
.wl-modal__body { padding:16px 18px; overflow:auto; }
.wl-modal__close { background:none; border:0; font-size:28px; line-height:1; cursor:pointer; }

.wl-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:14px; }
.wl-swatch { display:flex; flex-direction:column; align-items:center; gap:.4rem; border:1px solid #eee; padding:10px; border-radius:8px; cursor:pointer; }
.wl-swatch input { position:absolute; opacity:0; pointer-events:none; }
.wl-swatch:hover { border-color:#0170B9; }
.wl-swatch input:checked + img { outline:2px solid #0170B9; outline-offset:2px; }
.wl-swatch__name { text-align:center; font-size:.85rem; line-height:1.2; }

.wl-modal-trigger {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.wl-modal-trigger-image {
    display: block;
    max-width: 250px;
    /* adjust size */
    border-radius: 6px;
}

.wl-modal-trigger-text {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);
    pointer-events: none;
}



.wl-tile-grid {
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap:12px;
  max-height: 60vh;
  overflow:auto;
  padding: 8px 2px;
}

.frame-finish-color {
  text-align:center;
}

.frame-finish-color img {
  border:1px solid #ddd;
  border-radius:4px;
}

.wl-modal__footer { display:flex; justify-content:flex-end; gap:8px; }


/* Generic modal image trigger */
.wl-option-trigger {
    cursor: pointer;
    display: inline-block;
}

/* Allow absolute positioning inside modal header */
.wl-modal__header {
    position: relative;
}

/* Pin close button to top-right of modal */
.wl-modal__close {
    position: absolute;
    top: 10px;
    right: 12px;
    padding:12px !important;
}

.wl-modal__title {
    padding-right: 40px;
}

#wl-loom-tooltip {
    position: fixed;
    width: 300px;
    height: 300px;
    pointer-events: none;
    z-index: 9999;
    display: none;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

#wl-loom-tooltip img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (hover: none) {
    #wl-loom-tooltip {
        display: none !important;
    }
}