/* BOSS Logics Connect - Catalog Styles
   Works with the Santillan Jewelers redesign theme. */

/* Prevent header dropdown from overlapping catalog filters */
.sj-nav__list.blc-no-dropdown .sub-menu {
    display: none !important;
}

/* Grid layout */
.blc-grid { overflow: visible; }
.blc-grid .item { float: none; }

/* Secondary material pills */
.blc-secondary-materials { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 0; margin-bottom: 8px; }
.blc-material-pill { display: inline-block; padding: 6px 16px; border: 1px solid var(--sj-accent, #907e6b); border-radius: 20px; color: var(--sj-accent, #907e6b); text-decoration: none; font-size: 13px; transition: all 0.2s ease; }
.blc-material-pill:hover, .blc-material-pill.active { background: var(--sj-accent, #907e6b); color: #fff; text-decoration: none; }
.blc-pill-count { font-size: 11px; opacity: 0.7; }

/* Search form inline */
.blc-search-form { display: flex; gap: 8px; align-items: center; }
.blc-search-form input[type="text"] { flex: 1; max-width: 300px; }

/* Per-image loading spinner */
.blc-img-wrap { display: block; position: absolute; inset: 0; }
.blc-img-spinner { position: absolute; top: 50%; left: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border: 3px solid rgba(144, 126, 107, 0.2); border-top-color: var(--sj-accent, #907e6b); border-radius: 50%; animation: blc-spin 0.7s linear infinite; z-index: 1; }
.blc-img-wrap.loaded .blc-img-spinner { display: none; }
.blc-img-wrap img { opacity: 0; transition: opacity 0.3s ease; }
.blc-img-wrap.loaded img { opacity: 1; }
@keyframes blc-spin { to { transform: rotate(360deg); } }

/* AJAX grid loading */
#item-list { transition: none; }

/* Product detail layout */
.blc-product-detail .sj-product-layout { margin-bottom: 40px; }

/* =========================================================
   Horizontal Thumbnails — under main image
   ========================================================= */
.sj-thumbnails { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.sj-thumbnails .add_img-tile { width: 80px; height: 80px; overflow: hidden; border: 1px solid rgba(184, 149, 106, 0.2); border-radius: 4px; cursor: pointer; transition: border-color 0.2s ease; }
.sj-thumbnails .add_img-tile:hover { border-color: var(--sj-accent, #b8956a); }
.sj-thumbnails .add_img-tile img { width: 100%; height: 100%; object-fit: cover; }

/* =========================================================
   Inquiry Modal — styles for both Bootstrap .in and custom .blc-modal-open
   ========================================================= */
/* Bootstrap modal overrides */
#blc-inquiry-modal.modal.in .contact-modal-container,
#blc-inquiry-modal.modal.blc-modal-open .contact-modal-container {
    background: var(--sj-charcoal, #1a1a1a);
    border: 1px solid rgba(184, 149, 106, 0.2);
    border-radius: 8px;
    padding: 32px;
    max-width: 600px;
    width: 90%;
    margin: 60px auto;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
#blc-inquiry-modal .close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    color: var(--sj-muted, #907e6b);
    font-size: 28px;
    cursor: pointer;
    z-index: 10;
    line-height: 1;
    padding: 4px 8px;
    opacity: 1;
}
#blc-inquiry-modal .close:hover { color: #fff; }
#blc-inquiry-modal h3 {
    color: var(--sj-tan, #c5b5a4);
    font-family: var(--sj-heading-font, 'Playfair Display', serif);
    font-size: 22px;
    margin: 0 0 16px;
}
#blc-inquiry-modal .item-title { color: #fff; font-size: 16px; font-weight: 600; }
#blc-inquiry-modal .item-designer { color: var(--sj-accent, #b8956a); font-size: 14px; margin-top: 2px; }
#blc-inquiry-modal p { color: var(--sj-muted, #907e6b); font-size: 13px; margin: 0 0 6px; }
#blc-inquiry-modal input[type="text"],
#blc-inquiry-modal input[type="email"],
#blc-inquiry-modal input[type="tel"],
#blc-inquiry-modal textarea {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(184, 149, 106, 0.25);
    border-radius: 4px;
    color: #fff;
    padding: 10px 12px;
    font-size: 14px;
    box-sizing: border-box;
}
#blc-inquiry-modal input:focus,
#blc-inquiry-modal textarea:focus { border-color: var(--sj-accent, #b8956a); outline: none; }

/* Bootstrap backdrop styling */
.modal-backdrop.in { background: rgba(0, 0, 0, 0.7) !important; opacity: 1 !important; pointer-events: none !important; }

/* Ensure modal is above backdrop and interactive */
#blc-inquiry-modal.modal.in { display: block !important; pointer-events: auto; z-index: 99999; }

/* Custom modal fallback (when no Bootstrap JS) */
.modal.blc-modal-open {
    display: flex !important;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.7);
    align-items: center;
    justify-content: center;
}
body.blc-modal-active { overflow: hidden; }

/* =========================================================
   More From This Designer
   ========================================================= */
.blc-more-designer { margin-top: 48px; padding-top: 32px; border-top: 1px solid rgba(184, 149, 106, 0.15); }
.blc-more-designer__title {
    font-family: var(--sj-heading-font, 'Playfair Display', serif);
    font-size: 24px;
    color: var(--sj-tan, #c5b5a4);
    margin: 0 0 24px;
    letter-spacing: 0.02em;
}
.blc-more-designer__grid {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 12px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.blc-more-designer__grid::-webkit-scrollbar { height: 4px; }
.blc-more-designer__grid::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); border-radius: 2px; }
.blc-more-designer__grid::-webkit-scrollbar-thumb { background: var(--sj-accent, #907e6b); border-radius: 2px; }
.blc-more-designer__item { flex: 0 0 160px; text-decoration: none; scroll-snap-align: start; transition: transform 0.2s ease; }
.blc-more-designer__item:hover { transform: translateY(-4px); }
.blc-more-designer__img { width: 160px; height: 160px; overflow: hidden; border-radius: 4px; border: 1px solid rgba(184, 149, 106, 0.1); background: rgba(255, 255, 255, 0.03); }
.blc-more-designer__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.blc-more-designer__item:hover .blc-more-designer__img img { transform: scale(1.05); }
.blc-more-designer__name { color: var(--sj-muted, #907e6b); font-size: 12px; margin-top: 8px; text-align: center; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Responsive adjustments */
@media (max-width: 767px) {
    .blc-cta-buttons .button-wood { display: block; text-align: center; margin-right: 0; }
    .blc-more-designer__item { flex: 0 0 130px; }
    .blc-more-designer__img { width: 130px; height: 130px; }
    .sj-thumbnails .add_img-tile { width: 60px; height: 60px; }
    #blc-inquiry-modal.modal.in .contact-modal-container,
    #blc-inquiry-modal.modal.blc-modal-open .contact-modal-container { padding: 20px; }
}