/**
 * LATEPOINT BRAND TOKENS
 * Update these values to change colors across the entire form
 */
:root {
    --lp-brand-red: #C00000;         /* Primary Red for Header/Borders */
    --lp-warning-bg: #FFF5F5;        /* Light Pink for Warning Box */
    --lp-warning-text: #A61919;      /* Vibrant Red for Warning Text */
    --lp-header-text: #ffffff;       /* Heading Font Color */
    --lp-nav-black: #000000;         /* Navigation Button Color */
}

/**
 * BULLETPROOF WRAPPER
 * Targets any LatePoint form regardless of skin settings.
 */
.latepoint-w .latepoint-booking-form-element[class*="latepoint-color-"] {

    /* --- SECTION 1: LAYOUT --- */

    .latepoint-side-panel, 
    .latepoint-summary-w {
        display: none !important;
    }

    .latepoint-form-w {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
    }

    display: block !important;

    /* --- SECTION 2: HEADER --- */

    .latepoint-heading-w {
        background-color: var(--lp-brand-red) !important;
        padding: 20px 25px !important;
        margin: 0 !important;
        border-radius: 0 !important;
        display: flex !important;
        align-items: center !important;
        min-height: 60px !important;
    }

    h3.os-heading-text {
        display: block !important;
        color: var(--lp-header-text) !important;
        font-family: inherit !important;
        font-size: 1.2rem !important;
        font-weight: 600 !important;
        margin: 0 !important;
    }

    .os-heading-text-library,
    .latepoint-lightbox-close,
    .latepoint-lightbox-summary-trigger {
        display: none !important;
    }

    /* --- SECTION 3: WARNING BOX --- */

    .latepoint-step-content .latepoint-step-content-text-left {
        background-color: var(--lp-warning-bg) !important;
        border-left: 5px solid var(--lp-brand-red) !important;
        padding: 15px 20px !important;
        margin: 20px 0 !important;
        border-radius: 2px !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .latepoint-step-content .latepoint-step-content-text-left p,
    .latepoint-step-content .latepoint-step-content-text-left p span,
    .latepoint-step-content .latepoint-step-content-text-left * {
        color: var(--lp-warning-text) !important; 
        opacity: 1 !important;  
        font-weight: 700 !important;  
        font-size: 16px !important;
        line-height: 1.4 !important;
        filter: none !important;
    }

    .latepoint-step-content .latepoint-step-content-text-left img.emoji {
        opacity: 1 !important;
        filter: none !important;
    }

    /* --- SECTION 4: NAVIGATION --- */

    .latepoint-footer .latepoint-prev-btn {
        color: var(--lp-nav-black) !important;
        border-color: var(--lp-nav-black) !important;
        background-color: transparent !important;
    }

    .latepoint-footer .latepoint-prev-btn i {
        color: var(--lp-nav-black) !important;
    }

    .latepoint-footer .latepoint-prev-btn:hover {
        background-color: #f5f5f5 !important;
        color: var(--lp-nav-black) !important;
    }
	
	/* --- SECTION 5: TICKET ITEM FLEXBOX FIX --- */

	/* 1. Ensure the row uses flexbox and items stay centered vertically */
	.os-service-extra-selector.os-item-i {
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
		width: 100% !important;
	}

	/* 2. Make the Name/Description area flexible but restricted */
	.os-item-name-w {
		flex: 1 1 auto !important;
		padding-right: 15px !important;
		min-width: 0 !important; /* Prevents text from breaking layout */
	}

	/* 3. FIX: Give the price a fixed minimum width and prevent wrapping */
	.os-item-price-w {
		flex: 0 0 80px !important; /* Does not grow or shrink, stays 80px wide */
		text-align: right !important;
		white-space: nowrap !important; /* CRITICAL: Prevents € from going to next line */
		display: flex !important;
		justify-content: flex-end !important;
		align-items: center !important;
	}

	/* 4. Format the price font to match your vibrant red token */
	.os-item-price {
		color: var(--lp-warning-text) !important;
		font-weight: 600 !important;
		font-size: 1.2rem !important;
	}

	/* 5. Keep the Quantity Selector fixed on the right */
	.item-quantity-selector-w {
		flex: 0 0 auto !important;
		margin-left: 15px !important;
	}

}