:root {
	/*--bgDev:           #F5EFE6;*/
	/*--black:           #4A4A4A;*/
	--shadow:          #342528;
	--superUltraLight: #ECF5FF;

	--accent:          #342528;

	--white: #ffffff;
	--bgDev: #ffffff;
	--black: #030303;
	--dark: #29579B;
	--midtone: #AAC7F2;
	--light: #D9E6FF;
	--highlight: #ECF5FF;

	--orange: #FFB068;
	--blue: #1976D2;
	--light-blue: #D8EDFE;
	--light-gray: #737373;
	--lighter-gray: #f9f9f9;

	/* Additional extended palette */
	--background:      #F5EFE6; /* A soft beige ideal for backgrounds */
	--border:          #3E2723; /* A deep brown for borders or outlines */
	--success:         #388E3C; /* A vibrant green for success states */
	--error:           #D32F2F; /* A bold red for error messages */
	--info:            #1976D2; /* A strong blue for informational accents */
	--warning:         #FBC02D; /* A warm amber for warnings */


	--menu-border-radius: 6px;
	--formRow-border-width: 1px;
	--headBarHeight: 0px;
	--defaultNavLeftWidthClosed: 260px;
}

html {scroll-behavior: unset;}
body{margin: 0; background-color: var(--white); font-size: 0;}
#rmsg.toast{font-size: 1rem; z-index: 100;}
section{background-color: var(--white);}
#footerBaseFinal{bottom: 0; left:0; position: fixed; z-index: 100; height: 20px; width: 100vw; font-size: 0.8rem; text-align: center; background: #00000033; color: #333333;}

/* ============= Main Login page ============= */
.horizontalScrollable.hsHeader{top: 0;}
.access-page .header.flex { flex-direction: column; }
.access-page .logo-container { margin: 50px auto 30px; }
.access-page .header.flex .logo-circle { width: 60px; height: 60px; }
.access-page .logo-text { font-size: 34px; }
.access-page .logo-text span { font-size: 18px; }

/* ============= Dashboard Charts Grid ============= */
.dashboard-grid {
    /*display: flex;*/
    flex-wrap: wrap;
    gap: 20px;
    margin: 20px 0;
}

.chart-container {
    background: var(--white);
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    overflow: hidden;
}

.chart-title {
    background: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
    padding: 12px 16px;
    font-weight: 600;
    font-size: 1rem;
    color: var(--black);
    margin: 0;
}

.chart-container > div:last-child {
    padding: 16px;
}
.access-page .primary-btn:first-of-type { margin-top: 40px; }
.access-page .secondary-btn { width: 100%; font-size: 18px; padding: 12px; }

#login-page #loginForm { text-align: center; }

/* ============= Buttons ============= */
.formBtn {
	color: #000000;
	border: 2px solid var(--orange);
	border-radius: 25px;
	padding: 10px;
	cursor: pointer;
	margin: 0;
	text-align: center;
	box-sizing: border-box;
}

.formBtn.disabled{
    opacity: 0.6;
    background-color: #eaeaea;
    border-color: #cccccc;
    cursor: not-allowed;
    pointer-events: none;
}

.formBtn.primary,
.formBtn.inRow.primary,
.formBtn.inRow.primary-btn,
.primary-btn {
	color: #000000;
	background-color: var(--orange);
}

.formBtn.primary:hover,
.formBtn.primary:focus,
.primary-btn:hover,
.primary-btn:focus {
	background-color: #F68D2E;
	color: revert;
}

.formBtn.inRow,
.formBtn.secondaryBtn,
.secondaryBtn,
.secondary-btn {
	background-color: #ffffff;
}

.formBtn.secondaryBtn:hover,
.formBtn.secondaryBtn:focus,
.secondaryBtn:hover,
.secondaryBtn:focus,
.secondary-btn:hover,
.secondary-btn:focus {
	background-color: #EEEEEE;
	color: revert;
}

.main.filled section.pageHeaderV2 .headerBtns {
	gap: 5px;
}

input.reset-btn{
	border: none;
	font-size: 0.8rem;
	text-decoration: underline;
}

input.reset-btn:hover {
	background: none;
	color: var(--blue);
}

/* ============= Expandable Sections ============= */
.main .sectionBox.collapsableOuter {
	background-color: #f9f9f9;
	/*background-color: #efefef;*/
}

.main .sectionBox.collapsableOuter:has(.collapsableV2.active) {
	background-color: #ffffff;
	/*background-color: #f9f9f9;*/
}


/* ============= Header Bar ============= */
.headerBar{background-color: var(--light); color: var(--black); box-shadow: none;}

.headerBar .btn:not(.noHover):hover, .headerBar .btn:hover :not(.importantNotification) i.blue {color: var(--dark);}
.headerBar .btn:not(.noHover):hover{background-color: var(--midtone);}

/*Page Header*/
.main.filled section.pageHeaderV2 h1 {
	font-size: 36px;
	font-style: normal;
	line-height: normal;
}

.loading{height: 100vh; width: 100vw; left: 0; top: 0; margin: 0}

/*back ground*/
.popUpBox{background-color: var(--white);}
.popUpBox h4{font-size: 16px; margin: 0 0 5px 0;}

/*Nav*/
.main{height: calc(100vh); margin-top: var(--headBarHeight)}
.main.filled{padding-top: 0;}
.main.filled > div,
.main.filled > form
{max-width: 100%; background-color: var(--white);}
.navLeft{
	background-color: #1b3760;color: var(--highlight);
	padding: 0 10px;border-right: 1px solid var(--dark);
	display: flex; flex-direction: column; gap: 8px;
	margin-top: var(--headBarHeight); height: calc(100%);
}
/*.navLeft > .btn { font-weight: bold;}*/
.navLeft > .btn { font-size: 18px;}

.navLeft .childBtn{padding: 10px; box-sizing: border-box; display: none;}
.navLeft .childBtn.active{display: block;}
.navLeft .btn i{margin: 0 15px 0 10px; font-size: 1em;}
.navLeft .childBtn .btn{box-sizing: border-box; padding-left: 30px;}
.navLeft .childBtn .btn i{display: none;}

.navLeft .btn.withChild.active{background-color: var(--midtone); border-radius: var(--menu-border-radius) var(--menu-border-radius)  0 0;}
.navLeft:not(.action) .btn.withChild.active{background-color: unset;}
.navLeft .btn .expand{color: var(--highlight); border-radius: var(--menu-border-radius)}
.navLeft .btn .expand:hover{background-color: var(--midtone); color: var(--dark);}
/* .navLeft .btn .primary{text-transform: uppercase;} */

.navLeft .btn .primary{color: var(--highlight); border-radius: var(--menu-border-radius)}
.navLeft .childBtn .btn{color: var(--dark); border-radius: var(--menu-border-radius)}


.navLeft .btn .primary:hover, .navLeft .btn .primary.active{background-color: var(--midtone); color: var(--dark); transition: background-color 150ms;}
.navLeft:not(.active) .btn .primary:hover, .navLeft:not(.active) .btn .primary.active{ background-color: #ffffff; }

.navLeft .childBtn:hover,
.navLeft .childBtn.active{background-color: var(--light); color: var(--dark); border-radius: 0 0 var(--menu-border-radius) var(--menu-border-radius);}
.navLeft .childBtn .btn:hover,
.navLeft .childBtn .btn.active{background-color: var(--highlight); color: var(--dark); border-radius: 4px;}

.navLeftFooter {
	background-color: #1b3760;
	display: flex; flex-direction: row-reverse; justify-content: space-evenly; padding: 0; position: absolute; bottom: 0; left: 0; width: 100%; height: 60px; align-items: center;}
.navLeftFooter > .btn { height: 60px; width: 60px; border-radius: var(--menu-border-radius); font-size: 16px; display: flex; align-items: center; justify-content: center; color: #ffffff;}
.navLeftFooter > .btn i{margin: 0}
.navLeftFooter > .btn:hover { cursor: pointer; background-color: #e4eef7; color: var(--dark);}


.sectionBox{font-size: 0;}
section.block.long.narrow > div,
section.block.long.narrow.form,
.sectionBox .block.long.narrow > div
{height: unset; padding: 0; margin: 0;}
section.fifth{width: 20%;}

section.block.short{column-gap: 10px; row-gap: 15px; justify-content: flex-start;}
section.block.short .shortBlockBtn {gap: 12px ; width: auto; flex: clamp(200px, 100% ,300px) 0 0; border-radius: 8px;font-size: 1rem; transition: background-color 100ms ease-in, border 100ms ease-in; display: flex;justify-content: flex-start;flex-direction: row;border: solid 1px #ffffff;align-items: center;min-height: 0;padding: 15px 20px;margin: 10px 5px;background-color: #ffffff; color: #273b61; max-width: unset;}
/*section.block.short .shortBlockBtn {gap: 15px; box-sizing: border-box; border-radius: 8px; transition: none; border: 1px solid #ffffff;}*/
section.block.short .shortBlockBtn div{display: flex; flex-direction: column; align-items: flex-start; row-gap: 2px;}
section.block.short .shortBlockBtn div .shortBlockBtn-title{font-weight: 600;text-align: left;}
section.block.short .shortBlockBtn div .shortBlockBtn-subTitle{font-size: 0.8em; text-align: left;}
section.block.short .shortBlockBtn:hover {background-color: var(--light); border: 1px solid var(--dark);}
section.block.short .shortBlockBtn i{font-size: 2em; padding: 0; width: 50px; box-sizing: border-box;}

section.block.long .longBlock.formInput input[type='text'],
section.block.long .longBlock.formInput input[type='number'],
section.block.long .longBlock.formInput input[type='password'],
section.block.long .longBlock.formInput input[type='date'],
section.block.long .longBlock.formInput input[type='time'],
section.block.long .longBlock.formInput input[type='datetime-local'],
section.block.long .longBlock.formInput textarea,
.formRow .popUpBox textarea,
.formRow .popUpBox input:not(.excludeFormPopRow),
.formRow .popUpBox select,
section.block.long .longBlock.formInput select{
	border: 1px solid var(--midtone); padding: 6px 12px; background-color: var(--superUltraLight);
}

section.block.long .longBlock.formInput .searchInputWrapper{display: flex; flex-direction: row; flex-wrap: nowrap; border: 1px solid var(--midtone); padding: 8px 12px; background-color: var(--superUltraLight); border-radius: 5px; box-sizing: border-box; align-items: center; justify-content: center; gap: 6px; margin-top: 5px;}
section.block.long .longBlock.formInput .searchInputWrapper i{font-size: 1em; padding: 0}
section.block.long .longBlock.formInput .searchInputWrapper input[type='text']{border: none; padding: 0; margin: 0; background-color: transparent;}


section.block.long .longBlock.formInput .searchMultiTextWrapper + input[type='text']{ border: none;}
section.block.long .longBlock.formInput div div:has(.searchMultiTextWrapper){ border: 1px solid var(--midtone); padding: 10px; box-sizing: border-box; display: flex; flex-direction: column-reverse; }
section.block.long.hideArrows .longBlock .subject .searchMultiTextWrapper{height: 100px; overflow-y: auto; align-items: flex-start;}
section.block.long.hideArrows .longBlock .subject .searchMultiTextWrapper .searchMultiText{display: flex; row-gap: 10px; flex-wrap: wrap;}
section.block.long.hideArrows .longBlock .subject .searchMultiTextWrapper > i{display: none;}


/*.searchResult.active{top:34px; left: 0; width: 100%;}*/
.searchBarTextField.active {anchor-name: --searchBarTextField;}
.searchResult{position: absolute; margin: 0; top:calc(anchor(bottom) + 7px); left: anchor(left); position-anchor: --searchBarTextField; padding: 0;}
.searchResult:popover-open{display: block;}
/*.searchResult{min-width: 150px;}*/

section.block.long .longBlock.formInput .subject label:not(.formBtn){padding-top: 2px; padding-bottom: 6px; color: var(--dark);}

/*KPIs*/
.main .sectionBox.kpiV3{font-size: 16px;}

/*form table*/
.formRow > div{padding-top: 6px; padding-bottom: 6px;}
.formRow > div,
.formRow.head,
.formRow,
.formRow > div:first-child{border-color: var(--midtone);}
/*.formRow > div:not(div:last-of-type){border-right-width: 0;}*/
.formRow:not(.altColorTextOnly) > div.cellGray, .formRow:not(.altColorTextOnly) > div.cellGray select, .formRow:not(.altColorTextOnly) > div.cellGray input{
	color: var(--black);
	font-style: normal;
}
.formRow.head {
	color: var(--dark);
	/*text-transform: uppercase; */
	font-weight: 300;
}
.formRow.lightGreen, .formRow.lightGreen > div, .formRow.lightGreen > div select, .formRow.lightGreen > div input{background-color: var(--light);}
.formRow.lightGreen span.disabledText{display: none;}

.formRow .popUpBox input:not(.excludeFormPopRow).formBtn {width: fit-content; padding: 10px; margin: 5px; color: var(--light)}

.chatBox .messageBody{height: clamp(200px, 40vh, 250px);}

.emptyTableText{width: 100%;}

.invoiceLinesFooter{display: flex; justify-content: space-between; align-items: flex-start; padding: 10px 0;}
.invoiceItemDesc{
	display: flex; flex-direction: column;

	& span:nth-child(2){font-size: 0.8em}
}

.sectionBox.invoiceLineControls{display: inline-flex; justify-content: flex-start; align-items: flex-start; padding: 10px 0; gap: 10px;}
/*.invoiceTotals section.block.long .longBlock.formInput .subject{flex-direction: row;}*/
.main .sectionBox.invoiceTotals{display: flex; flex-direction: column; row-gap: 8px;}
.invoiceTotals section.block.long .longBlock.formInput{min-height: 0;}
.invoiceTotals section.block.long .longBlock.formInput .subject{display: grid; grid-template-columns: 1fr 1fr; align-items: center;}
.invoiceTotals section.block.long .longBlock.formInput .subject input{margin: 0; order: 1;}
.invoiceTotals section.block.long .longBlock.formInput .subject label{padding: 0;}

.termConditionsBox{max-height: 50vh; overflow-y: auto; border: 1px #aaaaaa solid; padding: 10px; margin-bottom: 10px;}
.termConditionsBox h2{text-align: left; text-decoration: underline;}
.termConditionsBox p{font-size: 16px; text-align: left;}
.termConditionsBoxChoice{display: flex; gap: 15px; font-size: 18px; width: 100%; justify-content: center; align-items: center; padding: 15px 0;}

#getFormSlateDelivery canvas{border: 1px #aaaaaa solid; margin: 20px 0; background-color: #EEEEEE}

.renderPaymentMethod_CreditCardTerminal_success{display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 15px;}
.renderPaymentMethod_CreditCardTerminal_success i{font-size: 100px; color: var(--goodGreen)}
.renderPaymentMethod_CreditCardTerminal_success > span{font-size: 24px; padding: 0;  box-sizing: border-box;}

.collapsableHeader span{gap: 30px;}
.main .sectionBox.collapsableOuter .collapsableHeader span:last-of-type{gap: 10px;}

.invoiceLineItem{display: flex; align-items: center; gap: 15px;}
.invoiceLineItem i:first-child{font-size: 1.5em}
.invoiceLineItem img{ width: 50px; height: 50px;}

.invoiceLineItem .imagesNAPackHolder{display: flex; align-items: center; justify-content: center; background-color: #cccccc; width: 60px; height: 60px; color: #272727; font-size: 0.7em; text-align: center; padding: 10px; box-sizing: border-box; user-select: none;}



.horizontalScrollable {padding-bottom: 0;}



section.block.long .longBlock.formInput input[type='text'],
section.block.long .longBlock.formInput input[type='number'],
section.block.long .longBlock.formInput input[type='password'],
section.block.long .longBlock.formInput input[type='date'],
section.block.long .longBlock.formInput input[type='time'],
section.block.long .longBlock.formInput input[type='datetime-local'], section.block.long .longBlock.formInput textarea, .formRow .popUpBox textarea, .formRow .popUpBox input:not(.excludeFormPopRow), .formRow .popUpBox select, section.block.long .longBlock.formInput select {
	border: 1px solid var(--midtone);
	padding: 8px 12px;
	background-color: var(--superUltraLight);
	border-radius: 5px;
}

.main .loginBox {
	border: 1px solid var(--light);
	border-radius: 5px;
	background-color: var(--ultraLight);
}

.formBtn.inRow {
	margin-top: 10px; margin-left: 2px; margin-right: 2px;
}

.navLeft .btn .primary:hover, .navLeft .btn .primary.active {
	background-color: #e4eef7;
	color: var(--dark);
	transition: background-color 150ms;
}

.navLeft .btn .expand:hover {
	background-color: unset;
	color: var(--midtone);
}

section.block.short .shortBlockBtn:hover {
	background-color: var(--light);
	border-color: var(--light);
	color: var(--black);
}

section { background-color: unset; }
.sectionBox.center{text-align: center;}

.payment-methods {
	margin: 10px 0;
	width: 100%;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
	flex-direction: column;
	gap: 20px;
	justify-items: center;
}

.payment-card {
	display: flex;
	/*align-items: center;*/
	padding: 16px;
	border: 1px solid #E0E0E0;
	border-radius: 10px;
	cursor: pointer;
	position: relative;
	width: clamp(100px, 100%, 420px);
	background-color: #FFFFFF;
}

.payment-card.selected {
	border: 2px solid #FFB068;
}

.card-logo {
	width: 40px;
	height: 28px;
	background-color: #D9D9D9;
	border-radius: 4px;
	margin-right: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.visa-logo {
	background-color: #1A1F71;
	color: white;
	font-weight: bold;
	font-style: italic;
	font-size: 14px;
}

.mastercard-logo {
	background: linear-gradient(90deg, #EB001B 0%, #EB001B 50%, #F79E1B 50%, #F79E1B 100%);
}

.amex-logo {
	background-color: #006FCF;
	color: white;
	font-size: 10px;
	font-weight: bold;
}

.bank-logo {
	background-color: #4CAF50;
	color: white;
	font-size: 10px;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: center;
}

.card-info {
	flex-grow: 1;
	text-align: left;
}

.card-number {
	font-size: 16px;
	font-weight: 500;
}

.card-expiry {
	font-size: 14px;
	color: #737373;
	margin-top: 3px;
}

.delete-button {
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #737373;
	cursor: pointer;
}

.delete-button:hover {
	color: #FF5252;
}

.add-new-card {
	display: flex;
	align-items: center;
	padding: 16px;
	border: 1px dashed #D9D9D9;
	border-radius: 10px;
	cursor: pointer;
	margin-top: 10px;
}

.add-card-icon {
	width: 24px;
	height: 24px;
	background-color: #F5F5F5;
	border-radius: 50%;
	margin-right: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	font-weight: bold;
	color: #737373;
}

.add-card-text {
	font-size: 16px;
	color: #737373;
}

#footerBaseFinal {display: none;}

#lotDetailsTabs2 #formLotSpaces { padding: 10px 0 0 0; }
.collapsableV2 .horizontalScrollable.hsHeader { top: unset; }
.popUpBox .headBtns i.fa-xmark { color: revert; }
#getModalAddAuthorizedUserForm .searchInputWrapper { background-color: var(--superUltraLight); }
#getFormParkingSessionManagement div.blockSizeMin-12 { text-align: left; }

/* Divider line */
span.divider {
	display: inline-block;
	padding: 0 10px;
	color: #ccc;
}

.header.internal{
	display: flex;
	/*justify-content: center; */
	padding: 10px 0 20px;
}
/*Logo */
.logo-container {
	display: flex;
	align-items: center;
}
.logo-container:hover{cursor: pointer;}
.logo-circle-main {
	width: 120px;
	height: 120px;
	background-color: #D9D9D9;
	border-radius: 50%;
	margin: 0 auto 20px;
	padding: 20px;
}
.logo-circle-main img,
.logo-circle img
{
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin-left: 2px;
}

.logo-text-main {
	color: #000;
	text-align: center;
	font-size: 24px;
	font-weight: 400;
	line-height: normal;
	/*text-transform: uppercase;*/
}

.logo-text span {
	font-size: 14px;
	display: block;
}

.logo-circle {
	border-radius: 50%;
	/*background-color: #D9D9D9;*/
	/*padding: 10px;*/
}


.header.centered .logo-container {
	flex-direction: column;
}

.header.centered .logo-circle {
	width: 120px;
	height: 120px;
	margin: 0 auto 20px;
}

/* Smaller logo for flex header */
.header.flex .logo-circle {
	width: 40px;
	height: 40px;
	margin-right: 15px;
}

.internal .logo-text { color: #fff;}
.logo-text {
	color: #000;
	font-size: 24px;
	font-weight: 400;
	line-height: 1;
	/*text-transform: uppercase;*/
}

.header.centered .logo-text {
	text-align: center;
	line-height: normal;
}

.popUpBox.mainEmulate .sectionBox.CollectInvoicePaymentSummary{
	display: flex;
	width: 100%;
	flex-direction: row;
	justify-content: center;
	gap: 10px;
	padding: 0 0 20px 0;
	font-size: 16px;
	text-align: left;

}

/* Mobile Menu Button */
.mobile-menu-btn {
	display: none;
	position: fixed;
	top: 20px;
	right: 20px;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background-color: #333;
	color: white;
	border: none;
	box-shadow: 0 2px 10px rgba(0,0,0,0.3);
	z-index: 1000;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.mobile-menu-btn:hover {
	background-color: #555;
}

.mobile-menu-btn:active {
	transform: scale(0.95);
}

.mobile-menu-btn i {
	font-size: 20px;
}

.tab-content{padding: 0 10px 0 10px;}

/* Show button only on mobile devices */
@media (max-width: 768px) {
	.mobile-menu-btn {
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

/* Event Action Buttons - Mobile Friendly */
.event-buttons-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 15px;
	padding: 10px;
}

.event-action-btn {
	min-height: 80px;
	padding: 15px 20px;
	background-color: var(--white);
	border: 2px solid var(--orange);
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.event-action-btn:hover {
	background-color: rgba(255, 176, 104, 0.1);
	border-color: var(--orange);
	box-shadow: 0 4px 8px rgba(255, 176, 104, 0.25);
	transform: translateY(-2px);
}

.event-action-btn:active {
	transform: translateY(0);
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Message Area Styling */
.messageArea, .paymentArea {
	padding: 12px 16px;
	border-radius: 6px;
	margin: 10px 0;
	font-size: 14px;
	min-height: 40px;
	display: none;
	transition: all 0.3s ease;
	border-left: 4px solid;
}

/* Reader Messages - Default to info blue */
.messageArea {
	background-color: #e3f2fd;
	border-left-color: #2196f3;
	color: #0d47a1;
}

/* Payment Messages - Default with orange accent */
.paymentArea {
	background-color: #fff8f3;
	border-left-color: #FFB068;
	color: #e65100;
}

/* Status-specific colors */
.message-success {
	background-color: #e8f5e9;
	border-left-color: #4caf50;
	color: #1b5e20;
}

.message-error {
	background-color: #ffebee;
	border-left-color: #f44336;
	color: #b71c1c;
}

.message-warning {
	background-color: #fff8e1;
	border-left-color: #ff9800;
	color: #e65100;
}

.message-info {
	background-color: #e3f2fd;
	border-left-color: #2196f3;
	color: #0d47a1;
}

.event-action-btn.capacity-medium {
	border-left: 5px solid #FFA500;
}

.event-action-btn.capacity-high {
	border-left: 5px solid #FF4444;
}

.event-btn-header h4 {
	margin: 0 0 10px 0;
	font-size: 18px;
	font-weight: 600;
	color: var(--primary);
	line-height: 1.3;
}

.event-btn-details {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 14px;
	color: var(--mediumText);
}

.event-btn-details > div {
	display: flex;
	align-items: center;
	gap: 5px;
}

.event-btn-details i {
	font-size: 13px;
	color: var(--lightText);
}

/* Mobile optimizations */
@media (max-width: 768px) {
	.event-buttons-grid {
		grid-template-columns: 1fr;
		gap: 12px;
		padding: 5px;
	}
	
	.event-action-btn {
		min-height: 90px;
		padding: 18px;
	}
	
	.event-btn-header h4 {
		font-size: 20px;
	}
	
	.event-btn-details {
		font-size: 15px;
	}
}

/* Tablet optimizations */
@media (min-width: 769px) and (max-width: 1024px) {
	.event-buttons-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Alternative Price Options - Mobile Friendly */
.price-options-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 15px;
	padding: 15px;
}

.price-option-btn {
	min-height: 70px;
	padding: 15px;
	background-color: var(--white);
	border: 2px solid var(--orange);
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.3s ease;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.price-option-btn:hover {
	background-color: rgba(255, 176, 104, 0.1);
	border-color: var(--orange);
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(255, 176, 104, 0.25);
}

.price-option-btn:active {
	transform: translateY(0);
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.price-option-name {
	font-size: 18px;
	font-weight: 600;
	color: var(--orange);
	margin-bottom: 5px;
}

.price-option-amount {
	font-size: 24px;
	color: var(--primary);
	font-weight: bold;
}

.price-option-description {
	font-size: 14px;
	color: var(--mediumText);
	margin-top: 5px;
	line-height: 1.4;
}

/* Mobile optimizations for price options */
@media (max-width: 768px) {
	.price-options-grid {
		grid-template-columns: 1fr;
		gap: 12px;
		padding: 10px;
	}
	
	.price-option-btn {
		min-height: 80px;
		padding: 18px;
	}
	
	.price-option-name {
		font-size: 20px;
	}
	
	.price-option-amount {
		font-size: 26px;
	}
	
	.price-option-description {
		font-size: 15px;
	}
}

/* Clickable header styles */
.collapsableOuter.clickableHeader .collapsableHeader {
	cursor: pointer;
	user-select: none;
}

.collapsableOuter.clickableHeader .collapsableHeader:hover {
	/*background-color: var(--superUltraLight);*/
	transition: background-color 0.2s ease;
}

.formRow.ultraLight:not(.formRow.red):not(.formRow.yellow):not(.formRow.green) > div,
.formRow > div
{
	&.cellGray.cellColor-yellow{background-color: #fff9c4;font-style: unset;color: #000;}
	&[class*='cellColor'] input{background-color: transparent; text-align: center;}
	&.cellColor-yellow{background-color: #fff9c4;font-style: unset;color: #000;}
}
/* Override for altColorTextOnly rows - ensure yellow highlighting shows */
.formRow.altColorTextOnly > div.cellColor-yellow{background-color: #fff9c4 !important;font-style: unset;color: #000;}