/*!
 * Base / document
 */
* { box-sizing: border-box; padding: 0; margin: 0; }

html {
  font-family: sans-serif;
  height: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  height: 100%;
  margin: 0;
  overflow-x: hidden;
}

/*!
 * Navigation (scoped styles)
 */
navigation {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 10%;
  padding: 0 10%;
  margin-bottom: 2.5%;
}

.logo {
  height: 75%;
  margin-left: auto;
  cursor: pointer;
  order: 3;
}

.nav { order: 1; }

.nav_elements li { display: inline-block; padding: 0 22.5px; }
.nav_elements li a { transition: all .25s ease; }
.nav_elements li a:hover { color: #184e55; }

.radio { order: 2; }

radio_button {
  border-radius: 25px;
  padding: 10px 22.5px;
  margin-left: 22.5px;
  background-color: rgba(24,78,85,1);
  cursor: pointer;
  transition: all .3s ease;
}
radio_button:hover { background-color: rgba(24,78,85,.8); }

/* Make nav links white without affecting page content */
navigation li,
navigation a,
navigation radio_button {
  font-weight: 500;
  text-decoration: none;
  color: #ffffff;
}

/*!
 * Layout (recommender page)
 */
.main_frame {
  display: flex;
  flex-direction: row;
  justify-content: center;    /* center the three columns */
  align-items: flex-start;    /* align tops */
  gap: 32px;                  /* breathing room between columns */
  flex-wrap: nowrap;          /* keep one line on desktop */
  text-align: center;
  margin-top: 1.5rem;
}

/* Three columns with sensible, fixed-ish widths on desktop */
.input_audio  { flex: 0 0 360px; order: 1; }
form          { flex: 0 0 420px; order: 2; display: flex; flex-direction: column; align-items: stretch; }
.output_audio { flex: 0 0 360px; order: 3; }

/*!
 * Buttons (generic)
 */
.btn_base {
  text-transform: uppercase;
  border: none;
  color: #ffffff;
  background-color: rgba(24,78,85,1);
  cursor: pointer;
  transition: background-color .25s ease-out;
}

.btn_large {
  border-radius: 20px;
  height: 40px;
  width: 250px;
}

.btn_small {
  display: inline-block;
  font-size: .75rem;
  border-radius: 5px;
  padding: .35rem .6rem;
}

/*!
 * Inputs
 */
.input_header { }
.first_input, .second_input, .third_input { width: 100%; }
.input_field { margin: .5rem 0; }
.input_field input[type="text"] { text-align: center; }

input:not([type]),
input[type=text]:not(.browser-default),
input[type=password]:not(.browser-default),
input[type=email]:not(.browser-default),
input[type=url]:not(.browser-default),
input[type=time]:not(.browser-default),
input[type=date]:not(.browser-default),
input[type=datetime]:not(.browser-default),
input[type=datetime-local]:not(.browser-default),
input[type=tel]:not(.browser-default),
input[type=number]:not(.browser-default),
input[type=search]:not(.browser-default),
textarea.materialize-textarea {
  font-size: 1rem;
  outline: none;
  border: none;
  border-bottom: 1px solid #3a4252;
  height: 3rem;
  width: 100%;
}

.input_button { }

/*!
 * Audio / Spotify embeds
 */
.box_left, .box_right { margin: 0; } /* remove 10% side nudges that broke centering */

/* Unified, responsive Spotify card */
.spotify-embed {
  display: block;
  width: 100%;
  max-width: 360px;     /* <= adjust this to taste (e.g., 380 / 400) */
  height: 352px;
  border-radius: 12px;
  margin: 0 auto;
}

/* Keep similarity label & buttons attached to the right card */
.rec_panel { width: 100%; max-width: 360px; margin: 0 auto; }
.match { text-align: center; margin: .75rem 0 0 0; }

/* Buttons below the card, side-by-side */
.btn_nav {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: .5rem;
  margin-top: .5rem;
}

/*!
 * Footer
 */
.copyright_footer {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  bottom: 0;
  height: 5%;
  width: 100%;
  color: #ffffff;
  background-color: #46bbca;
}

/*!
 * Errors / sections / colors
 */
.error { font-size: .75rem; color: #f5593e; }

.base_section { line-height: 110%; }
h1 { font-weight: 700; font-size: 3.5rem; }
h5 { font-weight: 400; font-size: 1.64rem; margin: 1.0933333333rem 0 .656rem; }

.blue.radio { background-color: #46bbca !important; }
.blue_text  { color: #46bbca !important; }
.grey_text  { color: #3a4252 !important; }

/*!
 * Admin UI helpers
 */
.page { max-width: 1000px; margin: 2rem auto; font-family: system-ui, Segoe UI, Roboto, Arial; }
.toolbar { display: flex; gap: .6rem; align-items: center; margin: .75rem 0 1rem; }
.btn { display: inline-block; padding: .45rem .9rem; border: 1px solid #222; background: #f7f7f7; color: #111; text-decoration: none; border-radius: .4rem; }
.btn-danger { border-color: #c00; background: #fee; }
.btn-small { padding: .25rem .5rem; }
.flash { padding: .6rem .75rem; border: 1px solid #ddd; border-radius: 6px; margin-bottom: .5rem; }
.flash-success { background: #e7f7e7; }
.flash-error   { background: #fdecea; }

table { width: 100%; border-collapse: collapse; }
th, td { border: 1px solid #ddd; padding: .5rem .6rem; text-align: left; }
th { background: #fafafa; }

.actions form { display: inline; margin: 0 .25rem 0 0; }

/* Anchor defaults in page content (not nav) */
body a { color: #184e55; }
body a.btn, body a.btn_base { color: #111; }

/* Make anchor buttons look like .btn_base when needed */
a.btn_base {
  display: inline-block;
  padding: .45rem .9rem;
  text-decoration: none;
  border-radius: 20px;
  line-height: 1.25;
}

/*!
 * Responsive tweaks
 */
@media (max-width: 1200px) {
  .main_frame { flex-wrap: wrap; }  /* stack when space gets tight */
  .input_audio, .output_audio, form { flex: 1 1 520px; } /* let rows center */
}
@media (max-width: 900px) {
  .spotify-embed, .rec_panel { max-width: 560px; height: 380px; }
}
@media (max-width: 600px) {
  .spotify-embed, .rec_panel { max-width: 100%; height: 352px; }
}