/* Set up the main container to fill the viewport */

body {
  color: var(--text-color);
  background-color: var(--bg-color);
}


:root {
  --bg-color: #ffffff;
  --text-color: #000000;
  --bg-color-modal: #f7f7f7;
}

/* Dark mode colors */
.dark {
  --bg-color: #181818;
  --bg-color-modal: #2c2c2c;
  --text-color: #ececef;
}

.title {
  font-size: 2rem;
  color: #7a7a7a;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: Tahoma, Arial, Verdana, Segoe, sans-serif; 
  display: flex;
  flex-direction: column;
}

#app-container {
  position: relative;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  gap: 1.5rem;
  padding-bottom: 6rem;
  box-sizing: border-box;
}

.logo {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 50px;
  height: 50px;
  z-index: 10;
}


.logo--dark  { display: none; }
.dark .logo--light { display: none; }
.dark .logo--dark  { display: block; }

@media (max-width: 600px) {
  #app-container {
    padding-top: 3rem;  /* clear the logo only on small screens */
  }
}


.hover-underline {
  color: white;            /* keep your color */
  text-decoration: none;   /* no underline by default */
}

.hover-underline:hover {
  text-decoration: underline;  
}



/* Footer styling */
#page-footer {
  flex-shrink: 0;
  background-color: #575757;
  color: white;
  text-align: center;
  padding: 0.2rem 0;
  width: 100%;
  font-size: 0.9rem;
  /* Default state: no position control */
  position: static;
}

/* Footer fixed when needed */
#page-footer.fixed-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 5;
  background-color: #575757;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  /* #app-container {
    padding-top: 1rem;
    gap: 1rem;
  } */

  #page-footer {
    /* padding: 0.2rem; */
    font-size: 0.9rem;
  }
}



/* Style for the date display */
.date-display {
  font-size: 1.2rem;
  color: #333;
  margin: 0;
}

.date-picker {
  font-size: 1.5rem;
  color: #333;
  cursor: pointer;
}

@media (max-width: 600px) {
  .title {
    font-size: 1.5rem;
  
  }
  
  .date-display {
    font-size: 1rem;
  }
  .date-picker {
    font-size: 1.2rem;
  }
}

/* Center the counter header and the flip clock */
.counter-header {
  font-size: 1.5rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 1rem;
}

/* Flip clock section styling */
.countdown-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 1.5rem; /* Space below date-picker */
}

.flip-clock {
  text-align: center;
  perspective: 600px;
  margin: 0 auto;
  width: 100%;
}

  .flip-clock *,
  .flip-clock *:before,
  .flip-clock *:after {
    box-sizing: border-box;
  }
  .flip-clock__piece {
    display: inline-block;
    margin: 0 5px; /* Maintain consistent spacing */
    min-width: 2.5em;
}

  .flip-clock__piece .blank {
    visibility: hidden;
}

  @media (min-width: 1000px) {
    .flip-clock__piece {
      margin: 0 5px;
    }
  }
  .flip-clock__slot {
    font-size: 1rem;
    line-height: 1.5;
    display: block;
    
    /*
    //position: relative;
    //top: -1.6em;
    z-index: 10;
    //color: #FFF;
  */
  }
  .flip-card {
    display: block;
    position: relative;
    padding-bottom: 0.72em;
    font-size: 5rem; /* Larger font size for desktop */
    line-height: 0.95;
}
.flip-clock {
  text-align: center;
  perspective: 600px;
  margin: 0 auto;
  width: 100%;
}

/* Medium screens: Between 660px and 880px */
@media (max-width: 880px) {
 
  .flip-clock__piece {
      margin: 0 2px; /* Reduced margin */
  }
  .flip-card {
      font-size: 4rem; /* Adjusted font size for medium screens */
  }
}

/* Small screens: Below 660px */
@media (max-width: 660px) {
 
  .flip-clock__piece {
      margin: 0 1px; /* Even smaller margin for compact layout */
  }
  .flip-card {
      font-size: 2.3rem; /* Smaller font size for small devices */
  }
}

  /*////////////////////////////////////////*/
  .flip-card__top,
  .flip-card__bottom,
  .flip-card__back-bottom,
  .flip-card__back::before,
  .flip-card__back::after {
    display: block;
    height: 0.72em;
    color: #ccc;
    background: #222;
    padding: 0.23em 0.25em 0.4em;
    border-radius: 0.15em 0.15em 0 0;
    backface-visiblity: hidden;
    transform-style: preserve-3d;
    width: 100%; /* Default size for 2-digit numbers */
     /* Expand if needed for 3-digit numbers */
   
  }
  .flip-card__bottom,
  .flip-card__back-bottom {
    color: #FFF;
    position: absolute; 
    top: 50%;
    left: 0;
    border-top: solid 1px #000;
    background: #393939;
    border-radius: 0 0 0.15em 0.15em;
    pointer-events: none;
    overflow: hidden;
    z-index: 2;
  }
  .flip-card__back-bottom {
    z-index: 1;
  }
  .flip-card__bottom::after,
  .flip-card__back-bottom::after {
    display: block;
    margin-top: -0.72em;
    
  }
  .flip-card__back::before,
  .flip-card__bottom::after,
  .flip-card__back-bottom::after {
    content: attr(data-value);
    
  }
  .flip-card__back {
    position: absolute;
    top: 0;
    height: 100%;
    left: 0%;
    pointer-events: none;
  }
  .flip-card__back::before {
    position: relative;
    overflow: hidden;
    z-index: -1;
  }
  .flip .flip-card__back::before {
    z-index: 1;
    -webkit-animation: flipTop 0.3s cubic-bezier(0.37, 0.01, 0.94, 0.35);
            animation: flipTop 0.3s cubic-bezier(0.37, 0.01, 0.94, 0.35);
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    transform-origin: center bottom;
    
  }
  .flip .flip-card__bottom {
    transform-origin: center top;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    -webkit-animation: flipBottom 0.6s cubic-bezier(0.15, 0.45, 0.28, 1);
            animation: flipBottom 0.6s cubic-bezier(0.15, 0.45, 0.28, 1);
  }
  @-webkit-keyframes flipTop {
    0% {
      transform: rotateX(0deg);
      z-index: 2;
    }
    0%,
    99% {
      opacity: 1;
    }
    100% {
      transform: rotateX(-90deg);
      opacity: 0;
    }
  }
  @keyframes flipTop {
    0% {
      transform: rotateX(0deg);
      z-index: 2;
    }
    0%,
    99% {
      opacity: 1;
    }
    100% {
      transform: rotateX(-90deg);
      opacity: 0;
    }
  }
  @-webkit-keyframes flipBottom {
    0%,
    50% {
      z-index: -1;
      transform: rotateX(90deg);
      opacity: 0;
    }
    51% {
      opacity: 1;
    }
    100% {
      opacity: 1;
      transform: rotateX(0deg);
      z-index: 5;
    }
  }
  @keyframes flipBottom {
    0%,
    50% {
      z-index: -1;
      transform: rotateX(90deg);
      opacity: 0;
    }
    51% {
      opacity: 1;
    }
    100% {
      opacity: 1;
      transform: rotateX(0deg);
      z-index: 5;
    }
  }

  /* life bar */

  .timeline-bar {
    display: flex;
    width: 100%;
    height: 25px;
    border-radius: 5px;
    overflow: hidden;
    margin-top: 20px;
  }

  @media (max-width: 600px) {

    .timeline-bar {
      height: 20px;
    }

  }

  .timeline-segment {
    height: 100%;
  }
  .lived {
    background-color: rgba(1, 81, 173, 0.884);
  }
  
  .life-expectancy {
    background-color: rgb(71, 157, 255);
  }
  
  .beyond-expectancy {
    background-color: rgba(115, 243, 115, 0.527);
    display: flex;
    align-items: center;

  }
  
  .expectancy-label {
    color: rgb(37, 37, 37); /* Text color */
    /* Remove absolute positioning to keep it inside beyond-expectancy */
    white-space: nowrap; /* Prevents line breaks */
    margin-right: auto; /* Pushes label to the left inside the segment */
    padding-left: 0.1rem; /* Adjust padding for label positioning */
 
    font-size: 0.8em;
    font-weight: 400;
    margin-left: 0.1rem; /* Adjust to push text to the left */
    position: relative; /* Ensures label is positioned relative to this element */

  }

  .bonus-message {
    color: rgb(1, 136, 1);

    font-size:25px;
    font-weight:200;
  }

  /* switch */

  .input {
    display: none;
  }
  
  .input:checked + .toggle-area .toggle-wrapper {
    box-shadow: 0 8px 14px 0 rgba(215, 41, 18, 0.12);
  }
  
  .input:checked + .toggle-area .toggle-wrapper > .selector {
    left: calc(100% - 50px);
    background-color: #c04fc0b7;
  }
  
  .toggle-area {
    display: inline-block;
    cursor: pointer;
  }
  
  .toggle-wrapper {
    display: inline-block; /* or block if you want */
    width: 120px;
    height: 60px;
    background-color: #f3efef;
    border-radius: 999px;
    margin: auto;
    position: relative;
    box-shadow: 0 8px 14px 0 rgba(18, 38, 215, 0.12);
  }
  .toggle-wrapper .selector {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    background-color: #2259aab9;
    transition: left 0.25s ease;
    border-radius: 50%;
  }
  
  .notification {
    font-size: 20px;
    text-align: center;
    width: 100%;
  }
  
  /* Media query for smaller screens */
  @media (max-width: 600px) {
    .toggle-wrapper {
      width: 80px;
      height: 40px;
      box-shadow: 0 4px 8px 0 rgba(18, 38, 215, 0.12);
    }
    .toggle-wrapper .selector {
      width: 30px;
      height: 30px;
      left: 5px;
    }
    .input:checked + .toggle-area .toggle-wrapper > .selector {
      left: calc(100% - 35px);
    }
    .notification {
      font-size: 16px;
    }
  }
  
  

  /*  */

  
.dateButton {
	box-shadow:inset 0px 1px 0px 0px #bbdaf7;
	background:linear-gradient(to bottom, #79bbff 5%, #378de5 100%);
	background-color:#79bbff;
	border-radius:6px;
	border:1px solid #84bbf3;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	/* font-family:Arial; */
	/* font-size:15px; */
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #528ecc;
}
.dateButton:hover {
	background:linear-gradient(to bottom, #8cb0d4 5%, #79bbff 100%);
	background-color:#5480ac;
}
.dateButton:active {
	position:relative;
	top:1px;
}


/*  */







.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.5rem;
}

/* Footer left side */
.footer-left {
  display: flex;
  align-items: center;
}

/* Footer right side: switch + fullscreen icon */
.footer-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Feedback */

.feedback-button {
  background-color: #3d3d3d;
  color: white;
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: 18px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: background-color 0.3s;
}

.feedback-button:hover {
  background-color: #0056b3;
}

/* Theme switch styling */
/* .button.toggleBtn {
  appearance: none;
  width: 40px;
  height: 20px;
  background: #ccc;
  border-radius: 10px;
  position: relative;
  cursor: pointer;
  outline: none;
  border: none;
}

.button.toggleBtn::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  top: 1px;
  left: 1px;
  background: white;
  border-radius: 50%;
  transition: 0.3s;
}

.button.toggleBtn:checked::before {
  transform: translateX(20px);
} */

/* Fullscreen icon button */
.icon_fullscreen {
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
}

.icon_fullscreen .button_inner {
  width: 100%;
  height: 100%;
  background-image: url("/images/widescreen.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: block;
}


/* fullscreen icon button */
.icon_fullscreen {
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
}

.icon_fullscreen .button_inner {
  width: 100%;
  height: 100%;
  background-image: url("./images/widescreen.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: block;
}

/*  */




/* switch */

.button.toggleBtn {
  cursor: pointer;
  /* Removed float and fixed positioning */
  position: relative;
  width: 60px;
  height: 20px;
  -webkit-appearance: none;
  appearance: none;
  background: linear-gradient(0deg, #333, #000);
  outline: none;
  border-radius: 10px;
  box-shadow: 0 0 0 4px #353535, 0 0 0 5px #3e3e3e, inset 0 0 5px rgba(0,0,0,1);
  border: none;
  margin: 5px;
}

.button.toggleBtn:before {
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:40px;
  height:20px;
  background: linear-gradient(0deg, #000, #6b6b6b);
  border-radius: 10px;
  box-shadow: 0 0 0 1px #232323;
  transform: scale(.98,.96);
  transition:.5s;
}

.button.toggleBtn:after {
  content:'';
  position:absolute;
  top:calc(50% - 1px);
  left:35px;
  width:4px;
  background: linear-gradient(0deg, #6b6b6b, #000);
  border-radius: 25%;
  transition:.5s;
}

/* Blue when checked (first) */
.button.toggleBtn:checked:nth-of-type(1) {
  background: linear-gradient(0deg, #70a1ff, #1e90ff);
  box-shadow: 0 0 0 4px #353535, 0 0 0 5px #3e3e3e, inset 0 0 5px rgba(0,0,0,1);
}

/* Orange when checked (second) */
.button.toggleBtn:checked:nth-of-type(2) {
  background: linear-gradient(0deg, #e67e22, #f39c12);
  box-shadow: 0 0 0 4px #353535, 0 0 0 5px #3e3e3e, inset 0 0 5px rgba(0,0,0,1);
}

/* Shift thumb when checked */
.button.toggleBtn:checked:before {
  left:20px;
}
.button.toggleBtn:checked:after {
  left:15px;
}



/* Modal styling */
.modal {

    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background-color: rgba(0, 0, 0, 0.5); */
    justify-content: center;
    align-items: center;
    
}

.modal-content {
  color: var(--text-color);
  background-color: var(--bg-color-modal);
    padding: 10px;
    width: 90%;
    max-width: 400px;
    border-radius: 8px;
    text-align: center;
}

.close-button {
    float: right;
    font-size: 20px;
    font-weight: bold;
    color: #aaa;
    cursor: pointer;
}

.close-button:hover {
    color: #000;
}

.textarea-fb {
  width: 100%;
  height: 100px;
  padding: 10px;
  resize: none; /* Prevent resizing */
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 14px;
  box-sizing: border-box; /* Ensure padding and borders are included in total width */
  overflow-y: auto; /* Scroll if content exceeds */
}


.button-fb {
  /* background-color: rgba(51, 51, 51, 0.05); */
  border-radius: 8px;
  border-width: 0;
  /* color: #333333; */
  cursor: pointer;
  display: inline-block;
  font-family: "Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  list-style: none;
  margin: 0;
  padding: 10px 12px;
  text-align: center;
  transition: all 200ms;
  vertical-align: baseline;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.notification-fb {
  position: fixed;
  bottom: 10%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 8px 15px;
  background-color: #28a745; /* Success color */
  color: white;
  font-size: 14px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  display: none; /* Hidden by default */
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 1000;
}


/* Full screen */

body:fullscreen {
  overflow: scroll !important;
}

body:-ms-fullscreen {
  overflow: scroll !important;
}

body:-webkit-full-screen {
  overflow: scroll !important;
}

body:-moz-full-screen {
  overflow: scroll !important;
}

#fullscreenMessage-center {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 16px;
  z-index: 1000;
  display: none;
  /* Hidden by default */
}

#fullscreenMessage {
  position: fixed;
  top: 120px;
  /* Distance from the top */
  left: 10px;
  /* Distance from the left */
  background-color: rgba(0, 0, 0, 0.8);
  color: rgb(136, 135, 135);
  padding: 1px 2px;
  border-radius: 5px;
  font-size: 12px;
 
  z-index: 1000;
  display: none;
  /* Hidden by default */
}

/* -------- */