/* JPG to ICO - Page-specific styles */

/* Breadcrumb Trail */
.breadcrumb-trail {
    margin: 4px 0 14px;
}

.breadcrumb-trail ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 13px;
    color: var(--text-muted, #666);
}

.breadcrumb-trail li {
    display: flex;
    align-items: center;
}

.breadcrumb-trail li + li::before {
    content: '/';
    margin: 0 6px;
    color: var(--text-light, #999);
    font-size: 12px;
}

.breadcrumb-trail a {
    color: var(--link-color, #499bc9);
    text-decoration: none;
    transition: color 0.15s ease;
}

.breadcrumb-trail a:hover {
    color: var(--link-hover, #ff6b6b);
    text-decoration: underline;
}

.breadcrumb-trail [aria-current="page"] {
    color: var(--text-muted, #666);
    font-weight: 500;
}

/* Related Tools Grid */
.related-tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    margin-top: 16px;
}

.related-tool-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-radius: var(--radius-sm, 6px);
    background: var(--card-secondary, #f8f9fa);
    border: 1px solid var(--border-color, #e0e0e0);
    color: var(--text-primary, #333);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.related-tool-card:hover {
    background: var(--card-bg, #fff);
    border-color: var(--link-color, #499bc9);
    color: var(--link-color, #499bc9);
    box-shadow: var(--shadow-sm, 0 2px 4px rgba(0,0,0,0.05));
    transform: translateY(-1px);
}

.related-tool-card i,
.related-tool-card svg {
    flex-shrink: 0;
    color: var(--text-muted, #666);
    transition: color 0.2s ease;
}

.related-tool-card:hover i,
.related-tool-card:hover svg {
    color: var(--link-color, #499bc9);
}

@media (max-width: 480px) {
    .related-tools-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---- JPG-to-ICO enhancements (j2i- prefix, single colors, no border-left) ---- */
.j2i-options { width: 100%; box-sizing: border-box; margin: 14px 0; padding: 12px 16px; background: var(--bg-elevated, #fff); border: 1px solid var(--border, #e2e2e2); border-radius: 8px; font-size: 14px; }
.j2i-options-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.j2i-options-label { font-weight: 600; color: var(--text, #333); }
.j2i-opt { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.j2i-opt input[type="radio"] { width: 14px !important; height: 14px !important; margin: 0 !important; accent-color: var(--color-2); }
.j2i-swatches { display: inline-flex; align-items: center; gap: 6px; }
.j2i-swatch { width: 22px; height: 22px; border: 1px solid var(--border, #ccc); border-radius: 4px; cursor: pointer; padding: 0; }
.j2i-swatch-active { outline: 2px solid var(--color-2); outline-offset: 1px; }
.j2i-swatch-custom-wrap { position: relative; width: 26px; height: 24px; border: 1px dashed var(--color-2); border-radius: 4px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--color-2); background: var(--bg-elevated, #fff); }
.j2i-swatch-custom-wrap.j2i-swatch-active { border-style: solid; outline: 2px solid var(--color-2); outline-offset: 1px; color: #ffffff; }
.j2i-swatch-custom-wrap input[type="color"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: none; padding: 0; }
.j2i-bg-tip { margin: 10px 0 0; font-size: 13px; color: var(--text-muted, #666); max-width: 800px; }
.j2i-size-preview { width: 100%; box-sizing: border-box; margin: 0 0 14px; padding: 10px 16px; background: var(--bg-elevated, #fff); border: 1px solid var(--border, #e2e2e2); border-radius: 8px; display: none; align-items: center; flex-wrap: wrap; gap: 14px; font-size: 13px; }
.j2i-size-preview[style*="block"] { display: flex !important; }
.j2i-size-label { font-weight: 600; color: var(--text, #333); }
.j2i-size-cell { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; }
.j2i-size-cell img { image-rendering: auto; border: 1px solid var(--border, #eee); background: #fff; }
.j2i-size-cell em { font-style: normal; font-size: 11px; color: var(--text-muted, #888); }
.j2i-size-hint { font-size: 12px; color: var(--text-muted, #888); }
.j2i-upsell { width: 100%; box-sizing: border-box; margin: 14px 0; padding: 12px 16px; background: var(--bg-elevated, #fff); border: 1px solid var(--border, #e2e2e2); border-radius: 8px; display: flex; align-items: center; gap: 10px; font-size: 14px; }
.j2i-upsell-close { margin-left: auto; background: none; border: none; cursor: pointer; color: var(--text-muted, #888); padding: 4px; }