/*
 * Copyright (c) MountainViews.ie 2025
 */

/* Custom CSS for the newsletter display */
 /* Namespace all custom styles with mv- prefix to avoid conflicts */

#niSearch::placeholder {
    font-size: 0.75rem !important; /* equivalent to fs-7 */
    color: #6c757d !important; /* equivalent to text-muted */
    opacity: 1;
}

#artIndexTable td:last-child {
    min-width: 100px;
}

#artIndexTable td {
    margin: 1px;
    padding: 2px 5px 2px 5px;
}

@media (max-width: 545px) {
    #mv-rwd-newsletter .sizing {
        font-size: 0.85rem;
    }
}

 #mv-rwd-newsletter {
     font-family: var(--bs-font-sans-serif, -apple-system, BlinkMacSystemFont,
     "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
 }

/* Vertical scrolling for catalog */
#mv-rwd-newsletter .mv-catalog-scroll {
    max-height: 150px;
    overflow-y: auto;
    padding-right: 5px; /* Space for scrollbar */
}

/* Custom scrollbar styling for better visibility */
#mv-rwd-newsletter .mv-catalog-scroll::-webkit-scrollbar {
    width: 6px;
}

#mv-rwd-newsletter .mv-catalog-scroll::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

#mv-rwd-newsletter .mv-catalog-scroll::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 10px;
}

#mv-rwd-newsletter .mv-catalog-scroll::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}

/* Style for newsletter items in the catalog - KEEPING ORIGINAL CLASS NAME */
#mv-rwd-newsletter .newsletter-item {
    border-radius: 4px;
    padding: 0 0 0 1rem;
    display: block;
    color: var(--bs-primary);
    transition: all 0.2s ease;
}

#mv-rwd-newsletter .newsletter-item:hover {
    background-color: #e9ecef;
    text-decoration: none;
    color: var(--bs-primary);
}

/* Selected newsletter item styling */
#mv-rwd-newsletter .newsletter-item.selected {
    background-color: var(--bs-primary);
    color: white;
}

#mv-rwd-newsletter .newsletter-item.selected:hover {
    background-color: var(--bs-primary);
    color: white;
}

/* Add a subtle shadow to the catalog when expanded */
#mv-rwd-newsletter #catalogCollapse {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Animation for the collapse - using Bootstrap's class */
.collapsing {
    transition: height 0.35s ease;
}

/* Wrapper for newsletter items */
#mv-rwd-newsletter .newsletter-wrapper {
    margin-bottom: 0.25rem;
    position: relative;
}

/* Style for intro link */
#mv-rwd-newsletter .intro-link {
    color: var(--bs-primary);
    font-size: 0.9rem;
}

#mv-rwd-newsletter .intro-link:hover {
    text-decoration: underline !important;
}

/* Hide intro link containers by default */
#mv-rwd-newsletter .intro-link-container {
    display: none;
}

/* Show intro link for selected newsletter */
#mv-rwd-newsletter .newsletter-item.selected + .intro-link-container {
    display: block;
}

#mv-rwd-newsletter .mv-logo {
    height: .9em;
    width: auto;
    vertical-align: bottom;
    margin-right: 0.3em;
    position: relative;
    bottom: 0.15em;
    filter: drop-shadow(1px 1px 3px rgba(255, 255, 255, 0.4))
    drop-shadow(2px 3px 2px rgba(255, 255, 255, 0.7));
}

#mv-rwd-newsletter .btn-compact {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

/* Initial hidden state for catalog to prevent FOUC */
#mv-rwd-newsletter #catalogCollapse {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.2s linear;
}

#mv-rwd-newsletter #catalogCollapse.show {
    visibility: visible;
    opacity: 1;
}

/* Keep the initial collapsed state truly hidden until Bootstrap takes over */
#mv-rwd-newsletter .collapse:not(.show) {
    display: none !important;
}





.newsletter-container {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}
.newsletter-iframe {
    width: 100%;
    border: none;
    overflow: hidden;
    max-width: 100%;
}
.newsletter-container-pdf.newsletter-container {
    height: 1000px;
    border: none;
    overflow: hidden;
}

.newsletter-container-pdf .newsletter-iframe {
    width: 100%;
    height: 100%;
    border: none;
    max-width: 100%;
}

.newsletter-button {
    display: block;
    width: max-content;
    margin: 0 auto 10px auto;
    padding: 8px 16px;
    background-color: #4a8eff;
    color: white;
    text-decoration: none;
    border-radius: 20px;
    font-weight: bold;
    font-size: 0.95rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
}
.newsletter-button:hover {
    background-color: #3a7ced;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    transform: translateY(-2px);
}
.button-container {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 10px;
}
.newsletter-button i {
    margin-left: 5px;
}
@media (max-width: 768px) {
    .newsletter-button {
        padding: 7px 14px;
        font-size: 0.9rem;
    }
}