@charset "utf-8";


/* CSS Document  version 8 changes to mobile styling as google ads were interfering with layout */
.blue-gold{ --fa-primary-color: blue ; 	--fa-secondary-color: gold;}
.red-gold{  --fa-primary-color: red; --fa-secondary-color: gold;}
.red-blue{	--fa-primary-color: red; --fa-secondary-color: blue;}

.center-content{
  display: flex;
  flex-direction: column;
  /* justify-content: center; /* Centers the content Vertically  (Main Axis) ie evenly space above and below */
  align-items: center;     /* Centers Horizontally (Cross Axis)  ie evenly space left and right*/
  height: 100vh;           /* Essential: The container needs a defined height for justify content to be effective */
}
/* 1. The Outer Wrapper: Handles the "Pop" and "Lift" */
.bims {
    position: relative;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* Bouncy pop */
    z-index: 1; /* Default stack order */
}

/* 2. The Inner Link: Handles masking the CTA badge */
.bims a {
    display: block;
    position: relative;
    overflow: hidden; /* Clips the badge when it slides down */
    border-radius: 4px; /* Optional rounded corners */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Subtle resting shadow */
    transition: box-shadow 0.3s ease;
}

/* 3. The Image */
.bims img {
    display: block;
    width: 100%;
    height: auto;
    /* Optional: Slight internal zoom adds depth to the pop */
    transition: transform 0.5s ease;
}

/* 4. The Badge (Hidden by default) */
.hover-overlay {
    position: absolute;

    bottom: 0;
    right: 0;


    background-color: #ff6961; /* Pastel Red */
    color: white;

    padding: 5px 12px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-top-left-radius: 8px; /* Tab shape */

    /* Start hidden below the bottom edge */
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);

    pointer-events: none;
    z-index: 5;
}

/* --- HOVER STATES --- */

/* Step A: Lift the whole card */
.bims:hover {
    z-index: 10; /* Bring to front */
    transform: translateY(-5px) scale(1.02); /* Move Up + Grow */
}

/* Step B: Deepen the shadow for 3D effect */
.bims:hover a {
    box-shadow: 0 15px 30px rgba(0,0,0,0.25);
}

/* Step C: Slide the badge up */
.bims:hover .hover-overlay {
    transform: translateY(0);
}

/* Step D: Slight internal image zoom (optional, remove if too much motion) */
.bims:hover img {
    transform: scale(1.05);
}
body {
	background-color: WhiteSmoke;
	background-image: linear-gradient(WhiteSmoke, White);
	width:97vw;
   
	font-size: 18px;
	font-family:  'DM Sans', 'Segoe UI', sans-serif;
	color: #201f1f;
	/*overflow-x: hidden */;
	}

/*** main styles ***/
h1, h2,h3,h4 {font-family: "Open Sans", sans-serif; margin:.25em 0 0 .25em; }
h1{font-size: 1.5em;} h2{font-size: 1em;} h3{font-size: 1em;}p{font-size: 1em;}

img {border: none;}

a,
a:visited,
a:hover {
    color: inherit;
}

.big-a{
    font-size: 2em;
}
tr:nth-child(even) {background-color: lightblue;}
tr p{margin: 2px 1px;}


/* flexBox styles */

#page-container{
	position: relative;
	min-height: 100vh;
	}

#outer{
   background-color: WhiteSmoke;
   position: relative;

   z-index: 1;
	/* padding-bottom: 2.5rem; */

}

#cookie {
	z-index:9999;
	order:0;
	vertical-align: middle;
	margin-bottom:5px; padding: 5px;
	background: rgba(245,245,245, 0.9);
}
#cookie p{font-size:1.2em;}

#cookie-container {
    position: fixed;
    z-index: 9999;
    box-shadow: var(--bs-heavy);
    background: rgb(245, 245, 245);
    padding: 2rem;
    border-radius: 10px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(1);
    opacity: 1; /* The starting state: fully visible */
    transition: transform 1.4s ease-out, opacity 1.4s ease-out;
}

/* ✅ THE FIX: Add this new rule for the final state */
#cookie-container.fade-out {
    opacity: 0; /* The end state: fully transparent */
    transform: translate(-50%, -50%) scale(0);
}

button.link-underline,
a.link-underline {
    text-shadow: var(--zinc-50);
}

button.link-underline,
a.link-underline::before {
    background: var(--zinc-850);
}

button.text-underline,
a.text-underline {
    text-decoration: underline;
}


button.text-underline:hover,
a.text-underline:hover {
    font-weight: bold;
}
#main>article,
#main>nav,
#main>aside,
#head2  {
    
	margin: 0;
	padding: 0 5px 2px 5px;
	vertical-align: top;
	/* border: thin solid #F00;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	border-radius: 7px;

	 */
}
#main>article {
    position: relative;
}

@media screen and (min-width: 1200px) {
    padding: 20px 40px;
}
.mr3{margin: 0 3em 1em 0 !important;
top: -30px !important;}
.tar{left:45%; padding: 0 1em 1em;}
.dtr{right:45%; padding: 0 1em 1em; }

.faw{--fa-primary-color: white;
	--fa-secondary-color: whitesmoke;}
.farb{
	--fa-primary-color: green;
	--fa-secondary-color: blue;
	--fa-secondary-opacity: 0.75
	}
.dgrey{color: darkslategrey;}
.mr-1em{margin-right: 1em;}

.fr-sa, .fr-sb, .fr-se, .fr-fs{display:flex;flex-direction:row;align-items: center;}

.fr-sa{justify-content:space-around;}
.fr-sb{justify-content:space-between;}
.fr-se{justify-content:space-evenly;}
.fr-fs{justify-content:flex-start;}

.fr-sb .p{ padding: .5em; font-size: .85em}

.fr-sb.odd {background-color: GhostWhite;} /* Light grey */
.fr-sb.even { background-color: Gainsboro;}

.p1 {
    padding: 1rem;
}

.larger-checkbox input[type="checkbox"] {
    transform: scale(2.25); /* Makes the checkbox itself 2.25 times larger */
    margin: 0 .5em 0 0.25em;
    vertical-align: middle; /* Helps align the checkbox with the label text */
}

.larger-checkbox label {
    font-size: 1.5em; /* Makes the label text slightly larger */
    vertical-align: middle; /* Helps align the label text with the checkbox */
}

#head1 {display:flex; order:1;}
#head2 {display:flex; order:3; background-image: linear-gradient(to bottom, #F0FAFF 0%, #CEEAFB 100%);height:30px; margin-bottom:5px;  ; border-top-left-radius:0;  border-top-right-radius:0;	}
#head3 {display:flex; order:2; border: 1px solid #F00; border-bottom: hidden; border-top-left-radius:  7px; border-top-right-radius: 7px;}
#main	 {order:5;}


#left-hangar, #right-hangar {
    position: relative;
    display: flex;
    flex-direction: column;
    width:300px;
    min-width: 300px;
    min-height: 1500px;
    border: thin solid #F00;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	border-radius: 7px;
    gap: 5px;

    z-index: 1;
}

@media screen and (max-width: 769px) {
    #left-hangar {
        width: 100%;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        gap: 5px;
        scroll-snap-type: x mandatory;
        border-radius: 7px;
        height: 229px;
        min-height: 229px;
    }
    #left-hangar a {
        flex-shrink: 0;
        max-width: 769px;
        height: 229px;
        scroll-snap-align: start;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    #left-hangar img {
        height: 231px;
        max-width: calc(100vw - .5rem);
        object-fit: contain;
    }
}
#right-hangar {
    display: none;
}

@media screen and (min-width: 1500px) {
    #right-hangar {
        display: flex;
    }
}
#left-hangar {order:1;}
#right-hangar{order: 6 }

.hangar{
	margin: 0;
	padding: 5px;
	vertical-align: top;
}

aside {display:flex; flex-direction:column; justify-content: flex-start;}

#scriptTime{
	display:flex;
	position:absolute;
	bottom: 10px;
	margin: 0 5px 0 5px;
	text-align: center;
	font-size: .75em;
	}

.lazy {background-image: none;   background-color: #F1F1FA;}

.mlogo {
    margin-left: 75px;
    max-width: 100%;
    pointer-events: none;
    height: 50px;
    width: auto;
}

.no-fouc{display:none !important;}
       
.flexColumn{display: flex;flex-direction: column;} 
.flexRow{display: flex;flex-direction: row; align-content: flex-start; align-items: center;}
.flexRow p{margin: 0 0 0 10px ;}
.container{
      display: flex;
      justify-content:  space-between;
      align-content: space-between;
 }
   
.left, .right, .top, .bottom { color: white; opacity:0.95; 
  }   
.left, .right{	opacity:1;}
.left{padding-left: 10px;}
.right{padding-right: 10px;}
.top{top:25px;}
.mid{top: 50%;}
.bot{top:94%;}

.poc { display: flex; align-items: center;}
a {position: relative;}
a, button { cursor: pointer !important;}

.btn-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.btn-cta button {
    flex: 1;

}

.buttons{
   display: flex;
   justify-content: space-between;
   position:absolute;
   width:100%;
	left:0;
 }
.buttons.top {
    display: flex;
    align-items: center;
  }

  .buttons.top > * {
    margin-left: 10px;
  }

  .buttons.top > *:first-child {
    margin-left: 0;
  }

  .buttons.top > .right-buttons {
    display: flex;
    align-items: center;
    margin-left: auto; /* Push the right buttons to the right edge */
  }

/* 2. The Universal Counter Badge Style */
/*#unread-message-count,*/
/*#cart-item-count,*/
/*#advert-count {*/
/*    position: absolute;*/
/*    color: #003566;*/
/*    font-weight: 700;*/
/*    font-size: 1em; !* Reduced size to make it less 'bold' *!*/
/*    pointer-events: none; !* Clicks go through to the button *!*/
/*}*/

/*#unread-message-count {*/
/*   color: white;*/
/*    border-radius: 50%;*/
/*    transform: translate(-10px, -8px);*/
/*}*/

/*#cart-item-count  {*/
/*    border-radius: 50%;*/
/*    transform: translate(-7px, -6px);*/
/*    text-shadow: 0 1px 2px rgba(0,0,0,0.2); !* Helps readability *!*/
/*}*/

/*#cart-item-count { transform: translate(2px, -9px);  } !* slight adjustment from above transformation *!*/

/*#advert-count {*/
/*       transform: translate(0, 9px);*/
/*}*/
.notification-bubble {
    position: absolute;
    min-width: 30px;
    width: fit-content;
    aspect-ratio: 1;
    border-radius: 100%;
    border: 4px solid rgb(245, 245, 245);
    background: red;
    transform: translate(18px, -15px);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    padding: 2px;
    color: white;
}

/*@media screen and (max-width: 480px) {*/
/*    #unread-message-count,*/
/*    #cart-item-count  {*/
/*        font-size: 12px;*/
/*        transform: translate(-5px, -4px);*/
/*    }*/
/*}*/

.row{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.row input{
	margin:0;
}

.if{position: relative; width:100px;height: 100px;}
.is{position: absolute; top:0;left:0; width :100%; height:100%}



#topHeader .header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

#listingsMenu, #listingsSubMenu{display: flex;
flex-direction: column;}
.pr50{
	margin:7px;
	padding-right: 50px;}

#left , #right, #bottom {   opacity:0.5;}

.fad,
.fas,
.far,
.fak {
    color:#FC5185 ;
}

.fa-window-close {
    color:white;
}
.sidenav {
    height: 100%;
    width: 0; 
    position: fixed;  
    z-index: 1; 
    top: 0;
    left: 0;
    background-color: #CEEAFB; 
    overflow-x: hidden; 
    padding-top: 60px; 
    transition: 0.5s; 
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}
.sidenav a:hover { color: #f1f1f1;}
.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}
.pad5 {padding: 5px;}
.menuItem {font-size: 1.75rem;}
.sidebar{
		display: flex;
		flex-direction: column;
	}

[data-title]{

}
[data-accTitle]:hover:after {
    z-index: 999999999;
  visibility: visible;
  transition: all 0.1s ease 0.6s;
  content: attr(data-title);
  position: relative;
  transform: translateY(-50%);
  padding: 10px;
 color: darkslategray;
  background-color: white;
  border: 2px solid blue;
  border-radius: 8px; /* rounded corners */
  width: 600px;
}

/* Default styles (applied to all popups) */
[data-title]:hover:after {
    z-index: 999999999;
  visibility: visible;
  transition: all 0.1s ease 0.6s;
  content: attr(data-title);
  position: absolute;
  transform: translateY(-50%);
  padding: 10px;
 color: darkslategray;
  background-color: white;
  border: 2px solid blue;
  border-radius: 8px; /* rounded corners */
  width: 600px;

/*    Hidden for now */
    display: none;
}

/* Position the popup to the right */
[data-title][data-position="right"]:hover:after { left: 100%; top: 50% ; z-index: 999999999; }
/* Position the popup to the left */
[data-title][data-position="left"]:hover:after {   right: 100%; left: auto; top:50%; z-index: 999999999;} /* Override the default left value */
/* Position the popup to the top */
[data-title][data-position="top"]:hover:after { bottom: 100%; left: 50%; transform: translateX(-50%); z-index: 999999999;} /* Center horizontally */
/* Position the popup to the bottom */
[data-title][data-position="bottom"]:hover:after { top: 100%; left: 50%; transform: translateX(-50%);  }/* Center horizontally */

[data-title][data-position="right"] svg {
  position: absolute;
  right: 0;
  top: 42%;
  transform: translateY(-50%);
    transform: scaleX(-1);
}

[data-accTitle][data-position="bottom"]:hover:after { top: 100%; left: 50%; transform: translateX(-50%);  }/* Center horizontally */

.hidden {  display: none!important;}

#payment-message {
  color: rgb(105, 115, 134);
  font-size: 16px;
  line-height: 20px;
  padding-top: 12px;
  text-align: center;
}

#payment-element {
  margin-bottom: 24px;
}

/* cta (call to action buttons) */
.cta {
    display: flex;
    gap: 1rem;
}
.cta .btn {
    flex: 1;
}
/* Buttons and links */
button {
/*  background: #5469d4; */
	
 background: transparent;
  font-family: Arial, sans-serif;
  color: white;
  border-radius: 4px;
  border: 0;
  font-size: 16px;
  font-weight: 600;
  display: flex;
    align-items: center;
    justify-content: center;
  transition: all 0.2s ease;
   /* box-shadow: 0px 4px 5.5px 0px rgba(0, 0, 0, 0.07); */
}
button:hover {
	filter: contrast(50%);
}
button:disabled {
  opacity: 0.5;
  cursor: default;
}
.btn {
	display: flex;
    justify-content: center;
    align-items: center;
	font-size: 1.25rem;
	border: none;
	border-radius: 7px;
	padding: 10px 25px 10px 25px;
	margin: 5px 0 5px 0;
	text-align: center;
	text-decoration: none;
    color:whitesmoke;
    background-color: #057fbc;
    gap: 10px;
}
.btn-small {
    font-size: 0.8rem;
    padding: 3px 5px;
}
a.btn:visited {
    color:whitesmoke;
}

.btn1{
	display:flex;
	border: none;
	border-radius: 7px;
	padding: 10px 25px 10px 25px;
	text-align: center;
	text-decoration: none;
	margin: 5px 0 5px 0;
	}
.btn2{
    font-size: .8em;
	border: none;
	border-radius: 7px;
	padding: 10px;
	margin: 3px;
	text-align: center;
	text-decoration: none;
    color:whitesmoke;
    background-color: darkgreen;

}
.btn.btn-primary {
    background: #0863c4;
    color: #f5f5f6;
}
.btn.btn-primary:hover {
    background: #021931;
    color: #f5f5f6;
}

.closeButton {
	color:inherit;
}
em {font-style: normal;}

.submit{
	color: #fff;
	background-color: darkgreen;
	}
/* spinner/processing state, errors */
.spinner, .spinner:before, .spinner:after { border-radius: 50%; }
.spinner {
  color: #ffffff;
  font-size: 22px;
  text-indent: -99999px;
  margin: 0 auto;
  position: relative;
  width: 20px;
  height: 20px;
  box-shadow: inset 0 0 0 2px;
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
.spinner:before, .spinner:after {
	position: absolute;
    content: "";
}
.spinner:before {
  width: 10px;
  height: 20px;
  background: #5469d4;
  border-radius: 20px 0 0 20px;
  top: -0.2px;
  left: -0.2px;
  transform-origin: 10px 10px;
  animation: loading 2s infinite ease 1.5s;
}
.spinner:after {
  width: 10px;
  height: 10px;
  background: #5469d4;
  border-radius: 0 10px 10px 0;
  top: -0.1px;
  left: 10px;
  -webkit-transform-origin: 0 10px;
  transform-origin: 0 10px;
  -webkit-animation: loading 2s infinite ease;
  animation: loading 2s infinite ease;
}

@-webkit-keyframes loading {
  0% {  transform: rotate(0deg); }
  100% { transform: rotate(360deg);}
}
@keyframes loading {
  0%   {transform: rotate(0deg); }
  100% {transform: rotate(360deg);}
}
@media only screen and (max-width: 1450px){ .tar{left:42%; padding: 0 1em 1em;}}
@media only screen and (max-width: 1250px){ .tar{left:37%; padding: 0 1em 1em;}}
@media only screen and (max-width: 1100px){
	/*nav {width:25vw!important;}*/
	#mainArticle{width: 96vw;}
	#rightBims, .leaderboard {display:none;}

	.contactText textarea{width:63vw ;}
	.tar{left:35%; padding: 0 1em 1em;}
	
	}
@media only screen and (max-width: 600px){
	body {width:100vw;
	margin:4px}

	#leftSearch, #main>nav , #head2, #head3  {display:none;}
	#mainArticle{
        width: 100vw;
		margin-left:0;}

	.contactText textarea{width:83vw ;}
	#main{width:100%;}
	
	#modalContent{	width: 95%;}
		#foot {width:95vw;}
	.tar{left:30%; padding: 0 1em 1em;}
}

.slide-down { animation: slideDown 0.5s ease-in-out; }
.slide-up   { animation: slideUp 0.5s ease-in-out;}

@keyframes slideDown {
    from {transform: translateY(0); }
    to   {transform: translateY(100%); }
}
@keyframes slideUp {
    from {transform: translateY(100%); }
    to   {transform: translateY(0); }
}
/* Top Header (AFORS LOGO) */

#topHeader button {
    padding: 10px 0 0 0;
}

/* Menu buttons */


.menu-buttons-container .top-menu-button {
    font-size: 1.5rem;
    border-left: 1px solid rgba(0, 0, 0, 0.15);
    border-right: 1px solid rgba(255, 255, 255, 1);
}
.menu-buttons-container .top-menu-button.first {
    border-left: none;
}
.menu-buttons-container .top-menu-button.last {
    border-right: none;
}
.menu-buttons-container i {
   --fa-primary-color: var(--afors-red);
    --fa-secondary-color: var(--afors-blue);
    --fa-secondary-opacity: 1.0;   /* Ensure stripes are solid for readability */
}

@media screen and (max-width: 480px) {
    .menu-buttons-container .top-menu-button {
        font-size: 1.2rem;
    }
}
@media screen and (min-width: 526px){
    .menu-buttons-container {
        background: none;
    }
    .menu-buttons-container .top-menu-button {
        border: none;
    }
}


.pm-msg i {
    position: relative;
}
.pm-msg-count {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ffffff;
    color: #0b0b0b;
    height: 20px;
    width: 20px;
    border-radius: 15px;
    left: 52%;
    top: 20px;
    z-index: 1;
    box-shadow: var(--bs-light);
    font-size: 12px;
    padding-top: 2px;
}


#online {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

p.smallText { font-size: var(--fs-small); }
p.smallerText { font-size: smaller }
p.danger-text { color: #bf0e0e; }


.page-not-found-container {
 background: linear-gradient(135deg, #e74c3c, #c0392b);
 color: #fff;
 padding: 0.875rem 1rem;
 margin-bottom: 1rem;
 border-radius: 6px;
 box-shadow: 0 2px 8px rgba(231, 76, 60, 0.3);
}

.page-not-found-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

.page-not-found-content > i:first-child {
    font-size: 1.25rem;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.page-not-found-close {
    position: absolute;
    right: 0;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.page-not-found-close:hover {
    background: rgba(255, 255, 255, 0.35);
}

@media (max-width: 600px) {
    .page-not-found {
        flex-wrap: wrap;
        text-align: center;
    }
    .page-not-found span {
        flex: 1 0 100%;
        order: 2;
        margin-top: 0.5rem;
    }
    .page-not-found-close {
        position: static;
        order: 3;
        margin-top: 0.5rem;
    }
}

#glitches {
    text-align: left;             /* 1. Explicit Left Alignment */
    margin-top: 40px;             /* 2. Decent Top Margin */
    margin-left: auto;
    margin-right: auto;
    max-width: 800px;             /* Constrain width for better readability */

    /* 3. Subtle Colour Difference */
    background: rgba(255, 255, 255, 0.08);
    border-left: 4px solid rgba(255, 255, 255, 0.3);
    padding: 20px;
    border-radius: 8px;

    /* Typography */
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
}

#glitches p {
    margin: 0;
}

#glitches br {
    display: block;
    margin-bottom: 8px;
    content: "";
}
.message.security-notice {
    background-color: #f0f7ff; /* Very light blue tint */
    border-left: 5px solid #0056b3; /* Deep Blue high-visibility border */
    padding: 20px;
    margin: 20px 0;
    border-radius: 4px;

    /* Typography for AAA Compliance */
    color: #002d5b; /* Deep Navy - High Contrast */
    font-size: 1rem;
    line-height: 1.6;
    font-weight: 400;
}

.message.security-notice strong {
    color: #004085;
    font-weight: 700;
}

#contact-warning.alert-warning-box {
    background-color: #fff3cd; /* Soft Warning Yellow */
    border: 2px solid #856404; /* Deep Gold Border for structure */
    color: #212529;             /* Near-Black for maximum readability */

    padding: 1.25rem;
    margin-bottom: 1.5rem;
    border-radius: 4px;
    display: flex;
    align-items: flex-start;
    gap: 1rem;

    /* Ensure the box stands out against the accordion background */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#contact-warning.alert-warning-box i {
    color: #856404; /* Match border for harmony */
    font-size: 1.4rem;
    margin-top: 2px;
}

#contact-warning.alert-warning-box strong {
    color: #533f03; /* Darker shade of gold for emphasis */
    font-weight: 700;
}

#contact-warning.alert-warning-box p {
    margin: 0;
    line-height: 1.6;
}

/* Extracted from WebAwesome Native — vars replaced with concrete values */
/* ------------------------------------------------------------------ */
/* QUICK-REFERENCE: values that appear in multiple places              */
/*                                                                     */
/*   Form control height    : 2.5rem  (40px at 16px base)             */
/*   Padding inline         : 0.75rem                                  */
/*   Border radius          : 0.375rem                                 */
/*   Border width           : 1px                                      */
/*   Brand / activated color: #2563eb  (blue — swap to your colour)   */
/*   Transition fast        : 100ms                                    */
/*   Transition normal      : 200ms                                    */
/*   Focus ring             : 3px solid #93c5fd                        */
/* ------------------------------------------------------------------ */

/* #region Details ~~~~~~~~~~~~~~~~~~~~~~~~~ */
details {
    padding: 0;

    background-color: #ffffff;                          /* --wa-color-surface-default */
    border: 1px #e2e8f0 solid;                          /* --wa-panel-border-width / color / style */
    border-radius: 0.5rem;                              /* --wa-panel-border-radius */

    overflow-anchor: none;

    summary {
        display: flex;
        align-items: center;
        justify-content: space-between;

        padding: 0.75rem;                               /* --wa-space-m */

        cursor: pointer;
        user-select: none;
        -webkit-user-select: none;

        > * {
            margin: 0;
        }

        &:focus {
            outline: none;
        }

        &:focus-visible {
            outline: 3px solid #93c5fd;                 /* --wa-focus-ring */
            outline-offset: 2px;                        /* --wa-focus-ring-offset */
        }
    }

    &[open] {
        padding: 0 0.75rem 0.75rem 0.75rem;            /* --wa-space-m */

        summary {
            margin-inline: calc(-1 * 0.75rem);
        }
    }

    @media print {
        background: none;
        border: solid 1px #e2e8f0;                      /* --wa-border-width-s / --wa-color-surface-border */

        summary {
            list-style: none;
        }
    }
}

/* Replace the summary marker */
details summary {
    &::marker,
    &::-webkit-details-marker {
        display: none;
    }

    &::after {
        content: '';
        background-color: #94a3b8;                      /* --wa-color-text-quiet */
        mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg>')
        center no-repeat;
        width: 1rem;
        height: 1rem;
        rotate: 0deg;
    }

    &:dir(rtl)::after {
        rotate: 180deg;
    }
}

details[open] summary::after {
    rotate: 90deg;
}
/* #endregion */

/* #region Form Labels ~~~~~~~~~~~~~~~~~~~~~ */
label {
    display: inline-block;
    position: relative;

    color: #1e293b;                                     /* --wa-form-control-label-color */
    font-weight: 500;                                   /* --wa-form-control-label-font-weight */
    line-height: 1.5;                                   /* --wa-form-control-label-line-height */

    &:has(
        input:not(
            [type='button'],
            [type='checkbox'],
            [type='color'],
            [type='file'],
            [type='hidden'],
            [type='image'],
            [type='radio'],
            [type='reset'],
            [type='submit']
          ),
        textarea,
        select
      ) {
        width: 100%;
    }

    & + :is(input:not([type='checkbox'], [type='radio']), textarea, select),
    & > :is(input:not([type='checkbox'], [type='radio']), textarea, select) {
        /*margin-block-start: 0.5em;*/
    }
}
/* #endregion */

/* #region Fieldsets ~~~~~~~~~~~~~~~~~~~~~~~ */
fieldset {
    padding: 1rem;                                      /* --wa-space-l */
    padding-block-start: calc(1rem - 0.5em);

    border: solid 1px #e2e8f0;                          /* --wa-color-surface-border */
    border-radius: 0.375rem;                            /* --wa-border-radius-m */
}

legend {
    padding: 0;
    padding-inline: 0.25rem;                            /* --wa-space-xs */

    font-weight: 500;                                   /* --wa-form-control-label-font-weight */
}
/* #endregion */

/* #region Buttons ~~~~~~~~~~~~~~~~~~~~~~~~~ */
button,
input[type='button'],
input[type='reset'],
input[type='submit'] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;

    height: 2.5rem;                                     /* --wa-form-control-height */
    padding: 0 0.75rem;                                 /* --wa-form-control-padding-inline */

    color: #ffffff;                                     /* --wa-color-on-loud / neutral-on-loud */
    font-family: inherit;
    font-size: 0.9375rem;                               /* --wa-form-control-value-font-size */
    font-weight: 600;                                   /* --wa-font-weight-action */
    line-height: calc(2.5rem - 1px * 2);
    text-decoration: none;
    vertical-align: middle;
    white-space: nowrap;

    background-color: #1e293b;                          /* --wa-color-fill-loud / neutral-fill-loud */
    border-color: transparent;
    border-style: solid;                                /* --wa-border-style */
    border-width: max(1px, 1px);                        /* --wa-form-control-border-width */
    border-radius: 0.375rem;                            /* --wa-form-control-border-radius */

    transition-property: background, border, box-shadow, color;
    transition-duration: 100ms;                         /* --wa-transition-fast */
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); /* --wa-transition-easing */

    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;

    &.wa-plain {
        color: #1e293b;                                 /* --wa-color-on-quiet / neutral-on-quiet */
        background-color: transparent;
        border-color: transparent;

        &:not(:disabled):hover {
            color: #1e293b;
            background-color: #f1f5f9;                 /* --wa-color-fill-quiet / neutral-fill-quiet */
        }

        &:not(:disabled):active {
            color: #1e293b;
            background-color: color-mix(in oklab, #f1f5f9, black 8%);
        }
    }

    &.wa-outlined {
        color: #1e293b;
        background-color: transparent;
        border-color: #475569;                          /* --wa-color-border-loud / neutral-border-loud */

        &:not(:disabled):hover {
            color: #1e293b;
            background-color: #f1f5f9;
        }

        &:not(:disabled):active {
            color: #1e293b;
            background-color: color-mix(in oklab, #f1f5f9, black 8%);
        }
    }

    &.wa-filled {
        color: #1e293b;                                 /* --wa-color-on-normal / neutral-on-normal */
        background-color: #e2e8f0;                      /* --wa-color-fill-normal / neutral-fill-normal */
        border-color: transparent;

        &:not(:disabled):hover {
            color: #1e293b;
            background-color: color-mix(in oklab, #e2e8f0, white 8%);
        }

        &:not(:disabled):active {
            color: #1e293b;
            background-color: color-mix(in oklab, #e2e8f0, black 8%);
        }

        &.wa-outlined {
            border-color: #94a3b8;                      /* --wa-color-border-normal / neutral-border-normal */
        }
    }

    &.wa-accent {
        color: #ffffff;
        background-color: #1e293b;

        &:not(:disabled):hover {
            background-color: color-mix(in oklab, #1e293b, white 8%);
        }

        &:not(:disabled):active {
            background-color: color-mix(in oklab, #1e293b, black 8%);
        }
    }

    &:focus {
        outline: none;
    }

    &:focus-visible {
        outline: 3px solid #93c5fd;                     /* --wa-focus-ring */
        outline-offset: 2px;                            /* --wa-focus-ring-offset */
    }

    &:is(::-moz-focus-inner) {
        border: 0;
    }

    &:disabled {
        opacity: 0.5;
        cursor: not-allowed;

        * {
            pointer-events: none;
        }
    }

    &.wa-pill {
        border-radius: 9999px;                          /* --wa-border-radius-pill */
    }
}
/* #endregion */

/* #region Checkboxes + Radios ~~~~~~~~~~~~~ */
input[type='checkbox'],
label:has(input[type='checkbox']),
input[type='radio'],
label:has(input[type='radio']) {
    display: inline-flex;

    width: fit-content;

    color: #0f172a;                                     /* --wa-form-control-value-color */
    font-family: inherit;
    font-size: 0.9375rem;                               /* --wa-form-control-value-font-size */
    font-weight: 400;                                   /* --wa-form-control-value-font-weight */
    line-height: 1.5;                                   /* --wa-form-control-value-line-height */

    user-select: none;
    -webkit-user-select: none;

    &,
    + label {
        cursor: pointer;
    }

    &:disabled,
    &:has(:disabled) {
        opacity: 0.5;
        cursor: not-allowed;
    }
}

input[type='checkbox'],
input[type='radio'] {
    appearance: none;

    position: relative;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;

    width: 1.125rem;                                    /* --wa-form-control-toggle-size */
    height: 1.125rem;
    margin: 0;
    margin-inline-end: 0.5em;

    background-color: #ffffff;                          /* --wa-form-control-background-color */
    border-color: #94a3b8;                              /* --wa-form-control-border-color */
    border-style: solid;                                /* --wa-border-style */
    border-width: 1px;                                  /* --wa-form-control-border-width */

    transition:
            background 200ms,                               /* --wa-transition-normal */
            border-color 100ms,                             /* --wa-transition-fast */
            box-shadow 100ms,
            color 100ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

    &:focus-visible {
        outline: 3px solid #93c5fd;
        outline-offset: 2px;
    }
}

/* Checkbox */
input[type='checkbox'] {
    --checked-icon-color: #ffffff;                      /* --wa-color-brand-on-loud */
    --checked-icon-scale: 0.8;

    border-radius: min(
            calc(1.125rem * 0.375),
            0.25rem                                         /* --wa-border-radius-s */
    );

    &:checked,
    &:indeterminate {
        color: var(--checked-icon-color);

        background-color: #2563eb;                      /* --wa-form-control-activated-color */
        border-color: #2563eb;
    }

    &:checked::after,
    &:indeterminate::after {
        position: absolute;

        width: 100%;
        height: 100%;

        content: '';

        background-color: currentColor;

        scale: var(--checked-icon-scale);
    }

    &:checked::after {
        mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>')
        center no-repeat;
    }

    &:indeterminate::after {
        mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M431 256c0 17.7-14.3 32-32 32H49c-17.7 0-32-14.3-32-32s14.3-32 32-32h350c17.7 0 32 14.3 32 32z"/></svg>')
        center no-repeat;
    }
}

/* Radio */
input[type='radio'] {
    --checked-icon-color: #2563eb;                      /* --wa-form-control-activated-color */
    --checked-icon-scale: 0.75;

    color: transparent;

    border-radius: 50%;

    &:checked {
        color: var(--checked-icon-color);

        border-color: #2563eb;
    }

    &:checked::after {
        content: '';

        aspect-ratio: 1;
        width: round(calc(100% * var(--checked-icon-scale)), 1px);

        background-color: currentColor;
        border-radius: 50%;
    }
}
/* #endregion */

/* #region Text Fields + Textareas + Selects */
input:not(
    [type='button'],
    [type='checkbox'],
    [type='color'],
    [type='file'],
    [type='hidden'],
    [type='image'],
    [type='radio'],
    [type='range'],
    [type='reset'],
    [type='submit']
  ), textarea, select {
    width: 100%;
    height: 2.5rem;                                     /* --wa-form-control-height */
    padding: 0 0.75rem;                                 /* --wa-form-control-padding-inline */

    color: #0f172a;                                     /* --wa-form-control-value-color */
    font-size: 0.9375rem;                               /* --wa-form-control-value-size */
    font-family: inherit;
    font-weight: 400;                                   /* --wa-form-control-value-font-weight */
    line-height: 1.5;                                   /* --wa-form-control-value-line-height */
    vertical-align: middle;

    background-color: #ffffff;                          /* --wa-form-control-background-color */
    border-color: #94a3b8;                              /* --wa-form-control-border-color */
    border-style: solid;                                /* --wa-form-control-border-style */
    border-width: 1px;                                  /* --wa-form-control-border-width */
    border-radius: 0.375rem;                            /* --wa-form-control-border-radius */

    transition:
            background-color 200ms,
            border 200ms,
            outline 100ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

    cursor: text;

    &::placeholder {
        color: #94a3b8;                                 /* --wa-form-control-placeholder-color */

        user-select: none;
        -webkit-user-select: none;
    }

    &:focus {
        outline: none;
    }

    &:focus-visible {
        outline: 3px solid #93c5fd;
        outline-offset: 2px;
    }

    &:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    &.wa-outlined {
        background-color: #ffffff;
        border-color: #94a3b8;
    }

    &.wa-filled {
        background-color: #f1f5f9;                     /* --wa-color-neutral-fill-quiet */
        border-color: #f1f5f9;

        &.wa-outlined {
            border-color: #94a3b8;
        }
    }

    &.wa-pill {
        border-radius: 9999px;
    }
}

/* Textarea */
textarea {
    height: auto;
    min-height: 2.5rem;
    padding: calc(0.5rem - ((1lh - 1em) / 2)) 0.75rem; /* --wa-form-control-padding-block */

    line-height: 1.5;                                   /* --wa-line-height-normal */

    resize: vertical;
}

/* Select */
select {
    --icon-caret: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><path fill="rgb(180 180 200)" d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>');

    appearance: none;

    position: relative;

    min-width: 0;
    overflow: hidden;

    background-image: var(--icon-caret), var(--icon-caret);
    background-repeat: no-repeat;
    background-position: center right 0.75rem;          /* --wa-form-control-padding-inline */
    background-blend-mode: hue, difference;

    cursor: pointer;
}
/* #endregion */

/* #region Color Pickers ~~~~~~~~~~~~~~~~~~~ */
input[type='color'] {
    display: block;

    block-size: 2.5rem;                                 /* --wa-form-control-height */
    inline-size: 2.5rem;
    padding: calc(1px * 2);                             /* --wa-form-control-border-width */

    font-size: 1em;

    background: transparent;
    border: 1px solid #94a3b8;
    border-radius: 0.375rem;

    cursor: pointer;
    forced-color-adjust: none;

    &::-webkit-color-swatch-wrapper {
        padding: 0;
        border-radius: inherit;
    }

    &::-webkit-color-swatch {
        border: none;
        border-radius: calc(0.375rem - 1px * 3);
    }

    &::-moz-color-swatch {
        border: none;
        border-radius: calc(0.375rem - 1px * 3);
    }

    &:focus-visible {
        outline: 3px solid #93c5fd;
        outline-offset: 2px;
    }
}
/* #endregion */

/* #region Sliders ~~~~~~~~~~~~~~~~~~~~~~~~~ */
input[type='range'] {
    --thumb-width: 1.4em;
    --thumb-height: 1.4em;
    --track-size: 0.5em;

    -webkit-appearance: none;

    display: flex;
    flex-direction: column;
    position: relative;

    width: 100%;
    height: var(--track-size);
    margin: 0;

    font-size: inherit;
    line-height: 2.5rem;                                /* --wa-form-control-height */
    vertical-align: middle;

    background-color: #e2e8f0;                          /* --wa-color-neutral-fill-normal */
    border-radius: calc(var(--track-size) / 2);

    &::-webkit-slider-runnable-track {
        width: 100%;
        height: var(--track-size);

        border: none;
        border-radius: 999px;
    }

    &::-webkit-slider-thumb {
        -webkit-appearance: none;

        width: var(--thumb-width);
        height: var(--thumb-height);
        margin-top: calc(var(--thumb-height) / -2 + var(--track-size) / 2);

        background-color: #2563eb;                      /* --wa-form-control-activated-color */
        border: solid 0.125em #ffffff;                  /* --wa-color-surface-default */
        border-radius: 50%;

        transition-property: background-color, border-color, box-shadow, color;
        transition-duration: 200ms;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }

    &:enabled {
        &:focus-visible::-webkit-slider-thumb {
            outline: 3px solid #93c5fd;
            outline-offset: 2px;
        }

        &::-webkit-slider-thumb {
            cursor: pointer;
        }

        &::-webkit-slider-thumb:active {
            cursor: grabbing;
        }
    }

    &::-moz-focus-outer {
        border: 0;
    }

    &::-moz-range-progress {
        height: var(--track-size);

        background-color: #e2e8f0;
        border-radius: 3px;
    }

    &::-moz-range-track {
        width: 100%;
        height: var(--track-size);

        background-color: #e2e8f0;
        border: none;
        border-radius: 999px;
    }

    &::-moz-range-thumb {
        width: var(--thumb-width);
        height: var(--thumb-height);

        background-color: #2563eb;
        border: solid 0.125em #ffffff;
        border-radius: 50%;

        transition-property: background-color, border-color, box-shadow, color;
        transition-duration: 200ms;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }

    &:enabled {
        &:focus-visible::-moz-range-thumb {
            outline: 3px solid #93c5fd;
            outline-offset: 2px;
        }

        &::-moz-range-thumb {
            cursor: pointer;
        }

        &::-moz-range-thumb:active {
            cursor: grabbing;
        }
    }
}

label > input[type='range'] {
    margin-block-start: 1em;
}

input[type='range']:focus {
    outline: none;
}

input[type='range']:disabled {
    opacity: 0.5;

    cursor: not-allowed;

    &::-webkit-slider-thumb {
        cursor: not-allowed;
    }

    &::-moz-range-thumb {
        cursor: not-allowed;
    }
}
/* #endregion */