/* ========================================
   TICKETFOX APEX TEMPLATE CSS
   Extract from web/event_tickets/styles.css
   For Oracle APEX Cards Container Template
======================================== */

/* Main Container Styles */
.tf-tickets-section {
    background: white;
    border-radius: 12px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.tf-section-title {
    font-size: 1.8rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 25px;
    border-bottom: 2px solid #3498db;
    padding-bottom: 10px;
}

.tf-tickets-container {
    display: grid;
    gap: 20px;
}

/* Individual Ticket Card Styles */
.tf-ticket-card {
    border: 2px solid #e9ecef;
    border-radius: 12px;
    padding: 25px;
    transition: all 0.3s ease;
    background: white;
}

.tf-ticket-card:hover {
    border-color: #3498db;
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.tf-ticket-card.tf-disabled {
    opacity: 0.6;
    background-color: #f8f9fa;
    cursor: not-allowed;
}

.tf-ticket-card.tf-disabled:hover {
    transform: none;
    border-color: #e9ecef;
}

/* Header Section */
.tf-ticket-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}

.tf-ticket-title-section {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tf-ticket-icon {
    font-size: 1.5rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: white;
}

.tf-ticket-icon.tf-admission {
    background-color: #3498db;
}

.tf-ticket-icon.tf-parking {
    background-color: #f39c12;
}

.tf-ticket-icon.tf-package {
    background-color: #9b59b6;
}

.tf-ticket-icon.tf-combo {
    background: linear-gradient(45deg, #3498db, #f39c12);
}

.tf-ticket-name {
    font-size: 1.3rem;
    font-weight: 600;
    color: #2c3e50;
}

.tf-ticket-price {
    font-size: 1.4rem;
    font-weight: 700;
    color: #27ae60;
}

/* Description and Status */
.tf-ticket-description {
    color: #666;
    margin-bottom: 20px;
    line-height: 1.6;
}

.tf-ticket-status {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.tf-ticket-status.tf-available {
    background-color: #d4edda;
    color: #155724;
}

.tf-ticket-status.tf-sold-out {
    background-color: #f8d7da;
    color: #721c24;
}

.tf-ticket-status.tf-not-active {
    background-color: #fff3cd;
    color: #856404;
}

.tf-ticket-status.tf-info {
    background-color: #cdd5ff;
    color: #0d1f46;
}

.tf-ticket-status.tf-hidden {
    visibility: hidden;
}


/* Package Information */
.tf-package-events-required {
    background: #e8f4fd;
    border: 1px solid #3498db;
    border-radius: 8px;
    padding: 15px;
    margin: 15px 0;
}

.tf-package-events-required h4 {
    color: #2980b9;
    margin-bottom: 10px;
    font-size: 1rem;
}

.tf-selected-events {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.tf-selected-event-tag {
    background: #3498db;
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 5px;
}

.tf-remove-event {
    cursor: pointer;
    font-weight: bold;
}

/* Quantity Controls */
.tf-quantity-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 15px;
}

.tf-quantity-selector {
    display: flex;
    align-items: center;
    gap: 15px;
}

.tf-quantity-btn {
    width: 40px;
    height: 40px;
    border: 2px solid #3498db;
    background: white;
    color: #3498db;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.tf-quantity-btn:hover:not(:disabled) {
    background: #3498db;
    color: white;
}

.tf-quantity-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.tf-quantity-display {
    font-size: 1.2rem;
    font-weight: 600;
    min-width: 30px;
    text-align: center;
}

.tf-add-to-cart {
    background: #27ae60;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.tf-add-to-cart:hover:not(:disabled) {
    background: #229954;
    transform: translateY(-1px);
}

.tf-add-to-cart:disabled {
    background: #95a5a6;
    cursor: not-allowed;
    transform: none;
}

/* RESPONSIVE DESIGN */
@media (max-width: 768px) {
    .tf-tickets-section {
        padding: 20px;
        margin-bottom: 20px;
    }
    
    .tf-section-title {
        font-size: 1.5rem;
    }
    
    .tf-ticket-card {
        padding: 20px;
    }
    
    .tf-ticket-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .tf-quantity-controls {
        flex-direction: column;
        gap: 15px;
        align-items: stretch;
    }
    
    .tf-quantity-selector {
        justify-content: center;
    }
    
    .tf-quantity-btn,
    .tf-add-to-cart {
        min-height: 44px; /* Touch target size */
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    .tf-ticket-card:hover {
        transform: none;
    }
    
    .tf-quantity-btn:hover,
    .tf-add-to-cart:hover {
        transform: none;
    }
}

/* ========================================
   EVENT SELECTION MODAL STYLES
======================================== */

/* Event option container */
.tf-event-option {
    margin-bottom: 10px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid #e9ecef;
    transition: all 0.2s ease;
}

.tf-event-option:hover {
    border-color: #3498db;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Clickable event area */
.tf-event-clickable {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    cursor: pointer;
    background: white;
    transition: all 0.2s ease;
    user-select: none;
}

.tf-event-clickable:hover {
    background: #f8f9fa;
}

/* Selected state */
.tf-event-option.tf-selected {
    border-color: #3498db;
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
}

.tf-event-option.tf-selected .tf-event-clickable {
    background: transparent;
    color: #1976d2;
}

.tf-event-option.tf-selected .tf-event-clickable:hover {
    background: rgba(25, 118, 210, 0.1);
}

/* Required events (pre-selected in sample data) */
.tf-event-option.tf-event-required {
    border-color: #ffc107;
    background: linear-gradient(135deg, #ffc107 0%, #fd7e14 100%);
}

.tf-event-option.tf-event-required .tf-event-clickable {
    background: transparent;
    color: white;
    cursor: default;
}

/* Event info */
.tf-event-info {
    flex: 1;
}

.tf-event-info strong {
    font-size: 1.1rem;
    font-weight: 600;
}

.tf-required {
    font-size: 0.85rem;
    font-weight: 400;
    opacity: 0.9;
    margin-left: 8px;
}

/* Check indicator */
.tf-event-check-indicator {
    font-size: 1.2rem;
    font-weight: bold;
    opacity: 0;
    transition: opacity 0.2s ease;
    margin-left: 15px;
}

.tf-event-option.tf-selected .tf-event-check-indicator,
.tf-event-option.tf-event-required .tf-event-check-indicator {
    opacity: 1;
}

/* Selection guidance styling */
.tf-selection-guidance {
    font-style: italic;
    font-size: 0.9em;
    margin-top: 8px;
    display: block;
}

/* Mobile responsiveness for event options */
@media (max-width: 768px) {
    .tf-event-clickable {
        padding: 12px 15px;
    }
    
    .tf-event-info strong {
        font-size: 1rem;
    }
    
    .tf-event-check-indicator {
        font-size: 1.1rem;
        margin-left: 10px;
    }
}