/* ========================================
   WP Membes Plugin Styles
   ======================================== */

/* ========================================
   SHARED VARIABLES & UTILITIES
   ======================================== */

:root {
    --membes-spacing-xs: 0.5rem;
    --membes-spacing-sm: 1rem;
    --membes-spacing-md: 1.5rem;
    --membes-spacing-lg: 2rem;
    --membes-spacing-xl: 2.5rem;
    --membes-border-radius: 8px;
    --membes-border-radius-lg: 12px;
    --membes-transition: all 0.2s ease;
    --membes-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --membes-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.05);
    --membes-shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* ========================================
   CALENDAR PAGE SHORTCODE
   ======================================== */

.wp-membes-calendar-page {
    margin: var(--membes-spacing-lg) 0;
}

.wp-membes-calendar-page-list {
    margin-top: var(--membes-spacing-lg);
}

.wp-membes-calendar-page-empty {
    text-align: center;
    padding: var(--membes-spacing-xl) var(--membes-spacing-lg);
    color: var(--wp--preset--color--contrast, #666);
    font-style: italic;
    background: var(--wp--preset--color--base, #f9f9f9);
    border-radius: var(--membes-border-radius);
    border: 1px solid var(--wp--preset--color--primary, #e5e5e5);
}

/* Month Filter */
.wp-membes-calendar-page-month-filter {
    margin-bottom: var(--membes-spacing-lg);
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.wp-membes-calendar-page-month-filter button {
    display: inline-block;
    padding: var(--membes-spacing-xs) 1.25rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--wp--preset--color--base, #fff);
    background: var(--wp--preset--color--primary, #2563eb);
    border: none;
    border-radius: var(--membes-border-radius);
    cursor: pointer;
    transition: var(--membes-transition);
    box-shadow: var(--membes-shadow-sm);
    text-align: center;
    text-decoration: none;
}

.wp-membes-calendar-page-month-filter button:hover,
.wp-membes-calendar-page-month-filter button:focus {
    background: var(--wp--preset--color--contrast, #1a1a1a);
    color: var(--wp--preset--color--base, #fff);
    outline: none;
    box-shadow: var(--membes-shadow-md);
}

.wp-membes-calendar-page-month-filter button:disabled,
.wp-membes-calendar-page-month-filter button[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--wp--preset--color--primary, #2563eb);
    color: var(--wp--preset--color--base, #fff);
    box-shadow: none;
}

.wp-membes-calendar-page-month-filter button.active {
    background: var(--wp--preset--color--contrast, #1a1a1a);
    color: var(--wp--preset--color--base, #fff);
    box-shadow: var(--membes-shadow-md);
    font-weight: 700;
}

/* General Filters */
.wp-membes-calendar-page-filters {
    display: grid;
    gap: var(--membes-spacing-sm);
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    margin: var(--membes-spacing-lg) 0;
}

.wp-membes-calendar-page-filter {
    display: flex;
    flex-direction: column;
}

.wp-membes-calendar-page-filter-select {
    width: 100%;
    border: none;
    border-radius: var(--membes-border-radius);
    background: var(--wp--preset--color--base, #fff);
    font-size: 0.95rem;
    transition: var(--membes-transition);
}

.wp-membes-calendar-page-filter-select:focus {
    outline: none;
    border-color: var(--wp--preset--color--primary, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* TomSelect Styling */
.wp-membes-calendar-page-filter .ts-wrapper {
    width: 100%;
}

.wp-membes-calendar-page-filter .ts-control {
    border: 1px solid var(--wp--preset--color--primary, #ddd);
    border-radius: var(--membes-border-radius);
    padding: 0.75rem;
    background: var(--wp--preset--color--base, #fff);
    min-height: 2.5rem;
}

.wp-membes-calendar-page-filter .ts-control:focus {
    border-color: var(--wp--preset--color--primary, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.wp-membes-calendar-page-filter .ts-dropdown {
    border: 1px solid var(--wp--preset--color--primary, #ddd);
    border-radius: var(--membes-border-radius);
    background: var(--wp--preset--color--base, #fff);
    box-shadow: var(--membes-shadow-md);
}

/* Event Cards */
.wp-membes-calendar-page-event {
    background: var(--wp--preset--color--base, #fff);
    border: 1px solid var(--wp--preset--color--primary, #e5e5e5);
    border-radius: var(--membes-border-radius-lg);
    overflow: hidden;
    box-shadow: var(--membes-shadow-md);
    transition: var(--membes-transition);
    margin-bottom: var(--membes-spacing-lg);
}

.wp-membes-calendar-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--wp--preset--color--contrast, #1a1a1a);
    color: var(--wp--preset--color--base, #fff);
    padding: var(--membes-spacing-md);
}

.wp-membes-calendar-page-title {
    color: var(--wp--preset--color--base, #fff);
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    flex: 1 1 auto;
    line-height: 1.3;
}

.wp-membes-calendar-page-dates {
    margin-left: var(--membes-spacing-md);
    white-space: nowrap;
    font-size: 0.95rem;
    font-weight: 500;
    opacity: 0.9;
    color: var(--wp--preset--color--primary, #60a5fa);
}

.wp-membes-calendar-page-summary {
    padding: var(--membes-spacing-md);
    color: var(--wp--preset--color--contrast, #666);
    font-size: 1rem;
    line-height: 1.6;
    border-bottom: 1px solid var(--wp--preset--color--primary, #e5e5e5);
}

.wp-membes-calendar-page-details {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: var(--membes-spacing-lg);
    align-items: flex-start;
    padding: var(--membes-spacing-lg) var(--membes-spacing-md);
}

.wp-membes-calendar-page-image img {
    width: 100%;
    height: auto;
    border-radius: var(--membes-border-radius);
    box-shadow: var(--membes-shadow-sm);
}

.wp-membes-calendar-page-fields dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--membes-spacing-xs) var(--membes-spacing-md);
    margin: 0;
    padding: 0;
}

.wp-membes-calendar-page-fields dt {
    font-weight: 600;
    margin: 0;
    grid-column: 1;
    color: var(--wp--preset--color--contrast, #374151);
}

.wp-membes-calendar-page-fields dd {
    margin: 0;
    grid-column: 2;
    color: var(--wp--preset--color--contrast, #6b7280);
}

.wp-membes-calendar-page-actions {
    display: flex;
    flex-direction: column;
    gap: var(--membes-spacing-sm);
}

.wp-membes-calendar-page-actions .membes-modal-trigger {
    display: inline-block;
    padding: var(--membes-spacing-xs) 1.25rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--wp--preset--color--base, #fff);
    background: var(--wp--preset--color--primary, #2563eb);
    border: none;
    border-radius: var(--membes-border-radius);
    cursor: pointer;
    transition: var(--membes-transition);
    box-shadow: var(--membes-shadow-sm);
    text-align: center;
    text-decoration: none;
}

.wp-membes-calendar-page-actions .membes-modal-trigger:hover,
.wp-membes-calendar-page-actions .membes-modal-trigger:focus {
    background: var(--wp--preset--color--contrast, #1a1a1a);
    color: var(--wp--preset--color--base, #fff);
    outline: none;
    box-shadow: var(--membes-shadow-md);
}

/* ========================================
   EVENT FEED SHORTCODE
   ======================================== */

.wp-membes-event-feed-list {
    display: flex;
    flex-direction: column;
    gap: var(--membes-spacing-xs);
    margin: var(--membes-spacing-sm) 0;
}

.wp-membes-event-feed-empty {
    text-align: center;
    padding: var(--membes-spacing-xl) var(--membes-spacing-lg);
    color: var(--wp--preset--color--contrast, #666);
    font-style: italic;
    background: var(--wp--preset--color--base, #f9f9f9);
    border-radius: var(--membes-border-radius);
    border: 1px solid var(--wp--preset--color--primary, #e5e5e5);
}

.wp-membes-event-feed-event {
    padding: var(--membes-spacing-xs) 0;
    border-bottom: 1px solid var(--wp--preset--color--primary, #e5e5e5);
}

.wp-membes-event-feed-event:last-child {
    border-bottom: none;
}

.wp-membes-event-feed-details {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.wp-membes-event-feed-title {
    color: var(--wp--preset--color--contrast, #1a1a1a);
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
}

.wp-membes-event-feed-summary {
    color: var(--wp--preset--color--contrast, #666);
    font-size: 0.85rem;
    line-height: 1.3;
    margin: 0;
}

.wp-membes-event-feed-dates {
    color: var(--wp--preset--color--primary, #2563eb);
    font-size: 0.8rem;
    font-weight: 500;
    margin: 0;
}

.wp-membes-event-feed-actions {
    display: flex;
    gap: var(--membes-spacing-xs);
    margin-top: var(--membes-spacing-xs);
}

.wp-membes-event-feed-actions .membes-modal-trigger {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--wp--preset--color--primary, #2563eb);
    background: transparent;
    border: 1px solid var(--wp--preset--color--primary, #2563eb);
    border-radius: 4px;
    cursor: pointer;
    transition: var(--membes-transition);
    text-decoration: none;
}

.wp-membes-event-feed-actions .membes-modal-trigger:hover,
.wp-membes-event-feed-actions .membes-modal-trigger:focus {
    background: var(--wp--preset--color--primary, #2563eb);
    color: var(--wp--preset--color--base, #fff);
    box-shadow: var(--membes-shadow-sm);
    outline: none;
}

.wp-membes-event-feed-registration {
    margin-top: 0;
}

.wp-membes-event-feed-registration .membes-modal-trigger {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--wp--preset--color--primary, #2563eb);
    background: transparent;
    border: 1px solid var(--wp--preset--color--primary, #2563eb);
    border-radius: 4px;
    cursor: pointer;
    transition: var(--membes-transition);
    text-decoration: none;
}

.wp-membes-event-feed-registration .membes-modal-trigger:hover,
.wp-membes-event-feed-registration .membes-modal-trigger:focus {
    background: var(--wp--preset--color--primary, #2563eb);
    color: var(--wp--preset--color--base, #fff);
    box-shadow: var(--membes-shadow-md);
    outline: none;
}

.wp-membes-event-feed-registration .membes-modal-trigger:active {
    transform: translateY(0);
    box-shadow: var(--membes-shadow-sm);
}

/* Event Feed Grid Layout */
.wp-membes-event-feed-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(300px, 1fr));
    gap: var(--membes-spacing-lg);
    margin: var(--membes-spacing-sm) 0;
    width: 100%;
    max-width: none;
}

.wp-membes-event-feed-grid .wp-membes-event-feed-event {
    background: var(--wp--preset--color--base, #fff);
    border: 1px solid var(--wp--preset--color--primary, #e5e5e5);
    border-radius: var(--membes-border-radius-lg);
    padding: var(--membes-spacing-md);
    box-shadow: var(--membes-shadow-sm);
    transition: var(--membes-transition);
    margin: 0 !important;
    width: auto;
}

.wp-membes-event-feed-grid .wp-membes-event-feed-event:hover {
    box-shadow: var(--membes-shadow-md);
    transform: translateY(-2px);
}

.wp-membes-event-feed-grid .wp-membes-event-feed-title {
    font-size: 1.1rem;
    margin-bottom: var(--membes-spacing-sm);
}

.wp-membes-event-feed-grid .wp-membes-event-feed-summary {
    margin-bottom: var(--membes-spacing-sm);
}

.wp-membes-event-feed-grid .wp-membes-event-feed-dates {
    margin-bottom: var(--membes-spacing-md);
}

.wp-membes-event-feed-grid .wp-membes-event-feed-actions {
    margin-top: var(--membes-spacing-md);
    gap: var(--membes-spacing-sm);
}

.wp-membes-event-feed-grid .wp-membes-event-feed-actions .membes-modal-trigger {
    flex: 1;
    text-align: center;
    padding: var(--membes-spacing-sm) var(--membes-spacing-md);
}

.wp-membes-event-feed-grid
    .wp-membes-event-feed-registration
    .membes-modal-trigger {
    width: 100%;
    text-align: center;
    padding: var(--membes-spacing-sm) var(--membes-spacing-md);
}

/* ========================================
   MEMBERSHIPS SHORTCODE
   ======================================== */

.wp-membes-memberships-list {
    display: flex;
    flex-direction: column;
    gap: var(--membes-spacing-xs);
    margin: var(--membes-spacing-sm) 0;
}

.wp-membes-memberships-empty {
    text-align: center;
    padding: var(--membes-spacing-xl) var(--membes-spacing-lg);
    color: var(--wp--preset--color--contrast, #666);
    font-style: italic;
    background: var(--wp--preset--color--base, #f9f9f9);
    border-radius: var(--membes-border-radius);
    border: 1px solid var(--wp--preset--color--primary, #e5e5e5);
}

.wp-membes-memberships-membership {
    display: flex;
    align-items: center;
    gap: var(--membes-spacing-lg);
    padding: var(--membes-spacing-xs) 0;
    border-bottom: 1px solid var(--wp--preset--color--primary, #e5e5e5);
}

.wp-membes-memberships-membership:last-child {
    border-bottom: none;
}

.wp-membes-memberships-content {
    flex: 1;
}

.wp-membes-memberships-title {
    margin-bottom: 0.25rem;
}

.wp-membes-memberships-title strong {
    color: var(--wp--preset--color--contrast, #1a1a1a);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    display: block;
}

.wp-membes-memberships-description {
    color: var(--wp--preset--color--contrast, #666);
    font-size: 0.85rem;
    line-height: 1.3;
    margin-bottom: 0.25rem;
}

.wp-membes-memberships-pricing {
    margin-bottom: 0.25rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--wp--preset--color--primary, #2563eb);
}

.wp-membes-memberships-price {
    display: flex;
    align-items: center;
    gap: var(--membes-spacing-xs);
    margin-bottom: 0.75rem;
}

.wp-membes-memberships-price:last-child {
    margin-bottom: 0;
}

.wp-membes-memberships-price-label {
    color: var(--wp--preset--color--contrast, #495057);
    font-weight: 600;
}

.wp-membes-memberships-price-amount {
    color: var(--wp--preset--color--primary, #2563eb);
    font-size: 1.125rem;
    font-weight: 700;
}

.wp-membes-memberships-price-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.wp-membes-memberships-price-list li {
    margin-bottom: var(--membes-spacing-xs);
}

.wp-membes-memberships-actions {
    margin-top: 0;
    flex-shrink: 0;
}

.wp-membes-memberships-actions .membes-modal-trigger {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--wp--preset--color--primary, #2563eb);
    background: transparent;
    border: 1px solid var(--wp--preset--color--primary, #2563eb);
    border-radius: 4px;
    cursor: pointer;
    transition: var(--membes-transition);
    text-decoration: none;
}

.wp-membes-memberships-actions .membes-modal-trigger:hover,
.wp-membes-memberships-actions .membes-modal-trigger:focus {
    background: var(--wp--preset--color--primary, #2563eb);
    color: var(--wp--preset--color--base, #fff);
    outline: none;
}

/* Memberships Grid Layout */
.wp-membes-memberships-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(350px, 1fr));
    gap: var(--membes-spacing-lg);
    margin: var(--membes-spacing-sm) 0;
    width: 100%;
    max-width: none;
}

.wp-membes-memberships-grid .wp-membes-memberships-membership {
    background: var(--wp--preset--color--base, #fff);
    border: 1px solid var(--wp--preset--color--primary, #e5e5e5);
    border-radius: var(--membes-border-radius-lg);
    padding: var(--membes-spacing-md);
    box-shadow: var(--membes-shadow-sm);
    transition: var(--membes-transition);
    flex-direction: column;
    align-items: stretch;
    gap: var(--membes-spacing-md);
    margin: 0 !important;
    width: auto;
}

.wp-membes-memberships-grid .wp-membes-memberships-membership:hover {
    box-shadow: var(--membes-shadow-md);
    transform: translateY(-2px);
}

.wp-membes-memberships-grid .wp-membes-memberships-content {
    flex: 1;
}

.wp-membes-memberships-grid .wp-membes-memberships-title strong {
    font-size: 1.2rem;
}

.wp-membes-memberships-grid .wp-membes-memberships-actions {
    margin-top: var(--membes-spacing-sm);
}

.wp-membes-memberships-grid
    .wp-membes-memberships-actions
    .membes-modal-trigger {
    width: 100%;
    text-align: center;
    padding: var(--membes-spacing-sm) var(--membes-spacing-md);
}

/* ========================================
   MEMBER DIRECTORY STYLES
   ======================================== */

.wp-membes-member-directory-system-search-fields {
    margin-bottom: var(--membes-spacing-md);
    display: flex;
    flex-wrap: wrap;
    gap: var(--membes-spacing-sm);
    align-items: stretch;
    background: var(--wp--preset--color--base-2, #f9f9f9);
    padding: var(--membes-spacing-md);
    border-radius: var(--membes-border-radius);
    border: 1px solid var(--wp--preset--color--primary, #e5e5e5);
}

.wp-membes-member-directory-system-search-fields input {
    flex: 1;
    min-width: 200px;
    border: 1px solid var(--wp--preset--color--primary, #ddd);
    border-radius: var(--membes-border-radius);
    padding: var(--membes-spacing-xs) var(--membes-spacing-sm);
    background: var(--wp--preset--color--base, #fff);
    font-size: 1rem;
    box-sizing: border-box;
}

.wp-membes-member-directory-search {
    margin-bottom: var(--membes-spacing-lg);
}

.wp-membes-member-directory-search-bar {
    align-items: stretch;
    display: flex;
    flex-wrap: wrap;
    gap: var(--membes-spacing-sm);
    width: 100%;
    box-sizing: border-box;
    background: var(--wp--preset--color--base-2, #f9f9f9);
    padding: var(--membes-spacing-md);
    border-radius: var(--membes-border-radius);
    border: 1px solid var(--wp--preset--color--primary, #e5e5e5);
}

.wp-membes-member-directory-search-bar label {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--membes-spacing-xs);
    white-space: nowrap;
    flex-shrink: 0;
}

.wp-membes-member-directory-search-bar select,
.wp-membes-member-directory-search-bar input {
    border: 1px solid var(--wp--preset--color--primary, #ddd);
    border-radius: var(--membes-border-radius);
    padding: var(--membes-spacing-xs) var(--membes-spacing-sm);
    background: var(--wp--preset--color--base, #fff);
    font-size: 1rem;
    box-sizing: border-box;
    min-height: 44px;
}

.wp-membes-member-directory-search-bar select {
    flex-shrink: 0;
}

.wp-membes-member-directory-search-bar input {
    flex: 1;
    min-width: 200px;
    max-width: 100%;
}

.wp-membes-member-directory-search-bar button {
    display: inline-block;
    padding: var(--membes-spacing-xs) 1.25rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--wp--preset--color--base-2, #fff);
    background: var(--wp--preset--color--primary, #2563eb);
    border: none;
    border-radius: var(--membes-border-radius);
    cursor: pointer;
    transition: var(--membes-transition);
    box-shadow: var(--membes-shadow-sm);
    text-align: center;
    text-decoration: none;
}

.wp-membes-member-directory-search-bar
    button.wp-membes-member-directory-filter-toggle:after {
    content: "▸";
    display: inline-block;
    margin-left: 0.5rem;
    transition: transform 0.2s ease;
}

.wp-membes-member-directory-search-bar
    button.wp-membes-member-directory-filter-toggle.expanded:after {
    transform: rotate(90deg);
}

.wp-membes-member-directory-filters {
    display: none;
}

.wp-membes-member-directory-filters.expanded {
    display: flex;
    flex-wrap: wrap;
    gap: var(--membes-spacing-md);
    padding: var(--membes-spacing-md);
    background: var(--wp--preset--color--base-2, #f9f9f9);
    border: 1px solid var(--wp--preset--color--primary, #e5e5e5);
    border-radius: var(--membes-border-radius);
    box-shadow: var(--membes-shadow-sm);
    margin-top: var(--membes-spacing-md);
}

.wp-membes-member-directory-filters.expanded > div {
    flex: 0 0 auto;
    min-width: 200px;
}

.wp-membes-member-directory-filters label {
    font-weight: 600;
    color: var(--membes-color-text-primary);
}

.wp-membes-member-directory-filters select {
    padding: var(--membes-spacing-xs) var(--membes-spacing-sm);
    border: 1px solid var(--membes-color-border);
    border-radius: var(--membes-border-radius);
    background: var(--membes-color-background);
    font-size: var(--membes-font-size-sm);
    color: var(--membes-color-text-primary);
}

.wp-membes-member-directory-filters select:focus {
    outline: none;
    border-color: var(--membes-color-primary);
    box-shadow: 0 0 0 2px var(--membes-color-primary-alpha);
}

.wp-membes-member-directory-filters input[type="checkbox"],
.wp-membes-member-directory-filters input[type="radio"] {
    margin-right: var(--membes-spacing-xs);
}

.wp-membes-member-directory-filters input[type="checkbox"] + label,
.wp-membes-member-directory-filters input[type="radio"] + label {
    font-weight: 400;
    flex-direction: row;
    align-items: center;
}

.wp-membes-member-directory-results {
    position: relative;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.wp-membes-loading-spinner {
    animation: spin 1s linear infinite;
    border: 4px solid transparent;
    border-bottom-color: var(--wp--preset--color--primary, #2563eb);
    border-top-color: var(--wp--preset--color--primary, #2563eb);
    border-radius: 50%;
    height: 3rem;
    left: calc(50% - 1.5rem);
    margin: 0 auto;
    position: absolute;
    top: 10px;
    width: 3rem;
}

.wp-membes-member-directory-list {
    display: grid;
    gap: var(--membes-spacing-md);
    margin-top: var(--membes-spacing-lg);
}

.wp-membes-member-directory-empty {
    text-align: center;
    padding: var(--membes-spacing-xl);
    background: var(--membes-color-background-alt);
    border: 1px solid var(--membes-color-border);
    border-radius: var(--membes-border-radius);
    color: var(--membes-color-text-secondary);
}

.wp-membes-member-directory-item {
    padding: var(--membes-spacing-md);
    background: var(--membes-color-background);
    border: 1px solid var(--membes-color-border);
    border-radius: var(--membes-border-radius);
    transition: all 0.2s ease;
}

.wp-membes-member-directory-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--membes-shadow-hover);
}

.wp-membes-member-directory-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--membes-spacing-sm);
    gap: var(--membes-spacing-md);
}

.wp-membes-member-directory-title {
    font-size: var(--membes-font-size-lg);
    font-weight: 700;
    color: var(--membes-color-text-primary);
    margin: 0;
    line-height: 1.2;
}

.wp-membes-member-directory-details {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--membes-spacing-sm) var(--membes-spacing-md);
}

.wp-membes-member-directory-actions {
    display: flex;
    gap: var(--membes-spacing-sm);
    align-items: center;
}

.wp-membes-member-directory-actions .membes-modal-trigger {
    padding: var(--membes-spacing-xs) var(--membes-spacing-sm);
    background: var(--wp--preset--color--contrast, #1a1a1a);
    color: var(--wp--preset--color--base, #fff);
    border: none;
    border-radius: var(--membes-border-radius);
    cursor: pointer;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--membes-spacing-xs);
    transition: background-color 0.2s ease;
}

.wp-membes-member-directory-actions .membes-modal-trigger:hover,
.wp-membes-member-directory-actions .membes-modal-trigger:focus {
    background: var(--wp--preset--color--contrast, #1a1a1a);
    text-decoration: none;
    color: var(--wp--preset--color--base, #fff);
}

/* Member Directory Profile Cards */
.wp-membes-member-directory-count {
    margin-bottom: var(--membes-spacing-sm);
    text-align: center;
}

.wp-membes-member-directory-count h5 {
    color: var(--membes-color-text-secondary);
    margin: 0;
    font-weight: 500;
}

.wp-membes-member-directory-profile {
    display: grid;
    grid-template-columns: 1fr 2fr auto;
    gap: var(--membes-spacing-lg);
    padding: var(--membes-spacing-lg);
    background: var(--wp--preset--color--base-2, #fff);
    border: 1px solid var(--wp--preset--color--primary, #e5e5e5);
    border-radius: var(--membes-border-radius);
    margin-bottom: var(--membes-spacing-sm);
    align-items: start;
}

.wp-membes-member-directory-header {
    display: flex;
    flex-direction: column;
    gap: var(--membes-spacing-xs);
}

.wp-membes-member-directory-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--wp--preset--color--contrast, #1a1a1a);
    margin: 0;
    line-height: 1.2;
}

.wp-membes-member-directory-company {
    font-size: 1rem;
    font-weight: 600;
    color: var(--wp--preset--color--contrast, #666);
    margin: 0;
    line-height: 1.3;
}

.wp-membes-member-directory-address {
    color: var(--wp--preset--color--contrast, #666);
    font-size: 0.875rem;
    line-height: 1.4;
}

.wp-membes-member-directory-address p {
    margin: 0;
    margin-bottom: 0.25rem;
}

.wp-membes-member-directory-address p:last-child {
    margin-bottom: 0;
}

.wp-membes-member-directory-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--membes-spacing-md);
    align-content: start;
}

.wp-membes-member-directory-details-left,
.wp-membes-member-directory-details-right {
    display: flex;
    flex-direction: column;
    gap: var(--membes-spacing-xs);
}

.wp-membes-member-directory-details-bottom {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: var(--membes-spacing-xs);
    margin-top: var(--membes-spacing-sm);
}

.wp-membes-member-directory-field {
    font-size: 0.875rem;
    line-height: 1.4;
}

.wp-membes-member-directory-field strong {
    color: var(--wp--preset--color--contrast, #1a1a1a);
    font-weight: 600;
}

.wp-membes-member-directory-field a {
    color: var(--wp--preset--color--primary, #2563eb);
    text-decoration: none;
}

.wp-membes-member-directory-field a:hover {
    text-decoration: underline;
}

.wp-membes-member-directory-actions {
    display: flex;
    flex-direction: column;
    gap: var(--membes-spacing-xs);
    align-items: flex-end;
    min-width: 80px;
}

.wp-membes-member-directory-action {
    width: 100%;
}

.wp-membes-member-directory-action .membes-modal-trigger,
.wp-membes-member-directory-action a {
    display: block;
    padding: var(--membes-spacing-xs) var(--membes-spacing-sm);
    background: var(--wp--preset--color--primary, #2563eb);
    color: var(--wp--preset--color--base, #fff);
    border: none;
    border-radius: var(--membes-border-radius);
    cursor: pointer;
    font-weight: 500;
    text-decoration: none;
    text-align: center;
    font-size: 0.875rem;
    line-height: normal;
    transition: background-color 0.2s ease;
    width: 100%;
    box-sizing: border-box;
}

.wp-membes-member-directory-action .membes-modal-trigger:hover,
.wp-membes-member-directory-action .membes-modal-trigger:focus,
.wp-membes-member-directory-action a:hover,
.wp-membes-member-directory-action a:focus {
    background: var(--wp--preset--color--contrast, #1a1a1a);
    text-decoration: none;
    color: var(--wp--preset--color--base, #fff);
}

/* Export PDF Button */
.wp-membes-member-directory-export {
    margin-bottom: var(--membes-spacing-sm);
    text-align: right;
}

.wp-membes-export-pdf-button {
    padding: var(--membes-spacing-sm) var(--membes-spacing-lg);
    background: var(--wp--preset--color--primary, #2563eb);
    color: var(--wp--preset--color--base, #fff);
    border: none;
    border-radius: var(--membes-border-radius);
    cursor: pointer;
    font-weight: 500;
    text-decoration: none;
    text-align: center;
    font-size: 0.9375rem;
    line-height: normal;
    transition: background-color 0.2s ease;
    width: auto;
    box-sizing: border-box;
}

.wp-membes-export-pdf-button:hover,
.wp-membes-export-pdf-button:focus {
    background: var(--wp--preset--color--contrast, #1a1a1a);
    text-decoration: none;
    color: var(--wp--preset--color--base, #fff);
}

/* ========================================
   TAB NAVIGATION
   ======================================== */

.wp-membes-member-directory-tab-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid var(--wp--preset--color--primary, #e5e5e5);
    padding-bottom: var(--membes-spacing-sm);
}

.wp-membes-tab-buttons {
    display: flex;
    gap: var(--membes-spacing-sm);
    flex-grow: 1;
}

.wp-membes-tab-button {
    background: none;
    border: none;
    padding: var(--membes-spacing-sm) var(--membes-spacing-md);
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    color: var(--wp--preset--color--contrast, #666);
    border-radius: 5px 5px 0 0;
    transition: var(--membes-transition);
}

.wp-membes-tab-button:hover {
    background-color: var(--wp--preset--color--base-2, #f5f5f5);
    color: var(--wp--preset--color--contrast, #333);
}

.wp-membes-tab-button.active {
    background-color: var(--wp--preset--color--primary, #007cba);
    color: var(--wp--preset--color--base, white);
    border-bottom: 2px solid var(--wp--preset--color--primary, #007cba);
}

.wp-membes-member-directory-export {
    margin-left: var(--membes-spacing-sm);
}

.wp-membes-member-directory-export + .wp-membes-member-directory-export {
    margin-left: var(--membes-spacing-sm);
}

.wp-membes-tab-pane {
    display: none;
}

.wp-membes-tab-pane.active {
    display: block;
}

.wp-membes-member-directory-iframe-container {
    border-radius: var(--membes-border-radius);
    border: 1px solid var(--wp--preset--color--primary, #e5e5e5);
    height: 645px;
    position: relative;
    width: 100%;
}

.wp-membes-member-directory-iframe-container iframe {
    border-radius: var(--membes-border-radius);
    border: none;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

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

@media (max-width: 1024px) {
    .wp-membes-calendar-page-details {
        grid-template-columns: 1fr;
        gap: var(--membes-spacing-md);
    }

    .wp-membes-calendar-page-image {
        order: -1;
    }
}

@media (max-width: 768px) {
    /* Calendar Page Mobile */
    .wp-membes-calendar-page-month-filter {
        flex-direction: column;
    }

    .wp-membes-calendar-page-month-filter button {
        width: 100%;
        margin: 0;
    }

    .wp-membes-calendar-page-filters {
        grid-template-columns: 1fr;
        margin: var(--membes-spacing-sm) -1rem;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    .wp-membes-calendar-page-event {
        margin: 0 -1rem var(--membes-spacing-lg) -1rem;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    .wp-membes-calendar-page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--membes-spacing-sm);
        padding: var(--membes-spacing-sm);
    }

    .wp-membes-calendar-page-dates {
        margin-left: 0;
        font-size: 0.9rem;
    }

    .wp-membes-calendar-page-title {
        font-size: 1.1rem;
    }

    .wp-membes-calendar-page-details {
        padding: var(--membes-spacing-sm);
    }

    .wp-membes-calendar-page-actions .membes-modal-trigger {
        width: 100%;
        text-align: center;
    }

    /* Event Feed Mobile */
    .wp-membes-event-feed-grid {
        grid-template-columns: 1fr;
        gap: var(--membes-spacing-md);
    }

    .wp-membes-event-feed-grid .wp-membes-event-feed-event {
        margin: 0;
        border-radius: var(--membes-border-radius);
        border: 1px solid var(--wp--preset--color--primary, #e5e5e5);
    }

    .wp-membes-event-feed-event {
        padding: var(--membes-spacing-md);
        margin: 0 -1rem;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    .wp-membes-event-feed-title {
        font-size: 1.25rem;
    }

    .wp-membes-event-feed-actions {
        flex-direction: column;
    }

    .wp-membes-event-feed-actions .membes-modal-trigger {
        width: 100%;
        text-align: center;
        padding: var(--membes-spacing-sm) var(--membes-spacing-md);
    }

    .wp-membes-event-feed-registration .membes-modal-trigger {
        width: 100%;
        text-align: center;
        padding: var(--membes-spacing-md);
    }

    /* Memberships Mobile */
    .wp-membes-memberships-grid {
        grid-template-columns: 1fr;
        gap: var(--membes-spacing-md);
    }

    .wp-membes-memberships-grid .wp-membes-memberships-membership {
        margin: 0;
        border-radius: var(--membes-border-radius);
        border: 1px solid var(--wp--preset--color--primary, #e5e5e5);
    }

    .wp-membes-memberships-list {
        gap: var(--membes-spacing-lg);
    }

    .wp-membes-memberships-membership {
        flex-direction: column;
        align-items: stretch;
        gap: var(--membes-spacing-md);
        padding: var(--membes-spacing-lg);
        margin: 0 -1rem;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    .wp-membes-memberships-title strong {
        font-size: 1.5rem;
    }

    .wp-membes-memberships-pricing {
        padding: var(--membes-spacing-md);
        margin-left: -0.5rem;
        margin-right: -0.5rem;
    }

    .wp-membes-memberships-actions .membes-modal-trigger {
        width: 100%;
        padding: var(--membes-spacing-md);
    }

    /* Member Directory Mobile */
    .wp-membes-member-directory-system-search-fields {
        flex-direction: column;
    }

    .wp-membes-member-directory-system-search-fields input {
        min-width: auto;
        width: 100%;
    }

    .wp-membes-member-directory-search-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .wp-membes-member-directory-search-bar label {
        flex-wrap: wrap;
        align-items: center;
        gap: var(--membes-spacing-xs);
    }

    .wp-membes-member-directory-search-bar select,
    .wp-membes-member-directory-search-bar input {
        width: 100%;
        min-width: auto;
        max-width: none;
    }

    .wp-membes-member-directory-search-bar button {
        width: 100%;
        margin-top: var(--membes-spacing-xs);
    }

    .wp-membes-member-directory-filters {
        flex-direction: column;
        margin: var(--membes-spacing-sm) -1rem;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    .wp-membes-member-directory-filters > div {
        min-width: auto;
        width: 100%;
    }

    .wp-membes-member-directory-item {
        margin: 0 -1rem var(--membes-spacing-md) -1rem;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    .wp-membes-member-directory-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--membes-spacing-sm);
    }

    .wp-membes-member-directory-details {
        grid-template-columns: 1fr;
        gap: var(--membes-spacing-xs);
    }

    .wp-membes-member-directory-actions {
        width: 100%;
        flex-direction: column;
    }

    .wp-membes-member-directory-actions .membes-modal-trigger {
        width: 100%;
        text-align: center;
        padding: var(--membes-spacing-sm) var(--membes-spacing-md);
    }

    /* Member Directory Profile Mobile Styles */
    .wp-membes-member-directory-profile {
        grid-template-columns: 1fr;
        gap: var(--membes-spacing-md);
        padding: var(--membes-spacing-md);
        margin: 0 -1rem var(--membes-spacing-md) -1rem;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    .wp-membes-member-directory-details {
        grid-template-columns: 1fr;
        gap: var(--membes-spacing-sm);
    }

    .wp-membes-member-directory-details-bottom {
        margin-top: var(--membes-spacing-xs);
    }

    .wp-membes-member-directory-actions {
        flex-direction: row;
        justify-content: center;
        align-items: stretch;
        min-width: auto;
    }

    .wp-membes-member-directory-action {
        flex: 1;
        min-width: 0;
    }

    .wp-membes-member-directory-action .membes-modal-trigger,
    .wp-membes-member-directory-action a {
        padding: var(--membes-spacing-sm) var(--membes-spacing-xs);
        font-size: 0.75rem;
    }
}