/**
 * Royal Gala 2025 Ticket Sales Application
 * Custom Styling
 */

/* Base styling */
body {
    /* Darker, neutral background to make cards pop */
    background: linear-gradient(135deg, #d2cbc3 0%, #bfb7ad 100%);
    /* fallback solid color for older browsers */
    background-color: #c9c2b8;
    min-height: 100vh;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Lighter warm background for form/card areas */
.ticket-form,
.form-card,
.royal-card,
.card,
.card-body,
form {
    background: #f7f4ef !important; /* lighter than #f2f0ec */
}

/* Header styling - darker than page for strong title contrast */
.royal-header {
    background: rgba(30, 28, 25, 0.92);
    backdrop-filter: blur(6px);
    border-bottom: 2px solid #3a332b;
}

/* Header title readability */
.royal-header h1,
.royal-header .h1,
.royal-header .h3 {
    color: #f7f4ef !important; /* soft off-white */
}

/* Card components */
.royal-card {
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* Text gradient effect - simplified to gold */
.royal-gradient {
    background: linear-gradient(45deg, #faae54, #f3a246);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Primary action button - inviting green */
.btn-royal {
    background: linear-gradient(45deg, #2e7d32 0%, #276a2a 100%);
    border: none;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(46, 125, 50, 0.35);
    transition: all 0.2s ease;
}

.btn-royal:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(46, 125, 50, 0.5);
}

.btn-royal:focus,
.btn-royal:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(46, 125, 50, 0.35);
}

.btn-royal:disabled {
    opacity: 0.8;
    transform: none;
    box-shadow: 0 2px 8px rgba(46, 125, 50, 0.25);
}

/* Ticket holder section animations */
.ticket-holder-section {
    display: none;
    animation: fadeIn 0.3s ease-in;
}

.ticket-holder-section.show {
    display: block;
}

@keyframes fadeIn {
    from { 
        opacity: 0; 
        transform: translateY(10px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

/* Form controls - gold focus */
.form-floating .form-control:focus {
    border-color: #faae54;
    box-shadow: 0 0 0 0.2rem rgba(250, 174, 84, 0.25);
}

/* Validation styling - brand red */
.form-control.is-invalid {
    border-color: #e60d2e;
    box-shadow: 0 0 0 0.2rem rgba(230, 13, 46, 0.25);
}

.invalid-feedback {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875em;
    color: #e60d2e;
}

/* Loading state */
.btn-royal:disabled {
    opacity: 0.8;
    transform: none;
    box-shadow: 0 2px 8px rgba(46, 125, 50, 0.25);
}

/* Payment button subtext: readable on green */
.btn-royal small {
  color: rgba(255, 255, 255, 0.95) !important;
  font-size: 0.875rem;
  line-height: 1.2;
  opacity: 0.98;
}

/* Harmonize card spacing for a smoother scan */
.card-title { margin-bottom: 0.75rem; }
.card .form-floating:last-child { margin-bottom: 0; }
.card-body { padding-top: 1rem; padding-bottom: 1rem; }

/* Ensure form inputs have clear focus aligned with primary color */
.form-floating .form-control:focus {
  border-color: #2e7d32;
  box-shadow: 0 0 0 0.2rem rgba(46, 125, 50, 0.25);
}

/* Optional external payment note style */
.payment-note {
  color: #3f3526;
  font-size: 0.9rem;
  opacity: 0.9;
}

/* Utility: gold text */
.text-gold { color: #faae54 !important; }

/* High-contrast titles to match neutral theme */
.card-title,
.royal-card .card-title,
h5.card-title,
h5,
strong {
  color: #3f3526 !important; /* deep neutral for contrast */
}

/* Make primary/info text align with neutral palette */
.text-primary,
.text-info {
  color: #3f3526 !important;
}

/* Event details grid */
.event-details-grid {
    margin-bottom: 1.5rem;
}

.event-detail-item {
    text-align: center;
    padding: 1rem;
}

/* Widget icons: enforce brand red */
.event-details-grid .event-detail-item i,
.royal-card .event-detail-item i,
.card .event-detail-item i,
.event-detail-item i {
    margin-bottom: 0.5rem;
    color: #e60d2e !important; /* brand red */
}

/* Prevent header styling from bleeding into content icons */
.royal-header .event-detail-item i { color: inherit !important; }

/* Additional ticket fields styling */
#additionalTicketsContainer .border {
    border-color: rgba(0, 0, 0, 0.08) !important;
}

#additionalTicketsContainer .bg-light {
    background-color: rgba(0, 0, 0, 0.03) !important;
}

/* Responsive adjustments */
@media (max-width: 767.98px) {
    .royal-card {
        margin: 0 15px;
        border-radius: 15px !important;
    }
    
    .event-detail-item {
        padding: 0.75rem 0.5rem;
    }
    
    .royal-header h1 {
        font-size: 1.5rem;
    }
}

/* Admin panel specific styles */
.stats-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(5px);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: transform 0.2s ease;
}

.stats-card:hover {
    transform: translateY(-2px);
}

.table-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    border: none;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Dark mode considerations */
@media (prefers-color-scheme: dark) {
    .royal-card {
        background: rgba(30, 30, 30, 0.95);
        color: #ffffff;
    }
    
    .stats-card {
        background: rgba(40, 40, 40, 0.9);
        color: #ffffff;
    }
}