/* ..............................  GLOBAL ........................................ */


input[type="text"],
input[type="password"],
input[type="email"],
input[type="phone"],
input[type="number"],
input[type="date"],
select {
	padding: 0.375rem 0.75rem;
    border-radius: 0.25rem;
}

input[type="text"]:disabled,
input[type="password"]:disabled,
input[type="email"]:disabled,
input[type="phone"]:disabled,
input[type="phone"]:disabled,
input[type="date"]:disabled,
select:disabled {
  	border: 0.1rem solid var(--lightgreycolor);
	background-color: var(--vlightgreycolor); /* Light grey background */
	color: var(--darkgreycolor);            /* Muted text color */
	cursor: not-allowed;       /* Change cursor to indicate it's disabled */
	opacity: 0.65;             /* Optionally reduce opacity */
}

input[type="text"]:enabled,
input[type="password"]:enabled,
input[type="email"]:enabled,
input[type="phone"]:enabled,
input[type="number"]:enabled,
input[type="date"]:enabled,
select:enabled {
   	color: var(--darkgreycolor); 
	background-color: var(--whitecolor);
	border: 0.1rem solid var(--lightgreycolor);
	box-shadow: none;
	cursor:pointer;
}	

input[type="text"]:enabled:not([readonly]):hover, 
input[type="password"]:enabled:not([readonly]):hover,
input[type="email"]:enabled:not([readonly]):hover,
input[type="phone"]:enabled:not([readonly]):hover,
input[type="number"]:enabled:not([readonly]):hover,
input[type="date"]:enabled:not([readonly]):hover,
select:enabled:hover,
input[type="text"]:enabled:not([readonly]):focus,
input[type="password"]:enabled:not([readonly]):focus,
input[type="email"]:enabled:not([readonly]):focus,
input[type="phone"]:enabled:not([readonly]):focus,
input[type="number"]:enabled:not([readonly]):focus,
input[type="date"]:enabled:not([readonly]):focus,
select:enabled:not([readonly]):focus {
    border-color: var(--lightbluecolor); /* Dark blue on focus */
    outline: none;
}

input[readonly]{
	user-select: none; /* Prevent text selection */
}

input[readonly]:hover {
	cursor: not-allowed;
}	

/* Ensure readonly fields do not get focus */
input[readonly]:focus {
    outline: none;
}

/* Prevent highlighting text when selecting */
input[readonly]::selection {
    background: transparent;
	color: inherit;
}

/* placeholder text color for all inputs and textareas */
input[type="text"]::placeholder,
input[type="password"]::placeholder,
input[type="email"]::placeholder,
input[type="phone"]::placeholder,
input[type="number"]::placeholder,
input[type="date"]::placeholder,
textarea::placeholder {
	color: var(--lightgreycolor);
	opacity: 1; /* ensure full strength */
}


/*.......................................CHROME................................. */

/* Hide the arrows for WebKit browsers (Chrome, Safari, etc.) */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Neutralize input autofill styling */
input:-webkit-autofill,
textarea:-webkit-autofill {
	appearance: none !important;
    -webkit-appearance: none !important;
    box-shadow: 0 0 0px 1000px inherit inset !important; /* Neutralize background */
    -webkit-box-shadow: 0 0 0px 1000px inherit inset !important;
    background-color: inherit !important;
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
    transition: background-color 5000s ease-in-out 0s, color 5000s ease-in-out 0s; /* Trick for background reset */
}


/*.......................................FIREFOX................................. */

/* Hide the arrows for Firefox */
input[type=number] {
    -moz-appearance: textfield;
}


/*.......................................FLOAT................................. */

.floatRight{
	float:right;
}

.floatLeft{
	float:left;
}

.floatCenter{
	margin:auto;
}

/*.......................................BLOCK ALIGNMENT................................. */

/* Flex Left Align (Block starts from the left) */
.flex-left {
  display: flex;
  justify-content: flex-start;
}

/* Flex Center Align (Centers block horizontally) */
.flex-center {
  display: flex;
  justify-content: center;
}

/* Flex Right Align (Block moves to the right) */
.flex-right {
  display: flex;
  justify-content: flex-end;
}

/* Full-width Flexbox Block */
.flex-full {
  display: flex;
  width: 100%;
}

/* Vertical Centering (if needed) */
.flex-column {
  display: flex;
  flex-direction: column;
  align-items: center;
}


/*.......................................LIST................................. */
.myCustomList{
	font-weight: 300;
	font-size: 1.3rem;
	line-height:1.8rem;
}

/* Container resets */
.list-group {
	padding-left: 0;
	margin-bottom: 0;
	list-style: none;
}

/* Basic item styling */
.list-group-item {
	position: relative;
	display: block;
	width: 100%;
	padding: 0.5rem 1.25rem;
	margin-bottom: -0.06rem;              /* collapse borders */
	background-color: var(--whitecolor);
	border: 0.06rem solid var(--lightgreycolor);
	color: var(--darkgreycolor);
	text-decoration: none;
	box-sizing: border-box;
}

/* Hoverable/clickable variant */
.list-group-item-action {
	cursor: pointer;
	background-color: transparent;
	border: none;
	text-align: inherit;
}

/* Hover and focus states */
.list-group-item:hover,
.list-group-item-action:hover,
.list-group-item:focus,
.list-group-item-action:focus {
	background-color: var(--vlightgreycolor);
	text-decoration: none;
	outline: none;
}

/* Active item */
.list-group-item.active,
.list-group-item-action.active {
	z-index: 1;
	color: #fff;
	background-color: #007bff;
	border-color: #007bff;
}

/* Disabled item */
.list-group-item.disabled,
.list-group-item-action.disabled {
	color: #6c757d;
	pointer-events: none;
	background-color: #e9ecef;
}


/*.......................................FORMS................................. */

.custom-form{											/* form width */
	position:relative;
	width:100%;
	background-color: var(--whitecolor); /*var(--softwhitecolor); */
}

.custom-input-width{							/* input width */
	width:100%;
	max-width:40rem;
	box-sizing: border-box; /* Ensure padding doesn't break layout */
}

.form-group {
	margin-top: 1.5rem;
	max-width: 40rem;
}

.form-group label {
	display: block;
	margin-bottom: 0.5rem;
	font-size: clamp(1rem, 1.2vw, 1.2rem);
}

.form-group input,
.form-group select,
.form-group textarea {
	position:relative;
	padding: 0 1.0rem;
	box-sizing: border-box;
	font-size: clamp(1rem, 1.2vw, 1.2rem);
}

.form-group input {
	height: 2.2rem;
}	

.form-group .code-input-group {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 3rem;
}

.form-group .code-input {
  width: 3rem;
  height: 3rem;
  font-size: 1.5rem;
  text-align: center;
  border: 0.1rem solid #ccc;
  border-radius: 6px;
}

.form-group .code-input:focus {
  outline: 0.15rem solid var(--lightbluecolor);
}


/*......................................ICONS.................................... */

.custom-icon {
	display: inline-block;
	padding-top:0.5rem;
}

.custom-icon img {
	width:1.5rem;
	height:1.5rem;
}

.custom-icon img:hover {
	cursor:pointer;
}

/*...................................BUTTONS................................. */

.myButton{
	display:flex;
	justify-content: center;
    align-items: center;
	cursor: pointer;
	font-family: Rubik-Regular, sans-serif;
	font-size: clamp(1rem, 1.5vw, 1.2rem);
	border-radius:1.35rem;
    border: none;
	box-shadow: 0 0.5rem 1rem 0rem rgba(0, 0, 0, 0.2);
	padding: 0 2rem; 
	transition: background-color 0.3s ease;
}
 
.myPrimaryButton{
	font-weight: bold;
	height:2.7rem;
	width:100%;
	max-width:40rem;
	box-sizing: border-box; /* Ensure padding doesn't break layout */
	border:none;
	background-color: var(--darkbluecolor);
	color:var(--whitecolor);
	box-shadow: 0 0.5rem 1rem 0rem rgba(0, 0, 0, 0.2);
}

.myPrimaryButton:hover {
	background-color: var(--darkbluehovercolor);
}	

.mySecondaryButton{
	font-weight: bold;
	height:2.7rem;
	width:100%;
	max-width:40rem;
	box-sizing: border-box; /* Ensure padding doesn't break layout */
	border:none;
	background-color: var(--lightbluecolor);
	color:var(--whitecolor);
	box-shadow: 0 0.5rem 1rem 0rem rgba(0, 0, 0, 0.2);
}

.mySecondaryButton:hover {
	background-color: var(--lightbluehovercolor);
}	

.cookie-button{
	color: 	var(--whitecolor);	
	background-color: transparent;
	border: 0.10rem solid var(--whitecolor);
	margin-top: 1.0rem;
	height:2.0rem;
	width:10rem;
}

.cookie-button:hover {
	background-color: var(--whitecolor);
	color: var(--darkbluecolor);
}

.myAdminButton{
	font-weight: regular;
	height:2.0rem;
	width:12rem;
	border:none;
	background-color: var(--lightgreycolor);
	color:var(--blackcolor);
	box-shadow: 0 0.125rem 0.25rem 0rem rgba(0, 0, 0, 0.1);
}

.myAdminButton:hover {
	background-color: var(--lightgreyhovercolor);
}	


/*...................................RADIO BUTTONS................................. */

.radio-container {
  display: flex;
  flex-direction: column; /* Stack items vertically */
  gap: 0.25rem; /* Vertical spacing between buttons */
}

.radio-label {
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	gap: 2.0rem; /* Adds a gap between the radio button and text */
}

.radio-text {
    color: var(--darkgreycolor);
    font-size: 1.2rem;
	font-family: Rubik-Light, sans-serif;
	font-weight: 300;  /* over-ride label font weight */
}

/*...................................CHECK BOXES................................. */

.checkbox-container {
	display: flex;
	align-items: flex-start;
	gap: 1.0rem;	/* Spacing between the checkbox and text */
	width: auto !important; /* Prevents container from stretching */
	max-width: fit-content !important; /* Ensures it only takes necessary space */
	
}	

.checkbox-container input[type="checkbox"] {
	-webkit-appearance: none; /* Remove default styling in WebKit browsers */
    -moz-appearance: none;    /* Remove default styling in Mozilla browsers */
    appearance: none;         /* Standard property */
	background-color: var(--whitecolor); 
	border: 0.1rem solid var(--darkgreycolor);
	border-radius: 0.1rem; 
    cursor: pointer;
	width: 0.9rem; 
    height: 0.9rem; 
	transition: background-color 0.2s ease, border-color 0.2s ease; 
	position: relative; 
}
 
.checkbox-container input[type="checkbox"]:hover {
    background-color: var(--darkbluecolor); /* Background on hover */
}

.checkbox-container input[type="checkbox"]:checked {
    background-color: var(--darkbluecolor); /* Background color when checked */
}

.checkbox-container input[type="checkbox"]:checked::after {
    content: '✔'; /* Tick symbol */
	color: var(--whitecolor);
    font-size: 0.5rem;
	position: absolute; /* Position relative to the checkbox */
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust for perfect centering */
} 

.checkbox-container .checkbox-text {
    color: var(--darkgreycolor);
    font-size: clamp(1rem, 1.1vw, 1.2rem);
	font-family: Rubik-Light, sans-serif;
	flex: 1; /* Allow the text to take up remaining space */
	word-break: break-word; /* Prevent long text from breaking layout */
	align-items: center; /* Vertically centers the text */
	text-decoration: none;  
}

.checkbox-container .checkbox-text a{
	font-size: inherit;
	color: inherit;
	text-decoration: underline;
}

.checkbox-container .checkbox-text a:hover{
	text-decoration: none;
}	
	
	
/*...................................DROP DOWNS................................... */

/* Dropdown Container */
.dropdown-container {
    width: 100%;
	max-width: 20rem;
	Position: relative;
	height: 2.5rem;
}
    
/* Custom Styled Dropdown */
.custom-dropdown {
    width: 100%;
	height: 100%;
	appearance: none;
	padding-right: 2.5rem; /* Leave space for the arrow */
	font-size: 1.2rem;
	color: var(--lightgreycolor);
}

/* ensure your real options in the dropdown list are dark */
.custom-dropdown option {
	color: var(--darkgreycolor);
}

/* keep the placeholder in the open list light (until focus) */
.custom-dropdown option[value=""] {
	color: var(--lightgreycolor);
}

/* Placeholder styling  */
.custom-dropdown:invalid {
    color: var(--lightgreycolor);     
}

/* Selected option styling */
.custom-dropdown:valid {
    color: var(--darkgreycolor);        
}

/* when the user clicks/tabs in, highlight the border & force dark text */
.custom-dropdown:focus {
   color: var(--darkgreycolor);
}

/* while open, make even the placeholder option dark in the list */
.custom-dropdown:focus option[value=""] {
	color: var(--darkgreycolor);
}

/* style the arrow on focus */
.dropdown-container:focus-within .dropdown-arrow {
	color: var(--darkgreycolor);
}

.dropdown-arrow {
  position: absolute;
  top: 50%;
  right: 1.0rem;
  transform: translateY(-50%);
  font-size: 1.0rem;
  color: var(--lightgreycolor);
  opacity: 0.7;
  pointer-events: none;
}


/*...................................DATE........................................ */

/* 1) Generic placeholder styling on the <input> itself */
input[type="date"]:invalid {
	/* greyed-out until the user picks a date */
	color: var(--lightgreycolor);
}

input[type="date"]:valid {
	/* normal text once a date is selected */
	color: var(--darkgreycolor);
}

/*WebKit’s date-editor pseudo-elements — when there’s no value, they’re “invalid”: */
input[type="date"]::-webkit-datetime-edit-year-field:invalid,
input[type="date"]::-webkit-datetime-edit-month-field:invalid,
input[type="date"]::-webkit-datetime-edit-day-field:invalid {
	color: var(--lightgreycolor);
}

/* (Optionally) make sure normal typed dates use your regular text color */
input[type="date"]:valid::-webkit-datetime-edit-year-field,
input[type="date"]:valid::-webkit-datetime-edit-month-field,
input[type="date"]:valid::-webkit-datetime-edit-day-field {
	color: var(--darkgreycolor);
}


/*...................................PAGE SPACERS................................. */

.myPageSpacer25 {
	padding-top:2.5rem;
}

.myPageSpacer5 {
	padding-top:5rem;
}

.myPageSpacer75 {
	padding-top:7.5rem;
}

.myPageSpacer10 {
	padding-top:10rem;
}

.myPageSpacer20 {
	padding-top:20rem;
}

/*...................................IMAGES................................. */
.image-row {
    width:100%;
	display: flex;
    justify-content: space-between; /* Options: space-between, space-around, or space-evenly */
    align-items: center;
	/*gap: 3rem; */
}
.image-row img {
    max-width: 100%; /* Prevents the image from exceeding the container's width */
	height:auto;
	flex-shrink: 1;  /* Allow images to shrink if necessary */
	min-width: 0;    /* Override the default min-width */
}

.image-border {
	border: 0.1rem solid var(--lightgreycolor);
	border-radius: 0.25rem;
}	

/*...................................VIDEOS................................. */
/* Custom 16:9 responsive container using a custom class name */
.aspect-16-9 {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding-bottom: 56.25%; /* (9 / 16 * 100) = 56.25% to maintain a 16:9 aspect ratio */
  overflow: hidden;
}

/* Ensure any child element fills the container */
.aspect-16-9 > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}


/*...................................DISPLAY................................. */

.hidden {
    display: none !important;  /*!important over-rides conflicting styles */
}

.myInlineBlock {
	display:inline-block;
}

.myBlock {
	display:block;
}


/*...................................BOOTSTRAP REPLICATION................................. */

/* Padding utilities */
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 1rem; }
.p-4 { padding: 1.5rem; }
.p-5 { padding: 3rem; }


/* Margin utilities */
.m-1 { margin: 0.25rem; }
.m-2 { margin: 0.5rem; }
.m-3 { margin: 1rem; }
.m-4 { margin: 1.5rem; }
.m-5 { margin: 3rem; }

/* Width utilities (proportional: 1 means 20%, 5 means 100%) */
.w-20 { width: 20%; }
.w-25 { width: 25%; }
.w-40 { width: 40%; }
.w-50 { width: 50%; }
.w-60 { width: 60%; }
.w-80 { width: 80%; }
.w-100 { width: 100%; }

/* Padding directional utilities */
/* 'ps' = padding-start (logical for left in LTR languages) */
.ps-1 { padding-inline-start: 0.25rem; }
.ps-2 { padding-inline-start: 0.5rem; }
.ps-3 { padding-inline-start: 1rem; }
.ps-4 { padding-inline-start: 1.5rem; }
.ps-5 { padding-inline-start: 3rem; }

/* 'pt' = padding-top */
.pt-1 { padding-top: 0.25rem; }
.pt-2 { padding-top: 0.5rem; }
.pt-3 { padding-top: 1rem; }
.pt-4 { padding-top: 1.5rem; }
.pt-5 { padding-top: 3rem; }

/* 'pb' = padding-bottom */
.pb-1 { padding-bottom: 0.25rem; }
.pb-2 { padding-bottom: 0.5rem; }
.pb-3 { padding-bottom: 1rem; }
.pb-4 { padding-bottom: 1.5rem; }
.pb-5 { padding-bottom: 3rem; }

/* 'pe' = padding-end (logical for right in LTR languages) */
.pe-1 { padding-inline-end: 0.25rem; }
.pe-2 { padding-inline-end: 0.5rem; }
.pe-3 { padding-inline-end: 1rem; }
.pe-4 { padding-inline-end: 1.5rem; }
.pe-5 { padding-inline-end: 3rem; }

/* Margin directional utilities */
/* 'mt' = margin-top */
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mt-5 { margin-top: 3rem; }

/* 'mb' = margin-bottom */
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mb-5 { margin-bottom: 3rem; }

/* 'ms' = margin-start (logical for left in LTR languages) */
.ms-1 { margin-inline-start: 0.25rem; }
.ms-2 { margin-inline-start: 0.5rem; }
.ms-3 { margin-inline-start: 1rem; }
.ms-4 { margin-inline-start: 1.5rem; }
.ms-5 { margin-inline-start: 3rem; }

/* 'me' = margin-end (logical for right in LTR languages) */
.me-1 { margin-inline-end: 0.25rem; }
.me-2 { margin-inline-end: 0.5rem; }
.me-3 { margin-inline-end: 1rem; }
.me-4 { margin-inline-end: 1.5rem; }
.me-5 { margin-inline-end: 3rem; }

/*...................................LOADER SPINNER................................. */

/* loader overlay */
.loader {
	position: fixed;
	inset: 0;                        /* shorthand for top/right/bottom/left = 0 */
	background: rgba(255,255,255,0.8);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
}

/* spinner circle */
.spinner {
	width: 1.8rem;
	height: 1.8rem;
	border: 0.2rem solid var(--lightbluecolor);
	border-top-color: var(--darkbluecolor);
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

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