@import url("../../dimens/global.css");
@import url("../../colours.css");

@font-face {
  font-family: "App-Medium";
  src: url("../../fonts/Nunito-Medium.ttf");
}
@font-face {
  font-family: "App-Regular";
  src: url("../../fonts/Nunito-Light.ttf");
}

* {
  box-sizing: border-box;
}

body {
  margin-right: var(--main-body-paddin);
  margin-left: var(--main-body-paddin);

  background-color: transparent;
  font-family: App-Regular, App-Medium;
}

/* ─── Viewport: fixed width, clips everything, never itself scrollable.
   Card position is controlled entirely by .track's transform in JS —
   there's no native scroll here at all, so there's nothing for a wheel/
   touch/trackpad gesture (or an iframe swallowing those events) to
   trigger. ─────────────────────────────────────────────────────────── */
.container {
  width: var(--module-card-width);
  height: calc(100vh - var(--top-bar-height, 0px));
  overflow: hidden;
  position: relative;
}

.track {
  display: flex;
  flex-direction: row;
  gap: 60px;
  height: 100%;
  transition: transform 0.35s ease;
  will-change: transform;
}

.card {
  width: var(--module-card-width);
  height: 100%;
  background: var(--white);

  border-radius: 10px;
  border: 1px solid var(--silver-background);
  flex-shrink: 0; /* VERY important */

  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.card iframe {
  width: 100%;
  height: 100%;
  padding: 0px;
  border: none;
}

/* ─── Floating Add Button ───────────────────────────────────────── */
.fab-add-btn {
  position: fixed;
  bottom: var(--add-button-margin-bottom);
  right: var(--add-button-margin-right);
  z-index: 900;

  width: var(--add-btn-width);
  height: var(--add-btn-width);
  border-radius: 50%;
  border: none;

  display: flex;
  align-items: center;
  justify-content: center;

  background-color: var(--text-small-titles);
  color: var(--white);
  cursor: pointer;

  box-shadow: 0 4px 12px rgba(0, 0, 0, var(--top-bar-buttons-shadow, 0.2));
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.fab-add-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, calc(var(--top-bar-buttons-shadow, 0.2) * 1.3));
}

.fab-add-btn:active {
  transform: translateY(0);
}

/* NEW — draw the plus with pseudo-elements instead of a text glyph */
.fab-add-btn::before,
.fab-add-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
  border-radius: 1px;
}
.fab-add-btn::before {
  width: calc(var(--add-btn-width) * 0.36);
  height: 2px;
  transform: translate(-50%, -50%);
}
.fab-add-btn::after {
  width: 2px;
  height: calc(var(--add-btn-width) * 0.36);
  transform: translate(-50%, -50%);
}