/* 
Theme Name: Trikona Events
Description: Trikona Child is a child theme of Trikona
Author: Trikona Team
Author URI: 
Template: trikona-edtech
Version: 1.0.0
Text Domain: trikona-child
*/
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

.ev_container {
    max-width: 1170px;
    margin: 0 auto;
    padding: 0 15px;
}
.event_container {
    margin-top: 130px !important;
}
.multi-btn a {
    font-size: 22px;
    line-height: 1; 
    border-radius: 30px;
    letter-spacing: 4.7px;
}
.ev_banner_section h1 { 
    padding: 50px 15px;
    font-size: 35px;
    margin: 0;
    margin-bottom: 20px;
}
.multi-btn {
    padding: 20px 0;
}  
.event_main {
    padding-bottom: 60px;
}
.em-list {
	 width: 100%;
	 display: grid;
	 grid-template-rows: 1fr;
	 grid-gap: 25px;
}
 .em-list.em-grid {
	 grid-template-rows: none;
	 grid-template-columns: repeat(auto-fill, minmax(var(--view-grid-width), 1fr));
	 align-items: start;
	 justify-items: center;
	 grid-gap: 20px;
}
 .em-list.em-grid > div.em-item {
	/* a little more specific to override without !important */
	 max-width: 400px;
	 height: 100%;
	 padding: 0 !important;
	 border: none;
	 box-shadow: rgba(0, 0, 0, 0.15) 0 5px 15px 0;
	 transition: box-shadow 0.3s ease-out;
	 cursor: pointer;
}
 .em-list.em-grid > div.em-item:hover {
	 box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}
 .em-list.em-grid > div.em-item .em-item-image {
	 position: relative;
	 width: 100%;
	 aspect-ratio: 1.5;
	 padding: 0 !important;
}
 .em-list.em-grid > div.em-item .em-item-image:not(.has-placeholder) > div {
	 position: absolute;
	 overflow: hidden;
	 inset: 0;
	 width: 100%;
	 height: 100%;
}
 .em-list.em-grid > div.em-item .em-item-image:not(.has-placeholder) > div img {
	 position: absolute;
	 min-width: 100%;
	 min-height: 100%;
	 max-width: 100%;
	 max-height: 100%;
	 display: block;
	 padding: 0;
	 z-index: 0;
	 box-sizing: border-box;
	 object-fit: cover;
	 object-position: center center;
	 margin: auto;
}
 .em-list.em-grid > div.em-item .em-item-image .em-item-image-placeholder {
	 display: block;
}
 .em-list.em-grid > div.em-item .em-item-info {
	 margin-top: 1px;
	 padding: 10px 10px 20px 15px;
}
 .em-list.em-grid > div.em-item .em-item-info .em-item-title {
	 font-weight: 400 !important;
	 font-size: calc(var(--font-size) + 4px) !important;
	 margin: 5px 0 15px !important;
}
 .em-list.em-grid > div.em-item .em-item-info .em-item-title a {
	 color: var(--default-color) !important;
	 background-color: transparent !important;
}
 .em-list.em-grid > div.em-item .em-item-info .em-item-meta {
	 display: block;
}
 .em-list.em-grid > div.em-item .em-item-info .em-item-meta .em-item-meta-line {
	 line-height: 16px;
	 margin-bottom: 10px;
	 grid-template-columns: 30px 1fr;
	 font-size: calc(var(--font-size) - 2px);
}
 .em-list.em-grid > div.em-item .em-item-info .em-item-meta .em-icon {
	 line-height: 16px;
	 width: 16px;
	 height: 16px;
	 background-size: 16px;
}
 .em-list.em-grid > div.em-item .em-item-info .em-item-meta > div {
	 min-width: auto;
}
 .em-list.em-grid > *:not(.em-item) {
	 width: 100%;
	 align-self: center;
	 justify-self: center;
	 justify-content: center;
	 grid-column: -1;
}
 .em-list .em-item {
	 width: 100%;
	 display: grid;
	 grid-template-columns: minmax(0, 1fr) 2fr;
	 border-top: 1px solid #efefef;
	 padding: 30px 4px 3px;
	 background-color: var(--meta-bg);
	 color: var(--default-color);
}
 .em-list .em-item:first-child {
	 border-top: 0;
	 padding-top: 5px;
}
 .em-list .em-item .em-item-info {
	 border-left: 4px solid var(--default-border);
	 padding: 0 10px 0 35px;
}
 .em-list .em-item .em-item-info h3.em-item-title {
	 font-size: 22px;
	 line-height: 26px;
	 font-weight: normal;
	 clear: none;
	 margin: 0 0 7px 0;
	 padding: 0;
	 text-decoration: none;
}
 .em-list .em-item .em-item-info h3.em-item-title a {
	 color: var(--a-color-1);
	 text-decoration: none;
}
 .em-list .em-item .em-item-info .em-item-meta {
	 margin-bottom: 20px;
	 display: flex;
	 flex-direction: row;
	 flex-wrap: wrap;
}
 .em-list .em-item .em-item-info .em-item-meta > div {
	 flex: 1 1 50%;
	 min-width: 250px;
}
 .em-list .em-item .em-item-info .em-item-desc {
	 font-size: 16px;
	 margin: 20px 0;
}
 .em-list .em-item .em-item-info .button {
	 margin-bottom: 0 !important;
}
 .em-list.size-small .em-item, .em-list.em-grid .em-item {
	 border: 1px solid var(--main-border-color);
	 padding: 10px;
	 box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
	 grid-template-columns: 100%;
	 grid-template-rows: min-content max-content;
}
 .em-list.size-small .em-item .em-item-image, .em-list.em-grid .em-item .em-item-image {
	 min-width: 125px;
	 max-width: 100%;
	 padding-bottom: 10px;
}
 .em-list.size-small .em-item .em-item-image.has-placeholder, .em-list.em-grid .em-item .em-item-image.has-placeholder {
	 padding: 20px 0 30px;
}
 .em-list.size-small .em-item .em-item-image img, .em-list.em-grid .em-item .em-item-image img, .em-list.size-small .em-item .em-item-image .em-item-image-placeholder, .em-list.em-grid .em-item .em-item-image .em-item-image-placeholder {
	 padding: 0;
}
 .em-list.size-small .em-item .em-item-info, .em-list.em-grid .em-item .em-item-info {
	 border-left: none !important;
	 border-top: 4px solid var(--default-border);
	 padding: 10px 10px 10px 10px;
}
 .em-list.size-small .em-item .em-item-info .em-item-meta, .em-list.em-grid .em-item .em-item-info .em-item-meta {
	 width: 100%;
	 margin-left: 0;
	 line-height: 22px;
	 margin-bottom: 5px;
	 display: flex;
	 flex-direction: row;
	 flex-wrap: wrap;
}
 .em-list.size-small .em-item .em-item-info .em-item-meta > div, .em-list.em-grid .em-item .em-item-info .em-item-meta > div {
	 flex: 1 1 50%;
	 min-width: 200px;
}
.em.pixelbones .input .button:not([data-nostyle]) {
    background: var(--e-global-color-accent) !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    color: var(--e-global-color-black) !important;
    border-radius: 0 !important;
    border: none !important;
}
.em.pixelbones .input .button:not([data-nostyle]):hover {
	background: var(--e-global-color-black) !important;
    color: var(--e-global-color-accent) !important;
}
.em.em-list .em-item .em-item-info{
    border: #fff !important;
}
.em.pixelbones .input input[type=submit]:not([data-nostyle]):hover {
    color: var(--e-global-color-accent) !important;
}

	
.event-category-pagination {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
	margin-top: 20px;
}

.event-category-pagination .page-numbers {
    display: inline-block;
    padding: 10px 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    color: #333;
    text-decoration: none;
    background-color: #fff;
    transition: all 0.3s ease;
}

.event-category-pagination .page-numbers:hover {
    border-color: #3C4A75;
    color: #3C4A75;
}

.event-category-pagination .current {
    background-color: #F4B63E;
    /* border-color: #0038FF; */
    color: #333;
    font-weight: 600;
}
 
.event-category-pagination .next {
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    color: #333;
    text-decoration: none;
    transition: all 0.3s ease;
}

.event-category-pagination .next:hover {
    border-color: #3C4A75;
    color: #3C4A75;
}
.css-my-bookings {
    text-align: center;
    padding: 50px 15px;
}
 
/*.em.em-event-booking-form .em-button.em-booking-submit{
	display: none !important;
}*/

@media   (max-width: 767px) {
    .multi-btn .wp-block-button.has-custom-width {
        width: 100%;
    }

    .event-category-item {
        width: 100%;
        position: relative;
        text-align: center;
        -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.08);
        -ms-box-shadow: 0 0 15px rgba(0, 0, 0, 0.08);
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.08);
        margin-bottom: 30px;
    }

    /* Banner title: the parent theme sets .banner-section h1 to display:flex
       with nowrap, so multi-word titles (e.g. category names like
       "Construction Management") overflow and get clipped on both sides by the
       body's overflow-x:hidden on narrow phones. Allow the words to wrap and
       scale the font down so the title always fits. */
    .banner-section h1 {
        flex-wrap: wrap;
        font-size: clamp(1.6rem, 7.5vw, 2.25rem);
    }

    .banner-section h1 .h1b,
    .banner-section h1 .h1y {
        overflow-wrap: anywhere;
    }
}

.ev_container,
.emtpl-hero .hero,
.em.em-view-container{
	max-width: 1450px;
	margin: auto;
}

.em.em-view-container{
	background: #fff;
	padding: 1rem !important;
	border-radius: var(--cl-radius-xl) !important;
	--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) !important;
}

.em.em-list.em-grid > div.em-item{
	padding: 15px !important;
	border-radius: 16px;
}

.em.em-list.em-grid > div.em-item .em-item-image:not(.has-placeholder) > div img{
	border-radius: 16px;
}

.em.em-list.em-grid > div.em-item .em-item-info{
	padding: 0px;
}

.em.em-list.em-grid > div.em-item .em-item-image{
	background: #eee;
  	border-radius: 16px;
}

body main{
	margin-top: 0px !important;
}

.emtpl-hero .wrap{
	background: #f7f7f7;
}

.emtpl-hero .wrap,
.emtpl-hero .hero{
	width: 100%;
	margin: auto !important;
	max-width: 100% !important;
}

.emtpl-hero .hero{
	border-radius: 0px !important;
}

.emtpl-hero .wrap{
	padding: 0px !important;
}

.emtpl-hero .hero .hero-inner{
	margin: auto;
	max-width: 1170px;
	width: 100%;
	padding-top: 100px;
}

.emtpl-hero .main-content{
	max-width: 1450px !important;
	padding: 50px 0px !important;
	margin: auto;
}

.emtpl-hero .muted{
	background: #1b3b4c;
	padding: 10px 15px;
	border-radius: 10px;
	color: #fff !important;
	margin-bottom: 10px
}

#em-booking{
	margin: 0px !important;
	top: 0px;
}

.emtpl-hero .content{
	margin-top: 30px !important;
}

.em.pixelbones p{
	margin-bottom: 10px !important;
}

.em.em-view-container{
	width: 100% !important;
	padding-top: 0px;
}

.em.em-item.em-item-single .em-item-meta h3{
	font-weight: 500 !important;
	color: #212529;
	display: block;
}

.em.pixelbones h3{
	display: block;
}

.em-event-content .wp-block-button,
.emtpl-hero .cta{
	background: #1b3b4c !important;
	border-radius: 30px;
}

.em-event-content .wp-block-button a.wp-block-button__link,
.emtpl-hero .cta{
	color: #fff !important;	
}

.em-event-content .wp-block-button:hover,
.emtpl-hero .cta:hover{
	background: #ffc107 !important;
}

.emtpl-hero .cta:hover,
.em-event-content .wp-block-button:hover a.wp-block-button__link{
	color: #000 !important;
}

.em-search{
	margin-bottom: 30px !important;
	margin-top: 50px !important;
}

.css-event-form{
	padding: 50px 0px;
}

#accordionEventForm .card-header#headingEventName,
#accordionEventForm .card-header#headingEventWhen,
#accordionEventForm .card-header#headingEventWhere,
#accordionEventForm .card-header#headingEventDetails,
#accordionEventForm .card-header#headingEvenImage,
#accordionEventForm .card-header#headingEventSpeaker,
#accordionEventForm .card-header#headingEvenBooking{
	padding: 10px !important;
}

#accordionEventForm .card{
	margin-bottom: 10px;
	border-radius: 16px;
	overflow: visible;
}

/* Let selectize dropdowns escape the accordion card and sit above the next section */
#accordionEventForm .card:has(.selectize-control.dropdown-active) {
	position: relative;
	z-index: 20;
}

#accordionEventForm .selectize-dropdown {
	z-index: 9999 !important;
}

#accordionEventForm .card .card-header{
	border-radius: 16px;
	background: #f5f5f5;
}

#accordionEventForm .card .collapse.show{
	border-bottom: 1px solid rgba(0,0,0,.125);
	border-radius: 0px 0px 10px 10px;
}

#accordionEventForm .card .card-:hover{
	background: #1b3b4c;
}

.main-content{
	max-width: 1450px !important;
	margin: 50px auto;
	min-height: 350px;
}

.em.em-modal{
	z-index: 99999 !important;
}

.em-grid.em.pixelbones .event-categories{
	margin-bottom: 0px !important;
}
.em.pixelbones.em-my-bookings table#dbem-bookings-table a {
    text-decoration: none;
}
.em-search-ajax a.btn-event {
    text-decoration: none;
    border-radius: 30px;
}
@media (min-width: 1200px) {
  .container {
    max-width: 1450px !important;
  }
}

/* Accordion Content Area */
#accordionEventForm .card-body {
    background: #ffffff;
    padding: 30px;
    border-top: 1px solid #eef2f7;
}

/* Description text */
#accordionEventForm .card-body .input:not(:has(input,select,textarea)) {
    color: #64748b;
    font-size: 14px;
    line-height: 1.7;
}

/* Labels */
#accordionEventForm .card-body label {
    display: inline-block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
}

/* Inputs */
#accordionEventForm .card-body input[type="text"],
#accordionEventForm .card-body input[type="email"],
#accordionEventForm .card-body input[type="date"],
#accordionEventForm .card-body input[type="number"],
#accordionEventForm .card-body select,
#accordionEventForm .card-body textarea {
    width: 100%;
    min-height: 48px;
    padding: 12px 16px;
    border: 1px solid #dbe4ee;
    border-radius: 12px;
    background: #f8fafc;
    transition: all .25s ease;
    font-size: 15px;
}

/* Focus State */
#accordionEventForm .card-body input:focus,
#accordionEventForm .card-body select:focus,
#accordionEventForm .card-body textarea:focus {
    border-color: #3b82f6;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(59,130,246,.12);
    outline: none;
}

#accordionEventForm .card-body textarea{
	border: none;
}

/* Section spacing */
#accordionEventForm .card-body .row {
    row-gap: 20px;
}

/* Event form — When section responsive grid */
#accordionEventForm #em-form-when .trikona-em-when-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: 20px 24px;
    align-items: start;
}

#accordionEventForm #em-form-when .trikona-em-when-field {
    min-width: 0;
}

#accordionEventForm #em-form-when .trikona-em-when-dates .em-event-dates,
#accordionEventForm #em-form-when .trikona-em-when-dates .em-datepicker,
#accordionEventForm #em-form-when .trikona-em-when-timezone .em-timezone,
#accordionEventForm #em-form-when .trikona-em-when-status .em-active-status {
    margin: 0;
}

#accordionEventForm #em-form-when .em-event-dates .em-date-start-end,
#accordionEventForm #em-form-when .em-event-dates .em-datepicker-data input[type="date"],
#accordionEventForm #em-form-when .em-timezone select,
#accordionEventForm #em-form-when .em-active-status select,
#accordionEventForm #em-form-when .selectize-control {
    width: 100% !important;
    max-width: 100% !important;
}

#accordionEventForm #em-form-when .em-timeranges-editor,
#accordionEventForm #em-form-when .em-timeranges-editor fieldset.em-timeranges {
    width: 100%;
    max-width: 100%;
}

#accordionEventForm #em-form-when .em-timeranges-editor legend {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
}

#accordionEventForm #em-form-when .em-timerange-inputs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    width: 100%;
}

#accordionEventForm #em-form-when .em-timerange-inputs label.inline {
    margin: 0;
    flex: 1 1 100px;
    min-width: 0;
}

#accordionEventForm #em-form-when .em-timerange-inputs .em-time-input {
    width: 100% !important;
    min-width: 0;
    max-width: none;
}

#accordionEventForm #em-form-when .em-timerange-timeslots {
    width: 100% !important;
    max-width: 100%;
}

#accordionEventForm #em-form-when .em-timerange-timeslots .em-timerange-row {
    flex-wrap: wrap;
    gap: 8px;
}

#accordionEventForm #em-form-when .em-timeranges-actions {
    margin-top: 12px;
}

#accordionEventForm #em-form-when .em-timeranges-actions .em-timerange-add {
    width: 100%;
    max-width: 100%;
    justify-content: center;
}

#accordionEventForm #em-form-when .multi-day-event-info {
    margin-top: 20px;
}

@media (max-width: 767px) {
    #accordionEventForm #em-form-when .trikona-em-when-grid {
        gap: 18px;
    }

    #accordionEventForm .card-body {
        padding: 20px 16px;
    }

    #accordionEventForm #em-form-when .em-timerange-inputs label.inline {
        flex: 1 1 100%;
    }
}

/* Help Text */
#accordionEventForm .multi-day-event-info,
#accordionEventForm .recurring-summary-missing {
    background: #f8fafc;
    padding: 14px 18px;
    border-radius: 8px;
    margin-top: 20px;
    color: #475569;
    font-size: 14px;
}

/* Buttons inside content */
#accordionEventForm .card-body .button,
#accordionEventForm .card-body button {
    border-radius: 10px;
    padding: 10px 18px;
    font-weight: 600;
    transition: all .25s ease;
}

#accordionEventForm .card-body .button:hover,
#accordionEventForm .card-body button:hover {
    transform: translateY(-2px);
}

/* Advanced Settings Blocks */
#accordionEventForm .em-recurrence-advanced,
#accordionEventForm .em-timerange-timeslots {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 20px;
    margin-top: 15px;
}

/* Selectize */
#accordionEventForm .selectize-input {
    border-radius: 12px !important;
    border: 1px solid #dbe4ee !important;
    min-height: 48px !important;
    padding: 10px 14px !important;
    box-shadow: none !important;
}

/* Event image preview (edit form) */
#accordionEventForm .trikona-event-image-preview {
    margin: 12px 0 16px;
}

#accordionEventForm .trikona-event-image-preview-label {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
}

#accordionEventForm .trikona-event-image-preview-img {
    display: block;
    max-width: 100%;
    max-height: 220px;
    width: auto;
    height: auto;
    border-radius: 12px;
    border: 1px solid #dbe4ee;
    object-fit: contain;
    background: #f8fafc;
}

/* Nice spacing */
#accordionEventForm .card-body > div > * + * {
    margin-top: 18px;
}

/* Overall spacing between fields */
#accordionEventForm .em-event-location-zoom-advanced-settings > * {
    margin-bottom: 20px;
}

/* Section headings */
#accordionEventForm .em-event-location-zoom-advanced-settings h4 {
    margin: 35px 0 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e5e7eb;
    font-size: 18px;
    font-weight: 700;
}

/* Every field */
#accordionEventForm .em-input-field {
    margin-bottom: 18px;
}

/* Checkbox fields */
#accordionEventForm .em-input-field-boolean {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}

/* Checkbox */
#accordionEventForm .em-input-field-boolean input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    flex-shrink: 0;
}

/* Label beside checkbox */
#accordionEventForm .em-input-field-boolean label {
    margin: 0 !important;
    display: inline-flex;
    align-items: center;
    font-weight: 500;
    cursor: pointer;
    flex: 1;
}

/* Description below checkbox row */
#accordionEventForm .em-input-field-boolean em {
    width: 100%;
    margin-top: 8px;
    margin-left: 28px;
    display: block;
    font-size: 13px;
    color: #64748b;
    font-style: normal;
    line-height: 1.6;
}

/* Text input fields */
#accordionEventForm .em-input-field-input,
#accordionEventForm .em-input-field-select {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Description text */
#accordionEventForm .em-em-input-field-description {
    display: block;
    margin-top: 8px;
    color: #64748b;
    font-size: 13px;
    line-height: 1.6;
    font-style: normal;
}

/* Registration description block */
#accordionEventForm .em-event-location-zoom-advanced-settings-group-description {
    padding: 16px 20px;
    background: #f8fafc;
    border-radius: 10px;
    margin-bottom: 20px;
}

#accordionEventForm .em-event-location-zoom-advanced-settings-group-description p:last-child {
    margin-bottom: 0;
}

/* Advanced settings wrapper */
#accordionEventForm .em-event-location-zoom-advanced-settings {
    margin-top: 20px;
    padding: 25px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
}

/* Show Advanced Settings Link */
#accordionEventForm .em-event-location-zoom-advanced-settings-toggle {
    display: inline-flex;
    align-items: center;
    margin: 15px 0 20px;
    font-weight: 600;
    text-decoration: none;
}

/* Multi-select country field */
#accordionEventForm select[multiple] {
    min-height: 160px;
}

/* Mobile */
@media (max-width: 768px) {
    #accordionEventForm .em-input-field-boolean {
        align-items: flex-start;
    }

    #accordionEventForm .em-input-field-boolean em {
        margin-left: 0;
    }
}

.btn-close:hover{
    color: #fff !important;
}

.em.pixelbones .event-actions .event-actions-inner button.view-registrations{
	padding: 0px !important;
	border-radius: 10px !important;
	margin-bottom: 0px !important;
	border: 1px solid #dbe3ec !important;
}

.em.pixelbones .event-actions .event-actions-inner button.view-registrations:hover{
	border-color: var(--cl-yellow, #ffc000) !important;
	color: var(--cl-yellow, #ffc000) !important;
	background: #fffdf2 !important;
	transform: translateY(-1px);
}

.em.em-modal .em-modal-popup footer > div{
    padding: 0 !important;
}

.trikona-webinar-filter-modal__close span{
    display: none !important;
}