/* ==========================================================================
   Winti Kids Custom CSS - Dynamic and Modern Style
   ========================================================================== */

/* ==========================================================================
   Variables & Root Settings
   ========================================================================== */
:root {
    /* Primary Colors - Dynamic handball theme */
    --primary-blue: #0066CC;
    --primary-orange: #FF6B35;
    --primary-green: #00AA55;
    
    /* Secondary Colors - Playful accents */
    --secondary-yellow: #FFD60A;
    --secondary-purple: #8B5CF6;
    --secondary-pink: #EC4899;
    
    /* Neutral Colors */
    --light-gray: #F8F9FA;
    --medium-gray: #6C757D;
    --dark-gray: #212529;
    --white: #FFFFFF;
    
    /* Typography */
    --font-primary: 'Poppins', sans-serif;
    --font-secondary: 'Nunito', sans-serif;
    --font-display: 'Rubik', sans-serif;
    
    /* Transitions */
    --transition-fast: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Shadows */
    --shadow-soft: 0 2px 15px rgba(0, 0, 0, 0.08);
    --shadow-medium: 0 4px 25px rgba(0, 0, 0, 0.12);
    --shadow-large: 0 8px 40px rgba(0, 0, 0, 0.15);
    
    /* Border Radius */
    --radius-small: 8px;
    --radius-medium: 16px;
    --radius-large: 24px;
    --radius-full: 50%;
}

/* ==========================================================================
   Global Styles
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Nunito:wght@400;600;700;800&family=Rubik:wght@400;500;600;700&display=swap');

body {
    font-family: var(--font-primary);
    color: var(--dark-gray);
    background-color: var(--white);
    line-height: 1.6;
    overflow-x: hidden;
}

/* Animated background pattern */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 30% 50%, rgba(255, 107, 53, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 70% 30%, rgba(0, 102, 204, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 50% 70%, rgba(0, 170, 85, 0.05) 0%, transparent 50%);
    z-index: -1;
    animation: backgroundMove 20s ease-in-out infinite;
}

@keyframes backgroundMove {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-10px, 10px); }
    50% { transform: translate(10px, -10px); }
    75% { transform: translate(-5px, -5px); }
}

/* ==========================================================================
   Typography
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin-bottom: 1rem !important;
    color: var(--dark-gray) !important;
}

h1 {
    font-size: clamp(2.5rem, 5vw, 3.5rem) !important;
    background: linear-gradient(45deg, var(--primary-blue), var(--primary-orange)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    margin-bottom: 1.5rem !important;
}

h2 {
    font-size: clamp(2rem, 4vw, 2.5rem) !important;
    position: relative !important;
    padding-bottom: 0.5rem !important;
}

h2::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 60px !important;
    height: 4px !important;
    background: linear-gradient(90deg, var(--primary-orange), var(--secondary-yellow)) !important;
    border-radius: var(--radius-small) !important;
    transition: var(--transition-normal) !important;
}

h2:hover::after {
    width: 100px !important;
}

h3 {
    font-size: clamp(1.5rem, 3vw, 2rem) !important;
}

h4 {
    font-size: clamp(1.25rem, 2.5vw, 1.5rem) !important;
}

h5 {
    font-size: clamp(1.1rem, 2vw, 1.25rem) !important;
}

h6 {
    font-size: clamp(1rem, 1.5vw, 1.1rem) !important;
}

/* ==========================================================================
   Buttons & Interactive Elements
   ========================================================================== */
.btn, button, .button {
    display: inline-block;
    padding: 12px 28px;
    font-family: var(--font-secondary);
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    border: none;
    border-radius: var(--radius-large);
    cursor: pointer;
    transition: var(--transition-fast);
    position: relative;
    overflow: hidden;
    text-align: center;
}

/* Primary button with dynamic effect */
.btn-primary {
    background: linear-gradient(45deg, var(--primary-blue), var(--primary-orange));
    color: var(--white);
    box-shadow: var(--shadow-soft);
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: 0.5s;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}

.btn-primary:hover::before {
    left: 100%;
}

/* Secondary button */
.btn-secondary {
    background: var(--white);
    color: var(--primary-blue);
    border: 2px solid var(--primary-blue);
}

.btn-secondary:hover {
    background: var(--primary-blue);
    color: var(--white);
    transform: translateY(-2px);
}

/* ==========================================================================
   Cards & Containers
   ========================================================================== */
.card {
    background: var(--white);
    border-radius: var(--radius-medium);
    padding: 2rem;
    box-shadow: var(--shadow-soft);
    transition: var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-orange), var(--secondary-yellow), var(--primary-green));
    transform: scaleX(0);
    transform-origin: left;
    transition: var(--transition-normal);
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-large);
}

.card:hover::before {
    transform: scaleX(1);
}

/* ==========================================================================
   Navigation
   ========================================================================== */
.navbar, nav {
    position: sticky;
    top: 0;
    z-index: 1000;
}

.navbar a, nav a {
    color: var(--dark-gray);
    text-decoration: none;
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-small);
    transition: var(--transition-fast);
    position: relative;
}

.navbar a::after, nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 3px;
    background: var(--primary-orange);
    transition: var(--transition-fast);
    transform: translateX(-50%);
}

.navbar a:hover, nav a:hover {
    color: var(--primary-orange);
    background: rgba(255, 107, 53, 0.1);
}

.navbar a:hover::after, nav a:hover::after {
    width: 80%;
}

/* ==========================================================================
   Forms & Inputs
   ========================================================================== */
input, textarea, select {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid transparent;
    border-radius: var(--radius-small);
    background: var(--light-gray);
    font-family: var(--font-primary);
    font-size: 16px;
    transition: var(--transition-fast);
}

input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.2);
}

/* Floating label effect */
.form-group {
    position: relative;
    margin-bottom: 1.5rem;
}

.form-group label {
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    background: var(--white);
    padding: 0 8px;
    color: var(--medium-gray);
    transition: var(--transition-fast);
    pointer-events: none;
}

.form-group input:focus + label,
.form-group input:not(:placeholder-shown) + label {
    top: 0;
    font-size: 14px;
    color: var(--primary-blue);
}

/* ==========================================================================
   Animations & Interactions
   ========================================================================== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out forwards;
}

.animate-bounce {
    animation: bounce 2s ease-in-out infinite;
}

/* Hover effects for images */
.image-container {
    overflow: hidden;
    border-radius: var(--radius-medium);
    position: relative;
}

.image-container img {
    width: 100%;
    height: auto;
    transition: var(--transition-normal);
}

.image-container:hover img {
    transform: scale(1.05);
}

/* ==========================================================================
   Special Elements
   ========================================================================== */
/* Event cards with handball theme */
.event-card {
    background: var(--white);
    border-radius: var(--radius-medium);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    transition: var(--transition-normal);
    position: relative;
}

.event-card::before {
    content: '🏐'; /* Handball emoji */
    position: absolute;
    top: -20px;
    right: -20px;
    font-size: 100px;
    opacity: 0.1;
    transform: rotate(-15deg);
    transition: var(--transition-normal);
}

.event-card:hover::before {
    transform: rotate(0deg) scale(1.2);
    opacity: 0.2;
}

/* Section dividers */
.section-divider {
    position: relative;
    text-align: center;
    margin: 3rem 0;
}

.section-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary-orange), transparent);
    transform: translateY(-50%);
}

.section-divider span {
    background: var(--white);
    padding: 0 1rem;
    position: relative;
    z-index: 1;
    color: var(--primary-orange);
    font-weight: 600;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */
@media (max-width: 768px) {
    .container {
        padding: 0 1rem;
    }
    
    h1 {
        font-size: 2rem;
    }
    
    h2 {
        font-size: 1.5rem;
    }
    
    .card {
        padding: 1.5rem;
    }
    
    .navbar {
        padding: 0.75rem 0;
    }
}

/* ==========================================================================
   Special Handball Elements
   ========================================================================== */
.handball-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(45deg, var(--primary-orange), var(--secondary-yellow));
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-weight: bold;
    box-shadow: var(--shadow-soft);
    transition: var(--transition-fast);
}

.handball-icon:hover {
    transform: rotate(360deg) scale(1.1);
    box-shadow: var(--shadow-medium);
}

/* Player cards */
.player-card {
    background: var(--white);
    border-radius: var(--radius-medium);
    padding: 1.5rem;
    text-align: center;
    transition: var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.player-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(180deg, transparent, rgba(0, 102, 204, 0.05));
    z-index: -1;
    transition: var(--transition-normal);
}

.player-card:hover::after {
    height: 100%;
}

/* ==========================================================================
   Loading & Progress Indicators
   ========================================================================== */
.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--light-gray);
    border-top-color: var(--primary-orange);
    border-radius: var(--radius-full);
    animation: rotate 1s linear infinite;
}

.progress-bar {
    width: 100%;
    height: 8px;
    background: var(--light-gray);
    border-radius: var(--radius-small);
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-blue), var(--primary-orange));
    border-radius: var(--radius-small);
    transition: width 0.3s ease;
}

/* ==========================================================================
   Event Booking Component Styles
   ========================================================================== */
/* Event detail page */
.eb-container {
    font-family: var(--font-primary) !important;
    color: var(--dark-gray) !important;
}

.eb-event {
    background: var(--white) !important;
    border-radius: var(--radius-medium) !important;
    box-shadow: var(--shadow-soft) !important;
    padding: 2rem !important;
    margin-bottom: 2rem !important;
}

.eb-event-title, .eb-page-heading {
    font-family: var(--font-display) !important;
    font-size: clamp(2rem, 4vw, 2.5rem) !important;
    font-weight: 700 !important;
    color: var(--dark-gray) !important;
    margin-bottom: 1.5rem !important;
    position: relative !important;
    padding-bottom: 0.5rem !important;
    background: linear-gradient(45deg, var(--primary-blue), var(--primary-orange)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Event images */
.eb-thumb-left, .eb-thumb-right {
    overflow: hidden !important;
    border-radius: var(--radius-medium) !important;
    margin: 0 1rem 1rem 0 !important;
    box-shadow: var(--shadow-soft) !important;
    transition: var(--transition-normal) !important;
}

.eb-thumb-left:hover, .eb-thumb-right:hover {
    transform: scale(1.05) !important;
    box-shadow: var(--shadow-medium) !important;
}

.eb-thumb-left img, .eb-thumb-right img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    transition: var(--transition-normal) !important;
}

/* Event description */
.eb-description-details {
    font-family: var(--font-secondary) !important;
    font-size: 1.1rem !important;
    line-height: 1.7 !important;
    color: var(--dark-gray) !important;
    margin-bottom: 2rem !important;
}

.eb-description-details p {
    margin-bottom: 1rem !important;
}

/* Event info table */
.eb-event-properties, .table {
    width: 100% !important;
    background: var(--white) !important;
    border-radius: var(--radius-medium) !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-soft) !important;
    margin: 2rem 0 !important;
}

.eb-event-properties td, .table td {
    padding: 1rem !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    font-family: var(--font-primary) !important;
}

.eb-event-properties td:first-child, .table td:first-child {
    font-weight: 600 !important;
    color: var(--primary-blue) !important;
    width: 40% !important;
}

.eb-event-properties tr:last-child td, .table tr:last-child td {
    border-bottom: none !important;
}

.eb-event-properties tr:hover, .table tr:hover {
    background: rgba(0, 102, 204, 0.03) !important;
}

/* Registration form */
.eb-taskbar {
    background: var(--light-gray) !important;
    padding: 1rem !important;
    border-radius: var(--radius-medium) !important;
    margin-bottom: 2rem !important;
}

.eb-registration-form {
    background: var(--white) !important;
    padding: 2rem !important;
    border-radius: var(--radius-medium) !important;
    box-shadow: var(--shadow-soft) !important;
}

/* Form controls */
.control-group {
    margin-bottom: 1.5rem !important;
}

.control-label {
    font-family: var(--font-secondary) !important;
    font-weight: 600 !important;
    color: var(--dark-gray) !important;
    margin-bottom: 0.5rem !important;
    display: block !important;
}

.controls input[type="text"],
.controls input[type="email"],
.controls input[type="tel"],
.controls input[type="date"],
.controls input[type="number"],
.controls textarea,
.controls select {
    width: 100% !important;
    padding: 12px 16px !important;
    border: 2px solid transparent !important;
    border-radius: var(--radius-small) !important;
    background: var(--light-gray) !important;
    font-family: var(--font-primary) !important;
    font-size: 16px !important;
    transition: var(--transition-fast) !important;
}

.controls input:focus,
.controls textarea:focus,
.controls select:focus {
    outline: none !important;
    border-color: var(--primary-blue) !important;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.2) !important;
}

/* All form inputs with consistent modern styling */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="number"],
input[type="password"],
textarea,
select {
    width: 100% !important;
    padding: 12px 16px !important;
    border: 2px solid transparent !important;
    border-radius: var(--radius-small) !important;
    background: var(--white) !important;
    font-family: var(--font-primary) !important;
    font-size: 16px !important;
    transition: var(--transition-fast) !important;
    box-shadow: var(--shadow-soft) !important;
    margin-bottom: 0.5rem !important;
}

/* Consistent hover and focus states for all inputs */
input[type="text"]:hover,
input[type="email"]:hover,
input[type="tel"]:hover,
input[type="date"]:hover,
input[type="number"]:hover,
input[type="password"]:hover,
textarea:hover,
select:hover {
    border-color: var(--primary-orange) !important;
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.2) !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
    outline: none !important;
    border-color: var(--primary-blue) !important;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.3) !important;
}

/* Modern Radio and Checkbox styles with consistent shadow */
input[type="radio"],
input[type="checkbox"] {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    width: 22px !important;
    height: 22px !important;
    border: 2px solid transparent !important;
    margin-right: 10px !important;
    vertical-align: middle !important;
    cursor: pointer !important;
    position: relative !important;
    background: var(--white) !important;
    transition: var(--transition-fast) !important;
    flex-shrink: 0 !important;
    box-shadow: var(--shadow-soft) !important;
}

/* Form control groups for consistent layout */
.control-group,
.form-group {
    margin-bottom: 1.5rem !important;
}

.control-group .controls,
.form-group .controls {
    width: 100% !important;
}

/* Payment methods layout fix */
.eb-payment-methods,
.payment-methods {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Fix spacing for payment method title */
.eb-payment-methods legend,
.payment-methods legend,
.control-group legend,
fieldset legend {
    margin-bottom: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    border-bottom: 2px solid var(--light-gray) !important;
    width: 100% !important;
    display: block !important;
}

/* Payment method options container */
.eb-payment-methods .controls,
.payment-methods .controls,
.eb-payment-methods > div,
.payment-methods > div {
    padding-top: 0.5rem !important;
}

/* Payment method labels - ensure all are visible */
.eb-payment-methods label,
.payment-methods label {
    display: flex !important;
    align-items: center !important;
    padding: 1rem !important;
    margin-bottom: 0.5rem !important;
    border-radius: var(--radius-small) !important;
    transition: var(--transition-fast) !important;
    border: 2px solid transparent !important;
    width: 100% !important;
    background: var(--white) !important;
    box-shadow: var(--shadow-soft) !important;
}

/* Ensure all payment options are visible */
.eb-payment-methods input[type="radio"],
.payment-methods input[type="radio"] {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Equal width for form elements */
.controls,
.control-group .controls,
.form-group .controls {
    max-width: 100% !important;
    width: 100% !important;
}

/* Make sure all inputs in a form have the same width */
.eb-container input,
.eb-container select,
.eb-container textarea,
form input,
form select,
form textarea {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Two-column layout for shorter inputs */
.control-group.control-group-half {
    display: inline-block !important;
    width: calc(50% - 0.5rem) !important;
    margin-right: 1rem !important;
    vertical-align: top !important;
}

.control-group.control-group-half:nth-child(even) {
    margin-right: 0 !important;
}

/* Three-column layout for very short inputs */
.control-group.control-group-third {
    display: inline-block !important;
    width: calc(33.33% - 0.67rem) !important;
    margin-right: 1rem !important;
    vertical-align: top !important;
}

.control-group.control-group-third:nth-child(3n) {
    margin-right: 0 !important;
}

/* Responsive layout */
@media (max-width: 768px) {
    .control-group.control-group-half,
    .control-group.control-group-third {
        width: 100% !important;
        margin-right: 0 !important;
    }
}

/* Fix vertical spacing */
.eb-container > .control-group:first-child,
.eb-container > .form-group:first-child {
    margin-top: 0 !important;
}

/* Textarea specific styling */
textarea {
    min-height: 100px !important;
    resize: vertical !important;
}

/* Select dropdown fix - remove conflicting styles */
select {
    -webkit-appearance: menulist !important;
    -moz-appearance: menulist !important;
    appearance: menulist !important;
    background-image: none !important;
    background-color: var(--white) !important;
    color: var(--dark-gray) !important;
    padding: 12px 16px !important;
    padding-right: 16px !important;
}

/* Reset date input to browser default with minimal styling */
input[type="date"] {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    height: auto !important;
    line-height: normal !important;
    padding: 12px 16px !important;
    display: inline-block !important;
}

/* Currency amount fix - target the specific structure */
.eb-container td,
.eb-registration-form td {
    white-space: nowrap !important;
}

table td .currency,
table td .currency-symbol,
table td span.currency {
    display: inline-block !important;
    margin-right: 5px !important;
    font-weight: normal !important;
    background: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}

/* Remove box shadow from inputs in tables */
table input[type="text"],
table input[type="number"],
table input[type="date"],
table select {
    box-shadow: none !important;
    border: 1px solid var(--light-gray) !important;
    margin: 0 !important;
}

/* Date input container fix */
.eb-date-container input[type="date"],
.date-container input[type="date"],
.controls input[type="date"] {
    width: auto !important;
    display: inline-block !important;
}

/* Modern select styling that maintains functionality */
select,
select.form-control,
.controls select,
.control-group select {
    font-family: var(--font-primary) !important;
    font-size: 16px !important;
    padding: 12px 16px !important;
    border: 2px solid transparent !important;
    border-radius: var(--radius-small) !important;
    background-color: var(--white) !important;
    color: var(--dark-gray) !important;
    box-shadow: var(--shadow-soft) !important;
    transition: var(--transition-fast) !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 8L2 4h8z' fill='%236C757D'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    padding-right: 40px !important;
    cursor: pointer !important;
    width: 100% !important;
    height: auto !important; /* Fix: Changed from calc() to auto */
    min-height: 44px !important; /* Ensure minimum height for touch targets */
    line-height: 1.5 !important; /* Fix: Added line-height for better text visibility */
}

/* Override any height calculation from other styles */
select[style*="height"] {
    height: auto !important;
    min-height: 44px !important;
}

/* Select hover and focus states */
select:hover {
    border-color: var(--primary-orange) !important;
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.2) !important;
}

select:focus {
    outline: none !important;
    border-color: var(--primary-blue) !important;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.3) !important;
}

/* Specific fix for total_amount input */
#total_amount,
.eb-addon-container #total_amount {
    flex: 1 1 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
}

/* Force the container to use full width */
.eb-addon-container:has(#total_amount) {
    width: 100% !important;
    display: flex !important;
}

/* Override any Bootstrap or other framework styles */
.input-small,
.eb-addon-container .input-small,
.input-group .input-small,
#total_amount.input-small {
    width: auto !important;
    flex: 1 1 0 !important;
    max-width: none !important;
}

/* Ensure the parent container is full width */
.eb-form-control .eb-addon-container,
.controls .eb-addon-container {
    width: 100% !important;
    max-width: 100% !important;
}

/* Input group styling - force single line and proper width */
.input-group,
.eb-addon-container,
.eb-addon-container.input-group {
    display: inline-flex !important;
    align-items: stretch !important;
    width: 100% !important;
    position: relative !important;
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
}

/* Currency prefix styling - prevent wrapping */
.input-group-text:first-child,
.eb-addon-container .input-group-text:first-child {
    border-top-left-radius: var(--radius-small) !important;
    border-bottom-left-radius: var(--radius-small) !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: none !important;
    padding: 12px 16px !important;
    background: var(--white) !important;
    border: 2px solid transparent !important;
    box-shadow: var(--shadow-soft) !important;
    color: var(--primary-blue) !important;
    font-weight: 600 !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Input in input-group - consistent sizing */
.input-group input[type="text"],
.input-group input[type="date"],
.input-group .form-control,
.eb-addon-container input[type="text"],
.eb-addon-container .form-control,
.eb-addon-container .input-small {
    flex: 1 1 0 !important;
    width: 1% !important; /* Trick to make flex work properly */
    min-width: 0 !important;
    border-top-right-radius: var(--radius-small) !important;
    border-bottom-right-radius: var(--radius-small) !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-left: none !important;
    margin-bottom: 0 !important;
    box-shadow: var(--shadow-soft) !important;
    display: inline-block !important;
}

/* Remove any conflicting width styles */
.eb-addon-container input.input-small,
.input-group input.input-small {
    width: 1% !important;
    max-width: none !important;
}

/* Override the col-md-9 container to ensure proper width */
.col-md-9.eb-form-control {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100%;
}

/* Ensure input groups match other input widths */
.form-horizontal .control-group .controls .input-group,
.form-horizontal .control-group .controls .eb-addon-container {
    width: 100% !important;
    max-width: 100% !important;
}

/* Input after prefix - ensure single line */
.input-group-text:first-child + input,
.eb-addon-container .input-group-text:first-child + input {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: var(--radius-small) !important;
    border-bottom-right-radius: var(--radius-small) !important;
    border-left: none !important;
    border-right: 2px solid transparent !important;
}

/* Override inline styles with higher specificity */
.input-group input[style*="width: 100%"],
.eb-addon-container input[style*="width: 100%"] {
    width: auto !important;
}

/* Input group text/button container */
.input-group-text:last-child {
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    border: 2px solid transparent !important;
    border-left: none !important;
    background: var(--white) !important;
    box-shadow: var(--shadow-soft) !important;
    border-top-right-radius: var(--radius-small) !important;
    border-bottom-right-radius: var(--radius-small) !important;
    flex-shrink: 0 !important; /* Prevent button from shrinking */
}

/* Calendar button in input group */
.input-group .btn,
.input-group-text .btn {
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 12px 16px !important;
    min-height: 44px !important;
    box-shadow: none !important;
    background: transparent !important;
    color: var(--primary-blue) !important;
    border-top-right-radius: var(--radius-small) !important;
    border-bottom-right-radius: var(--radius-small) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Amount/currency specific styling */
.eb-addon-container .input-small,
.input-group .input-small {
    width: auto !important;
    flex: 1 1 auto !important;
}

/* Readonly inputs styling */
input[readonly],
input[readonly="readonly"] {
    background-color: var(--light-gray) !important;
    cursor: not-allowed !important;
}

/* Ensure consistent height for all input groups */
.input-group,
.input-group input,
.input-group .input-group-text,
.eb-addon-container,
.eb-addon-container input,
.eb-addon-container .input-group-text {
    min-height: 44px !important;
}

/* Hover states for all input groups */
.input-group:hover,
.eb-addon-container:hover {
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.2) !important;
}

.input-group:hover input,
.eb-addon-container:hover input {
    border-color: var(--primary-orange) !important;
}

.input-group:hover .input-group-text,
.eb-addon-container:hover .input-group-text {
    border-color: var(--primary-orange) !important;
}

/* Focus states for all input groups */
.input-group:focus-within,
.eb-addon-container:focus-within {
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.3) !important;
}

.input-group:focus-within input,
.eb-addon-container:focus-within input {
    border-color: var(--primary-blue) !important;
}

.input-group:focus-within .input-group-text,
.eb-addon-container:focus-within .input-group-text {
    border-color: var(--primary-blue) !important;
}

/* Field calendar container */
.field-calendar {
    width: 100% !important;
}

/* Date inputs with modern styling */
input[type="date"],
.controls input[type="date"],
.control-group input[type="date"] {
    font-family: var(--font-primary) !important;
    font-size: 16px !important;
    padding: 12px 16px !important;
    border: 2px solid transparent !important;
    border-radius: var(--radius-small) !important;
    background: var(--white) !important;
    color: var(--dark-gray) !important;
    box-shadow: var(--shadow-soft) !important;
    transition: var(--transition-fast) !important;
    width: auto !important;
    display: inline-block !important;
    height: auto !important;
    min-height: 44px !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    line-height: 1.5 !important;
}

/* Ensure date input content stays on one line */
input[type="date"]::-webkit-datetime-edit {
    padding: 0 !important;
}

input[type="date"]::-webkit-datetime-edit-fields-wrapper {
    padding: 0 !important;
    white-space: nowrap !important;
}

input[type="date"]::-webkit-datetime-edit-text {
    padding: 0 0.3em !important;
}

input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-year-field {
    padding: 0 !important;
}

/* Date input hover and focus */
input[type="date"]:hover {
    border-color: var(--primary-orange) !important;
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.2) !important;
}

input[type="date"]:focus {
    outline: none !important;
    border-color: var(--primary-blue) !important;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.3) !important;
}

/* Special handling for table inputs */
table select,
td select {
    width: auto !important;
    box-shadow: none !important;
    border: 1px solid var(--light-gray) !important;
    padding: 8px 12px !important;
}

table input[type="date"],
td input[type="date"] {
    width: auto !important;
    box-shadow: none !important;
    border: 1px solid var(--light-gray) !important;
    padding: 8px 12px !important;
    display: inline-block !important;
}

/* Currency and amount styling */
.eb-container td,
.eb-registration-form td,
table td {
    white-space: nowrap !important;
    vertical-align: middle !important;
}

.currency,
.currency-symbol,
span.currency,
td .currency,
td span {
    display: inline-block !important;
    margin-right: 8px !important;
    font-weight: 600 !important;
    color: var(--primary-blue) !important;
}

/* Amount inputs */
input.eb-amount,
input.amount,
input[name*="amount"],
td input[type="text"],
td input[type="number"] {
    width: auto !important;
    display: inline-block !important;
    margin: 0 !important;
    padding: 8px 12px !important;
    border: 1px solid var(--light-gray) !important;
    box-shadow: none !important;
}

/* General form inputs - maintain modern style */
input[type="text"]:not(table input):not(td input),
input[type="email"]:not(table input):not(td input),
input[type="tel"]:not(table input):not(td input),
input[type="number"]:not(table input):not(td input),
input[type="password"]:not(table input):not(td input),
textarea:not(table textarea):not(td textarea) {
    width: 100% !important;
    padding: 12px 16px !important;
    border: 2px solid transparent !important;
    border-radius: var(--radius-small) !important;
    background: var(--white) !important;
    font-family: var(--font-primary) !important;
    font-size: 16px !important;
    transition: var(--transition-fast) !important;
    box-shadow: var(--shadow-soft) !important;
    margin-bottom: 0.5rem !important;
    color: var(--dark-gray) !important;
}

/* Hover states for modern inputs */
input[type="text"]:not(table input):not(td input):hover,
input[type="email"]:not(table input):not(td input):hover,
input[type="tel"]:not(table input):not(td input):hover,
input[type="number"]:not(table input):not(td input):hover,
input[type="password"]:not(table input):not(td input):hover,
textarea:not(table textarea):not(td textarea):hover {
    border-color: var(--primary-orange) !important;
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.2) !important;
}

/* Focus states for modern inputs */
input[type="text"]:not(table input):not(td input):focus,
input[type="email"]:not(table input):not(td input):focus,
input[type="tel"]:not(table input):not(td input):focus,
input[type="number"]:not(table input):not(td input):focus,
input[type="password"]:not(table input):not(td input):focus,
textarea:not(table textarea):not(td textarea):focus {
    outline: none !important;
    border-color: var(--primary-blue) !important;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.3) !important;
}

/* Visual debugging - uncomment to see alignment */
/*
#payment_method_container .col-md-3 {
    border: 1px solid red !important;
}
#payment_method_container .col-md-9 {
    border: 1px solid blue !important;
}
*/

/* Reset everything first */
#payment_method_container .col-md-3,
#payment_method_container .col-md-9,
#payment_method_container .form-control-label,
#payment_method_container .eb-form-control {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Force row to use baseline alignment */
#payment_method_container.row,
#payment_method_container.form-row {
    align-items: baseline !important;
}

/* Text baseline alignment */
#payment_method_container .form-control-label {
    display: inline-block !important;
    vertical-align: top !important;
    line-height: 1.5 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Payment method container with exact same baseline */
#payment_method_container .eb-form-control {
    background: var(--white) !important;
    border-radius: var(--radius-medium) !important;
    box-shadow: var(--shadow-soft) !important;
    padding: 1rem 1.5rem !important;
    display: inline-block !important;
    vertical-align: top !important;
}

/* Target the radio labels specifically */
#payment_method_container .eb-form-control label {
    display: flex !important;
    align-items: center !important;
    margin: 0 0 0.5rem 0 !important;
    padding: 0.375rem 0 !important;
    line-height: 1.5 !important;
}

/* First label special handling */
#payment_method_container .eb-form-control label:first-child {
    margin-top: 1.75rem !important; /* Aligns with "Zahlungsmethode" text */
}

/* Radio buttons alignment */
#payment_method_container input[type="radio"] {
    margin: 0 10px 0 0 !important;
    vertical-align: middle !important;
}

/* Override Bootstrap form-check if present */
#payment_method_container .form-check {
    padding-left: 0 !important;
    margin-bottom: 0 !important;
}

#payment_method_container .form-check-input {
    position: static !important;
    margin: 0 10px 0 0 !important;
}

/* Hide duplicate asterisk if present */
.required + .required {
    display: none !important;
}

/* Payment method radio buttons - simple style */
#payment_method_container input[type="radio"],
.payment_information input[type="radio"] {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    width: 22px !important;
    height: 22px !important;
    border: 2px solid var(--primary-blue) !important;
    margin-right: 10px !important;
    vertical-align: middle !important;
    cursor: pointer !important;
    position: relative !important;
    background: var(--white) !important;
    transition: var(--transition-fast) !important;
    flex-shrink: 0 !important;
    border-radius: 50% !important;
}

/* Payment method labels - no individual backgrounds */
#payment_method_container label,
.payment_information label {
    display: flex !important;
    align-items: center !important;
    padding: 0.75rem 0 !important;
    margin-bottom: 0.5rem !important;
    transition: var(--transition-fast) !important;
    width: 100% !important;
    cursor: pointer !important;
    border-radius: var(--radius-small) !important;
}

/* Payment method label hover state */
#payment_method_container label:hover {
    background: rgba(0, 102, 204, 0.05) !important;
}

/* Radio button hover state */
#payment_method_container input[type="radio"]:hover,
.payment_information input[type="radio"]:hover {
    border-color: var(--primary-orange) !important;
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.2) !important;
}

/* Radio button checked state */
#payment_method_container input[type="radio"]:checked,
.payment_information input[type="radio"]:checked {
    border-color: var(--primary-blue) !important;
    background: var(--white) !important;
}

#payment_method_container input[type="radio"]:checked::before,
.payment_information input[type="radio"]:checked::before {
    content: '' !important;
    position: absolute !important;
    top: 4px !important;
    left: 4px !important;
    width: 10px !important;
    height: 10px !important;
    background: var(--primary-blue) !important;
    border-radius: 50% !important;
    transform: scale(1) !important;
}

/* Modern Radio and Checkbox styles that work */
input[type="radio"],
input[type="checkbox"] {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    width: 22px !important;
    height: 22px !important;
    border: 2px solid var(--primary-blue) !important;
    margin-right: 10px !important;
    vertical-align: middle !important;
    cursor: pointer !important;
    position: relative !important;
    background: var(--white) !important;
    transition: var(--transition-fast) !important;
    flex-shrink: 0 !important;
}

/* Make sure these stay clickable */
input[type="radio"],
input[type="checkbox"],
input[type="radio"] *,
input[type="checkbox"] * {
    pointer-events: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
}

input[type="radio"] {
    border-radius: 50% !important;
}

input[type="checkbox"] {
    border-radius: var(--radius-small) !important;
}

/* Radio checked state */
input[type="radio"]:checked {
    border-color: var(--primary-blue) !important;
    background: var(--white) !important;
}

input[type="radio"]:checked::before {
    content: '' !important;
    position: absolute !important;
    top: 4px !important;
    left: 4px !important;
    width: 10px !important;
    height: 10px !important;
    background: var(--primary-blue) !important;
    border-radius: 50% !important;
    transform: scale(0) !important;
    transition: transform 0.2s ease !important;
}

input[type="radio"]:checked::before {
    transform: scale(1) !important;
}

/* Checkbox checked state */
input[type="checkbox"]:checked {
    background: var(--primary-blue) !important;
    border-color: var(--primary-blue) !important;
}

input[type="checkbox"]:checked::before {
    content: '✓' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) scale(0) !important;
    color: var(--white) !important;
    font-size: 16px !important;
    font-weight: bold !important;
    transition: transform 0.2s ease !important;
}

input[type="checkbox"]:checked::before {
    transform: translate(-50%, -50%) scale(1) !important;
}

/* Hover and focus effects */
input[type="radio"]:hover,
input[type="checkbox"]:hover {
    border-color: var(--primary-orange) !important;
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.2) !important;
}

input[type="radio"]:focus,
input[type="checkbox"]:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.3) !important;
}

/* Modern label styling */
label {
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    margin-bottom: 12px !important;
    font-family: var(--font-primary) !important;
    color: var(--dark-gray) !important;
    font-size: 16px !important;
    transition: var(--transition-fast) !important;
}

label:hover {
    color: var(--primary-blue) !important;
}

/* Payment methods modern styling */
.eb-payment-methods,
.payment-methods,
.control-group.payment-methods {
    background: var(--white) !important;
    border-radius: var(--radius-medium) !important;
    padding: 1.5rem !important;
    box-shadow: var(--shadow-soft) !important;
    margin-bottom: 2rem !important;
}

.eb-payment-methods label,
.payment-methods label {
    padding: 1rem !important;
    margin-bottom: 0.5rem !important;
    border-radius: var(--radius-small) !important;
    transition: var(--transition-fast) !important;
    border: 2px solid transparent !important;
}

.eb-payment-methods label:hover,
.payment-methods label:hover {
    background: var(--light-gray) !important;
    border-color: var(--primary-blue) !important;
}

/* Selected payment method */
.eb-payment-methods label:has(input:checked),
.payment-methods label:has(input:checked) {
    background: rgba(0, 102, 204, 0.05) !important;
    border-color: var(--primary-blue) !important;
}

/* Payment method descriptions */
.eb-payment-method-details,
.payment-method-description {
    margin-left: 32px !important;
    margin-top: 10px !important;
    padding: 15px !important;
    background: var(--light-gray) !important;
    border-radius: var(--radius-small) !important;
    border-left: 4px solid var(--primary-orange) !important;
    animation: fadeInUp 0.3s ease-out !important;
}

/* Modern fieldset styling */
fieldset {
    border: none !important;
    padding: 1.5rem !important;
    margin-bottom: 2rem !important;
    background: var(--white) !important;
    border-radius: var(--radius-medium) !important;
    box-shadow: var(--shadow-soft) !important;
}

legend {
    padding: 0 15px !important;
    font-weight: 700 !important;
    color: var(--primary-blue) !important;
    font-family: var(--font-display) !important;
    font-size: 1.2rem !important;
    margin-bottom: 1rem !important;
}

/* Form group styling */
.control-group {
    margin-bottom: 1.5rem !important;
    animation: fadeInUp 0.2s ease-out !important;
}

/* Checkbox and radio groups */
.checkbox-group,
.radio-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
}

/* Inline checkbox/radio styling */
.checkbox-inline,
.radio-inline {
    display: inline-flex !important;
    margin-right: 2rem !important;
}

/* Animation for form elements */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Focus within group */
.control-group:focus-within {
    transform: translateY(-2px) !important;
    transition: var(--transition-fast) !important;
}

/* Disabled state */
input[type="radio"]:disabled,
input[type="checkbox"]:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    border-color: var(--medium-gray) !important;
}

input[type="radio"]:disabled + label,
input[type="checkbox"]:disabled + label,
label:has(input:disabled) {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

/* Radio and checkbox inline layouts */
.controls label.radio:hover::before,
.controls label.checkbox:hover::before,
label.radio:hover::before,
label.checkbox:hover::before {
    border-color: var(--primary-orange) !important;
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.2) !important;
}

/* Date inputs with calendar icon */
.controls input[type="date"],
input[type="date"] {
    padding-right: 40px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%230066CC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 20px 20px !important;
}

/* Date input specific fixes */
input[type="date"] {
    white-space: nowrap !important;
    overflow: hidden !important;
    display: block !important;
    min-height: 44px !important;
    line-height: 20px !important;
}

input[type="date"]::-webkit-datetime-edit {
    padding: 0 !important;
    display: inline-block !important;
}

input[type="date"]::-webkit-datetime-edit-fields-wrapper {
    display: inline-flex !important;
}

/* Calendar icon for date input */
input[type="date"]::-webkit-calendar-picker-indicator {
    background: transparent;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
    padding: 0 !important;
}

/* Force Calendar to use full width */
.ui-datepicker,
#ui-datepicker-div,
.datepicker,
.calendar-popup,
.calendar-container {
    width: 100% !important;
    max-width: 400px !important;
    min-width: 320px !important;
    font-family: var(--font-primary) !important;
}

/* Force table to expand - specifically target calendar-container */
.calendar-container table {
    max-width: none !important;
    width: 100% !important;
}

.ui-datepicker .ui-datepicker-calendar,
.ui-datepicker > table,
.ui-datepicker table.ui-datepicker-calendar,
#ui-datepicker-div table,
.calendar-container table {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    table-layout: fixed !important;
    border-collapse: separate !important;
    border-spacing: 2px !important;
}

/* Force cells to expand - with special handling for week column */
.ui-datepicker td,
.ui-datepicker th,
.ui-datepicker-calendar td,
.ui-datepicker-calendar th,
.calendar-container td,
.calendar-container th {
    width: 14.28% !important;
    min-width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    text-align: center !important;
    vertical-align: middle !important;
}

/* Fix for the week number column (first column) */
.ui-datepicker-week-col,
.calendar-container td:first-child,
.ui-datepicker td:first-child,
.ui-datepicker-calendar td:first-child {
    width: auto !important;
    min-width: 30px !important;
    max-width: 40px !important;
}

/* Adjust other columns when week column is present */
.ui-datepicker-calendar:has(.ui-datepicker-week-col) td:not(:first-child),
.calendar-container table:has(td:first-child) td:not(:first-child) {
    width: calc((100% - 40px) / 7) !important;
}

/* Alternative approach if :has() is not supported */
.ui-datepicker .ui-datepicker-calendar td:not(.ui-datepicker-week-col),
.calendar-container td:not(:first-child) {
    width: calc(100% / 7) !important;
}

/* Inner content of cells */
.ui-datepicker td a,
.ui-datepicker td span,
.ui-datepicker-calendar td a,
.ui-datepicker-calendar td span,
.calendar-container td a,
.calendar-container td span {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: calc(100% - 4px) !important;
    height: calc(100% - 4px) !important;
    margin: 2px !important;
    text-decoration: none !important;
    border-radius: var(--radius-small) !important;
}

/* Override any inline styles */
.ui-datepicker[style] {
    width: 100% !important;
    max-width: 400px !important;
}

.ui-datepicker table[style],
.calendar-container table[style] {
    width: 100% !important;
    max-width: none !important;
}

/* Only style the selected date */
.ui-datepicker td.ui-datepicker-current-day a,
.ui-datepicker .ui-state-active,
.calendar-container td.selected a {
    background: var(--primary-blue) !important;
    color: var(--white) !important;
}

/* Make today visible */
.ui-datepicker td.ui-datepicker-today a,
.calendar-container td.today a {
    border: 2px solid var(--primary-orange) !important;
}

/* Hover effect */
.ui-datepicker td a:hover,
.calendar-container td a:hover {
    background: var(--light-gray) !important;
}

/* Date picker input field */
.controls input[type="date"],
input[type="date"] {
    width: 100% !important;
    padding: 12px 16px !important;
    border: 2px solid transparent !important;
    border-radius: var(--radius-small) !important;
    background: var(--light-gray) !important;
    font-family: var(--font-primary) !important;
    font-size: 16px !important;
    transition: var(--transition-fast) !important;
}

.controls input[type="date"]:focus,
input[type="date"]:focus {
    outline: none !important;
    border-color: var(--primary-blue) !important;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.2) !important;
}

/* Improved label styling */
.control-label,
label {
    background-color: transparent !important;
    padding: 4px 0 !important;
    margin-bottom: 0.5rem !important;
    display: inline-block !important;
    position: relative !important;
}

/* Floating label effect for better UX */
.floating-label {
    position: relative !important;
}

.floating-label label {
    position: absolute !important;
    top: 50% !important;
    left: 16px !important;
    transform: translateY(-50%) !important;
    background: var(--white) !important;
    padding: 0 8px !important;
    color: var(--medium-gray) !important;
    transition: var(--transition-fast) !important;
    pointer-events: none !important;
    font-size: 16px !important;
}

.floating-label input:focus + label,
.floating-label input:not(:placeholder-shown) + label {
    top: 0 !important;
    font-size: 14px !important;
    color: var(--primary-blue) !important;
    background: var(--white) !important;
}

/* Updated button styles inspired by handball logo design */
.btn, button, .button,
.eb-taskbar .btn, 
.eb-taskbar a.btn,
.btn-primary,
.btn.btn-primary {
    display: inline-block !important;
    padding: 12px 32px !important;
    font-family: var(--font-secondary) !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    text-decoration: none !important;
    border: none !important;
    border-radius: 30px !important;
    cursor: pointer !important;
    transition: var(--transition-fast) !important;
    position: relative !important;
    overflow: hidden !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}

/* Primary button - handball-inspired gradient */
.btn-primary,
.btn.btn-primary,
#cookiehintsubmit,
.controls .btn-primary {
    background: linear-gradient(135deg, #0066CC 0%, #0052A3 50%, #FF6B35 100%) !important;
    color: var(--white) !important;
    position: relative !important;
    z-index: 1 !important;
}

.btn-primary::before,
.btn.btn-primary::before,
#cookiehintsubmit::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(135deg, #FF6B35 0%, #FF8451 50%, #0066CC 100%) !important;
    opacity: 0 !important;
    z-index: -1 !important;
    transition: opacity 0.3s ease !important;
}

.btn-primary:hover::before,
.btn.btn-primary:hover::before,
#cookiehintsubmit:hover::before {
    opacity: 1 !important;
}

.btn-primary:hover,
.btn.btn-primary:hover,
#cookiehintsubmit:hover {
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15) !important;
    color: var(--white) !important;
}

/* Secondary button - outlined style */
.btn-secondary,
.btn.btn-secondary,
#cookiehintsubmitno {
    background: var(--white) !important;
    color: #0066CC !important;
    border: 3px solid #0066CC !important;
    position: relative !important;
    z-index: 1 !important;
}

.btn-secondary::before,
.btn.btn-secondary::before,
#cookiehintsubmitno::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 0 !important;
    height: 100% !important;
    background: #0066CC !important;
    z-index: -1 !important;
    transition: width 0.3s ease !important;
}

.btn-secondary:hover::before,
.btn.btn-secondary:hover::before,
#cookiehintsubmitno:hover::before {
    width: 100% !important;
}

.btn-secondary:hover,
.btn.btn-secondary:hover,
#cookiehintsubmitno:hover {
    color: var(--white) !important;
    transform: translateY(-3px) !important;
    border-color: #0066CC !important;
}

/* Success button with green theme */
.btn-success {
    background: linear-gradient(135deg, #00AA55 0%, #008844 100%) !important;
    color: var(--white) !important;
}

.btn-success:hover {
    background: linear-gradient(135deg, #008844 0%, #00AA55 100%) !important;
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 6px 20px rgba(0, 170, 85, 0.3) !important;
}

/* Warning button with orange theme */
.btn-warning {
    background: linear-gradient(135deg, #FF6B35 0%, #FF8451 100%) !important;
    color: var(--white) !important;
}

.btn-warning:hover {
    background: linear-gradient(135deg, #FF8451 0%, #FF6B35 100%) !important;
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 6px 20px rgba(255, 107, 53, 0.3) !important;
}

/* Button with handball icon */
.btn-handball {
    padding-left: 50px !important;
    position: relative !important;
}

.btn-handball::after {
    content: '⚾' !important; /* Handball emoji */
    position: absolute !important;
    left: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 20px !important;
    animation: bounce 2s infinite !important;
}

/* Small buttons */
.btn-sm {
    padding: 8px 20px !important;
    font-size: 14px !important;
    border-radius: 20px !important;
}

/* Large buttons */
.btn-lg {
    padding: 16px 40px !important;
    font-size: 18px !important;
    border-radius: 35px !important;
}

/* Button group styling */
.btn-group {
    display: inline-flex !important;
    gap: 1rem !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Disabled button state */
.btn:disabled,
.btn.disabled,
button:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Form validation styles */
.has-error .control-label,
.has-error .help-block,
.has-error .help-inline {
    color: var(--primary-orange) !important;
}

.has-error input,
.has-error select,
.has-error textarea {
    border-color: var(--primary-orange) !important;
}

.has-error input:focus,
.has-error select:focus,
.has-error textarea:focus {
    border-color: var(--primary-orange) !important;
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.2) !important;
}

/* Required field asterisk */
.required::after {
    content: ' *' !important;
    color: var(--primary-orange) !important;
    font-weight: bold !important;
}

/* Form help text */
.help-block,
.help-inline {
    font-size: 0.9rem !important;
    color: var(--medium-gray) !important;
    margin-top: 0.25rem !important;
    font-family: var(--font-primary) !important;
}

/* Number inputs */
input[type="number"] {
    -moz-appearance: textfield !important;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* File upload input */
.controls input[type="file"],
input[type="file"] {
    padding: 10px !important;
    border: 2px dashed var(--primary-blue) !important;
    border-radius: var(--radius-small) !important;
    background: var(--light-gray) !important;
    cursor: pointer !important;
    transition: var(--transition-fast) !important;
}

.controls input[type="file"]:hover,
input[type="file"]:hover {
    border-color: var(--primary-orange) !important;
    background: rgba(255, 107, 53, 0.05) !important;
}

/* Responsive form elements */
@media (max-width: 480px) {
    .radio-group,
    .checkbox-group {
        flex-direction: column !important;
    }
    
    .controls label.radio,
    .controls label.checkbox,
    label.radio,
    label.checkbox {
        margin-bottom: 0.75rem !important;
    }
}

/* Event booking buttons */
.eb-taskbar .btn, 
.eb-taskbar a.btn,
.btn-primary,
.btn.btn-primary {
    display: inline-block !important;
    padding: 12px 28px !important;
    font-family: var(--font-secondary) !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    text-decoration: none !important;
    border: none !important;
    border-radius: var(--radius-large) !important;
    cursor: pointer !important;
    transition: var(--transition-fast) !important;
    background: linear-gradient(45deg, var(--primary-blue), var(--primary-orange)) !important;
    color: var(--white) !important;
    box-shadow: var(--shadow-soft) !important;
    position: relative !important;
    overflow: hidden !important;
}

.eb-taskbar .btn:hover, 
.eb-taskbar a.btn:hover,
.btn-primary:hover,
.btn.btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-medium) !important;
    color: var(--white) !important;
}

/* Event list view */
.eb-event-list {
    display: grid !important;
    gap: 1.5rem !important;
    margin-top: 2rem !important;
}

.eb-event-item {
    background: var(--white) !important;
    border-radius: var(--radius-medium) !important;
    padding: 1.5rem !important;
    box-shadow: var(--shadow-soft) !important;
    transition: var(--transition-normal) !important;
    position: relative !important;
    overflow: hidden !important;
}

.eb-event-item::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 4px !important;
    background: linear-gradient(90deg, var(--primary-orange), var(--secondary-yellow), var(--primary-green)) !important;
    transform: scaleX(0) !important;
    transform-origin: left !important;
    transition: var(--transition-normal) !important;
}

.eb-event-item:hover {
    transform: translateY(-5px) !important;
    box-shadow: var(--shadow-large) !important;
}

.eb-event-item:hover::before {
    transform: scaleX(1) !important;
}

/* Event categories */
.eb-categories {
    display: flex !important;
    gap: 0.5rem !important;
    margin-bottom: 1rem !important;
    flex-wrap: wrap !important;
}

.eb-category {
    background: var(--light-gray) !important;
    color: var(--primary-blue) !important;
    padding: 0.25rem 0.75rem !important;
    border-radius: var(--radius-small) !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    font-family: var(--font-secondary) !important;
}

/* Event date/time display */
.eb-event-date {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    color: var(--primary-orange) !important;
    font-weight: 600 !important;
    margin-bottom: 0.5rem !important;
}

.eb-event-date::before {
    content: '📅' !important;
    font-size: 1.2rem !important;
}

/* Price display */
.eb-price {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: var(--primary-green) !important;
    font-family: var(--font-display) !important;
}

/* Responsive design for event booking */
@media (max-width: 768px) {
    .eb-event {
        padding: 1.5rem !important;
    }
    
    .eb-thumb-left, .eb-thumb-right {
        float: none !important;
        margin: 0 0 1rem 0 !important;
        width: 100% !important;
    }
    
    .eb-event-properties td:first-child,
    .table td:first-child {
        width: 50% !important;
    }
    
    .eb-registration-form {
        padding: 1.5rem !important;
    }
}

/* Alert messages for event booking */
.eb-message {
    padding: 1rem !important;
    border-radius: var(--radius-small) !important;
    margin-bottom: 1rem !important;
    font-family: var(--font-primary) !important;
}

.eb-message.eb-success {
    background: rgba(0, 170, 85, 0.1) !important;
    border: 1px solid var(--primary-green) !important;
    color: var(--primary-green) !important;
}

.eb-message.eb-error {
    background: rgba(255, 107, 53, 0.1) !important;
    border: 1px solid var(--primary-orange) !important;
    color: var(--primary-orange) !important;
}

/* ==========================================================================
   HMS Page Specific Styles
   ========================================================================== */

/* HMS page content container */
.hms-container,
.item-page,
.article-details {
    background: var(--white) !important;
    border-radius: var(--radius-medium) !important;
    padding: 2rem !important;
    box-shadow: var(--shadow-soft) !important;
    margin-bottom: 2rem !important;
    animation: fadeInUp 0.6s ease-out !important;
}

/* HMS page title */
.page-header h1,
.article-details h1,
.hms-container h1 {
    font-family: var(--font-display) !important;
    font-size: clamp(2rem, 4vw, 2.5rem) !important;
    color: var(--dark-gray) !important;
    margin-bottom: 1.5rem !important;
    background: linear-gradient(45deg, var(--primary-blue), var(--primary-orange)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    text-align: center !important;
}

/* HMS content paragraphs */
.hms-container p,
.article-details p,
.item-page p {
    font-family: var(--font-secondary) !important;
    font-size: 1.1rem !important;
    line-height: 1.7 !important;
    color: var(--dark-gray) !important;
    margin-bottom: 1.5rem !important;
}

/* HMS images */
.hms-container img,
.article-details img,
.item-page img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: var(--radius-medium) !important;
    box-shadow: var(--shadow-medium) !important;
    margin: 1.5rem 0 !important;
    transition: var(--transition-normal) !important;
}

.hms-container img:hover,
.article-details img:hover,
.item-page img:hover {
    transform: scale(1.02) !important;
    box-shadow: var(--shadow-large) !important;
}

/* HMS form container - consistent with other forms */

/* Form sections within HMS */
.hms-form .form-group,
.hms-form .control-group,
.chronoform .form-group,
.chronoform .control-group {
    margin-bottom: 1.5rem !important;
}

/* HMS buttons - consistent with other buttons */
.hms-container .btn,
.article-details .btn,
.item-page .btn,
.chronoform .btn,
.chronoform button {
    display: inline-block !important;
    padding: 12px 32px !important;
    font-family: var(--font-secondary) !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    text-decoration: none !important;
    border: none !important;
    border-radius: 30px !important;
    cursor: pointer !important;
    transition: var(--transition-fast) !important;
    position: relative !important;
    overflow: hidden !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
    margin: 0.5rem !important;
}

/* Primary button for HMS forms */
.hms-container .btn-primary,
.chronoform .btn-primary,
.chronoform button[type="submit"] {
    background: linear-gradient(135deg, #0066CC 0%, #0052A3 50%, #FF6B35 100%) !important;
    color: var(--white) !important;
    position: relative !important;
    z-index: 1 !important;
}

.hms-container .btn-primary::before,
.chronoform .btn-primary::before,
.chronoform button[type="submit"]::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(135deg, #FF6B35 0%, #FF8451 50%, #0066CC 100%) !important;
    opacity: 0 !important;
    z-index: -1 !important;
    transition: opacity 0.3s ease !important;
}

.hms-container .btn-primary:hover::before,
.chronoform .btn-primary:hover::before,
.chronoform button[type="submit"]:hover::before {
    opacity: 1 !important;
}

.hms-container .btn-primary:hover,
.chronoform .btn-primary:hover,
.chronoform button[type="submit"]:hover {
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15) !important;
    color: var(--white) !important;
}

/* Secondary button for HMS */
.hms-container .btn-secondary,
.chronoform .btn-secondary,
.chronoform button[type="reset"] {
    background: var(--white) !important;
    color: #0066CC !important;
    border: 3px solid #0066CC !important;
    position: relative !important;
    z-index: 1 !important;
}

.hms-container .btn-secondary::before,
.chronoform .btn-secondary::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 0 !important;
    height: 100% !important;
    background: #0066CC !important;
    z-index: -1 !important;
    transition: width 0.3s ease !important;
}

.hms-container .btn-secondary:hover::before,
.chronoform .btn-secondary:hover::before {
    width: 100% !important;
}

.hms-container .btn-secondary:hover,
.chronoform .btn-secondary:hover {
    color: var(--white) !important;
    transform: translateY(-3px) !important;
    border-color: #0066CC !important;
}

/* HMS form inputs - consistent with other forms */
.hms-form input[type="text"],
.hms-form input[type="email"],
.hms-form input[type="tel"],
.hms-form textarea,
.hms-form select,
.chronoform input[type="text"],
.chronoform input[type="email"],
.chronoform input[type="tel"],
.chronoform textarea,
.chronoform select {
    width: 100% !important;
    padding: 12px 16px !important;
    border: 2px solid transparent !important;
    border-radius: var(--radius-small) !important;
    background: var(--white) !important;
    font-family: var(--font-primary) !important;
    font-size: 16px !important;
    transition: var(--transition-fast) !important;
    box-shadow: var(--shadow-soft) !important;
    margin-bottom: 0.5rem !important;
    color: var(--dark-gray) !important;
}

/* HMS form input hover and focus states */
.hms-form input:hover,
.hms-form textarea:hover,
.hms-form select:hover,
.chronoform input:hover,
.chronoform textarea:hover,
.chronoform select:hover {
    border-color: var(--primary-orange) !important;
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.2) !important;
}

.hms-form input:focus,
.hms-form textarea:focus,
.hms-form select:focus,
.chronoform input:focus,
.chronoform textarea:focus,
.chronoform select:focus {
    outline: none !important;
    border-color: var(--primary-blue) !important;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.3) !important;
}

/* HMS radio and checkbox styling */
.hms-form input[type="radio"],
.hms-form input[type="checkbox"],
.chronoform input[type="radio"],
.chronoform input[type="checkbox"] {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    width: 22px !important;
    height: 22px !important;
    border: 2px solid var(--primary-blue) !important;
    margin-right: 10px !important;
    vertical-align: middle !important;
    cursor: pointer !important;
    position: relative !important;
    background: var(--white) !important;
    transition: var(--transition-fast) !important;
    flex-shrink: 0 !important;
    border-radius: 50% !important;
}

.hms-form input[type="checkbox"],
.chronoform input[type="checkbox"] {
    border-radius: var(--radius-small) !important;
}

/* HMS form layout */
.hms-form .form-horizontal .control-group,
.chronoform .form-horizontal .control-group {
    margin-bottom: 1.5rem !important;
}

.hms-form .control-label,
.chronoform .control-label {
    font-weight: 600 !important;
    color: var(--dark-gray) !important;
    margin-bottom: 0.5rem !important;
}

/* Chronoform specific styling - HMS form */
#cf_hms_form,
.chronoform,
#ch_hms_form,
.hms-form,
.form-container {
    background: var(--white) !important;
    border-radius: var(--radius-medium) !important;
    padding: 2rem !important;
    box-shadow: var(--shadow-soft) !important;
    border: none !important;
    margin: 2rem 0 !important;
}

/* Target CF form buttons specifically */
.cf-btn,
button.cf-btn,
.chronoform .cf-btn,
.chronoform button.cf-btn,
.ccms_form button.cf-btn,
form button.cf-btn {
    /* Remove any default styling */
    background-image: none !important;
    background-color: transparent !important;
    
    /* Apply the gradient background */
    background: linear-gradient(135deg, #0066CC 0%, #0052A3 50%, #FF6B35 100%) !important;
    
    /* Button styles */
    display: inline-block !important;
    padding: 12px 32px !important;
    font-family: var(--font-secondary) !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    text-decoration: none !important;
    border: none !important;
    border-radius: 30px !important;
    cursor: pointer !important;
    transition: var(--transition-fast) !important;
    position: relative !important;
    overflow: hidden !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
    color: var(--white) !important;
    z-index: 1 !important;
    min-width: 150px !important;
}

/* CF button text styling */
.cf-btn .cf-btn-text {
    color: var(--white) !important;
    position: relative !important;
    z-index: 2 !important;
}

/* Loading spinner styling */
.cf-btn .cf-spinner-container {
    display: none !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

.cf-btn.loading .cf-btn-text {
    visibility: hidden !important;
}

.cf-btn.loading .cf-spinner-container {
    display: block !important;
}

/* Spinner dots styling */
.cf-spinner span {
    background-color: var(--white) !important;
}

/* CF button hover effect */
.cf-btn::before,
button.cf-btn::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(135deg, #FF6B35 0%, #FF8451 50%, #0066CC 100%) !important;
    opacity: 0 !important;
    z-index: 0 !important;
    transition: opacity 0.3s ease !important;
}

.cf-btn:hover::before,
button.cf-btn:hover::before {
    opacity: 1 !important;
}

.cf-btn:hover,
button.cf-btn:hover {
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15) !important;
    color: var(--white) !important;
    background: linear-gradient(135deg, #0066CC 0%, #0052A3 50%, #FF6B35 100%) !important;
}

/* Override any CF default colors */
.cf-btn:not(:disabled):not(.disabled) {
    background: linear-gradient(135deg, #0066CC 0%, #0052A3 50%, #FF6B35 100%) !important;
    border: none !important;
    color: var(--white) !important;
}

/* Focus state */
.cf-btn:focus,
button.cf-btn:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.3) !important;
}

/* ChronoForms specific button styling - Force gradient */
.chronoform button,
.chronoform input[type="submit"],
.chronoform input[type="button"],
.chronoform .btn,
.chronoform .button,
#cf_hms_form button,
#cf_hms_form input[type="submit"],
#cf_hms_form .btn,
button[name="submit"],
input[name="submit"],
.ccms_form button[type="submit"] {
    /* Remove any conflicting backgrounds first */
    background-image: none !important;
    
    /* Apply the gradient background */
    background: linear-gradient(135deg, #0066CC 0%, #0052A3 50%, #FF6B35 100%) !important;
    
    /* Rest of the button styles */
    display: inline-block !important;
    padding: 12px 32px !important;
    font-family: var(--font-secondary) !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    text-decoration: none !important;
    border: none !important;
    border-radius: 30px !important;
    cursor: pointer !important;
    transition: var(--transition-fast) !important;
    position: relative !important;
    overflow: hidden !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
    color: var(--white) !important;
    z-index: 1 !important;
    min-width: 150px !important;
}

/* Add the hover gradient effect */
.chronoform button::before,
.chronoform input[type="submit"]::before,
#cf_hms_form button::before,
#cf_hms_form input[type="submit"]::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(135deg, #FF6B35 0%, #FF8451 50%, #0066CC 100%) !important;
    opacity: 0 !important;
    z-index: -1 !important;
    transition: opacity 0.3s ease !important;
}

.chronoform button:hover::before,
.chronoform input[type="submit"]:hover::before,
#cf_hms_form button:hover::before,
#cf_hms_form input[type="submit"]:hover::before {
    opacity: 1 !important;
}

/* Button hover states with transform */
.chronoform button:hover,
.chronoform input[type="submit"]:hover,
.chronoform .btn:hover,
#cf_hms_form button:hover,
#cf_hms_form input[type="submit"]:hover {
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15) !important;
    color: var(--white) !important;
    background: linear-gradient(135deg, #0066CC 0%, #0052A3 50%, #FF6B35 100%) !important;
}

/* Override any default button styles with maximum specificity */
form.chronoform button[type="submit"],
form button[type="submit"],
.chronoform form button[type="submit"] {
    background: linear-gradient(135deg, #0066CC 0%, #0052A3 50%, #FF6B35 100%) !important;
    color: var(--white) !important;
}

/* Remove any ChronoForms default button styling */
.chronoform .btn-primary,
.chronoform .btn-default {
    background-image: none !important;
    background: linear-gradient(135deg, #0066CC 0%, #0052A3 50%, #FF6B35 100%) !important;
    border: none !important;
    color: var(--white) !important;
}

/* Override any existing ChronoForms styling */
.chronoform .form-actions {
    background: transparent !important;
    border: none !important;
    padding: 1rem 0 0 0 !important;
    margin: 0 !important;
}

.chronoform .form-horizontal .form-actions {
    padding-left: 0 !important;
}

/* Remove any unwanted backgrounds */
.chronoform,
.chronoform .form-horizontal,
.chronoform form,
#chronoform-wrapper {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* The actual form container should have the styling */
.item-page > .chronoform,
.article-info + .chronoform,
#system-message-container + .chronoform {
    background: var(--white) !important;
    border-radius: var(--radius-medium) !important;
    padding: 2rem !important;
    box-shadow: var(--shadow-soft) !important;
}

/* Reset button */
.chronoform button[type="reset"],
.chronoform input[type="reset"],
#cf_hms_form button[type="reset"] {
    background: var(--white) !important;
    color: #0066CC !important;
    border: 3px solid #0066CC !important;
}

.chronoform button[type="reset"]:hover,
#cf_hms_form button[type="reset"]:hover {
    background: #0066CC !important;
    color: var(--white) !important;
}

/* ChronoForms validation messages */
.chronoform .validation-advice,
.chronoform .error {
    color: var(--primary-orange) !important;
    font-size: 0.9rem !important;
    margin-top: 0.25rem !important;
}

/* Success message */
.chronoform .success,
.chronoform .message {
    padding: 1rem !important;
    border-radius: var(--radius-small) !important;
    margin-bottom: 1rem !important;
    background: rgba(0, 170, 85, 0.1) !important;
    border: 1px solid var(--primary-green) !important;
    color: var(--primary-green) !important;
}

/* HMS list styling */
.hms-container ul,
.article-details ul,
.item-page ul {
    margin-bottom: 1.5rem !important;
    padding-left: 2rem !important;
}

.hms-container ul li,
.article-details ul li,
.item-page ul li {
    margin-bottom: 0.75rem !important;
    font-family: var(--font-primary) !important;
    color: var(--dark-gray) !important;
    position: relative !important;
}

.hms-container ul li::before,
.article-details ul li::before,
.item-page ul li::before {
    content: '⚾' !important;
    position: absolute !important;
    left: -1.5rem !important;
    color: var(--primary-orange) !important;
}

/* HMS call-to-action section */
.hms-cta,
.cta-section {
    background: linear-gradient(135deg, var(--primary-blue), var(--primary-orange)) !important;
    color: var(--white) !important;
    padding: 2rem !important;
    border-radius: var(--radius-large) !important;
    text-align: center !important;
    margin: 2rem 0 !important;
    box-shadow: var(--shadow-medium) !important;
}

.hms-cta h2,
.cta-section h2 {
    color: var(--white) !important;
    margin-bottom: 1rem !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

.hms-cta p,
.cta-section p {
    color: var(--white) !important;
    font-size: 1.2rem !important;
    margin-bottom: 1.5rem !important;
}

/* HMS buttons */
.hms-container .btn,
.article-details .btn,
.item-page .btn {
    margin: 0.5rem !important;
}

/* HMS info boxes */
.hms-info-box,
.info-box {
    background: var(--white) !important;
    border-left: 4px solid var(--primary-orange) !important;
    padding: 1.5rem !important;
    margin: 1.5rem 0 !important;
    border-radius: 0 var(--radius-small) var(--radius-small) 0 !important;
    box-shadow: var(--shadow-soft) !important;
}

.hms-info-box h3,
.info-box h3 {
    color: var(--primary-blue) !important;
    margin-bottom: 1rem !important;
    font-family: var(--font-display) !important;
}

/* HMS feature list */
.hms-features,
.feature-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
    gap: 1.5rem !important;
    margin: 2rem 0 !important;
}

.hms-feature-item,
.feature-item {
    background: var(--white) !important;
    padding: 1.5rem !important;
    border-radius: var(--radius-medium) !important;
    box-shadow: var(--shadow-soft) !important;
    text-align: center !important;
    transition: var(--transition-normal) !important;
}

.hms-feature-item:hover,
.feature-item:hover {
    transform: translateY(-5px) !important;
    box-shadow: var(--shadow-large) !important;
}

/* HMS contact information */
.hms-contact,
.contact-info {
    background: var(--light-gray) !important;
    padding: 1.5rem !important;
    border-radius: var(--radius-medium) !important;
    margin-top: 2rem !important;
}

.hms-contact h3,
.contact-info h3 {
    color: var(--primary-blue) !important;
    margin-bottom: 1rem !important;
}

/* HMS timeline or process steps */
.hms-timeline,
.process-steps {
    position: relative !important;
    padding-left: 2rem !important;
    margin: 2rem 0 !important;
}

.hms-timeline::before,
.process-steps::before {
    content: '' !important;
    position: absolute !important;
    left: 0.5rem !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 3px !important;
    background: linear-gradient(180deg, var(--primary-blue), var(--primary-orange)) !important;
}

.hms-timeline-item,
.process-step {
    position: relative !important;
    margin-bottom: 2rem !important;
    padding-left: 1.5rem !important;
}

.hms-timeline-item::before,
.process-step::before {
    content: '' !important;
    position: absolute !important;
    left: -2rem !important;
    top: 0.5rem !important;
    width: 15px !important;
    height: 15px !important;
    background: var(--primary-orange) !important;
    border-radius: 50% !important;
    border: 3px solid var(--white) !important;
    box-shadow: 0 0 0 3px var(--primary-orange) !important;
}

/* HMS responsive adjustments */
@media (max-width: 768px) {
    .hms-container,
    .item-page,
    .article-details {
        padding: 1.5rem !important;
    }
    
    .hms-cta,
    .cta-section {
        padding: 1.5rem !important;
    }
    
    .hms-features,
    .feature-list {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================================
   Footer
   ========================================================================== */
footer {
    background: var(--dark-gray);
    color: var(--white);
    padding: 3rem 0 1rem;
    margin-top: 4rem;
    position: relative;
}

footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-blue), var(--primary-orange), var(--primary-green));
}

footer a {
    color: var(--white);
    text-decoration: none;
    transition: var(--transition-fast);
}

footer a:hover {
    color: var(--primary-orange);
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */
.text-gradient {
    background: linear-gradient(45deg, var(--primary-blue), var(--primary-orange));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.bg-gradient {
    background: linear-gradient(135deg, var(--primary-blue), var(--primary-orange));
    color: var(--white);
}

.shadow-soft { box-shadow: var(--shadow-soft); }
.shadow-medium { box-shadow: var(--shadow-medium); }
.shadow-large { box-shadow: var(--shadow-large); }

.rounded-small { border-radius: var(--radius-small); }
.rounded-medium { border-radius: var(--radius-medium); }
.rounded-large { border-radius: var(--radius-large); }
.rounded-full { border-radius: var(--radius-full); }

/* Spacing utilities */
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mt-5 { margin-top: 3rem; }

.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }
.mb-5 { margin-bottom: 3rem; }

.pt-1 { padding-top: 0.5rem; }
.pt-2 { padding-top: 1rem; }
.pt-3 { padding-top: 1.5rem; }
.pt-4 { padding-top: 2rem; }
.pt-5 { padding-top: 3rem; }

.pb-1 { padding-bottom: 0.5rem; }
.pb-2 { padding-bottom: 1rem; }
.pb-3 { padding-bottom: 1.5rem; }
.pb-4 { padding-bottom: 2rem; }
.pb-5 { padding-bottom: 3rem; }

/* Text utilities */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-primary { color: var(--primary-blue); }
.text-secondary { color: var(--primary-orange); }
.text-success { color: var(--primary-green); }
.text-warning { color: var(--secondary-yellow); }

.fw-normal { font-weight: 400; }
.fw-medium { font-weight: 500; }
.fw-semibold { font-weight: 600; }
.fw-bold { font-weight: 700; }

/* Flex utilities */
.d-flex { display: flex; }
.flex-column { flex-direction: column; }
.justify-content-center { justify-content: center; }
.justify-content-between { justify-content: space-between; }
.align-items-center { align-items: center; }
.flex-wrap { flex-wrap: wrap; }

/* Grid utilities */
.grid {
    display: grid;
    gap: 1.5rem;
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 768px) {
    .grid-2, .grid-3, .grid-4 {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Custom Animations for Kids
   ========================================================================== */
@keyframes wiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-5deg); }
    75% { transform: rotate(5deg); }
}

.wiggle:hover {
    animation: wiggle 0.5s ease-in-out infinite;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.pulse {
    animation: pulse 2s ease-in-out infinite;
}

/* ==========================================================================
   Cookie Consent Modal
   ========================================================================== */
#redim-cookiehint-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fadeIn 0.3s ease-out;
}

#redim-cookiehint {
    background: var(--white);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-large);
    max-width: 500px;
    width: 90%;
    margin: 0 auto;
    overflow: hidden;
    animation: slideInUp 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

#redim-cookiehint::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--primary-blue), var(--primary-orange), var(--primary-green));
}

.cookiehead {
    padding: 1.5rem 2rem 0.5rem;
    position: relative;
}

.cookiehead .headline {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--dark-gray);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cookiehead .headline::before {
    content: '🍪';
    font-size: 1.8rem;
    animation: wiggle 2s ease-in-out infinite;
}

.cookiecontent {
    padding: 0 2rem 1.5rem;
    font-family: var(--font-secondary);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--medium-gray);
}

.cookiebuttons {
    padding: 0 2rem 2rem;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.cookiebuttons .btn,
.cookiebuttons a.btn,
#redim-cookiehint .cookiebuttons a,
#cookiehintsubmit,
#cookiehintsubmitno {
    flex: 1;
    min-width: 120px;
    display: inline-block;
    padding: 12px 28px !important;
    font-family: var(--font-secondary) !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    text-decoration: none !important;
    border: none !important;
    border-radius: var(--radius-large) !important;
    cursor: pointer;
    transition: var(--transition-fast) !important;
    position: relative;
    overflow: hidden;
    text-align: center;
}

#cookiehintsubmit,
.cookiebuttons a#cookiehintsubmit,
#redim-cookiehint a#cookiehintsubmit {
    background: linear-gradient(45deg, var(--primary-blue), var(--primary-orange)) !important;
    color: var(--white) !important;
    box-shadow: var(--shadow-soft) !important;
    border: none !important;
}

#cookiehintsubmit::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: 0.5s;
    z-index: 1;
}

#cookiehintsubmit:hover,
.cookiebuttons a#cookiehintsubmit:hover,
#redim-cookiehint a#cookiehintsubmit:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-medium) !important;
    background: linear-gradient(45deg, var(--primary-blue), var(--primary-orange)) !important;
    color: var(--white) !important;
}

#cookiehintsubmit:hover::before {
    left: 100%;
}

#cookiehintsubmitno,
.cookiebuttons a#cookiehintsubmitno,
#redim-cookiehint a#cookiehintsubmitno {
    background: var(--white) !important;
    color: var(--primary-blue) !important;
    border: 2px solid var(--primary-blue) !important;
}

#cookiehintsubmitno:hover,
.cookiebuttons a#cookiehintsubmitno:hover,
#redim-cookiehint a#cookiehintsubmitno:hover {
    background: var(--primary-blue) !important;
    color: var(--white) !important;
    transform: translateY(-2px) !important;
    border-color: var(--primary-blue) !important;
}

/* Überschreiben von Template-spezifischen Styles */
#redim-cookiehint-modal .btn,
#redim-cookiehint-modal a.btn,
#redim-cookiehint .btn,
#redim-cookiehint a.btn {
    background-image: none !important;
}

#cookiehintinfo {
    width: 100%;
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: var(--medium-gray);
}

.clr {
    clear: both;
}

/* Cookie consent animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

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

/* Responsive design for cookie consent */
@media (max-width: 480px) {
    #redim-cookiehint {
        width: 95%;
        margin: 1rem;
    }
    
    .cookiehead {
        padding: 1.25rem 1.5rem 0.5rem;
    }
    
    .cookiecontent {
        padding: 0 1.5rem 1.25rem;
        font-size: 0.95rem;
    }
    
    .cookiebuttons {
        padding: 0 1.5rem 1.5rem;
        flex-direction: column;
    }
    
    #cookiehintsubmit, #cookiehintsubmitno {
        width: 100%;
    }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */
@media print {
    body {
        font-size: 12pt;
        line-height: 1.5;
    }
    
    .no-print,
    #redim-cookiehint-modal {
        display: none !important;
    }
    
    a[href]:after {
        content: " (" attr(href) ")";
    }
    
    .card {
        box-shadow: none;
        border: 1px solid #ddd;
    }
}

/* ==========================================================================
   Alternative Social Media Styles mit verbessertem Kontrast
   ========================================================================== */

/* Grundlegendes Container-Styling */
#sp-contact {
    display: flex;
    align-items: center;
}

/* Social Icons Liste */
.social-icons {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 1rem;
}

/* Einzelnes Social Icon */
.social-icons li {
    margin: 0;
    padding: 0;
    transition: var(--transition-fast);
}

/* Social Icon Links mit verbessertem Kontrast */
.social-icons li a {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    transition: var(--transition-normal);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    background: var(--white);
}

/* Social Icons Farben mit hohem Kontrast */
.social-icons li a span {
    font-size: 1.4rem;
    transition: var(--transition-normal);
}

/* Facebook Icon */
.social-icon-facebook a span {
    color: #1877f2;
}

/* Instagram Icon */
.social-icon-instagram a span {
    color: #e1306c;
}

/* Hover-Effekte mit Farbumkehr für hohen Kontrast */
.social-icons li a:hover {
    transform: translateY(-5px) scale(1.1);
    box-shadow: var(--shadow-medium);
}

/* Facebook Hover */
.social-icon-facebook a:hover {
    background: #1877f2;
}

.social-icon-facebook a:hover span {
    color: var(--white);
}

/* Instagram Hover */
.social-icon-instagram a:hover {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

.social-icon-instagram a:hover span {
    color: var(--white);
}

/* Glow-Effekt beim Hover */
.social-icons li a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.7) 0%, transparent 70%);
    opacity: 0;
    transition: var(--transition-normal);
}

.social-icons li a:hover::before {
    opacity: 1;
}

.social-icons li a:hover span {
    transform: scale(1.2);
}

/* Pulse-Animation für Social Icons */
@keyframes social-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 102, 204, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(0, 102, 204, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 102, 204, 0);
    }
}

/* Zufalls-Animation für einen lebendigen Look */
.social-icons li:nth-child(odd) a:hover {
    animation: social-pulse 1.5s infinite;
}

.social-icons li:nth-child(even) a:hover {
    animation: bounce 2s infinite;
}

/* Anpassungen für verschiedene Geräte */
@media (max-width: 992px) {
    #sp-contact {
        justify-content: center;
        margin: 1rem 0;
    }
    
    .social-icons {
        gap: 0.75rem;
    }
    
    .social-icons li a {
        width: 36px;
        height: 36px;
    }
}

@media (max-width: 576px) {
    .social-icons li a {
        width: 32px;
        height: 32px;
    }
    
    .social-icons li a span {
        font-size: 1.2rem;
    }
}

#pop-print {
  visibility: hidden;
}

/* Price display styling - override button appearance */
.eb-event-price.btn-primary {
    background: var(--white) !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: var(--radius-medium) !important;
    padding: 0.75rem 1.25rem !important;
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    font-size: 1.25rem !important;
    transition: var(--transition-fast) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    position: relative !important;
    overflow: visible !important;
    display: inline-block !important;
    cursor: default !important;
    pointer-events: none !important;
    white-space: nowrap !important; /* Verhindert Zeilenumbrüche innerhalb des Preises */
}

/* Remove any button-like hover effects and shadows */
.eb-event-price.btn-primary::before {
    display: none !important;
}

.eb-event-price.btn-primary:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* Price value styling with gradient text */
.eb-event-price .eb-individual-price {
    display: inline-block !important;
    font-weight: 700 !important;
    background: linear-gradient(45deg, var(--primary-blue), var(--primary-orange)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    cursor: default !important;
    white-space: nowrap !important; /* Verhindert Zeilenumbrüche innerhalb des Preises */
    letter-spacing: 0.5px !important; /* Bessere Lesbarkeit */
}

/* Optional: Styling für Währung und Betrag unterscheiden */
.eb-event-price .eb-individual-price::first-letter {
    font-weight: 600 !important; /* Die Währung (CHF) etwas weniger fett */
}

/* Additional resets to prevent any button-like behavior */
.eb-event-price.btn-primary {
    /* Reset all button-related properties */
    text-shadow: none !important;
    -webkit-text-shadow: none !important;
    -moz-text-shadow: none !important;
    -o-text-shadow: none !important;
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    filter: none !important;
    border: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    -o-box-shadow: none !important;
    pointer-events: none !important;
}

/* Specifically target the event slider thumb to make it full width */
.eb-event-slider-thumb {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: block !important;
    margin-bottom: 1.5rem !important;
}

.eb-event-slider-thumb img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    border-radius: var(--radius-medium) !important;
    box-shadow: var(--shadow-soft) !important;
    transition: var(--transition-fast) !important;
}

/* Fix for image being too small or offset */
.eb-event-slider-thumb img[style] {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
}

/* Remove any float classes specifically for this element */
.eb-event-slider-thumb.pull-left,
.eb-event-slider-thumb.pull-right {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
}

.splide__pagination {
    bottom: -2.5em;
}

/* Responsive table styling - improved for dates and long content */
.table.table-bordered.table-striped {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: none !important;
    box-shadow: var(--shadow-soft) !important;
    border-radius: var(--radius-medium) !important;
    overflow: hidden !important;
    margin-bottom: 2rem !important;
}

/* Table headers and cells */
.table.table-bordered.table-striped th,
.table.table-bordered.table-striped td {
    padding: 1rem 1.25rem !important;
    border: none !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    transition: var(--transition-fast) !important;
    background-color: var(--white) !important;
}

/* Property label styling */
.eb-event-property-label {
    font-weight: 600 !important;
    color: var(--primary-blue) !important;
}

/* Property value styling */
.eb-event-property-value {
    color: var(--dark-gray) !important;
}

/* Price specific styling */
.eb-event-property-value.eb_price {
    font-weight: 700 !important;
    background: linear-gradient(45deg, var(--primary-blue), var(--primary-orange)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Last row - remove bottom border */
.table.table-bordered.table-striped tr:last-child td {
    border-bottom: none !important;
}

/* Hover effect */
.table.table-bordered.table-striped tr:hover td {
    background-color: rgba(0, 102, 204, 0.03) !important;
}

/* Responsive design - use flex layout instead of table */
@media (max-width: 768px) {
    /* Adjust the table and its children */
    .table.table-bordered.table-striped {
        display: flex !important;
        flex-direction: column !important;
        border-radius: var(--radius-medium) !important;
        overflow: hidden !important;
        box-shadow: var(--shadow-soft) !important;
    }
    
    .table.table-bordered.table-striped tbody {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }
    
    /* Style each row as a card */
    .table.table-bordered.table-striped tr.eb-event-property {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        margin: 0 !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
        padding: 0.75rem 0 !important;
    }
    
    .table.table-bordered.table-striped tr.eb-event-property:last-child {
        border-bottom: none !important;
    }
    
    /* Adjust cells to be side by side */
    .table.table-bordered.table-striped td.eb-event-property-label,
    .table.table-bordered.table-striped td.eb-event-property-value {
        padding: 0.5rem 1rem !important;
        border: none !important;
        display: block !important;
    }
    
    .table.table-bordered.table-striped td.eb-event-property-label {
        flex: 0 0 40% !important; /* Fixed width for labels */
        text-align: left !important;
        font-weight: 600 !important;
        color: var(--primary-blue) !important;
    }
    
    .table.table-bordered.table-striped td.eb-event-property-value {
        flex: 0 0 60% !important; /* Take remaining space */
        text-align: right !important;
        word-break: break-word !important; /* Allow wrapping for very long content */
        hyphens: auto !important; /* Enable hyphenation */
    }
    
    /* Special styling for date cells to ensure they wrap properly */
    .table.table-bordered.table-striped td.eb-event-property-value:contains("09:00"),
    .table.table-bordered.table-striped td.eb-event-property-value:contains("16:00") {
        word-break: break-all !important;
    }
}

/* Additional format for very small screens */
@media (max-width: 480px) {
    .table.table-bordered.table-striped td.eb-event-property-label,
    .table.table-bordered.table-striped td.eb-event-property-value {
        flex: 0 0 100% !important; /* Stack vertically on very small screens */
        text-align: left !important;
        padding: 0.25rem 1rem !important;
    }
    
    .table.table-bordered.table-striped td.eb-event-property-label {
        padding-top: 0.75rem !important;
        padding-bottom: 0 !important;
    }
    
    .table.table-bordered.table-striped td.eb-event-property-value {
        padding-top: 0 !important;
        padding-bottom: 0.75rem !important;
        font-weight: 500 !important;
    }
}

/* Footer menu with separator styling */
ul.menu {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 1rem 0 !important;
}

ul.menu li {
    display: inline-flex !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
}

/* Add separator between menu items */
ul.menu li:not(:last-child)::after {
    content: '|' !important;
    margin: 0 0.75rem !important;
    color: rgba(255, 255, 255, 0.5) !important; /* Semi-transparent separator */
    font-weight: 300 !important;
}

/* Menu item styling */
ul.menu li a {
    color: var(--white) !important;
    text-decoration: none !important;
    font-size: 0.9rem !important;
    font-weight: 400 !important;
    transition: var(--transition-fast) !important;
    padding: 0.25rem 0 !important;
    position: relative !important;
}

/* Hover effect with underline */
ul.menu li a::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 0 !important;
    height: 1px !important;
    background-color: var(--primary-orange) !important;
    transition: var(--transition-fast) !important;
}

ul.menu li a:hover {
    color: var(--primary-orange) !important;
}

ul.menu li a:hover::after {
    width: 100% !important;
}

/* Active item styling */
ul.menu li.current.active a {
    color: var(--primary-orange) !important;
    font-weight: 500 !important;
}

ul.menu li.current.active a::after {
    width: 100% !important;
    background-color: var(--primary-orange) !important;
}

/* Responsive adjustments */
@media (max-width: 480px) {
    ul.menu {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }
    
    ul.menu li:not(:last-child)::after {
        display: none !important; /* Remove separator on mobile */
    }
}

.eb-container .form-group.form-row {
    margin-bottom: 4em !important;
}