/***
  MAIN CSS
**/

/* -----------------------------------
    1. Theme Settings
    2. Layout Style
    3. Base Elements
    4. Extra Classes
    
----------------------------------- */

/**
 * 1. Theme Settings _______________________________________________________________________________
 */

@import url('https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@0,300..800;1,300..800&family=Montserrat:ital,wght@0,500;1,500&display=swap');

:root {
  /* Element */
  --item-radius: 30px;
  --item-bg: #efeeee;
  --item-outset: -6px -6px 8px 0 rgba(112, 112, 112, 0.5) inset,
    /* dark */ 7px 7px 12px 0 rgba(214, 214, 214, 0.4) inset,
    /* bright */ 6px 6px 14px 0 rgba(112, 112, 112, 0.5),
    /* dark */ -3px -3px 12px 0 rgba(214, 214, 214, 0.4); /* bright */
  --item-inset: 6px 6px 8px 0 rgba(112, 112, 112, 0.5) inset,
    /* dark */ -7px -7px 12px 0 rgba(214, 214, 214, 0.4) inset,
    /* bright */ -6px -6px 14px 0 rgba(112, 112, 112, 0.5),
    /* dark */ 3px 3px 12px 0 rgba(214, 214, 214, 0.4); /* bright */
  --item-cloud: 6px 12px 32px 0px rgba(18, 18, 18, 0.5),
    inset -4px -4px 16px 0px rgba(18, 18, 18, 0.6),
    inset 0px 11px 28px 0px rgb(249, 249, 249);
  /* Color */
  --color-html: #cccccd;
  --color-bg: #efeeee;
  --color-accent: #B8860B; /*Color Accent*/
  --none: transparent;
  /* Font Color */
  --font-black: #000000;
  --font-grey: #999999;
  --font-accent: #B8860B; /*Color Font*/
  /* Font */
  --font-title: "Montserrat", sans-serif;
  --font-text: "Merriweather Sans", sans-serif;
}

.dark {
  /* Element */
  --item-bg: #292d32;
  --item-outset: -6px -6px 8px 0 rgba(18, 18, 18, 0.5) inset,
    /* dark */ 7px 7px 12px 0 rgba(54, 54, 54, 0.4) inset,
    /* bright */ 6px 6px 14px 0 rgba(18, 18, 18, 0.5),
    /* dark */ -3px -3px 12px 0 rgba(54, 54, 54, 0.4); /* bright */
  --item-inset: 6px 6px 8px 0 rgba(18, 18, 18, 0.5) inset,
    /* dark */ -7px -7px 12px 0 rgba(54, 54, 54, 0.4) inset,
    /* bright */ -6px -6px 14px 0 rgba(18, 18, 18, 0.5),
    /* dark */ 3px 3px 12px 0 rgba(54, 54, 54, 0.4); /* bright */
  --item-cloud: 6px 12px 32px 0px rgba(249, 249, 249, 0.5),
    inset -4px -4px 16px 0px rgba(249, 249, 249, 0.6),
    inset 0px 11px 28px 0px rgb(18, 18, 18);
  /* Color */
  --color-html: #121212;
  --color-bg: #292d32;
  --color-accent: #B8860B; /*Color Accent*/
  /* Font Color */
  --font-black: #ffffff;
  --font-grey: #454545;
  --font-accent: #B8860B; /*Color Font*/
}

/**
 * 2. Layout Style _______________________________________________________________________________
 */
html {
  background-color: var(--color-html);
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
body {
  position: relative;
  background-color: var(--color-bg);
  width: 100vw;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  scrollbar-color: var(--color-bg) var(--font-grey);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-user-select: none;
  user-select: none;
  cursor: url('fan-auto.png'), auto;
}

/* Header */
header {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  /* Center Header */
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  flex-direction: column;
}

/* Navbar */
nav {
  position: fixed;
  width: 80vw;
  height: 4.8rem;
  top: 0;
  margin: 2rem 0;
  padding: 0 2.8rem;
  transition: 0.3s;
  z-index: 10;
  border-radius: var(--item-radius);
  background-color: var(--none);
  box-shadow: none;
  /* Navbar items */
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#logo-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
#logo {
  height: 4.5rem;
  z-index: 15;
  cursor: url('fan-auto.png'), auto;
}
.logo-name {
  font-size: 2rem;
  color: var(--font-black);
  font-family: var(--font-text);
  font-weight: 500;
}
#dark {
  margin-bottom: -1rem;
  font-size: 3.2rem;
  cursor: url('fan-pointer.png'), pointer;
}
/** Nav to Custom **/
nav ul {
  list-style: none;
  padding: 0;
}

nav ul li {
  display: inline-block;
  margin: 0 0.5rem;
  position: relative;
  text-align: left;
}

/* Nav Dropdown */
nav ul li:hover ul {
  display: block;
}

nav ul li ul {
  background: var(--color-bg);
  border: var(--none);
  border-radius: var(--item-radius);
  display: none;
  height: auto;
  padding: 0.5rem 0.5rem;
  position: absolute;
  top: 2.2rem;
  right: -25%;
  white-space: nowrap;
  width: auto;
  z-index: 1;
}

nav ul li ul::before {
  /* fill gap above to make mousing over them easier */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -0.5rem;
  height: 0.5rem;
}

nav ul li ul li,
nav ul li ul li a {
  display: block;
}

/** Layout Customisation **/
main {
  position: relative;
  margin: 0;
  padding: 2.8rem 0 60vh 0; /* Give bottom blank */
  width: 100%;
  height: auto;
  background-color: var(--none);
}
section {
  background: var(--color-bg);
  border-radius: var(--item-radius);
  margin: 2.4rem 0px;
  padding: 1.6rem;
  max-width: 100%;
  height: auto;
  display: flex;
}

/* Pop Up Sections*/
article {
  margin: 5rem 10% 0%;
  padding: 1.6rem 0 100px;
  width: 80%;
  height: 95%;
  text-align: left;
  overflow-y: scroll;
  scrollbar-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
  border: none;
  border-radius: var(--item-radius) var(--item-radius) 0px 0px;
  background: var(--color-bg);
  box-shadow: var(--item-cloud);
}

/* Pop Up Small */
aside {
  margin: 5rem 10%;
  padding: 1.6rem 1rem;
  width: 80%;
  height: 80%;
  overflow-y: scroll;
  scrollbar-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
  border: var(--none);
  border-radius: var(--item-radius);
  background: #efeeee;
  box-shadow: var(--item-cloud);
}

/** Footer **/
footer {
  position: fixed;
  width: 100%;
  height: 3.8rem;
  left: 0;
  bottom: 0;
  margin: 0;
  padding: 1rem 2rem;
  text-align: left;
  transition: 0.3s;
  z-index: 100;
  cursor: url('fan-auto.png'), auto;
}

footer small {
  position: fixed;
  width: 100%;
  height: 3.8rem;
  left: 0;
  bottom: 0;
  margin: 0;
  padding: 1rem 2rem;
  text-align: left;
  text-shadow: 0 1px 0 rgba(128, 128, 128, 0.4);
  cursor: url('fan-auto.png'), auto;
}
footer small a {
  text-decoration: none; /** wavy underline **/
  cursor: url('fan-pointer.png'), pointer;
}

/**
 * 3. Base Elements _______________________________________________________________________________
 */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  scrollbar-width: thin;
  transition: box-shadow 0.4s ease-in-out;
}
hr {
  background-color: var(--font-grey);
  border: none;
  height: 1px;
  margin: 4rem 0;
  width: 100%;
}
br {
}
/* Text */
html {
  font-size: 62.5%;
}
body {
  font-family: var(--font-text);
  color: var(--font-black);
  font-weight: 300;
  line-height: 1.85;
  text-align: left;
  overflow-wrap: break-word;
  hyphens: manual;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}
h1,
h2,
h3,
h4 {
  font-family: var(--font-title);
  color: var(--font-accent);
  margin: 2.4rem 0 0.8rem;
  font-weight: inherit;
  line-height: 150%;
}
h1 {
  font-size: 6rem;
}

h2 {
  font-size: 4.8rem;
}

h3 {
  font-size: 3.2rem;
}

h4 {
  font-size: 2.8rem;
}
h5,
h6 {
  font-family: var(--font-title);
  color: var(--font-black);
  margin: 1.6rem 0;
  font-weight: inherit;
  line-height: 120%;
}
h5 {
  font-size: 2rem;
}
h6 {
  font-size: 1.8rem;
}
smalll {
  font-size: 1.2rem;
}
p {
  font-size: 1.6rem;
  margin-bottom: 2rem;
}
pre {
  background-color: var(--color-bg);
  margin: 0 5%;
  padding: 1.6rem;
  overflow-x: scroll;
  border-radius: var(--item-radius);
  box-shadow: var(--item-outset);
}
code {
  font-family: Menlo, Monaco, "Courier New", monospace;
  line-height: 120%;
}
ul {
  text-align: left;
  margin: 0 2.4rem;
  font-weight: inherit;
  line-height: 120%;
}
ol {
  text-align: left;
  margin: 0 2.4rem;
  font-weight: inherit;
  line-height: 120%;
}
li {
  text-align: left;
}
blockquote {
  border-left: 5px solid var(--color-accent);
  padding-left: 1rem;
  margin: 1.6rem 5%;
  font-style: italic;
  text-align: left;
}

/* Links */
a,
a:visited {
  color: var(--font-black);
  cursor: url('fan-pointer.png'), pointer !important;
}
a:hover,
a:focus,
a:active {
  font-weight: bold;
  color: var(--font-accent);
}

button {
  margin: 0rem;
  padding: 2.4rem;
  font-size: 3rem;
  letter-spacing: 1px;
  text-align: center !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  border: var(--none) !important;
  border-radius: var(--item-radius) !important;
  box-shadow: var(--item-outset) !important;
  color: var(--font-black);
  background-color: var(--color-bg) !important;
  transition: 0.3s ease !important;
  cursor: url('fan-pointer.png'), pointer !important;
}

button:hover {
  border: var(--none) !important;
  box-shadow: var(--item-inset) !important;
  background-color: var(--color-bg) !important;
  font-weight: bold !important;
  transform: scale(0.95) !important;
}
button:active {
  transform: scale(0.9) !important;
}
button:disabled {
  opacity: 0.4;
  color: var(--font-grey);
  cursor: url('fan-auto.png'), auto;
}
/* Images */
img,
canvas,
iframe,
video,
svg,
select,
textarea {
  max-width: 100%;
  border-radius: var(--item-radius);
}
figure {
  margin: 0;
  padding: 0;
}

figure img {
  max-width: 100%;
}

figure figcaption {
  color: var(--color-bg);
}

/* Details */
details {
  font-size: 1.8rem;
  margin: 2rem 0;
}
details summary {
  font-weight: bold;
  cursor: pointer;
}

/* Forms */
button:disabled,
input:disabled {
  background: var(--font-grey);
  border: none;
  color: var(--font-text);
  cursor: not-allowed;
}

button[disabled]:hover,
input[type="submit"][disabled]:hover {
  filter: none;
}

form {
  border: none;
  border-radius: var(--item-radius);
  box-shadow: var(--item-outset);
  display: block;
  max-width: 100%;
  min-width: 50%;
  padding: 1.5rem;
  text-align: left;
}

fieldset {
  border-radius: var(--item-radius);
  margin: 0.8rem 0.5rem;
  padding: 1.2rem;
}

form header {
  margin: 1.5rem 0;
  padding: 1.5rem 0;
}

input,
label,
select,
textarea {
  display: block;
  font-size: inherit;
  max-width: 100%;
}

input[type="checkbox"],
input[type="radio"] {
  display: inline-block;
}

input[type="checkbox"] + label,
input[type="radio"] + label {
  display: inline-block;
  font-weight: normal;
  position: relative;
  top: 1px;
}

input[type="range"] {
  padding: 0.4rem 0;
}

input,
select,
textarea {
  border: none;
  border-radius: var(--item-radius);
  margin-bottom: 1rem;
  padding: 0.4rem 0.8rem;
}

input[type="text"],
input[type="password"] textarea {
  width: calc(100% - 1.6rem);
}

input[readonly],
textarea[readonly] {
  background-color: var(--color-bg);
}

label {
  font-weight: bold;
  margin-bottom: 0.2rem;
}
/* Popups */
dialog {
  border: 1px solid var(--color-grey);
  border-radius: var(--item-radius);
  box-shadow: 5px 5px pink;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  z-index: 999;
}
[x-cloak] {
  display: none !important;
}
/* Tables */
table {
  border: none;
  border-radius: var(--item-radius);
  border-spacing: 0;
  display: inline-block;
  max-width: 100%;
  overflow-x: auto;
  padding: 0;
  white-space: nowrap;
}

table td,
table th,
table tr {
  padding: 0.4rem 0.8rem;
  text-align: center;
}

table thead {
  background-color: var(--color-bg);
  border-collapse: collapse;
  border-radius: var(--item-radius);
  color: var(--color-soft);
  margin: 0;
  padding: 0;
}

table thead th:first-child,
table tr td:first-child {
  text-align: right;
}

table tr:nth-child(even) {
  background-color: var(--color-grey);
}

/**
 * 4. Extra Classes _______________________________________________________________________________
 */

    #item-container {
      border: none; /* Remove default border */
      padding: 20px;
      margin: 15vh auto 5vh;
      text-align: center;
      width: 60vh;
      max-height: 80vh;
      position: relative;
      will-change: transform, opacity;
      transition: transform 0.2s ease-out, opacity 0.2s ease-out;
      cursor: grab;
      background-color: var(--item-bg);
      border-radius: var(--item-radius);
      box-shadow: var(--item-cloud);
      backdrop-filter: blur(10px); /* Glassmorphism blur effect */
      -webkit-backdrop-filter: blur(10px); /* For Safari */
      transform-origin: center bottom;
      cursor: url('fan-grab.png'), grab !important;
    }

    #item-container.swiping {
      cursor: url('fan-grab.png'), grabbing !important;
    }

    #item-image {
      width: 100%;
      max-height: 50%;
      margin-bottom: 10px;
      border-radius: 15px;
      object-fit: cover;
      box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.05); /* Subtle shadow for the image */
      pointer-events: none;
    }
    
    #item-name, #item-description {
      margin: 0;
    }
    #item-category {
    	margin: 0;
    	font-style: italic;
    	text-align: right;
    	padding-right: 1rem;
    	background-color: var(--item-bg);
    	color: var(--font-black);
    }
    
    .item-box {
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: 100%;
    }

    #loading-message {
      text-align: center;
      color: #777;
    }

    .swipe-buttons {
      display: flex;
      gap: 10px;
    }

    .swipe-button {
      cursor: pointer;
      border: none;
      border-radius: 8px;
      font-size: 1em;
      box-shadow:
        -3px -3px 6px rgba(255, 255, 255, 0.8),
        3px 3px 6px rgba(0, 0, 0, 0.1);
      transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
    }

    .swipe-button:active {
      transform: scale(0.95);
      box-shadow:
        -1px -1px 3px rgba(255, 255, 255, 0.8),
        1px 1px 3px rgba(0, 0, 0, 0.1);
    }

    .like-button {
      background-color: #e6ffee; /* Light green */
      color: #2e7d32; /* Darker green */
      position: fixed;
      right: 10%;
      top: 45%; 
    }

    .nope-button {
      background-color: #ffebee; /* Light red */
      color: #d32f2f; /* Darker red */
      position: fixed;
      left: 10%;
      top: 45%;
    }

    #temp-list-button {
      position: absolute;
      left: 0rem;
      border: none;
      cursor: url('fan-pointer.png'), pointer !important;
      height: 4rem;
      width: 4rem;
      padding: 0 !important;
      position: relative; /* For the badge */
    }
	#temp-list-button i {
	  height: 4rem;
      width: 4rem;
      font-size: 3.8rem;
      color: var(--color-accent);
	}
	
    #temp-list-button:hover i {
      transform: scale(0.95);
      color: var(--font-black) !important;
    }
	
    #temp-list {
      text-align: center;
      margin-top: 20px;
    }

    #temp-list ul {
      list-style: none;
      padding: 0;
    }

    #temp-list li {
      padding: 8px 0;
      color: #555;
      text-shadow: 1px 1px 2px #eee;
    }

    #temp-list button {
      padding: 10px 20px;
      background-color: #1976d2; /*blue*/
      color: white;
      border: none;
      cursor: pointer;
      border-radius: 8px;
      font-size: 1em;
      box-shadow:
        -2px -2px 4px rgba(255, 255, 255, 0.8),
        2px 2px 4px rgba(0, 0, 0, 0.1);
      transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
    }

    #temp-list button:active {
      transform: scale(0.95);
      box-shadow:
        -1px -1px 2px rgba(255, 255, 255, 0.8),
        1px 1px 2px rgba(0, 0, 0, 0.1);
    }

    #temp-list-button::after {
      content: "0";
      display: inline-block;
      background-color: #EE4B2B; /* red */
      color: white;
      border-radius: 50%;
      padding: 5px 7px;
      font-size: 0.6em;
      margin-left: 8px;
      vertical-align: middle;
      position: absolute;
      bottom: -14px;
      left: -14px;
      box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    }

    #temp-list-button.has-items::after {
      content: attr(data-item-count);
    }