/*

Theme Name: Pro – Child Theme
Theme URI: https://theme.co/pro/
Author: Themeco
Author URI: https://theme.co/
Description: Make all of your modifications to Pro in this child theme.
Version: 1.0.0
Template: pro

*/
:root {
    /* ==============================
       COLOR VARIABLES
       ============================== */

    --events-bg: #f4f8fc;
    --events-white: #ffffff;

    --events-dark: #0b1f33;
    --events-dark-blue: #02122c;
    --events-dark-blue-hover: #0f2a52;

    --events-text: #1a2b3c;
    --events-text-secondary: #4a5e6d;
    --events-text-muted: #657786;
    --events-text-light: #7a8b99;
    --events-text-lighter: #8899a6;

    /* Borders */
    --events-border: #dbe3ea;
    --events-border-light: #e1e8ed;
    --events-border-lighter: #e6ecf0;
    --events-border-row: #eaf0f6;
    --events-border-tab: #dcdfe4;

    /* Blue */
    --events-blue: #006699;
    --events-blue-dark: #0066cc;
    --events-blue-light: #e4f0f6;
    --events-blue-bg: #e2f1fd;
    --events-blue-hover: #d0e6f9;
    --events-blue-pill: #dbeafe;
    --events-blue-pill-text: #1d4ed8;
    --events-blue-sub-bg: #e0f2fe;
    --events-blue-sub-text: #0369a1;
	--events-amber-sub-bg: #E0B85C;
    --events-amber-sub-text: #000000;
	

    /* Purple */
    --events-purple: #7020d0;
    --events-purple-pill: #f3e8ff;
    --events-purple-pill-text: #7e22ce;

    /* Teal */
    --events-teal: #00a884;
    --events-teal-pill: #ccfbf1;
    --events-teal-pill-text: #0f766e;
    --events-teal-dot: #14b8a6;

    /* Orange */
    --events-orange: #ffedd5;
    --events-orange-text: #c2410c;
    --events-orange-dot: #f97316;

    /* Green */
    --events-green: #15803d;
    --events-green-bg: #dcfce7;
    --events-green-dark: #166534;

    /* Slate */
    --events-slate-bg: #f1f5f9;
    --events-slate-text: #475569;
    --events-slate-muted: #64748b;
    --events-light-bg: #f8fafc;

    /* Shadows */
    --events-shadow: rgba(0, 0, 0, 0.06);
    --events-card-shadow: rgba(0, 0, 0, 0.03);
}


/* =========================================
   MAIN WRAPPER
   ========================================= */

.events-app-wrapper {
    background-color: var(--events-bg);
    padding: 35px;
    border-radius: 18px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--events-text);
    max-width: 1300px;
    margin: 0 auto;
    box-sizing: border-box;
}


/* =========================================
   TOP NAVIGATION TABS
   ========================================= */

.events-tabs-nav {
    display: flex;
	flex-wrap:wrap;
    gap: 10px;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--events-border-light);
    padding-bottom: 12px;
}

.nav-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--events-white);
    border: 1px solid var(--events-border-tab);
    padding: 10px 22px;
    border-radius: 22px;
    font-size: 15px;
    font-weight: 600;
    color: var(--events-text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.nav-tab.active {
    background: var(--events-white);
    color: var(--events-dark);
    border-color: var(--events-dark);
    box-shadow: 0 3px 8px var(--events-shadow);
}


/* =========================================
   TAB CONTENT
   ========================================= */

.events-tab-content {
    display: none;
}

.events-tab-content.active {
    display: block;
}


/* =========================================
   SCHEDULE DATE STRIP
   ========================================= */

.date-strip {
    display: flex;
	flex-wrap:wrap;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 15px;
    margin-bottom: 28px;
}

.date-card {
    background: var(--events-white);
    border: 1px solid var(--events-border);
    border-radius: 14px;
    min-width: 72px;
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s;
}

.date-card .day {
    font-size: 11px;
    font-weight: 800;
    color: var(--events-text-light);
    text-transform: uppercase;
}

.date-card .date {
    font-size: 15px;
    font-weight: 800;
    color: var(--events-dark);
    margin: 3px 0 8px 0;
}

.date-card .counter {
    background: var(--events-blue-light);
    color: var(--events-blue);
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 12px;
}

.date-card.active {
    background: var(--events-dark-blue);
    border-color: var(--events-dark-blue);
}

.date-card.active .day,
.date-card.active .date {
    color: var(--events-white);
}

.date-card.active .counter {
    background: #0f3d6e;
    color: var(--events-white);
}


/* =========================================
   SCHEDULE HEADERS
   ========================================= */

.schedule-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 22px;
}

.selected-date-title {
    font-size: 26px;
    font-weight: 800;
    margin: 0;
    color: var(--events-dark);
}

.events-count {
    font-size: 15px;
    color: var(--events-text-muted);
}

.timezone-info {
    font-size: 13px;
    color: var(--events-text-muted);
}


/* =========================================
   DAY SECTION
   ========================================= */

.day-section-label {
    font-size: 13px;
    font-weight: 800;
    color: var(--events-text-muted);
    border-bottom: 1px solid var(--events-border);
    padding-bottom: 8px;
    margin-bottom: 20px;
    letter-spacing: 0.5px;
}

.day-section-label small {
    font-weight: normal;
    text-transform: none;
    color: var(--events-text-lighter);
    font-size: 12px;
}


/* =========================================
   SCHEDULE ROWS
   ========================================= */

.schedule-list {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.schedule-row {
    display: grid;
    grid-template-columns: 110px 4px 1fr 150px;
    gap: 18px;
    align-items: start;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--events-border-row);
}

.time-col {
    font-size: 15px;
    font-weight: 700;
    color: var(--events-text-secondary);
}

.color-bar {
    width: 4px;
    height: 100%;
    min-height: 80px;
    border-radius: 2px;
}

.color-bar.purple {
    background-color: var(--events-purple);
}

.color-bar.teal {
    background-color: var(--events-teal);
}
.color-bar.blue{
	 background-color: var(--events-blue);
}

.color-bar.orange{
	 background: var(--events-orange-text);
}

/* =========================================
   EVENT INFORMATION
   ========================================= */

.info-col h3 {
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 6px 0;
    color: var(--events-dark);
}

.title-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.badge-free {
    font-size: 11px;
    font-weight: 800;
    color: var(--events-green);
    background: var(--events-green-bg);
    padding: 3px 8px;
    border-radius: 5px;
}

.description {
    font-size: 14px;
    color: var(--events-text-secondary);
    margin: 6px 0 10px 0;
    line-height: 1.5;
}

.location-meta {
    font-size: 13px;
    color: var(--events-text-light);
    margin-bottom: 12px;
}


/* =========================================
   CATEGORY PILLS
   ========================================= */

.category-col {
    text-align: right;
}

.cat-pill {
    font-size: 11px;
    font-weight: 800;
    padding: 5px 12px;
    border-radius: 14px;
    display: inline-block;
}

.cat-pill.purple {
    background: var(--events-purple-pill);
    color: var(--events-purple-pill-text);
}

.cat-pill.teal {
    background: var(--events-teal-pill);
    color: var(--events-teal-pill-text);
}

.cat-pill.blue {
    background: var(--events-blue-pill);
    color: var(--events-blue-pill-text);
}

.cat-pill.orange {
    background: var(--events-orange);
    color: var(--events-orange-text);
}


/* =========================================
   ACTION BUTTONS
   ========================================= */

.event-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
}

.event-action-btn.btn-free {
    background-color: var(--events-blue-bg);
    color: var(--events-blue-dark);
}

.event-action-btn.btn-free:hover {
    background-color: var(--events-blue-hover);
}

.event-action-btn.btn-tickets {
    background-color: var(--events-dark-blue);
    color: var(--events-white);
}

.event-action-btn.btn-tickets:hover {
    background-color: var(--events-dark-blue-hover);
}


/* =========================================
   GRID VIEW
   ========================================= */

.grid-search-bar {
    background: var(--events-white);
    border: 1px solid var(--events-border);
    border-radius: 28px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
}

.grid-search-bar input {
    border: none;
    outline: none;
    width: 100%;
    font-size: 15px;
    background: transparent;
}

.tags-filter-bar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.tag-btn {
    background: var(--events-white);
    border: 1px solid var(--events-border);
    padding: 6px 16px;
    border-radius: 18px;
    font-size: 13px;
    font-weight: 600;
    color: var(--events-text-secondary);
    cursor: pointer;
}

.tag-btn.active {
    background: var(--events-dark-blue);
    color: var(--events-white);
    border-color: var(--events-dark-blue);
}


/* =========================================
   GRID CARDS
   ========================================= */

.grid-cards-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 22px;
}

.event-card-item {
    background: var(--events-white);
    border-radius: 14px;
    padding: 22px;
    border: 1px solid var(--events-border-lighter);
    box-shadow: 0 2px 5px var(--events-card-shadow);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card-badges {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.right-badges {
    display: flex;
    gap: 5px;
}

.sub-badge {
    font-size: 10px;
    font-weight: 700;
    background: var(--events-slate-bg);
    color: var(--events-slate-text);
    padding: 3px 8px;
    border-radius: 5px;
}

.sub-badge.green {
    background: var(--events-green-bg);
    color: var(--events-green-dark);
}

.sub-badge.blue {
    background: var(--events-blue-sub-bg);
    color: var(--events-blue-sub-text);
}
.sub-badge.amber{
	 background: var(--events-amber-sub-bg);
    color: var(--events-amber-sub-text);
}

.card-title {
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 10px 0;
    color: var(--events-dark);
}

.card-desc {
    font-size: 13.5px;
    color: var(--events-text-secondary);
    line-height: 1.5;
    margin-bottom: 18px;
}

.card-footer-meta {
    font-size: 12.5px;
    color: var(--events-text-light);
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 15px;
}

.card-action-wrap {
    margin-top: auto;
    padding-top: 10px;
}


/* =========================================
   ACCORDIONS FOR BY TYPE TAB
   ========================================= */

.accordion-item {
    background: var(--events-white);
    border-radius: 10px;
    border: 1px solid var(--events-border-lighter);
    margin-bottom: 14px;
    overflow: hidden;
}

.accordion-header {
    padding: 16px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.accordion-header h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}

.dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
}

.dot.purple {
    background: var(--events-purple-pill-text);
}

.dot.blue {
    background: var(--events-blue-pill-text);
}

.dot.teal {
    background: var(--events-teal-pill-text);
}

.count-badge {
    background: var(--events-slate-bg);
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 12px;
    color: var(--events-slate-muted);
}

.accordion-body {
    padding: 22px;
    background: var(--events-light-bg);
    border-top: 1px solid var(--events-border-lighter);
}


/* =========================================
   MAP VIEW LAYOUT
   ========================================= */

.map-container-layout {
    display: flex;
    gap: 24px;
}

.map-sidebar {
    width: 250px;
    flex-shrink: 0;
}

.sidebar-section {
    margin-bottom: 24px;
}

.sidebar-section h5 {
    font-size: 11px;
    font-weight: 800;
    color: var(--events-text-muted);
    margin: 0 0 12px 0;
    letter-spacing: 0.6px;
}

.filter-list,
.events-list-simple {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 13px;
}

.filter-list li {
    padding: 8px 12px;
    border-radius: 18px;
    cursor: pointer;
    color: var(--events-text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.filter-list li.active {
    background: var(--events-dark-blue);
    color: var(--events-white);
    font-weight: 600;
}

.dot-indicator {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
}

.dot-indicator.purple {
    background: var(--events-purple-pill-text);
}

.dot-indicator.orange {
    background: var(--events-orange-dot);
}

.dot-indicator.teal {
    background: var(--events-teal-dot);
}

.dot-indicator.blue {
    background: #3b82f6;
}

.events-list-simple li {
    padding: 6px 0;
    color: var(--events-dark);
    font-size: 13px;
}

.map-view-box {
    flex-grow: 1;
}


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

@media (max-width: 768px) {

    .schedule-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .color-bar {
        display: none;
    }

    .map-container-layout {
        flex-direction: column;
    }

    .map-sidebar {
        width: 100%;
    }
}
@media (max-width: 520px) {
	.events-app-wrapper{
		padding-left:15px;
		padding-right:15px;
	}
	.grid-cards-wrapper{
		grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	}
}