/**
 * Lista Recurring Events - Add to Calendar Button
 *
 * Custom dropdown button for adding events to calendars.
 * No external dependencies.
 *
 * @package Listapage\RecurringEvents
 * @since 1.5.0
 */

/* ============================================
   CSS VARIABLES
   ============================================ */

.lre-atc-wrapper {
    --lre-atc-bg: #ffffff;
    --lre-atc-text: #374151;
    --lre-atc-border: #d1d5db;
    --lre-atc-accent: var(--lre-primary-color, #3788d8);
    --lre-atc-accent-hover: var(--lre-primary-hover, #2563eb);
    --lre-atc-radius: 8px;
    --lre-atc-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --lre-atc-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --lre-atc-transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    
    position: relative;
    display: inline-block;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

/* ============================================
   MAIN BUTTON
   ============================================ */

.lre-atc-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--lre-atc-bg);
    color: var(--lre-atc-text);
    border: 1px solid var(--lre-atc-border);
    border-radius: var(--lre-atc-radius);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--lre-atc-transition);
    box-shadow: var(--lre-atc-shadow);
    white-space: nowrap;
}

.lre-atc-button:hover {
    background: var(--lre-atc-accent);
    color: #ffffff;
    border-color: var(--lre-atc-accent);
    box-shadow: var(--lre-atc-shadow-lg);
}

.lre-atc-button:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(55, 136, 216, 0.3);
}

.lre-atc-button:active {
    transform: scale(0.98);
}

/* Button icon */
.lre-atc-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.lre-atc-icon svg {
    width: 18px;
    height: 18px;
}

/* Button label */
.lre-atc-label {
    flex-grow: 1;
}

/* Chevron icon */
.lre-atc-chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform var(--lre-atc-transition);
}

.lre-atc-chevron svg {
    width: 14px;
    height: 14px;
}

/* Rotate chevron when open */
.lre-atc-wrapper.is-open .lre-atc-chevron {
    transform: rotate(180deg);
}

/* ============================================
   DROPDOWN MENU
   ============================================ */

.lre-atc-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 200px;
    background: var(--lre-atc-bg);
    border: 1px solid var(--lre-atc-border);
    border-radius: var(--lre-atc-radius);
    box-shadow: var(--lre-atc-shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all var(--lre-atc-transition);
    z-index: 1000;
    overflow: hidden;
}

.lre-atc-wrapper.is-open .lre-atc-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Dropdown positioning variant - right aligned */
.lre-atc-wrapper.align-right .lre-atc-dropdown {
    left: auto;
    right: 0;
}

/* Dropdown positioning variant - top */
.lre-atc-wrapper.position-top .lre-atc-dropdown {
    top: auto;
    bottom: calc(100% + 4px);
    transform: translateY(8px);
}

.lre-atc-wrapper.position-top.is-open .lre-atc-dropdown {
    transform: translateY(0);
}

/* ============================================
   DROPDOWN OPTIONS
   ============================================ */

.lre-atc-option {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    background: transparent;
    color: var(--lre-atc-text);
    text-decoration: none;
    border: none;
    border-bottom: 1px solid #f3f4f6;
    font-size: 14px;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    transition: background var(--lre-atc-transition);
}

.lre-atc-option:last-child {
    border-bottom: none;
}

.lre-atc-option:hover {
    background: #f9fafb;
    color: var(--lre-atc-text);
    text-decoration: none;
}

.lre-atc-option:focus {
    outline: none;
    background: #f3f4f6;
}

/* Option icon */
.lre-atc-option-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.lre-atc-option-icon svg {
    width: 16px;
    height: 16px;
}

/* ============================================
   TREEVIEW (RECURRING EVENTS SERIES)
   ============================================ */

.lre-atc-treeview {
    position: relative;
}

.lre-atc-treeview-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    background: transparent;
    border: none;
    color: var(--lre-atc-text, #1e293b);
    font-size: 0.9em;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease;
    text-align: left;
}

.lre-atc-treeview-toggle:hover {
    background: var(--lre-atc-hover, rgba(0, 0, 0, 0.04));
}

.lre-atc-treeview-toggle .lre-atc-option-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.lre-atc-treeview-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.lre-atc-treeview-arrow .lre-treeview-arrow-icon {
    width: 12px;
    height: 12px;
}

.lre-atc-treeview.is-expanded .lre-atc-treeview-arrow {
    transform: rotate(90deg);
}

.lre-atc-treeview-children {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease;
    background: var(--lre-atc-hover, rgba(0, 0, 0, 0.02));
}

.lre-atc-treeview-children[aria-hidden="false"] {
    max-height: 200px;
}

.lre-atc-treeview-child {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 16px 10px 28px;
    background: transparent;
    border: none;
    color: var(--lre-atc-text, #1e293b);
    font-size: 0.85em;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease;
    text-align: left;
}

.lre-atc-treeview-child:hover {
    background: var(--lre-atc-hover, rgba(0, 0, 0, 0.06));
}

.lre-atc-treeview-child:not(:last-child) {
    border-bottom: 1px solid var(--lre-atc-border, rgba(0, 0, 0, 0.04));
}

.lre-atc-treeview-branch {
    color: var(--lre-atc-muted, #94a3b8);
    font-family: monospace;
    font-size: 0.9em;
    line-height: 1;
}

/* Disabled series download option */
.lre-atc-download-series-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.lre-atc-download-series-disabled:hover {
    background: transparent !important;
}

/* Dark mode treeview */
.lre-atc-wrapper.dark-mode .lre-atc-treeview-toggle {
    color: var(--lre-atc-text, #e2e8f0);
}

.lre-atc-wrapper.dark-mode .lre-atc-treeview-toggle:hover {
    background: var(--lre-atc-hover, rgba(255, 255, 255, 0.08));
}

.lre-atc-wrapper.dark-mode .lre-atc-treeview-children {
    background: var(--lre-atc-hover, rgba(255, 255, 255, 0.03));
}

.lre-atc-wrapper.dark-mode .lre-atc-treeview-child {
    color: var(--lre-atc-text, #e2e8f0);
}

.lre-atc-wrapper.dark-mode .lre-atc-treeview-child:hover {
    background: var(--lre-atc-hover, rgba(255, 255, 255, 0.1));
}

.lre-atc-wrapper.dark-mode .lre-atc-treeview-branch {
    color: var(--lre-atc-muted, #64748b);
}

/* ============================================
   OFFCANVAS INTEGRATION
   ============================================ */

.lre-offcanvas-add-to-calendar {
    margin: 0 25px 25px;
}

.lre-offcanvas-add-to-calendar .lre-atc-wrapper {
    width: 100%;
}

.lre-offcanvas-add-to-calendar .lre-atc-button {
    width: 100%;
    justify-content: center;
    background: transparent;
    color: var(--lre-panel-accent, var(--lre-atc-accent));
    border-color: var(--lre-panel-accent, var(--lre-atc-accent));
}

.lre-offcanvas-add-to-calendar .lre-atc-button:hover {
    background: var(--lre-panel-accent, var(--lre-atc-accent));
    color: #ffffff;
}

.lre-offcanvas-add-to-calendar .lre-atc-dropdown {
    width: 100%;
}

/* ============================================
   BRICKS POPUP INTEGRATION
   ============================================ */

/* Inside Bricks popups, use display:none for the closed dropdown
   instead of visibility:hidden + opacity:0. The popup's own overflow
   handling can interfere with position:absolute, causing the hidden
   dropdown to take up layout space as a visible gap beneath the button. */
.brx-popup .lre-atc-dropdown[aria-hidden="true"] {
    display: none;
}

/* Force dropdown to open above the button inside popups, as the button
   is typically near the bottom of the popup and the dropdown would
   otherwise extend below the viewport where it cannot be scrolled to. */
.brx-popup .lre-atc-wrapper .lre-atc-dropdown {
    top: auto;
    bottom: calc(100% + 4px);
}

/* ============================================
   SHORTCODE WRAPPER
   ============================================ */

.lre-add-to-calendar-shortcode {
    display: inline-block;
}

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

@media (max-width: 600px) {
    .lre-atc-dropdown {
        min-width: 180px;
    }
    
    .lre-atc-button {
        padding: 8px 14px;
        font-size: 13px;
    }
    
    .lre-atc-option {
        padding: 10px 14px;
        font-size: 13px;
    }
    
    .lre-offcanvas-add-to-calendar {
        margin: 0 20px 20px;
    }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .lre-atc-wrapper,
    .lre-atc-button,
    .lre-atc-dropdown,
    .lre-atc-option,
    .lre-atc-chevron {
        transition: none;
    }
}

/* Focus visible for keyboard navigation */
.lre-atc-button:focus-visible,
.lre-atc-option:focus-visible {
    outline: 2px solid var(--lre-atc-accent);
    outline-offset: 2px;
}

/* ============================================
   DARK MODE SUPPORT (via CSS variables)
   ============================================ */

.lre-atc-wrapper.dark-mode {
    --lre-atc-bg: #1f2937;
    --lre-atc-text: #f9fafb;
    --lre-atc-border: #374151;
}

.lre-atc-wrapper.dark-mode .lre-atc-option:hover {
    background: #374151;
}

.lre-atc-wrapper.dark-mode .lre-atc-option {
    border-bottom-color: #374151;
}