/* colours */
:root{
  --primary: #FFE9D2;
  --secondary: #004978;
  --title: #FF8816;
}
/*____________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________*/
/* Reset default body margin and overflow */
body, html {
  margin: 0; /* Remove default margins */
  padding: 0; /* Remove default padding */
  height: 100%; /* Ensures the body covers the full height of the viewport */
  overflow: hidden; /* Prevents scrolling */


  display: flex;
  flex-direction: column;
}

/* Main content container */
main {
  /* height: calc(100% - 100px); Adjusts height to leave space for the nav bar */
  overflow: auto; /* If needed, content inside the main area can scroll */
}
/*____________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________*/

/* NAVIGATION TOP*/

/* layout styles */
nav {
  background: var(--primary); /* Or use grey lighten-4 if desired */
  border-bottom: 1px solid lightgray;
  /* border-bottom: 10px solid var(--secondary); */
}
#top-nav .nav-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height:auto;
}
nav a {
  text-decoration: none;
  display: flex;
  align-items:center;
  gap: 8px;
}

nav a img {
  height: 24px;
}
nav a span {
  font-weight: 520;
  font-size: 20px;
  color: #004978;
}

nav .icon-container.random {
  display: flex;
  align-items: center;
  gap: 8vw;
  color: #004978;
}

nav .icon-container.random .material-symbols-outlined {
  font-size: 30px; /*Size of the notification and settings icon*/
  line-height: 1;
  cursor: pointer; /* Add cursor pointer for better user experience */
  font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48; /*Size of the notification and settings icon*/
}

nav .icon-container.random1 {
  display: flex;
  align-items: center;
  gap: 10vw;
  color: #004978;
}

nav .icon-container.random1 .material-symbols-outlined {
  font-size: 30px; /*Size of the notification and settings icon*/
  line-height: 1;
  cursor: pointer; /* Add cursor pointer for better user experience */
  font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48; /*Size of the notification and settings icon*/
}


/*___________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________*/

/* Edit bar */

@import url('https://fonts.googleapis.com/css2?family=Material+Icons&display=swap');

/* General button styling */
.filled-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  margin: 5vw 5vw 0vw 5vw; /* Top Right Bottom Left */
  background-color:#004978;/* Primary color */
  color: #ffffff; /* Text color */
  font-size: 15px;
  font-weight: 500;
  border-radius: 20px; /* Adjust for rounded corners */
  /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); Elevation effect */
  cursor: pointer;
  /* border: none; */
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.filled-button:hover {
  background-color: #3700b3; /* Hover color */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.filled-button:active {
  background-color: #30009c; /* Active state */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.filled-button .icon {
  font-family: 'Material Icons';
  font-size: 20px;
  line-height: 1;
}

/* Optional: Adjust spacing for slanted "i" look */
.filled-button .icon {
  transform: rotate(-10deg); /* Tilt the icon slightly */
  display: inline-block;
}

/* Optional: Disable button */
.filled-button.disabled {
  background-color: #e0e0e0;
  color: #9e9e9e;
  cursor: not-allowed;
}

/*____________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________*/

/* CARDS CARDS CARDS CARDS CARDS CARDS CARDS CARDS CARDS CARDS CARDS CARDS CARDS CARDS CARDS CARDS CARDS CARDS CARDS CARDS CARDS CARDS CARDS CARDS CARDS CARDS CARDS CARDS CARDS CARDS CARDS CARDS CARDS CARDS CARDS CARDS CARDS CARDS CARDS CARDS CARDS  */
.app-container {
  display: flex;
  flex-direction: column;
  align-items: center;

  flex-grow:1;/* Takes up remaining space */
  margin: 5vw auto 0vw auto; /* Top Right Bottom Left */
  width: 90vw;/* Needed for auto to work */
}

.card-container {
  /* flex: 1; */
  display: none;
  flex-direction: column;
  /* align-items: center; */
  /* justify-content: center; */
  /* max-width: 100%; */
  /* word-wrap: break-word; */
  /* width: 80%; */
  width: 100%;
  height: 100%;
  border-radius: 4vw;
  background-color: #fbe3e8;

}
.text-content-container {
  margin: 5vw 5vw 0vw 5vw; /* Top Right Bottom Left */
}

.card-heading {
  margin: 0vw 0vw;
  font-size: 18px;
  font-weight:520;
}

.card-text {
  margin: 0.5vw 0;
  font-size: 14px;
  font-weight:470;
}
.map-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  flex-grow:1;/* Takes up remaining space */
  margin: 2.5vw 5vw 5vw 5vw; /* Top Right Bottom Left */

}
#map {
  height: 100%;
  width: 100%;
   border: 1px solid #fbe3e8;
  border-radius: 4vw;
}


/*____________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________*/

/* Like-dislike icons */
.action-row {
  /* height: 10vh; Adjust this as needed */
  /* position: fixed; Keep it in the viewport */
  /* bottom: 85px; Adjust to sit just above the bottom navigation bar */
  /* left: 0; */
  width: 100%; /* Stretch across the screen */
  display: none;
  justify-content: center; /* Center the icons horizontally */
  align-items: center;
  /* pointer-events: none; Prevent accidental interaction with this row */
  margin: 5vw auto; /* 5vw top & bottom, auto for left & right (centers the div) */
}

.like-dislike-icons {
  display: flex;
  gap: 50px; /* Space between icons */
  align-items: center; /*This center the icons vertically within the parent rectangle*/
}

.icon-circle {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%; /* Makes it a circle */
  background-color: #f5f5f5;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  pointer-events: auto; /* Ensure the icons are clickable */
  transition: all 0.2s ease; /* Smooth transition */
}

.icon-circle.like,
.icon-circle.dislike {
    width: 70px; /* Larger diameter */
    height: 70px;
}

.icon-circle.undo {
    width: 56px; /* Smaller diameter */
    height: 56px;
}
.icon-circle.like .material-icons,
.icon-circle.dislike .material-icons {
    font-size: 36px; /* Icon size */
}

.icon-circle.undo .material-icons {
    font-size: 30px; /* Icon size */
}


.icon-circle .material-icons {
  /* font-size: 30px;  */
  color: #004978;
  cursor: pointer;
}

.waves-effect.waves-light::after,
.waves-effect.waves-dark::after {
    opacity: 0.4; /* Adjust this value for better visibility */
}

.icon-circle:active {
  transform: scale(0.95); /* Slightly shrink the button */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Reduce shadow depth */
}

/*____________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________*/


/* Bottom-most Navigation bar styles */
.custom-nav {
  /* position: fixed; Keeps the nav bar fixed on the screen */
  bottom: 0; /* Positions it at the bottom */
  left: 0; /* Ensures it starts at the left edge of the screen */
  width: 100%; /* Makes it span the entire width of the screen */
  border-top: 1px solid lightgray;

  display: flex; /* Allows flexible height */
  align-items: center; /* Aligns child elements vertically */

  /* line-height: normal; Resets the line-height specifically for this nav */
}

.nav-icons{
  display: flex;
  align-items: center;
  justify-content: space-around;
  /* height: auto; */
  padding: 0px 0;
  width: 100%;
}

/* Specific icon container styles */
.nav-icons .icon-container {
    display: flex;
    justify-content: space-around; /* Space items evenly */
    align-items: center; /* Center items vertically */
    width: 100%; /* Span the full width of the parent */
    margin: 0; /* Remove unintended margins */
    padding: 0; /* Remove unintended padding */
    gap: 12vw; /* Add horizontal spacing between items */
    color: #004978; /* Set default text color */
  height: 100%;
  font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48; 
}

.nav-icons .icon-container a {

  margin: 0; /* Remove any unintended margins */
  padding: 0; /* Remove any unintended paddings */
  padding-bottom: 1%;
  height: 100%; /* Ensure it stretches to fit its parent */

  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content: center;
  /* text-decoration: none; */
  color: #004978; 

  line-height: 0; /* Ensure icons and labels have minimal spacing */
}

.nav-icons .icon-container .icon-label {
  font-size: 11px;
  margin-top: 0px;
  padding: 0px;
  /* color: inherit; */
  font-weight: 500;
}

.nav-icons .icon-container .material-symbols-outlined { /*This is for icon size*/
  font-size: 30px;
  margin: 0%;
  padding: 0%;
}


/*____________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________*/