.tabSelector { margin-bottom: var(--go-ui-spacing-lg); display: flex; justify-content: space-between; align-items: center; } .metadataTags { display: flex; flex-wrap: wrap; gap: var(--go-ui-spacing-sm); align-items: center; } .metadataTag { padding: var(--go-ui-spacing-xs) var(--go-ui-spacing-sm); background-color: var(--go-ui-color-red-5); color: var(--go-ui-color-red-90); font-size: var(--go-ui-font-size-xs); border-radius: var(--go-ui-border-radius-md); font-weight: var(--go-ui-font-weight-medium); border: var(--go-ui-width-separator-thin) solid var(--go-ui-color-red-20); transition: all var(--go-ui-duration-transition-fast) ease; white-space: nowrap; } .metadataTag:hover { background-color: var(--go-ui-color-red-10); border-color: var(--go-ui-color-red-30); } .metadataTagSource { padding: var(--go-ui-spacing-xs) var(--go-ui-spacing-sm); background-color: var(--go-ui-color-red-5); color: var(--go-ui-color-red-90); font-size: var(--go-ui-font-size-xs); border-radius: var(--go-ui-border-radius-md); font-weight: var(--go-ui-font-weight-medium); border: var(--go-ui-width-separator-thin) solid var(--go-ui-color-red-20); white-space: nowrap; } .metadataTagType { padding: var(--go-ui-spacing-xs) var(--go-ui-spacing-sm); background-color: var(--go-ui-color-red-5); color: var(--go-ui-color-red-90); font-size: var(--go-ui-font-size-xs); border-radius: var(--go-ui-border-radius-md); font-weight: var(--go-ui-font-weight-medium); border: var(--go-ui-width-separator-thin) solid var(--go-ui-color-red-20); white-space: nowrap; } .mapItem { border: var(--go-ui-width-separator-thin) solid var(--go-ui-color-separator); border-radius: var(--go-ui-border-radius-lg); padding: var(--go-ui-spacing-lg); display: flex; gap: var(--go-ui-spacing-lg); cursor: pointer; transition: all var(--go-ui-duration-transition-medium) ease; background-color: var(--go-ui-color-white); } .mapItem:hover { background-color: var(--go-ui-color-gray-10); border-color: var(--go-ui-color-gray-30); box-shadow: var(--go-ui-box-shadow-sm); transform: translateY(-1px); } .mapItemImage { background-color: var(--go-ui-color-gray-20); display: flex; align-items: center; justify-content: center; color: var(--go-ui-color-gray-60); font-size: var(--go-ui-font-size-xs); overflow: hidden; border-radius: var(--go-ui-border-radius-md); border: var(--go-ui-width-separator-thin) solid var(--go-ui-color-separator); flex-shrink: 0; } .mapItemImage img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; } .mapItemContent { flex: 1; min-width: 0; } .mapItemTitle { font-weight: var(--go-ui-font-weight-medium); color: var(--go-ui-color-text); margin-bottom: var(--go-ui-spacing-sm); font-size: var(--go-ui-font-size-md); line-height: var(--go-ui-line-height-md); } .mapItemMetadata { margin-bottom: var(--go-ui-spacing-sm); } /* Responsive adjustments */ @media (max-width: 768px) { .mapItem { flex-direction: column; gap: var(--go-ui-spacing-md); } .mapItemImage { width: 100%; height: 120px; } .metadataTags { gap: var(--go-ui-spacing-xs); } .metadataTag, .metadataTagSource, .metadataTagType { font-size: var(--go-ui-font-size-xs); padding: var(--go-ui-spacing-2xs) var(--go-ui-spacing-xs); } } /* Modal styles for export selection */ .fullSizeModalOverlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center; z-index: 1000; padding: var(--go-ui-spacing-lg); } .fullSizeModalContent { background-color: var(--go-ui-color-white); border-radius: var(--go-ui-border-radius-lg); max-width: 95vw; max-height: 95vh; overflow: hidden; box-shadow: var(--go-ui-box-shadow-xl); display: flex; flex-direction: column; } .ratingWarningContent { padding: var(--go-ui-spacing-xl); text-align: center; max-width: 500px; } .ratingWarningTitle { font-size: var(--go-ui-font-size-lg); font-weight: var(--go-ui-font-weight-semibold); color: var(--go-ui-color-gray-900); margin-bottom: var(--go-ui-spacing-md); } .ratingWarningText { font-size: var(--go-ui-font-size-md); color: var(--go-ui-color-gray-700); line-height: 1.6; margin-bottom: var(--go-ui-spacing-xl); } .ratingWarningButtons { display: flex; gap: var(--go-ui-spacing-md); justify-content: center; flex-wrap: wrap; margin-top: var(--go-ui-spacing-xl); text-align: center; } /* Filter status step styles */ .filterStatusContainer { margin-bottom: var(--go-ui-spacing-lg); text-align: center; } .filterStatusMessage { font-size: var(--go-ui-font-size-md); font-weight: var(--go-ui-font-weight-medium); color: var(--go-ui-color-gray-700); margin-bottom: var(--go-ui-spacing-md); } .filterStatusCount { font-size: var(--go-ui-font-size-lg); font-weight: var(--go-ui-font-weight-semibold); color: var(--go-ui-color-gray-900); margin-bottom: var(--go-ui-spacing-md); display: block; } .activeFiltersList { display: flex; flex-wrap: wrap; gap: var(--go-ui-spacing-sm); justify-content: center; margin-bottom: var(--go-ui-spacing-lg); } .activeFilter { background-color: var(--go-ui-color-gray-100); color: var(--go-ui-color-gray-700); padding: var(--go-ui-spacing-xs) var(--go-ui-spacing-sm); border-radius: var(--go-ui-border-radius-sm); font-size: var(--go-ui-font-size-sm); border: var(--go-ui-width-separator-thin) solid var(--go-ui-color-gray-200); } .filterStatusActions { display: flex; gap: var(--go-ui-spacing-md); justify-content: center; flex-wrap: wrap; } /* Export mode and split configuration styles */ .exportModeSection { margin-bottom: var(--go-ui-spacing-lg); text-align: center; } .exportModeLabel { font-size: var(--go-ui-font-size-sm); font-weight: var(--go-ui-font-weight-medium); color: var(--go-ui-color-gray-700); margin-bottom: var(--go-ui-spacing-sm); } .splitConfigSection { margin-bottom: var(--go-ui-spacing-lg); text-align: center; } .splitConfigTitle { font-size: 1rem; font-weight: 600; margin-bottom: var(--go-ui-spacing-md); color: var(--go-ui-color-text-primary); } .splitInputsContainer { display: flex; justify-content: center; gap: var(--go-ui-spacing-md); margin-bottom: var(--go-ui-spacing-md); flex-wrap: wrap; } .splitInputGroup { display: flex; flex-direction: column; align-items: center; text-align: center; } .splitInputLabel { margin-bottom: var(--go-ui-spacing-xs); font-weight: 500; color: var(--go-ui-color-text-primary); } .splitInput { width: 80px; padding: var(--go-ui-spacing-sm); border: 1px solid var(--go-ui-color-border); border-radius: var(--go-ui-border-radius); font-size: 1rem; text-align: center; } .splitInput:focus { outline: none; border-color: var(--go-ui-color-red-50); box-shadow: 0 0 0 2px var(--go-ui-color-red-20); } .splitInput:hover { border-color: var(--go-ui-color-gray-400); } .splitTotal { font-size: var(--go-ui-font-size-xs); color: var(--go-ui-color-gray-500); text-align: center; margin-top: var(--go-ui-spacing-xs); } .splitTotalError { color: var(--go-ui-color-negative); margin-left: var(--go-ui-spacing-xs); } .checkboxesContainer { text-align: center; margin-bottom: var(--go-ui-spacing-lg); } /* Responsive adjustments for modal */ @media (max-width: 768px) { .fullSizeModalOverlay { padding: var(--go-ui-spacing-sm); } .fullSizeModalContent { max-width: 100vw; max-height: 100vh; } .splitInputsContainer { gap: var(--go-ui-spacing-md); } .splitInput { width: 3.5rem; } }