/**
 * Academic Citations Plugin - Frontend Styles
 * Font Family: Inter
 * Global Colors and Layout
 * Using !important to override theme styles
 */

/* ===========================
   GLOBAL VARIABLES & RESET
   =========================== */


:root {
    /* Primary Colors */
    --acp-primary-blue: #175CD3;
    --acp-text-primary: #22212A;
    --acp-text-secondary: #667085;
    --acp-text-tertiary: #344054;

    /* Border Colors */
    --acp-border-primary: #D0D5DD;
    --acp-border-secondary: #E4E7EC;

    /* Background Colors */
    --acp-bg-white: #FFFFFF;

    /* Font Family */
    --acp-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Spacing */
    --acp-gap-xs: 8px;
    --acp-gap-sm: 12px;
    --acp-gap-md: 16px;
    --acp-gap-lg: 24px;
}

/* ===========================
   MAIN CONTAINER
   =========================== */

.academic-container-v2 {
    width: 100% !important;
    font-family: var(--acp-font-family) !important;
    color: var(--acp-text-primary) !important;
}

/* ===========================
   SEARCH AND FILTER SECTION
   =========================== */

.acp-search-filter-wrapper,
.acp-search-filter-wrapper.acp-search-filter-wrapper {
    width: 100% !important;
    margin-bottom: var(--acp-gap-lg) !important;
}

/* Main Filter Row - Search (70%) + Filters (30%) */
.acp-main-filter-row,
.acp-main-filter-row.acp-main-filter-row {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: var(--acp-gap-md) !important;
    margin-bottom: var(--acp-gap-md) !important;
    border-bottom: 1px solid var(--acp-border-primary) !important;
    padding-bottom: var(--acp-gap-xs) !important;
}

/* Search Bar - 70% */
.acp-search-container,
.acp-search-container.acp-search-container {
    flex: 0 0 65% !important;
    width: 65% !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    gap: var(--acp-gap-sm) !important;
    padding: 0 var(--acp-gap-sm);
}

/* Filters Container - 30% */
.acp-filters-container,
.acp-filters-container.acp-filters-container {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: var(--acp-gap-sm) !important;
    justify-content: flex-end !important;
}

.acp-search-icon {
    width: 20px !important;
    height: 20px !important;
    color: var(--acp-text-secondary) !important;
    flex-shrink: 0 !important;
}

.acp-search-input {
    flex: 1 !important;
    border: none !important;
    outline: none !important;
    font-family: var(--acp-font-family) !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 24px !important;
    color: var(--acp-text-primary) !important;
    background: transparent !important;
    box-shadow: none !important;
}

.acp-search-input::placeholder {
    color: var(--acp-text-secondary) !important;
}

/* Filter Chips Container */
.acp-filter-chips-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: var(--acp-gap-sm) !important;
    flex-wrap: wrap !important;
    margin-bottom: var(--acp-gap-md) !important;
}

button.acp-filter-chip,
.acp-filter-chip.acp-filter-chip {
    height: 40px !important;
	outline:none;
    padding: 10px 12px !important;
    border-radius: 200px !important;
    border: 1px solid var(--acp-border-primary) !important;
    background: var(--acp-bg-white) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;

    font-family: var(--acp-font-family) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    text-align: center !important;
    color: var(--acp-text-primary) !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

button.acp-filter-chip:hover,
.acp-filter-chip.acp-filter-chip:hover,
button.acp-filter-chip.active,
.acp-filter-chip.acp-filter-chip.active {
	outline:none;
    border-color: var(--acp-primary-blue) !important;
    color: var(--acp-primary-blue) !important;
    background: var(--acp-bg-white) !important;
}

button.acp-clear-filter,
.acp-clear-filter.acp-clear-filter {
	outline:none;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    height: 40px !important;
    padding: 10px 12px !important;
    border-radius: 200px !important;
    border: 1px solid #DC2626 !important;
    background: var(--acp-bg-white) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;

    font-family: var(--acp-font-family) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    color: #DC2626 !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

button.acp-clear-filter:hover,
.acp-clear-filter.acp-clear-filter:hover {
    background: #FEE2E2 !important;
	outline:none;
}

.acp-clear-filter svg {
    width: 16px !important;
    height: 16px !important;
}

/* Dropdown Filters */
.acp-dropdown-filters {
    display: flex !important;
    gap: var(--acp-gap-sm) !important;
    flex-wrap: wrap !important;
    margin-top: var(--acp-gap-sm) !important;
}

select.acp-filter-dropdown,
.acp-filter-dropdown.acp-filter-dropdown {
    height: 40px !important;
    padding: 10px 12px !important;
    padding-right: 36px !important;
    border-radius: 4px !important;
    border: 1px solid var(--acp-border-primary) !important;
    background: var(--acp-bg-white) !important;
    cursor: pointer !important;

    font-family: var(--acp-font-family) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    color: var(--acp-text-primary) !important;

    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23667085' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    box-shadow: none !important;
}

select.acp-filter-dropdown:focus,
.acp-filter-dropdown.acp-filter-dropdown:focus {
    outline: none !important;
    border-color: var(--acp-primary-blue) !important;
}

/* ===========================
   CARDS SECTION (LIKE COUNT CONTAINER)
   =========================== */

.acp-cards-wrapper {
    width: 100% !important;
    margin-bottom: var(--acp-gap-lg) !important;
}

/* Cards Container - Like Count Container with Border */
#acpCardsContainer {
    width: 100% !important;
    border: 1px solid var(--acp-border-secondary) !important;
    border-radius: 4px !important;
    overflow: hidden !important;
}

/* Individual Card - No Border, Just Separator */
.acp-citation-card {
    width: 100% !important;
    padding: var(--acp-gap-lg) !important;
    display: flex !important;
    gap: var(--acp-gap-lg) !important;
    position: relative !important;
    border: none !important;
    margin: 0 !important;
}

/* Separator line between cards - not on last card */
.acp-citation-card:not(:last-child)::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 1px !important;
    background-color: var(--acp-border-secondary) !important;
}

/* Featured Image Column - 15% */
.acp-card-image {
    flex: 0 0 140px !important;
    width: 140px !important;
    height: 184px !important;
}

.acp-card-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
	align-items: center !important;
    border-radius: 4px !important;
    border: 1px solid var(--acp-border-secondary) !important;
}

.acp-card-image-placeholder {
    width: 100% !important;
    height: 100% !important;
    background: #F9FAFB !important;
    border-radius: 4px !important;
    border: 1px solid var(--acp-border-secondary) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--acp-text-secondary) !important;
}

/* Content Column - 85% */
.acp-card-content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: var(--acp-gap-xs) !important;
}

.acp-card-type {
    font-family: var(--acp-font-family) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    color: var(--acp-text-secondary) !important;
    text-transform: capitalize !important;
}

.acp-card-title {
    font-family: var(--acp-font-family) !important;
    font-weight: 500 !important;
    font-size: 20px !important;
    line-height: 30px !important;
    color: var(--acp-text-primary) !important;
    margin: 0 !important;
}

.acp-card-title a {
    font-family: var(--acp-font-family) !important;
    font-weight: 500 !important;
    font-size: 20px !important;
    line-height: 30px !important;
    color: var(--acp-text-primary) !important;
    margin: 0 !important;
}

.acp-card-title a:hover {
    color: var(--acp-primary-blue) !important;
}

.acp-card-authors {
    font-family: var(--acp-font-family) !important;
    font-weight: 400 !important;
    font-size: 12px !important;
    line-height: 18px !important;
    color: var(--acp-text-secondary) !important;
}

.acp-card-abstract-wrapper {
    margin: var(--acp-gap-xs) 0 !important;
    font-family: var(--acp-font-family) !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 24px !important;
    color: var(--acp-text-tertiary) !important;
}

.acp-card-abstract {
    font-family: inherit !important;
    font-weight: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
}

.acp-card-abstract.truncated {
    /* Truncation is handled by character limit in JS, not CSS */
}

.acp-card-abstract-toggle {
    color: var(--acp-primary-blue) !important;
    cursor: pointer !important;
    font-weight: 500 !important;
    font-size: 15px !important;
    line-height: 24px !important;
    white-space: nowrap !important;
}

.acp-card-abstract-toggle:hover {
    text-decoration: underline !important;
}

a.acp-card-cta,
.acp-card-cta.acp-card-cta {
    width: fit-content !important;
    height: 36px !important;
    padding: 8px 14px !important;
    border-radius: 4px !important;
    border: 1px solid var(--acp-primary-blue) !important;
    background: var(--acp-primary-blue) !important;

    font-family: var(--acp-font-family) !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    color: var(--acp-bg-white) !important;

    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: opacity 0.2s ease !important;
    box-shadow: none !important;
}

a.acp-card-cta:hover,
.acp-card-cta.acp-card-cta:hover {
    opacity: 0.9 !important;
    color: var(--acp-bg-white) !important;
    background: #FFA400 !important;
	border-color: #FFA400 !important;
}

/* Secondary Button (Analysis Button) */
a.academic-secondary-button,
.academic-secondary-button.academic-secondary-button {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 5px 18px !important;
    border-radius: 4px !important;
    border: 1px solid #d0d5dd !important;
    background: #ffffff !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05) !important;
    font-family: "Inter", sans-serif !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    line-height: 24px !important;
    color: #344054 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
}

a.academic-secondary-button:hover,
.academic-secondary-button.academic-secondary-button:hover {
    background: #F9FAFB !important;
    border-color: #9CA3AF !important;
    color: var(--e-global-color-primary) !important;
}

/* ===========================
   SKELETON LOADER
   =========================== */

.acp-skeleton-card {
    width: 100% !important;
    padding: var(--acp-gap-lg) !important;
    display: flex !important;
    gap: var(--acp-gap-lg) !important;
    position: relative !important;
}

.acp-skeleton-card:not(:last-child)::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 1px !important;
    background-color: var(--acp-border-secondary) !important;
}

.acp-skeleton {
    background: linear-gradient(90deg, #F0F0F0 25%, #E0E0E0 50%, #F0F0F0 75%) !important;
    background-size: 200% 100% !important;
    animation: acp-skeleton-loading 1.5s infinite !important;
    border-radius: 4px !important;
}

@keyframes acp-skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.acp-skeleton-image {
    flex: 0 0 140px !important;
    width: 140px !important;
    height: 184px !important;
}

.acp-skeleton-content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: var(--acp-gap-xs) !important;
}

.acp-skeleton-type {
    width: 80px !important;
    height: 20px !important;
}

.acp-skeleton-title {
    width: 70% !important;
    height: 30px !important;
}

.acp-skeleton-authors {
    width: 50% !important;
    height: 18px !important;
}

.acp-skeleton-abstract {
    width: 100% !important;
    height: 48px !important;
    margin: var(--acp-gap-xs) 0 !important;
}

.acp-skeleton-button {
    width: 137px !important;
    height: 36px !important;
}

/* ===========================
   PAGINATION SECTION
   =========================== */

.acp-pagination-wrapper {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: var(--acp-gap-md) !important;
    padding: var(--acp-gap-lg) 0 !important;
}


button.acp-pagination-button,
.acp-pagination-button.acp-pagination-button {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 114px !important;
    height: 36px !important;
    padding: 8px 14px !important;
    border-radius: 4px !important;
    border: 1px solid var(--acp-border-primary) !important;
    background: var(--acp-bg-white) !important;
    font-family: var(--acp-font-family) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    color: var(--acp-text-tertiary) !important;
    cursor: pointer !important;
    transition: opacity 0.2s ease !important;
    text-decoration: none !important;
    box-shadow: none !important;
    justify-content: center;
}

button.acp-pagination-button:hover:not(:disabled),
.acp-pagination-button.acp-pagination-button:hover:not(:disabled) {
    opacity: 0.90 !important;
}

button.acp-pagination-button:disabled,
.acp-pagination-button.acp-pagination-button:disabled {
    opacity: 0.5 !important;
	outline:none;
    cursor: not-allowed !important;
}

.acp-pagination-button svg {
    width: 16px !important;
    height: 16px !important;
    color: var(--acp-text-tertiary) !important;
}

.acp-pagination-numbers {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
	outline:none;
}

button.acp-pagination-number,
.acp-pagination-number.acp-pagination-number {
    width: 40px !important;
    height: 40px !important;
    padding: 12px !important;
    border-radius: 8px !important;
	outline:none;

    font-family: var(--acp-font-family) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    text-align: center !important;
    color: var(--acp-text-secondary) !important;

    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

button.acp-pagination-number:hover:not(.active),
.acp-pagination-number.acp-pagination-number:hover:not(.active) {
    background: #F9FAFB !important;
	outline:none;
}

button.acp-pagination-number.active,
.acp-pagination-number.acp-pagination-number.active {
    border-radius: 4px !important;
    border: 1px solid var(--acp-primary-blue) !important;
	outline:none;
    color: var(--acp-primary-blue) !important;
}

.acp-pagination-ellipsis {
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
	outline:none;
    align-items: center !important;
    justify-content: center !important;
    color: var(--acp-text-secondary) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
}

/* ===========================
   MODAL/DIALOG FOR ABSTRACT
   =========================== */

.acp-modal-overlay {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.5) !important;
    z-index: 9998 !important;
    align-items: center !important;
    justify-content: center !important;
}

.acp-modal-overlay.active {
    display: flex !important;
}

.acp-modal {
    background: var(--acp-bg-white) !important;
    border-radius: 8px !important;
    max-width: 600px !important;
    width: 90% !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
    padding: var(--acp-gap-lg) !important;
	outline:none;
    position: relative !important;
    z-index: 9999 !important;
}

button.acp-modal-close,
.acp-modal-close.acp-modal-close {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
	outline:none;
    width: 32px !important;
    height: 32px !important;
    border: none !important;
    background: transparent !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--acp-text-secondary) !important;
    box-shadow: none !important;
}

button.acp-modal-close:hover,
.acp-modal-close.acp-modal-close:hover {
    color: var(--acp-text-primary) !important;
}

.acp-modal-title {
    font-family: var(--acp-font-family) !important;
    font-weight: 600 !important;
	outline:none;
    font-size: 20px !important;
    line-height: 30px !important;
    color: var(--acp-text-primary) !important;
    margin-bottom: var(--acp-gap-md) !important;
    padding-right: 40px !important;
}

.acp-modal-content {
    font-family: var(--acp-font-family) !important;
    font-weight: 400 !important;
    font-size: 16px !important;
	outline:none;
    line-height: 24px !important;
    color: var(--acp-text-primary) !important;
}

/* ===========================
   NO RESULTS MESSAGE
   =========================== */

#acpNoResults {
    text-align: center !important;
    padding: 40px 20px !important;
    color: var(--acp-text-secondary) !important;
    font-family: var(--acp-font-family) !important;
}

#acpNoResults p {
    font-family: var(--acp-font-family) !important;
}

/* ===========================
   RESPONSIVE DESIGN
   =========================== */

@media (max-width: 768px) {
    /* Stack search and filters vertically on mobile */
    .acp-main-filter-row,
    .acp-main-filter-row.acp-main-filter-row {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .acp-search-container,
    .acp-search-container.acp-search-container {
        flex: 1 !important;
        width: 100% !important;
        margin-bottom: var(--acp-gap-sm) !important;
    }

    .acp-filters-container,
    .acp-filters-container.acp-filters-container {
        flex: 1 !important;
        width: 100% !important;
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
    }

    select.acp-filter-dropdown,
    .acp-filter-dropdown.acp-filter-dropdown {
        flex: 1 !important;
        min-width: 120px !important;
    }

    .acp-citation-card {
        flex-direction: column !important;
    }

    .acp-card-image {
        flex: 0 0 auto !important;
        aspect-ratio: 140 / 184 !important;
    }

	.acp-search-container {
        border-bottom: 1px solid var(--acp-border-primary) !important;
        padding: 0px 0px 6px 0px !important;
    }

    .acp-skeleton-card {
        flex-direction: column !important;
    }

    .acp-skeleton-image {
        flex: 0 0 auto !important;
        width: 100% !important;
        height: 200px !important;
    }

    .acp-pagination-wrapper {
        flex-direction: column !important;
    }

    .acp-pagination-numbers {
        order: -1 !important;
        margin-bottom: var(--acp-gap-sm) !important;
    }


}

@media (max-width: 480px) {
    .acp-filter-chips-wrapper,
    .acp-filter-chips-wrapper.acp-filter-chips-wrapper {
        justify-content: flex-start !important;
    }

    .acp-filters-container,
    .acp-filters-container.acp-filters-container {
        flex-direction: column !important;
        width: 100% !important;
    }

    select.acp-filter-dropdown,
    .acp-filter-dropdown.acp-filter-dropdown {
        width: 100% !important;
    }
	
	.acp-card-title a {
    font-size: 18px !important;
    line-height: 1.3em !important;
}

    button.acp-pagination-button,
    .acp-pagination-button.acp-pagination-button {
        width: 100% !important;
        justify-content: center !important;
    }

    .acp-card-title {
        font-size: 18px !important;
        line-height: 26px !important;
    }

.acp-filters-container, .acp-filters-container.acp-filters-container {
        flex-direction: column !important;
        width: 100% !important;
        align-items: flex-start !important;
    }
}