.portfolio-events-search {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
font-family: inherit;
}
.portfolio-events-search .search-container {
background: #fff;
border-radius: 12px;
padding: 20px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
}
.portfolio-events-search .search-row {
display: flex;
align-items: center;
gap: 15px;
flex-wrap: wrap;
}
input#end_date, 
input#start_date,
input#keyword_search {
border-radius: 40px;
border: 1px solid #5e338c;
}
.portfolio-events-search input[type="text"] {
flex: 1;
min-width: 200px;
padding: 12px 15px;
border: 2px solid #5e338c;
border-radius: 8px;
font-size: 16px;
transition: all 0.3s ease;
position: relative;
}
.portfolio-events-search input[type="text"]:focus {
outline: none;
border-color: #5e338c;
box-shadow: 0 0 0 3px rgba(94, 51, 140, 0.1);
transform: translateY(-1px);
background: #fff;
}
.portfolio-events-search label {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
font-weight: 500;
color: #666;
transition: all 0.3s ease;
pointer-events: none;
background: transparent;
padding: 0 4px;
font-size: 14px;
}
.portfolio-events-search .datepicker {
background-color: #fff;
cursor: pointer;
border: 2px solid #5e338c;
border-radius: 8px;
padding: 12px 15px;
font-size: 16px;
transition: all 0.3s ease;
position: relative;
}
.portfolio-events-search .datepicker:focus {
outline: none;
border-color: #5e338c;
box-shadow: 0 0 0 3px rgba(94, 51, 140, 0.1);
transform: translateY(-1px);
}
.portfolio-events-search .search-button,
.portfolio-events-search .clear-button {
padding: 16px 23px !important;
border: none !important;
border-radius: 24px !important;
font-size: 16px !important;
font-weight: 600 !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
text-decoration: none !important;
display: inline-block !important;
margin: 0 !important;
}
.portfolio-search-section .portfolio-events-search .search-button {
background-color: #5e338c !important;
color: white !important;
margin-right: 10px !important;
}
.portfolio-search-section .portfolio-events-search .search-button:hover {
background-color: #4a2a6f !important;
transform: translateY(-1px) !important;
}
.portfolio-search-section .portfolio-events-search .clear-button {
background-color: #ebe9e9 !important;
color: #333 !important;
padding: 18px 25px !important;
border-radius: 39px !important;
}
.portfolio-events-search .clear-button:hover {
background-color: #e0e0e0 !important;
} .search-results {
margin-top: 30px;
} .search-result-item {
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 8px;
overflow: hidden;
transition: all 0.3s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
height: 100%;
}
.search-result-item:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.result-thumbnail {
position: relative;
overflow: hidden;
flex-shrink: 0;
}
.result-thumbnail img {
width: 100%;
height: 250px;
object-fit: cover;
transition: transform 0.3s ease;
aspect-ratio: 1 / 1;
}
.search-result-item:hover .result-thumbnail img {
transform: scale(1.05);
}
.result-content {
padding: 20px;
display: flex;
flex-direction: column;
flex: 1;
min-height: 120px;
}
.result-content h3 {
margin: 0 0 12px 0;
font-size: 24px;
line-height: 30px;
background-color: #fff;
padding: 8px 12px;
border-radius: 4px;
flex-shrink: 0;
word-wrap: break-word;
overflow-wrap: break-word;
}
.result-content h3 a {
color: #5e338c;
text-decoration: none;
transition: color 0.3s ease;
}
.result-content h3 a:hover {
color: #4a2a6f;
}
.event-info {
background-color: transparent;
padding: 6px 0;
border-radius: 0;
font-size: 14px;
color: #555;
margin-bottom: 12px;
border-left: none;
flex-shrink: 0;
}
.result-excerpt {
color: #666;
font-size: 14px;
line-height: 1.6;
margin-bottom: 12px;
flex: 1;
word-wrap: break-word;
overflow-wrap: break-word;
overflow: hidden;
} .search-loading {
text-align: center;
padding: 40px;
color: #666;
font-style: italic;
} .filter-loading {
text-align: center;
padding: 40px;
color: #666;
font-style: italic;
display: none;
}
.filter-loading::before {
content: '';
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid #e0e0e0;
border-radius: 50%;
border-top-color: #0073aa;
animation: filter-spin 1s ease-in-out infinite;
margin-right: 10px;
vertical-align: middle;
}
@keyframes filter-spin {
to {
transform: rotate(360deg);
}
}
.filter-loading-text {
display: inline-block;
vertical-align: middle;
}
.no-results,
.error {
text-align: center;
padding: 40px;
color: #666;
font-size: 16px;
}
.error {
color: #d32f2f;
} .portfolio-events-search .input-group {
position: relative;
flex: 1;
min-width: 200px;
}
.portfolio-events-search .input-group input:focus + label,
.portfolio-events-search .input-group input:not(:placeholder-shown) + label {
top: 0;
transform: translateY(-50%) scale(0.85);
color: #5e338c;
font-weight: 600;
background: #fff;
}
.portfolio-events-search .input-group input:focus + label {
color: #5e338c;
} @media (max-width: 768px) {
.portfolio-events-search .search-row {
flex-direction: column;
align-items: stretch;
gap: 20px;
}
.portfolio-events-search .input-group {
min-width: auto;
}
.portfolio-events-search .search-button,
.portfolio-events-search .clear-button {
width: 100%;
margin-left: 0;
margin-top: 10px;
} .result-content {
padding: 15px;
}
.result-content h3 {
font-size: 20px;
line-height: 26px;
}
}
@media (max-width: 480px) {
.portfolio-events-search {
padding: 15px;
}
.portfolio-events-search .search-button,
.portfolio-events-search .clear-button {
width: 100%;
margin-left: 0;
margin-top: 10px;
}
} .portfolio-events-meta {
padding: 15px 0;
}
.portfolio-events-meta .form-table th {
width: 150px;
padding: 15px 10px 15px 0;
}
.portfolio-events-meta .form-table td {
padding: 15px 10px;
}
.portfolio-events-meta input[type="datetime-local"] {
width: 250px;
padding: 8px 12px;
border: 1px solid #ddd;
border-radius: 4px;
}
.portfolio-events-meta select {
width: 250px;
padding: 8px 12px;
border: 1px solid #ddd;
border-radius: 4px;
}
.event-fields {
background-color: #f9f9f9;
padding: 20px;
margin-top: 20px;
border-radius: 6px;
border: 1px solid #e0e0e0;
}
.event-fields h4 {
margin-top: 0;
margin-bottom: 15px;
color: #333;
font-size: 16px;
} .portfolio-events-grid-container {
margin: 0 auto;
padding: 20px;
font-family: inherit;
} .portfolio-events-grid-container * {
box-sizing: border-box;
} .portfolio-events-grid-container .portfolio-filters {
margin-bottom: 30px;
text-align: center;
background-color: transparent !important;
}
.portfolio-events-grid-container .portfolio-filter-list{
list-style: none;
padding: 0;
margin: 0;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
}
.portfolio-events-grid-container ul li.filter-item {
margin: 0;
}
.portfolio-events-grid-container .filter-item {
display: inline-block;
}
.portfolio-events-grid-container .filter-item a {
display: inline-block;
padding: 10px 20px;
background: #fff !important;
color: #000 !important;
text-decoration: none;
border-radius: 25px;
transition: all 0.3s ease;
font-weight: 500;
border: 1px solid #000 !important;
}
.portfolio-events-grid-container .filter-item a:hover {
background: #5e338c !important;
color: #fff !important;
border-color: #5e338c !important;
}
.filter-item.active a {
background: #5e338c !important;
color: #fff !important;
border-color: #5e338c !important;
} .portfolio-events-grid-container .portfolio-grid {
display: grid !important;
grid-template-columns: repeat(5, 1fr) !important;
gap: 20px !important;
margin-bottom: 40px !important;
width: 100% !important;
max-width: 100% !important;
align-items: stretch !important;
height: auto !important; contain: layout style paint !important; position: relative !important;
float: none !important;
clear: both !important;
} .portfolio-events-grid-container .portfolio-grid .portfolio-item {
background: #fff !important;
border-radius: 8px !important;
overflow: hidden !important;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
transition: all 0.3s ease !important;
opacity: 1 !important;
transform: none !important;
width: 100% !important;
height: 100% !important;
position: static !important;
min-width: 0 !important;
max-width: none !important;
left: auto !important;
top: auto !important;
display: flex !important;
flex-direction: column !important; aspect-ratio: 1 / 1 !important; min-height: 0 !important;
max-height: none !important; margin: 0 !important;
padding: 0 !important;
float: none !important;
clear: none !important;
} .portfolio-events-grid-container .portfolio-grid .portfolio-item.portfolio-filtered-out {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transform: scale(0.8) !important;
transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease !important; grid-column: unset !important;
grid-row: unset !important;
}
.portfolio-events-grid-container .portfolio-grid .portfolio-item.animate-in {
opacity: 1 !important;
transform: translateY(0) !important;
}
.portfolio-events-grid-container .portfolio-grid .portfolio-item:hover {
transform: translateY(-5px) !important;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
}
.portfolio-events-grid-container .portfolio-grid .portfolio-item:hover .portfolio-content {
opacity: 1 !important;
}
.portfolio-events-grid-container .portfolio-grid .portfolio-item-inner {
position: relative !important;
height: 100% !important;
width: 100% !important;
overflow: hidden !important;
} .portfolio-events-grid-container .portfolio-grid .portfolio-image {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
overflow: hidden !important;
width: 100% !important;
height: 100% !important;
min-width: 100% !important;
min-height: 100% !important;
}
.portfolio-events-grid-container .portfolio-grid .portfolio-image img {
width: 100% !important;
height: 100% !important;
min-width: 100% !important;
min-height: 100% !important;
max-width: none !important;
max-height: none !important;
object-fit: cover !important;
object-position: center !important;
transition: transform 0.3s ease !important; will-change: transform !important;
backface-visibility: hidden !important;
transform: translateZ(0) !important;
}
.portfolio-events-grid-container .portfolio-grid .portfolio-item:hover .portfolio-image img {
transform: scale(1.05) !important;
} .portfolio-events-grid-container .portfolio-grid .portfolio-overlay {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background: rgba(94, 51, 140, 0.9) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
opacity: 0 !important;
transition: opacity 0.3s ease !important;
}
.portfolio-events-grid-container .portfolio-grid .portfolio-overlay-content {
display: flex !important;
gap: 15px !important;
}
.portfolio-events-grid-container .portfolio-grid .portfolio-link,
.portfolio-events-grid-container .portfolio-grid .portfolio-lightbox {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 50px !important;
height: 50px !important;
background: rgba(255, 255, 255, 0.9) !important;
color: #76519d !important;
text-decoration: none !important;
border-radius: 50% !important;
transition: all 0.3s ease !important;
}
.portfolio-events-grid-container .portfolio-grid .portfolio-link:hover,
.portfolio-events-grid-container .portfolio-grid .portfolio-lightbox:hover {
background: #fff !important;
color: #76519d !important;
transform: scale(1.1) !important;
}
.portfolio-events-grid-container .portfolio-grid .portfolio-link i,
.portfolio-events-grid-container .portfolio-grid .portfolio-lightbox i {
font-size: 18px !important;
} .portfolio-events-grid-container .portfolio-grid .portfolio-content {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
padding: 20px !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
text-align: center !important;
background: rgba(94, 51, 140, 0.9) !important;
opacity: 0 !important;
transition: opacity 0.3s ease !important;
z-index: 2 !important;
}
.portfolio-item-inner .portfolio-content h3.portfolio-title {
margin: 0 0 12px 0 !important;
font-size: 30px !important;
line-height: 36px !important;
font-weight: 600 !important;
color: #fff !important;
flex-shrink: 0 !important; 
word-wrap: break-word !important;
overflow-wrap: break-word !important;
}
.portfolio-item-inner .portfolio-content h3.portfolio-title a {
color: #fff !important;
text-decoration: none !important;
transition: color 0.3s ease !important;
}
.portfolio-item-inner .portfolio-content h3.portfolio-title a:hover {
color: #f0f0f0 !important;
}
.portfolio-events-grid-container .portfolio-grid .portfolio-event-info {
background-color: transparent !important;
padding: 6px 0 !important;
border-radius: 0 !important;
font-size: 14px !important;
color: #fff !important;
margin-bottom: 12px !important;
border-left: none !important;
flex-shrink: 0 !important;
}
.portfolio-events-grid-container .portfolio-grid .portfolio-event-info .event-date {
font-weight: 500 !important;
color: #fff !important;
}
.portfolio-events-grid-container .portfolio-grid .portfolio-excerpt {
color: #f0f0f0 !important;
font-size: 14px !important;
line-height: 1.6 !important;
margin-bottom: 12px !important;
flex: 1 !important;
word-wrap: break-word !important;
overflow-wrap: break-word !important;
overflow: hidden !important;
}
.portfolio-events-grid-container .portfolio-grid .portfolio-categories {
display: none !important;
flex-wrap: wrap !important;
gap: 8px !important;
flex-shrink: 0 !important;
}
.portfolio-events-grid-container .portfolio-grid .portfolio-category {
background-color: #e9ecef !important;
color: #666 !important;
padding: 4px 8px !important;
border-radius: 12px !important;
font-size: 12px !important;
font-weight: 500 !important;
} .portfolio-events-grid-container .portfolio-load-more {
text-align: center;
margin-top: 40px;
}
.load-more-button {
background-color: #27ae60;
color: white;
border: none;
padding: 12px 30px;
border-radius: 25px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.load-more-button:hover {
background-color: #229954;
transform: translateY(-2px);
}
.load-more-button:disabled {
background-color: #ccc;
cursor: not-allowed;
transform: none;
} .portfolio-lightbox-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.9);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
opacity: 0;
transition: opacity 0.3s ease;
}
.portfolio-lightbox-content {
position: relative;
max-width: 90%;
max-height: 90%;
}
.portfolio-lightbox-content img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.portfolio-lightbox-close {
position: absolute;
top: -40px;
right: 0;
color: white;
font-size: 30px;
cursor: pointer;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
}
.portfolio-lightbox-title {
position: absolute;
bottom: -40px;
left: 0;
color: white;
font-size: 16px;
font-weight: 600;
} .portfolio-events-grid-container .grid-style-minimal .portfolio-item {
box-shadow: none !important;
border: 1px solid #e0e0e0 !important;
}
.portfolio-events-grid-container .grid-style-minimal .portfolio-overlay {
background: rgba(0, 0, 0, 0.7) !important;
} .no-portfolio-items {
text-align: center;
padding: 60px 20px;
background: #f8f9fa;
border-radius: 8px;
margin: 20px 0;
}
.no-portfolio-items p {
margin: 0 0 20px 0;
color: #666;
font-size: 16px;
}
.no-portfolio-items .button {
display: inline-block;
background-color: #27ae60;
color: white;
padding: 12px 24px;
text-decoration: none;
border-radius: 6px;
font-weight: 600;
transition: background-color 0.3s ease;
}
.no-portfolio-items .button:hover {
background-color: #229954;
color: white;
} @media (max-width: 1400px) {
.portfolio-events-grid-container .portfolio-grid {
grid-template-columns: repeat(4, 1fr) !important;
gap: 20px !important;
}
}
@media (max-width: 1200px) {
.portfolio-events-grid-container .portfolio-grid {
grid-template-columns: repeat(3, 1fr) !important;
gap: 20px !important;
}
}
@media (max-width: 992px) {
.portfolio-events-grid-container .portfolio-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 20px !important;
}
}
@media (max-width: 768px) {
.portfolio-events-grid-container .portfolio-grid {
grid-template-columns: 1fr !important;
gap: 20px !important;
}
.portfolio-events-grid-container .portfolio-filter-list {
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
overflow-x: auto !important;
overflow-y: hidden !important;
scrollbar-width: none !important; -ms-overflow-style: none !important; white-space: nowrap !important;
padding: 10px 0 !important;
margin: 0 -20px !important;
padding-left: 20px !important;
padding-right: 20px !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important;
}
.portfolio-events-grid-container .portfolio-filter-list::-webkit-scrollbar {
display: none !important;
}
.portfolio-events-grid-container .filter-item {
flex-shrink: 0 !important;
margin-right: 10px !important;
}
.portfolio-events-grid-container .filter-item:last-child {
margin-right: 20px !important;
}
.portfolio-events-grid-container .filter-item a {
padding: 10px 20px !important;
font-size: 16px !important;
white-space: nowrap !important; cursor: grab !important;
user-select: none !important;
-webkit-user-select: none !important;
-moz-user-select: none !important;
-ms-user-select: none !important;
}
.portfolio-events-grid-container .filter-item a:active {
cursor: grabbing !important;
} .portfolio-events-grid-container .portfolio-filter-list.dragging {
cursor: grabbing !important;
user-select: none !important;
-webkit-user-select: none !important;
-moz-user-select: none !important;
-ms-user-select: none !important;
}
.portfolio-events-grid-container .portfolio-filter-list.dragging .filter-item a {
cursor: grabbing !important;
pointer-events: none !important;
}
.portfolio-events-grid-container .portfolio-grid .portfolio-content {
padding: 20px !important;
}
.portfolio-events-grid-container .portfolio-grid body .row .col h3.portfolio-title {
font-size: 20px !important;
line-height: 26px !important;
}
}
@media (max-width: 480px) {
.portfolio-events-grid-container {
padding: 15px;
}
.portfolio-events-grid-container .portfolio-grid .portfolio-overlay-content {
gap: 10px !important;
}
.portfolio-events-grid-container .portfolio-grid .portfolio-link,
.portfolio-events-grid-container .portfolio-grid .portfolio-lightbox {
width: 40px !important;
height: 40px !important;
}
} .portfolio-events-search {
font-family: "Open Sans", Arial, sans-serif;
}
.portfolio-events-search .search-button {
background-color: #27ae60;
}
.portfolio-events-search .search-button:hover {
background-color: #229954;
}
.result-content h3 a:hover {
color: #27ae60;
}
.event-info {
border-left-color: #27ae60;
}.wpml-ls-legacy-list-horizontal{border:1px solid transparent;padding:7px;clear:both}.wpml-ls-legacy-list-horizontal>ul{padding:0;margin:0 !important;list-style-type:none}.wpml-ls-legacy-list-horizontal .wpml-ls-item{padding:0;margin:0;list-style-type:none;display:inline-block}.wpml-ls-legacy-list-horizontal a{display:block;text-decoration:none;padding:5px 10px 6px;line-height:1}.wpml-ls-legacy-list-horizontal a span{vertical-align:middle}.wpml-ls-legacy-list-horizontal a span.wpml-ls-bracket{vertical-align:unset}.wpml-ls-legacy-list-horizontal .wpml-ls-flag{display:inline;vertical-align:middle}.wpml-ls-legacy-list-horizontal .wpml-ls-flag+span{margin-left:.4em}.rtl .wpml-ls-legacy-list-horizontal .wpml-ls-flag+span{margin-left:0;margin-right:.4em}.wpml-ls-legacy-list-horizontal.wpml-ls-statics-footer{margin-bottom:30px}.wpml-ls-legacy-list-horizontal.wpml-ls-statics-footer>ul{text-align:center}