:root {
  --stand-border: 1px solid #efb762;
  --stand-gold: #efb762;
  --oranged-color: orangered;
  --blue-color: #52c7f5;
  --yellow-color: #f5da52;
  --red-color: #8f0401;
  --outside-green: #006600;
  --outside-clear-green: #009900;
  --hall-bg: #ffffff;
  --middle-bg: blanchedalmond;
  /* cursor: disabled; *§*/
}

* {
  box-sizing: border-box;
}

html {
  margin: 0;
  padding: 0;
  width: fit-content;
  min-width: 100%;
  min-height: 100%;
  overflow: auto;
}

body {
  margin: 0;
  padding: 0;
  min-width: 100%;
  display: flex;
  flex-direction: column;
  background: var(--hall-bg);
}

.homepage {
  width: max-content;
  min-width: 100%;
}

/* =========================================================
   COMPLETE EXHIBITION SPACE
   Keep the original wide "virtual hall" concept.
   ========================================================= */

.space {
  width: 3700px; /* This was 3600 */
  min-height: 100vh;
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  align-items: flex-start;
  background-color: var(--hall-bg);
}

/* =========================================================
   ART SELECTION EXHIBITION AREA
   ========================================================= */

.space-as {
  border-top: 2px solid var(--stand-gold);
  border-left: 2px solid var(--stand-gold);
  width: 2855px; /* This was 2640 */
  min-height: 100vh;
  padding: 0;
  margin: 0 auto;
  background: #fff;
  position: relative;
}

.space-as > h2,
.announce {
  color: var(--oranged-color);
  word-spacing: 15px;
  margin: 25px auto;
  padding: 1px 0;
  letter-spacing: 15px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
}

.space-as > h2 > span,
.announce > span {
  width: 33.333%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.announce {
  position: relative;
  z-index: 1;
}

/* =========================================================
   TOP AND BOTTOM ROWS: stands 1..30 and 71..100
   ========================================================= */

.set.upper,
.set.lower,
.upper-section,
.lower-section {
  width: 100%;
  min-height: 150px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  margin: 0;
  background: #fff;
  margin-top: auto;
}

.set.lower {
  align-items: flex-end;
}

/* =========================================================
   MIDDLE AREA

   middle-section
     welcome
     middle-stand-set
       left   -> 31..40 / 51..60
       training
       right  -> 41..50 / 61..70
   ========================================================= */

/*
.middle-section {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  gap: 16px;
  margin: 0;
  padding: 0 18px;
}
*/

.middle-section {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  margin: 30px 0;
}

/* The 4 middle stand rows + central training space */
.middle-stand-set {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: 960px 420px 960px;
  column-gap: 0;
  align-items: stretch;
  justify-content: start;

  width: 2340px;
  min-width: 2340px;

  /* background: var(--middle-bg); */
  border-radius: 10px;
  overflow: visible;
}

.middle-stand-set > .left,
.middle-stand-set > .right {
  width: 960px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  /* background: var(--middle-bg); */
}

/* Each row is ONE container holding ten stands + sponsor. */
.middle-stand-set .upper,
.middle-stand-set .lower {
  width: 960px;
  height: 145px;
  min-height: 145px;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  background: var(--middle-bg);
  border-radius: 0;
  overflow: visible;
}

.middle-stand-set > .left .upper,
.middle-stand-set > .left .lower {
  justify-content: flex-start;
}

.middle-stand-set > .right .upper,
.middle-stand-set > .right .lower {
  justify-content: flex-end;
}

/* Central training room */
/*
.middle-stand-set > .training {
  flex: 0 0 240px;
  width: 240px;
  min-width: 240px;
  height: 250px;
  margin: 0 18px;
  padding: 10px;
  z-index: 1;

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

  text-align: center;
  font-weight: bold;

  background: #fff;
  border: 2px solid var(--oranged-color);
  border-radius: 24%;
  box-sizing: border-box;
}
*/

.middle-stand-set > .training {
  flex: 0 0 420px;
  width: 420px;
  min-width: 420px;
  min-height: 320px;

  margin: 0 32px;
  padding: 24px;

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

  text-align: center;
  font-weight: bold;

  background: #fff;
  border: 3px double var(--oranged-color);
  
  border-radius: 8px 10px;
  box-sizing: border-box;
}

.lounge {
  width: 100%;
  height: 100%;
  margin: 0;

  background: #fff8ee;
  
  border-radius: 18%;

  display: flex;
  flex-direction: column;
  align-items: center;

  box-sizing: border-box;
  overflow: hidden;
}

.lounge > p {
  margin: 14px 0 8px;
  font-size: 1.4rem;
  font-weight: bold;
}


/* =========================================================
   STANDS
   ========================================================= */

.stand {
  flex: 0 0 80px;
  width: 80px;
  height: 145px;
  min-height: 145px;
  background-color: white;
  margin: 0;
  border-left: var(--stand-border);
  border-right: var(--stand-border);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  position: relative;
  z-index: 5;
  transform-origin: center;
}

.stand-sponsor {
  flex: 0 0 150px;
  width: 150px;
  height: 100%;
  min-height: 100px;

  background-color: white;
  margin: 0;

  border: var(--stand-border);

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: bottom;

  position: relative;
  z-index: 5;

  box-sizing: border-box;
  overflow: hidden;
}

.stand-sponsor img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

.background-images {
  display: block;
  width: 100% !important;
  height: 118px !important;
  object-fit: cover;
  margin: 0;
  position: relative;
}

.stand:first-of-type {
  border-left: 2px solid var(--stand-gold);
}

.stand:last-of-type {
  border-right: 2px solid var(--stand-gold);
}

.stand:hover,
.stand-sponsor:hover {
  background: white;
  transform: scale(1.5);
  z-index: 20;
}

.stand:active,
.stand-sponsor:active {
  background: white;
  transform: scale(2.5);
  z-index: 30;
}

/* Labels */
.stand p,
.stand-sponsor p {
  min-height: 22px;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stand p > span,
.stand-sponsor p > span {
  width: 100%;
  margin: 0;
  padding: 2px 3px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75em;
  font-weight: 700;
  background-color: var(--stand-gold);
  border-color: var(--stand-gold);
  color: white;
}

/* Important: `.right` is also used inside stand labels.
   Do not give the generic `.right` class layout rules. */
.right.bold {
  margin-left: auto;
  font-weight: 800;
}

.up {
  border-bottom: 2px solid var(--yellow-color);
  border-right: var(--stand-border);
}

.down {
  border-right: var(--stand-border);
  border-top: 2px solid var(--yellow-color);
}

/* =========================================================
   STAND LIVE AREA
   ========================================================= */


.stand-live-area {
  width: min(1400px, 92%);
  margin: 35px auto 55px;
  padding: 28px;

  background:
    linear-gradient(
      135deg,
      #fff8ee,
      #ffffff
    );

  border: 1px solid rgba(239, 183, 98, 0.65);
  border-radius: 28px;

  box-shadow:
    0 18px 50px rgba(60, 45, 20, 0.1);
}

.stand-live-area__header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  margin-bottom: 24px;
}

.stand-live-area__header h2 {
  margin: 6px 0 0;
  font-size: 2rem;
}

.stand-presence {
  padding: 7px 13px;
  border-radius: 999px;

  font-size: 0.8rem;
  font-weight: 800;
}

.stand-presence--offline {
  background: #eee;
  color: #666;
}

.stand-presence--online {
  background: #dff7e5;
  color: #24753a;
}

.stand-live-area__content {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 28px;
}

.stand-live-host {
  padding: 20px;

  border-radius: 22px;
  background: white;

  text-align: center;
}

.stand-live-host__visual {
  width: 150px;
  height: 150px;

  margin: 0 auto 14px;

  overflow: hidden;
  border-radius: 50%;

  background: #fff1d8;
}

.stand-live-host__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.stand-live-host__placeholder {
  width: 100%;
  height: 100%;

  display: grid;
  place-items: center;

  font-size: 3rem;
  font-weight: 900;

  color: orangered;
}

.stand-live-host__details {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.stand-live-host__details span {
  color: #777;
  font-size: 0.9rem;
}

.stand-chat {
  min-height: 250px;

  display: flex;
  flex-direction: column;

  border-radius: 22px;
  overflow: hidden;

  background: white;
}

.stand-chat__messages {
  flex: 1;

  padding: 24px;

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

.stand-chat__empty {
  text-align: center;
  color: #777;
}

.stand-chat__empty span {
  display: block;

  margin-bottom: 8px;

  color: #333;
  font-weight: 800;
}

.stand-chat__composer {
  display: flex;
  gap: 10px;

  padding: 14px;

  border-top: 1px solid #eee;
}

.stand-chat__composer input {
  flex: 1;

  padding: 11px 14px;

  border: 1px solid #ddd;
  border-radius: 999px;
}

.stand-chat__composer button {
  padding: 10px 18px;

  border-radius: 999px;
}

.stand-chat__coming-soon {
  display: block;

  padding: 0 16px 14px;

  color: #999;
  text-align: center;
}

@media (max-width: 850px) {
  .stand-live-area__content {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   SHOW / ACTIVITY SPACE
   ========================================================= */

.show-place {
  width: 100%;
  height: 100%;
  z-index: 1;
  border-radius: 0;
  border-bottom: 4px double #0a0a23;
  font-weight: bold;
  background: repeating-linear-gradient(
    var(--outside-green),
    var(--outside-green) 6%,
    var(--outside-clear-green) 6%,
    var(--outside-clear-green) 9%
  );
}

/* =========================================================
   TRAINING SPACES OUTSIDE THE MAIN EXHIBITION
   ========================================================= */

.space-trainings {
  border: none;
  width: 960px;
  height: 100vh;
  padding: 0;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.training-default {
  width: 100%;
  height: 50%;
  z-index: 1;
  border-radius: 30%;
  margin: 0 10px;
  border-top: 4px double var(--oranged-color);
  border-bottom: 4px double var(--oranged-color);
  font-weight: bold;
  /* */
  background: repeating-linear-gradient(
    var(--oranged-color),
    var(--oranged-color) 6%,
    var(--blue-color) 6%,
    var(--yellow-color) 9%
  ),
  var(--red-color);
    
  /* background: purple !important; */
}

.training-accounting {
  justify-items: flex-end;
  width: 10%;
  height: 100%;
  z-index: 1;
  border-radius: 30%;
  margin: 0 10px;
  border-top: 4px double var(--oranged-color);
  border-bottom: 4px double var(--oranged-color);
  font-weight: bold;
  background: repeating-linear-gradient(
      var(--oranged-color),
      var(--oranged-color) 6%,
      var(--blue-color) 6%,
      var(--yellow-color) 9%
    ),
    var(--red-color);
}

.training-ict {
  width: 75%;
  height: 50%;
  z-index: 1;
  border-radius: 30%;
  margin: 0 10px;
  border-top: 4px double var(--oranged-color);
  border-bottom: 4px double var(--oranged-color);
  font-weight: bold;
  background: repeating-linear-gradient(
      var(--oranged-color),
      var(--oranged-color) 6%,
      var(--blue-color) 6%,
      var(--yellow-color) 9%
    ),
    var(--red-color);
}

.training-mc {
  width: 25%;
  height: 25%;
  z-index: 1;
  border-radius: 30%;
  margin: 0 10px;
  border-top: 4px double var(--oranged-color);
  border-bottom: 4px double var(--oranged-color);
  font-weight: bold;
  background: repeating-linear-gradient(
      var(--oranged-color),
      var(--oranged-color) 6%,
      var(--blue-color) 6%,
      var(--yellow-color) 9%
    ),
    var(--red-color);
}

/* =========================================================
   ANNOUNCEMENT / PARTNER SPACE
   ========================================================= */

.space-announces {
  display: flex;
  border: 2px solid var(--stand-gold);
  width: 3600px;
  height: 250vh;
  padding: 0;
  margin: 10px auto;
}

.lion {
  width: auto;
  height: auto;
  position: relative;
}

.logos {
  width: 75%;
  height: 33%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: auto;
}

.logos .logo {
  width: 20%;
  height: 20%;
  margin: auto;
}

.bold {
  font-weight: 800;
}

.large {
  height: 10px;
}

.large,
.medium {
  background-color: black;
  border: 0;
}

.medium {
  height: 5px;
}

.small-text {
  font-size: 0.85rem;
}

.sky {
  background: radial-gradient(
    circle closest-corner at 15% 15%,
    #ffcf33,
    #ffcf33 20%,
    #ffff66 21%,
    #bbeeff 100%
  );
}

/* =========================================
   @MEDIA
   ========================================= */

/* Keep horizontal scrolling on smaller displays: this is an exhibition hall,
   not a conventional single-column webpage. */
@media (max-width: 1000px) {
  .sky {
    background: radial-gradient(
      closest-corner circle at 15% 15%,
      #ccc,
      #ccc 20%,
      #445 21%,
      #223 100%
    );
  }
}
/* ============================================================
   AUTHENTICATION
   ============================================================ */

.auth-page {
  min-height: 100vh;

  padding:
    36px 20px 60px;

  display: flex;

  justify-content: center;

  background:
    linear-gradient(
      145deg,
      #fff 0%,
      #fff8f2 55%,
      #fff1e5 100%
    );

  box-sizing: border-box;
}


.auth-shell {
  width: 100%;
  max-width: 860px;
}


/* ============================================================
   TOPBAR
   ============================================================ */

.auth-topbar {
  margin-bottom: 24px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 20px;
}


.auth-brand {
  display: flex;

  align-items: center;

  gap: 10px;

  text-decoration: none;
}


.auth-brand__mark {
  width: 38px;
  height: 38px;

  display: flex;

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

  border-radius: 12px;

  background:
    var(--oranged-color, orangered);

  color: #fff;

  font-size: 0.72rem;
  font-weight: 900;

  letter-spacing: 0.05em;
}


.auth-brand__text {
  color: #292929;

  font-size: 0.9rem;

  font-weight: 900;
}


.auth-language {
  display: flex;

  align-items: center;

  gap: 6px;

  color: #aaa;

  font-size: 0.75rem;

  font-weight: 800;
}


.auth-language__link {
  color: #888;

  text-decoration: none;
}


.auth-language__link--active {
  color:
    var(--oranged-color, orangered);
}


/* ============================================================
   CARD
   ============================================================ */

.auth-card {
  width: 100%;

  max-width: 520px;

  margin: 0 auto;

  padding:
    38px 40px;

  background: #fff;

  border:
    1px solid rgba(
      239,
      183,
      98,
      0.55
    );

  border-radius:
    24px;

  box-shadow:
    0 20px 60px
    rgba(
      77,
      47,
      24,
      0.08
    );

  box-sizing: border-box;
}


.auth-card--wide {
  max-width: 760px;
}


/* ============================================================
   INTRO
   ============================================================ */

.auth-card__intro {
  margin-bottom: 30px;
}


.auth-eyebrow {
  display: block;

  margin-bottom: 8px;

  color:
    var(--oranged-color, orangered);

  font-size: 0.7rem;

  font-weight: 900;

  letter-spacing:
    0.16em;

  text-transform:
    uppercase;
}


.auth-card__intro h1 {
  margin:
    0 0 8px;

  color: #262626;

  font-size:
    clamp(
      1.7rem,
      4vw,
      2.2rem
    );

  line-height: 1.15;
}


.auth-card__intro p {
  margin: 0;

  max-width: 560px;

  color: #777;

  font-size: 0.92rem;

  line-height: 1.55;
}


/* ============================================================
   FORM
   ============================================================ */

.auth-form {
  display: flex;

  flex-direction: column;

  gap: 18px;
}


.auth-form__grid {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 18px;
}


/* ============================================================
   FIELDS
   ============================================================ */

.auth-field {
  display: flex;

  flex-direction: column;

  gap: 7px;
}


.auth-field__label {
  color: #444;

  font-size: 0.78rem;

  font-weight: 850;
}


.auth-field__input {
  width: 100%;

  padding:
    12px 14px;

  border:
    1px solid #ddd6cf;

  border-radius:
    12px;

  background: #fff;

  color: #292929;

  font: inherit;

  font-size: 0.9rem;

  outline: none;

  box-sizing: border-box;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}


.auth-field__input:focus {
  border-color:
    var(--oranged-color, orangered);

  box-shadow:
    0 0 0 3px
    rgba(
      255,
      69,
      0,
      0.08
    );
}


textarea.auth-field__input {
  resize: vertical;
}


.auth-field__hint {
  color: #999;

  font-size: 0.72rem;

  line-height: 1.4;
}


/* ============================================================
   CHECKBOX
   ============================================================ */

.auth-check {
  display: flex;

  align-items: center;

  gap: 8px;

  width: fit-content;

  color: #666;

  font-size: 0.78rem;

  cursor: pointer;
}


.auth-check input {
  accent-color:
    var(--oranged-color, orangered);
}


/* ============================================================
   PRIMARY ACTION
   ============================================================ */

.auth-submit {
  width: 100%;

  padding:
    12px 18px;

  border:
    1px solid
    var(--oranged-color, orangered);

  border-radius:
    999px;

  background:
    var(--oranged-color, orangered);

  color: #fff;

  font: inherit;

  font-size: 0.86rem;

  font-weight: 900;

  cursor: pointer;

  transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}


.auth-submit:hover {
  background: #fff;

  color:
    var(--oranged-color, orangered);

  transform:
    translateY(-1px);
}


/* ============================================================
   DEVISE LINKS
   ============================================================ */

.auth-links {
  margin-top: 22px;

  padding-top: 18px;

  border-top:
    1px solid #eee8e2;

  display: flex;

  flex-direction: column;

  gap: 7px;

  text-align: center;
}


.auth-links a,
.auth-back a {
  color:
    var(--oranged-color, orangered);

  font-size: 0.78rem;

  font-weight: 800;

  text-decoration: none;
}


.auth-links a:hover,
.auth-back a:hover {
  text-decoration: underline;
}


.auth-back {
  margin-top: 20px;

  text-align: center;
}


/* ============================================================
   NOTICES
   ============================================================ */

.auth-notice {
  padding: 12px 14px;

  border-radius: 10px;

  background: #fff8e6;

  color: #856616;

  font-size: 0.8rem;
}


/* ============================================================
   DIVIDER
   ============================================================ */

.auth-divider {
  margin:
    8px 0 0;

  display: flex;

  align-items: center;

  gap: 12px;

  color: #999;

  font-size: 0.7rem;

  font-weight: 900;

  letter-spacing:
    0.1em;

  text-transform: uppercase;
}


.auth-divider::before,
.auth-divider::after {
  content: "";

  flex: 1;

  height: 1px;

  background: #eee8e2;
}


/* ============================================================
   DANGER ZONE
   ============================================================ */

.auth-danger-zone {
  margin-top: 36px;

  padding:
    20px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 20px;

  border:
    1px solid rgba(
      184,
      57,
      50,
      0.25
    );

  border-radius: 16px;

  background:
    rgba(
      184,
      57,
      50,
      0.025
    );
}


.auth-danger-zone strong {
  color: #8e2925;

  font-size: 0.88rem;
}


.auth-danger-zone p {
  margin:
    5px 0 0;

  color: #888;

  font-size: 0.75rem;
}


.auth-danger-zone form {
  margin: 0;

  flex-shrink: 0;
}


.auth-danger-button {
  padding:
    9px 14px;

  border:
    1px solid #b83932;

  border-radius:
    999px;

  background: #fff;

  color: #b83932;

  font: inherit;

  font-size: 0.76rem;

  font-weight: 850;

  cursor: pointer;
}


.auth-danger-button:hover {
  background: #b83932;

  color: #fff;
}


/* ============================================================
   DEVISE ERROR MESSAGES
   ============================================================ */

#error_explanation {
  margin-bottom: 8px;

  padding:
    14px 16px;

  border:
    1px solid
    rgba(
      184,
      57,
      50,
      0.25
    );

  border-radius: 12px;

  background:
    rgba(
      184,
      57,
      50,
      0.04
    );
}


#error_explanation h2 {
  margin:
    0 0 8px;

  color: #9e302b;

  font-size: 0.82rem;
}


#error_explanation ul {
  margin: 0;

  padding-left: 18px;
}


#error_explanation li {
  color: #8d4945;

  font-size: 0.76rem;

  text-align: left;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (
  max-width: 680px
) {

  .auth-page {
    padding:
      24px 14px 40px;
  }


  .auth-card {
    padding:
      28px 22px;
  }


  .auth-form__grid {
    grid-template-columns:
      1fr;
  }


  .auth-brand__text {
    display: none;
  }


  .auth-danger-zone {
    align-items:
      flex-start;

    flex-direction:
      column;
  }

}
/* =========================================
   AVATAR DESIGN SYSTEM
   ========================================= */

:root {
  --avatar-skin: #c98b62;
  --avatar-hair: #181818;
  --avatar-outfit: #ef8c36;
}


/* =========================================
   SHARED CHARACTER
   ========================================= */

.avatar-svg {
  display: block;

  width: 100%;
  height: 100%;

  overflow: visible;

  /*
   * IMPORTANT:
   * The SVG is the visual layer.
   *
   * Walking animations happen HERE,
   * not on .hall-avatar / [data-avatar].
   */
  transform-origin: center bottom;

  will-change: transform;
}


.avatar-skin,
.avatar-arms {
  fill: var(--avatar-skin);
}


.avatar-legs {
  fill: #343434;
}


.avatar-shoes {
  fill: #1d1d1d;
}


.avatar-outfit {
  display: none;
  fill: var(--avatar-outfit);
}


[data-outfit="casual"]
.avatar-outfit--casual,

[data-outfit="business"]
.avatar-outfit--business,

[data-outfit="traditional"]
.avatar-outfit--traditional {
  display: block;
}


.avatar-hair {
  fill: var(--avatar-hair);
}


.avatar-eye {
  fill: #222;
}


.avatar-mouth {
  stroke: #7c342b;
}


/* =========================================
   GENDER
   ========================================= */

.avatar-outfit--male,
.avatar-outfit--female {
  display: none;
}


[data-gender="male"]
.avatar-outfit--male {
  display: block;
}


[data-gender="female"]
.avatar-outfit--female {
  display: block;
}


/* =========================================
   SKIN TONES
   ========================================= */

[data-skin-tone="light"] {
  --avatar-skin: #efc19d;
}


[data-skin-tone="medium"] {
  --avatar-skin: #c98b62;
}


[data-skin-tone="dark"] {
  --avatar-skin: #75452f;
}


/* =========================================
   HAIR COLORS
   ========================================= */

[data-hair-color="black"] {
  --avatar-hair: #181818;
}


[data-hair-color="brown"] {
  --avatar-hair: #6b402b;
}


[data-hair-color="dark-brown"] {
  --avatar-hair: #352219;
}


/* =========================================
   OUTFIT COLORS
   ========================================= */

[data-outfit-color="blue"] {
  --avatar-outfit: #42b7df;
}


[data-outfit-color="orange"] {
  --avatar-outfit: #ef8c36;
}


[data-outfit-color="green"] {
  --avatar-outfit: #4f9b70;
}


[data-outfit-color="white"] {
  --avatar-outfit: #eeeeee;
}


/* =========================================
   HAIRSTYLES
   ========================================= */

.avatar-hair {
  display: none;
}


[data-hairstyle="short"]
.avatar-hair--short,

[data-hairstyle="curly"]
.avatar-hair--curly,

[data-hairstyle="braids"]
.avatar-hair--braids {
  display: block;
}


[data-hairstyle="bald"]
.avatar-hair {
  display: none;
}


/* =========================================
   ACCESSORIES
   ========================================= */

.avatar-glasses,
.avatar-hat {
  display: none;
}


[data-accessory="glasses"]
.avatar-glasses {
  display: block;
  fill: #111;
}


[data-accessory="hat"]
.avatar-hat {
  display: block;
  fill: #222;
}


/* =========================================
   HALL AVATAR
   ========================================= */

.hall-avatar {
  position: absolute;

  left: 80px;
  top: 120px;

  width: 38px;
  height: 68px;

  z-index: 50;

  cursor: pointer;

  /*
   * VERY IMPORTANT:
   *
   * NO left/top transition here.
   *
   * JavaScript updates these values every
   * animation frame. A CSS transition would
   * make getBoundingClientRect() lag behind
   * the logical position and collision
   * detection would become unstable.
   */
  transition: none;

  /*
   * Also DO NOT animate transform on this
   * outer element. It is our physics body.
   */
  transform: none;

  will-change: left, top;
}


/*
 * Hover the visual character only.
 * Never transform the collision container.
 */

.hall-avatar:hover .avatar-svg {
  transform: scale(1.06);
}


/* =========================================
   AVATAR CREATOR PREVIEW
   ========================================= */

.avatar-preview {
  margin-bottom: 24px;
}


.avatar-preview__character {
  width: 90px;
  height: 160px;

  display: block;
}


.avatar-preview p {
  margin-top: 8px;

  font-weight: 700;
}


/* =========================================
   FORM STRUCTURE
   ========================================= */

.avatar-form {
  max-width: 900px;
}


.avatar-options {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  gap: 18px 24px;

  align-items: flex-end;
}


.avatar-option-group {
  display: flex;
  flex-direction: column;

  gap: 6px;

  min-width: 180px;
}


.avatar-option-group label {
  font-weight: 700;
}


.avatar-select {
  width: 180px;
  max-width: 180px;

  padding: 8px 10px;

  border: 1px solid #ccc;
  border-radius: 8px;
}


/* =========================================
   GENDER CARDS
   ========================================= */

.avatar-gender-options {
  display: flex;

  gap: 18px;

  margin-top: 10px;
}


.avatar-gender-card {
  min-width: 130px;

  padding: 18px 22px;

  border: 2px solid #efb762;
  border-radius: 18px;

  background: white;

  text-align: center;
  font-weight: 700;

  cursor: pointer;

  transition:
    transform 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}


.avatar-gender-card:hover {
  transform: translateY(-3px);

  background: #fff8ee;

  box-shadow:
    0 8px 22px
    rgba(80, 55, 20, 0.12);
}


.avatar-gender-card input {
  margin-right: 8px;
}


.avatar-gender-group {
  flex-basis: 100%;
}


/* =========================================
   SAVE BUTTON
   ========================================= */

.avatar-save-button {
  height: 42px;

  margin: 0;

  padding: 10px 20px;

  align-self: flex-end;
}


.avatar-save-button:hover {
  background: #efb762;
}


/* =========================================
   AVATAR NAME DISPLAY
   ========================================= */

.avatar-name {
  position: absolute;

  left: 50%;
  bottom: 100%;

  transform: translateX(-50%);

  margin-bottom: 4px;

  padding: 2px 6px;

  white-space: nowrap;

  background:
    rgba(255, 255, 255, 0.92);

  color: #333;

  border: 1px solid #efb762;
  border-radius: 999px;

  font-size: 0.62rem;
  font-weight: 700;

  /*
   * Prevent the name label interfering
   * with clicks/collision.
   */
  pointer-events: none;

  z-index: 3;
}


/* =========================================
   WALKING ANIMATION
   ========================================= */

/*
 * CRITICAL:
 *
 * [data-avatar] itself is NEVER animated.
 *
 * Only .avatar-svg moves visually.
 *
 * Therefore getBoundingClientRect() on the
 * outer avatar remains stable for physics.
 */


/* -----------------------------------------
   FORWARD / BACK WALK
   ----------------------------------------- */

[data-avatar].is-walking
.avatar-svg {
  animation:
    avatar-walk
    0.24s
    infinite
    alternate
    ease-in-out;
}


@keyframes avatar-walk {
  0% {
    transform:
      translateY(0)
      rotate(-1.3deg);
  }

  100% {
    transform:
      translateY(-3px)
      rotate(1.3deg);
  }
}


/* -----------------------------------------
   SIDE WALK
   ----------------------------------------- */

[data-avatar].is-walking[data-direction="left"]
.avatar-svg,

[data-avatar].is-walking[data-direction="right"]
.avatar-svg {
  animation:
    avatar-walk-side
    0.22s
    infinite
    alternate
    ease-in-out;
}


@keyframes avatar-walk-side {
  0% {
    transform:
      translateY(0)
      rotate(-2deg);
  }

  100% {
    transform:
      translateY(-3px)
      rotate(2deg);
  }
}


/*
 * Small visual lean.
 *
 * We deliberately do NOT use scaleX(-1)
 * yet because your SVG may contain text or
 * asymmetrical accessories. We can add
 * proper directional facing separately.
 */

[data-avatar][data-direction="left"]
.avatar-svg {
  transform-origin: 48% 100%;
}


[data-avatar][data-direction="right"]
.avatar-svg {
  transform-origin: 52% 100%;
}


/* =========================================
   STAND ENTRY PROMPT
   ========================================= */

.stand-entry-prompt {
  position: fixed;

  left: 50%;
  bottom: 28px;

  transform: translateX(-50%);

  z-index: 200;

  display: flex;
  align-items: center;

  gap: 12px;

  padding: 10px 18px;

  background:
    rgba(20, 20, 20, 0.92);

  color: white;

  border: 2px solid #efb762;
  border-radius: 999px;

  font-size: 0.9rem;

  box-shadow:
    0 8px 24px
    rgba(0, 0, 0, 0.22);

  pointer-events: none;
}


.stand-entry-prompt[hidden] {
  display: none;
}


.stand-entry-prompt__label {
  color: #efb762;

  font-weight: 800;
}


/* =========================================
   NEARBY NORMAL STAND
   ========================================= */

.stand.near-avatar {
  outline:
    3px solid orangered;

  outline-offset: 2px;

  box-shadow:
    0 0 0 5px
    rgba(255, 69, 0, 0.12);

  z-index: 25;
}


/* =========================================
   NEARBY SPONSOR
   ========================================= */

.stand-sponsor.near-avatar {
  outline:
    3px solid #7c4dff;

  outline-offset: 3px;

  box-shadow:
    0 0 0 5px
    rgba(124, 77, 255, 0.15);

  z-index: 30;
}


/* =========================================
   STAND MODAL
   ========================================= */

.stand-modal {
  position: fixed;

  inset: 0;

  z-index: 500;
}


.stand-modal[hidden] {
  display: none;
}


.stand-modal__backdrop {
  position: absolute;

  inset: 0;

  background:
    rgba(0, 0, 0, 0.68);
}


.stand-modal__panel {
  position: absolute;

  inset: 4vh 4vw;

  overflow-y: auto;

  background: white;

  border-radius: 24px;

  box-shadow:
    0 24px 80px
    rgba(0, 0, 0, 0.3);
}


.stand-modal__close {
  position: sticky;

  top: 18px;

  float: right;

  z-index: 20;

  width: 44px;
  height: 44px;

  margin: 18px;

  border:
    1px solid #efb762;

  border-radius: 50%;

  background: white;

  font-size: 1.6rem;

  cursor: pointer;
}


.stand-modal__loading,
.stand-modal__error {
  padding: 50px;

  text-align: center;

  font-size: 1rem;

  color: #666;
}


body.stand-modal-open {
  overflow: hidden;
}

/* =========================================
   REMOTE USERS
   ========================================= */

.remote-avatar {
  z-index: 49;
  pointer-events: none;
  transition: none;
}

.remote-avatar__placeholder {
  width: 32px;
  height: 32px;

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

  border-radius: 50%;

  background: #ef8c36;
  color: white;

  font-size: 1.2rem;

  border: 2px solid white;

  box-shadow:
    0 3px 10px
    rgba(0, 0, 0, 0.22);
}

.remote-avatar__character {
  width: 100%;
  height: 100%;
}

.remote-avatar__character .avatar-svg {
  width: 100%;
  height: 100%;
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 700px) {

  .avatar-gender-options {
    flex-direction: column;
  }


  .avatar-gender-card {
    width: 100%;
  }


  .stand-modal__panel {
    inset: 2vh 2vw;

    border-radius: 18px;
  }


  .stand-entry-prompt {
    bottom: 16px;

    max-width:
      calc(100vw - 28px);

    font-size: 0.78rem;
  }
}
/* ============================================================
   CONFERENCE / LIBRARY
   ============================================================ */

.conference-library {
  position: relative;

  width: 100%;
  min-height: 920px;

  background: #fffdf8;

  overflow: hidden;
}


/* ============================================================
   HEADER
   ============================================================ */

.conference-library__header {
  position: absolute;

  top: 34px;
  left: 48px;

  z-index: 10;

  max-width: 420px;
}


.conference-library__eyebrow {
  color: orangered;

  font-size: 0.72rem;

  font-weight: 900;

  letter-spacing: 0.15em;

  text-transform: uppercase;
}


.conference-library__header h2 {
  margin: 5px 0 7px;

  font-size: 1.8rem;
}


.conference-library__header p {
  margin: 0;

  color: #777;
}


/* ============================================================
   WALLS
   ============================================================ */

.conference-library__wall {
  position: absolute;

  z-index: 30;

  background: #d4bea0;
}


/* TOP */

.conference-library__wall--top-left {
  top: 0;
  left: 0;

  width: calc(50% - 100px);
  height: 7px;
}


.conference-library__wall--top-right {
  top: 0;
  right: 0;

  width: calc(50% - 100px);
  height: 7px;
}


/* LEFT — split around exhibition-facing entrance */

.conference-library__wall--left-top {
  top: 0;
  left: 0;

  width: 7px;

  height: calc(50% - 75px);
}


.conference-library__wall--left-bottom {
  bottom: 0;
  left: 0;

  width: 7px;

  height: calc(50% - 75px);
}


/* RIGHT */

.conference-library__wall--right {
  top: 0;
  right: 0;

  width: 7px;
  height: 100%;
}


/* BOTTOM */

.conference-library__wall--bottom-left {
  bottom: 0;
  left: 0;

  width: calc(50% - 100px);
  height: 7px;
}


.conference-library__wall--bottom-right {
  right: 0;
  bottom: 0;

  width: calc(50% - 100px);
  height: 7px;
}


/* ============================================================
   ENTRANCES
   ============================================================ */

.conference-library__door {
  position: absolute;

  z-index: 20;

  display: flex;

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

  color: #a66b25;

  font-size: 0.68rem;

  font-weight: 800;

  pointer-events: none;
}


/* TOP */

.conference-library__door--top {
  top: 0;
  left: 50%;

  width: 200px;
  height: 55px;

  transform: translateX(-50%);
}


/* BOTTOM */

.conference-library__door--bottom {
  bottom: 0;
  left: 50%;

  width: 200px;
  height: 55px;

  transform: translateX(-50%);
}


/* LEFT — facing exhibition */

.conference-library__door--left {
  left: 0;
  top: 50%;

  width: 105px;
  height: 150px;

  transform: translateY(-50%);

  justify-content: flex-start;

  padding-left: 15px;
}


/* ============================================================
   CONFERENCE ZONE
   ============================================================ */

.conference-library__conference-zone {
  position: absolute;

  left: 45px;
  top: 170px;

  width: 820px;
  height: 330px;

  border-bottom: 1px dashed #e5d5bc;
}


.conference-library__conference-zone h3,
.conference-library__library-zone h3 {
  margin: 0;

  color: #555;

  font-size: 0.9rem;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}


/* ============================================================
   SCREEN
   ============================================================ */

.conference-library__screen {
  position: absolute;

  top: 35px;
  left: 275px;

  width: 270px;
  height: 58px;

  display: flex;

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

  background: #33424c;

  border-radius: 5px;

  color: #fff;

  font-size: 0.75rem;
}


/* ============================================================
   PODIUM
   ============================================================ */

.conference-library__podium {
  position: absolute;

  top: 115px;
  left: 365px;

  width: 90px;
  height: 50px;

  display: flex;

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

  background: #ad7b43;

  border-radius: 5px;

  color: white;

  font-size: 0.7rem;
}


/* ============================================================
   CONFERENCE TABLE
   ============================================================ */

.conference-library__conference-table {
  position: absolute;

  left: 195px;
  top: 205px;

  width: 430px;
  height: 72px;

  display: flex;

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

  background: #d8aa6c;

  border-radius: 36px;

  color: #654014;

  font-weight: 800;
}


/* ============================================================
   CONFERENCE CHAIRS
   ============================================================ */

.conference-library__conference-chair {
  position: absolute;

  width: 34px;
  height: 34px;

  border-radius:
    8px 8px
    15px 15px;

  background: #6d5948;
}


.conference-library__conference-chair--1 {
  left: 220px;
  top: 175px;
}

.conference-library__conference-chair--2 {
  left: 330px;
  top: 175px;
}

.conference-library__conference-chair--3 {
  left: 445px;
  top: 175px;
}

.conference-library__conference-chair--4 {
  left: 560px;
  top: 175px;
}

.conference-library__conference-chair--5 {
  left: 220px;
  top: 285px;
}

.conference-library__conference-chair--6 {
  left: 330px;
  top: 285px;
}

.conference-library__conference-chair--7 {
  left: 445px;
  top: 285px;
}

.conference-library__conference-chair--8 {
  left: 560px;
  top: 285px;
}


/* ============================================================
   LIBRARY
   ============================================================ */

.conference-library__library-zone {
  position: absolute;

  left: 45px;
  top: 535px;

  width: 820px;
  height: 300px;
}


/* ============================================================
   BOOKSHELVES
   ============================================================ */

.conference-library__bookshelf {
  position: absolute;

  width: 95px;
  height: 190px;

  display: flex;

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

  background:
    repeating-linear-gradient(
      to bottom,
      #9d7043,
      #9d7043 28px,
      #69482e 29px,
      #69482e 33px
    );

  border-radius: 5px;

  color: white;

  font-size: 0.7rem;

  writing-mode: vertical-rl;
}


.conference-library__bookshelf--1 {
  left: 0;
  top: 50px;
}

.conference-library__bookshelf--2 {
  left: 110px;
  top: 50px;
}

.conference-library__bookshelf--3 {
  right: 0;
  top: 50px;
}


/* ============================================================
   READING TABLES
   ============================================================ */

.conference-library__reading-table {
  position: absolute;

  width: 210px;
  height: 62px;

  display: flex;

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

  background: #d4ac77;

  border-radius: 14px;

  color: #68491d;

  font-size: 0.75rem;

  font-weight: 700;
}


.conference-library__reading-table--1 {
  left: 280px;
  top: 75px;
}

.conference-library__reading-table--2 {
  left: 280px;
  top: 185px;
}


/* ============================================================
   READING CHAIRS
   ============================================================ */

.conference-library__reading-chair {
  position: absolute;

  width: 32px;
  height: 32px;

  background: #75604d;

  border-radius:
    8px 8px
    15px 15px;
}


.conference-library__reading-chair--1 {
  left: 365px;
  top: 38px;
}

.conference-library__reading-chair--2 {
  left: 365px;
  top: 145px;
}

.conference-library__reading-chair--3 {
  left: 365px;
  top: 148px;
}

.conference-library__reading-chair--4 {
  left: 365px;
  top: 255px;
}


/* ============================================================
   WALKING FLOOR
   ============================================================ */

.conference-library__walking-floor {
  position: absolute;

  inset: 7px;

  pointer-events: none;
}
/* =========================================
   ENTREPRENEUR WORKSPACE
   ========================================= */

.workspace {
  width: min(1380px, 94%);
  margin: 0 auto;
  padding: 38px 0 70px;
  box-sizing: border-box;

  color: #292929;
}


/* =========================================
   HEADER
   ========================================= */

.workspace-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;

  gap: 30px;

  margin-bottom: 28px;
}


.workspace-eyebrow,
.workspace-section__eyebrow {
  display: block;

  margin: 0 0 6px;

  color: orangered;

  font-size: 0.75rem;
  font-weight: 800;

  letter-spacing: 0.13em;
  text-transform: uppercase;
}


.workspace-header h1 {
  margin: 0;

  font-size: clamp(
    2rem,
    4vw,
    3.3rem
  );

  line-height: 1.05;
}


.workspace-subtitle {
  max-width: 650px;

  margin: 10px 0 0;

  color: #777;

  line-height: 1.6;
}


.workspace-header__actions {
  display: flex;
  flex-wrap: wrap;

  gap: 10px;
}


/* =========================================
   BUTTONS
   ========================================= */

.workspace-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 42px;

  padding: 10px 18px;

  border: 0;
  border-radius: 999px;

  font: inherit;
  font-size: 0.9rem;
  font-weight: 800;

  text-decoration: none;

  cursor: pointer;

  box-sizing: border-box;
}


.workspace-button--primary {
  background: orangered;
  color: #fff;
}


.workspace-button--primary:hover {
  filter: brightness(0.94);
}


.workspace-button--secondary {
  background: #fff5e7;
  color: #b94700;

  border: 1px solid #f1d4aa;
}


.workspace-button--danger {
  background: #fff0f0;
  color: #a62c2c;

  border: 1px solid #efc6c6;
}


/* =========================================
   NOTICE
   ========================================= */

.workspace-notice {
  margin-bottom: 22px;

  padding: 13px 17px;

  background: #eaf8ee;
  color: #246b36;

  border: 1px solid #ccebd4;
  border-radius: 12px;

  font-weight: 700;
}


/* =========================================
   TABS
   ========================================= */

.workspace-tabs {
  display: flex;
  flex-wrap: wrap;

  gap: 7px;

  margin-bottom: 30px;
  padding-bottom: 11px;

  border-bottom: 1px solid #eee;
}


.workspace-tab {
  display: inline-flex;

  padding: 9px 14px;

  color: #666;

  border-radius: 999px;

  font-size: 0.88rem;
  font-weight: 750;

  text-decoration: none;
}


.workspace-tab--active {
  background: #fff0d4;
  color: orangered;
}


/* =========================================
   SUMMARY
   ========================================= */

.workspace-summary {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 16px;

  margin-bottom: 42px;
}


.workspace-summary-card {
  padding: 22px;

  background: #fff;

  border: 1px solid #eee0c9;
  border-radius: 20px;

  box-shadow:
    0 10px 30px
    rgba(70, 45, 10, 0.05);
}


.workspace-summary-card__label {
  display: block;

  margin-bottom: 9px;

  color: #888;

  font-size: 0.78rem;
  font-weight: 800;

  text-transform: uppercase;
  letter-spacing: 0.07em;
}


.workspace-summary-card__value {
  display: block;

  margin-bottom: 6px;

  color: #222;

  font-size: 1.7rem;
}


.workspace-summary-card small {
  color: #999;
}


/* =========================================
   SECTIONS
   ========================================= */

.workspace-section {
  margin-top: 38px;
}


.workspace-section__heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 20px;

  margin-bottom: 15px;
}


.workspace-section__heading h2 {
  margin: 0;

  font-size: 1.45rem;
}


.workspace-section__count {
  color: #888;

  font-size: 0.85rem;
  font-weight: 700;
}


/* =========================================
   CATEGORY CARDS
   ========================================= */

.expense-category-grid {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(220px, 1fr)
    );

  gap: 14px;
}


.expense-category-card {
  display: flex;
  flex-direction: column;

  gap: 20px;

  padding: 18px;

  background: #fff8ee;

  border: 1px solid #efdfc5;
  border-radius: 18px;
}


.expense-category-card__header {
  display: flex;
  align-items: center;

  gap: 12px;
}


.expense-category-card__header h3 {
  margin: 0 0 3px;

  font-size: 1rem;
}


.expense-category-card__header span {
  color: #888;

  font-size: 0.8rem;
}


.expense-category-card__icon,
.expense-category-card__icon-placeholder {
  width: 42px;
  height: 42px;

  flex: 0 0 42px;

  border-radius: 12px;
}


.expense-category-card__icon {
  object-fit: cover;
}


.expense-category-card__icon-placeholder {
  display: grid;
  place-items: center;

  background: #ffe4b7;
  color: orangered;

  font-weight: 900;
}


.expense-category-card__total {
  font-size: 1.25rem;
}


.category-detail-icon {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 16px;
}

.category-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding-top: 14px;
  border-top: 1px solid #ead9bf;
}

.workspace-field--full {
  margin-top: 24px;
}

.workspace-field__textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid #ddd;
  border-radius: 12px;
  resize: vertical;
  font: inherit;
  box-sizing: border-box;
}

.entry-table-header,
.entry-row {
  display: grid;
  grid-template-columns:
    minmax(180px, 1.4fr)
    minmax(130px, 0.8fr)
    130px
    130px
    120px
    60px;
  gap: 16px;
  align-items: center;
}

.entry-table-header {
  padding: 12px 20px;
  background: #fff8ee;
  color: #888;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.entry-row {
  padding: 17px 20px;
  border-top: 1px solid #f1f1f1;
}

.entry-row__main {
  min-width: 0;
}

.entry-row__name {
  display: block;
}

.entry-row__note {
  display: block;
  margin-top: 4px;
  color: #888;
}

.entry-row__date {
  color: #888;
  font-size: 0.83rem;
}

.entry-row__amount {
  color: #24753a;
  font-weight: 900;
  text-align: right;
}

.entry-row__action {
  text-align: right;
}

.entry-invoice-badge {
  display: inline-flex;
  padding: 4px 8px;
  border-radius: 999px;
  background: #eef7ff;
  color: #2c6085;
  font-size: 0.7rem;
  font-weight: 800;
}

.entry-current-invoice {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.entry-current-invoice__image {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border-radius: 12px;
}

.entry-invoice-preview {
  display: block;
  width: min(500px, 100%);
  max-height: 550px;
  object-fit: contain;
  margin-top: 10px;
  border-radius: 16px;
  border: 1px solid #eee;
}

.entry-detail-note {
  margin: 0;
  line-height: 1.65;
  color: #555;
}

.workspace-action-grid {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.workspace-action-card {
  display: flex;
  flex-direction: column;
  gap: 5px;

  padding: 16px 18px;

  background: #fff8ee;
  color: #333;

  border: 1px solid #eedbbe;
  border-radius: 15px;

  text-decoration: none;
}

.workspace-action-card span {
  color: orangered;
  font-size: 0.8rem;
  font-weight: 700;
}

.workspace-product-grid {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px;
}

.workspace-product-card {
  overflow: hidden;

  background: white;
  border: 1px solid #eee0c9;
  border-radius: 20px;
}

.workspace-product-card__image {
  height: 190px;
  background: #fff7ea;
}

.workspace-product-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.workspace-product-card__placeholder {
  height: 100%;

  display: grid;
  place-items: center;

  font-size: 3rem;
  font-weight: 900;

  color: orangered;
}

.workspace-product-card__body {
  padding: 18px;
}

.workspace-product-card__body h3 {
  margin: 5px 0 8px;
}

.workspace-product-card__body p {
  color: #777;
  line-height: 1.5;
}

.workspace-product-card__stand {
  color: orangered;
  font-size: 0.75rem;
  font-weight: 800;
}

.workspace-product-card__metrics,
.workspace-product-card__social {
  display: flex;
  justify-content: space-between;
  gap: 12px;

  margin-top: 14px;
}

.workspace-product-card__social {
  justify-content: flex-start;

  color: #888;
  font-size: 0.82rem;
}

.workspace-current-image {
  width: 100px;
  height: 100px;

  margin-bottom: 10px;

  object-fit: cover;
  border-radius: 14px;
}

.workspace-customer-row,
.workspace-order-row {
  display: grid;
  grid-template-columns:
    minmax(240px, 1fr)
    150px
    auto;

  align-items: center;
  gap: 20px;

  padding: 17px 20px;

  border-bottom: 1px solid #eee;
}

.workspace-order-row {
  grid-template-columns:
    minmax(220px, 1fr)
    160px
    130px
    auto;
}

.workspace-customer-row:last-child,
.workspace-order-row:last-child {
  border-bottom: 0;
}

.workspace-customer-row__identity {
  display: flex;
  align-items: center;
  gap: 12px;
}

.workspace-customer-row__identity strong,
.workspace-customer-row__identity span,
.workspace-order-row strong,
.workspace-order-row small {
  display: block;
}

.workspace-customer-row__identity span,
.workspace-order-row small {
  margin-top: 3px;
  color: #888;
}

.workspace-customer-avatar {
  width: 46px;
  height: 46px;

  object-fit: cover;
  border-radius: 50%;
}

.workspace-customer-avatar--placeholder {
  display: grid;
  place-items: center;

  background: #ffe4bd;
  color: orangered;

  font-weight: 900;
}

.order-product-row {
  display: grid;
  grid-template-columns:
    minmax(220px, 1fr)
    130px
    120px;

  gap: 15px;

  margin-bottom: 14px;
  padding: 16px;

  background: #fffaf3;

  border: 1px solid #eedfc9;
  border-radius: 14px;
}

.order-product-remove {
  justify-content: center;
}

.order-detail-products {
  display: flex;
  flex-direction: column;
  gap: 8px;

  margin-top: 8px;
}

.order-detail-product {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 20px;

  padding: 12px 14px;

  background: #fff8ee;
  border-radius: 12px;
}

@media (max-width: 800px) {
  .workspace-customer-row,
  .workspace-order-row {
    grid-template-columns: 1fr;
  }

  .order-product-row {
    grid-template-columns: 1fr;
  }
}


/* =========================================
   PANEL
   ========================================= */

.workspace-panel {
  overflow: hidden;

  background: #fff;

  border: 1px solid #eee0c9;
  border-radius: 20px;

  box-shadow:
    0 12px 34px
    rgba(70, 45, 10, 0.05);
}


/* =========================================
   EXPENSE LIST
   ========================================= */

.expense-table-header,
.expense-row {
  display: grid;

  grid-template-columns:
    minmax(180px, 1.4fr)
    minmax(180px, 1fr)
    130px
    130px
    65px;

  gap: 16px;

  align-items: center;
}


.expense-table-header {
  padding: 12px 20px;

  background: #fff8ee;

  color: #888;

  font-size: 0.72rem;
  font-weight: 800;

  text-transform: uppercase;
  letter-spacing: 0.06em;
}


.expense-row {
  padding: 17px 20px;

  border-top: 1px solid #f1f1f1;
}


.expense-row__name {
  color: #222;
}


.expense-row__categories,
.expense-detail-categories {
  display: flex;
  flex-wrap: wrap;

  gap: 5px;
}


.expense-category-chip {
  display: inline-flex;

  padding: 4px 8px;

  background: #fff0d4;
  color: #a94609;

  border-radius: 999px;

  font-size: 0.72rem;
  font-weight: 800;
}


.expense-row__date {
  color: #888;

  font-size: 0.83rem;
}


.expense-row__amount {
  font-weight: 900;

  text-align: right;
}


.expense-row__action {
  text-align: right;
}


.expense-row__muted {
  color: #aaa;

  font-size: 0.8rem;
}


.workspace-link {
  color: orangered;

  font-size: 0.85rem;
  font-weight: 800;

  text-decoration: none;
}


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


/* =========================================
   EMPTY STATE
   ========================================= */

.workspace-empty {
  padding: 25px;

  color: #888;

  text-align: center;
}


.workspace-empty--large {
  padding: 55px 25px;
}


.workspace-empty--large strong {
  display: block;

  margin-bottom: 7px;

  color: #333;

  font-size: 1.1rem;
}


.workspace-empty--large p {
  margin: 0 0 20px;
}


/* =========================================
   FORMS
   ========================================= */

.workspace--form {
  max-width: 1100px;
}


.workspace-form-container {
  overflow: hidden;

  background: #fff;

  border: 1px solid #eee0c9;
  border-radius: 24px;

  box-shadow:
    0 15px 45px
    rgba(70, 45, 10, 0.06);
}


.workspace-form {
  width: 100%;
}


.workspace-form-section {
  padding: 28px;

  border-bottom: 1px solid #eee;
}


.workspace-form-section__heading {
  margin-bottom: 23px;
}


.workspace-form-section__heading h2 {
  margin: 0 0 6px;

  font-size: 1.3rem;
}


.workspace-form-section__heading p {
  margin: 0;

  color: #888;
}


.workspace-form-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 2fr)
    minmax(180px, 1fr);

  gap: 18px;
}


.workspace-field {
  display: flex;
  flex-direction: column;

  gap: 7px;
}


.workspace-label {
  color: #444;

  font-size: 0.85rem;
  font-weight: 800;
}


.workspace-input {
  width: 100%;

  min-height: 45px;

  padding: 10px 13px;

  background: #fff;

  border: 1px solid #ddd;
  border-radius: 11px;

  font: inherit;

  box-sizing: border-box;
}


.workspace-input:focus {
  outline: 2px solid #ffd9b8;
  border-color: orangered;
}


.workspace-field__help {
  color: #999;

  font-size: 0.76rem;
}


/* =========================================
   CATEGORY SELECTOR
   ========================================= */

.expense-category-selector {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(190px, 1fr)
    );

  gap: 10px;
}


.expense-category-option {
  position: relative;

  cursor: pointer;
}


.expense-category-option__input {
  position: absolute;

  opacity: 0;

  pointer-events: none;
}


.expense-category-option__content {
  display: flex;
  align-items: center;

  gap: 10px;

  min-height: 64px;

  padding: 10px 12px;

  background: #fff;

  border: 1px solid #ddd;
  border-radius: 14px;

  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    transform 0.15s ease;
}


.expense-category-option:hover
.expense-category-option__content {
  border-color: #efb762;

  transform: translateY(-1px);
}


.expense-category-option__input:checked
+
.expense-category-option__content {
  background: #fff5e7;

  border-color: orangered;

  box-shadow:
    0 0 0 2px
    rgba(255, 69, 0, 0.08);
}


.expense-category-option__icon,
.expense-category-option__placeholder {
  width: 38px;
  height: 38px;

  flex: 0 0 38px;

  border-radius: 10px;
}


.expense-category-option__icon {
  object-fit: cover;
}


.expense-category-option__placeholder {
  display: grid;
  place-items: center;

  background: #ffe7c1;
  color: orangered;

  font-weight: 900;
}


.expense-category-option__content strong,
.expense-category-option__content small {
  display: block;
}


.expense-category-option__content small {
  margin-top: 2px;

  color: #999;

  font-size: 0.72rem;
}


/* =========================================
   FORM ACTIONS
   ========================================= */

.workspace-form-actions {
  display: flex;
  justify-content: flex-end;

  gap: 10px;

  padding: 20px 28px;

  background: #fffaf3;
}


/* =========================================
   FORM ERRORS
   ========================================= */

.workspace-form-errors {
  margin: 22px 28px 0;

  padding: 15px 18px;

  background: #fff0f0;
  color: #8f2d2d;

  border: 1px solid #efcaca;
  border-radius: 13px;
}


.workspace-form-errors ul {
  margin: 8px 0 0;
  padding-left: 20px;
}


/* =========================================
   EXPENSE DETAIL
   ========================================= */

.expense-detail-card {
  overflow: hidden;

  background: #fff;

  border: 1px solid #eee0c9;
  border-radius: 24px;

  box-shadow:
    0 15px 45px
    rgba(70, 45, 10, 0.06);
}


.expense-detail-card__amount {
  padding: 30px;

  background: #fff8ee;
}


.expense-detail-card__amount span {
  display: block;

  margin-bottom: 7px;

  color: #888;

  font-size: 0.75rem;
  font-weight: 800;

  text-transform: uppercase;
}


.expense-detail-card__amount strong {
  font-size: 2.3rem;
}


.expense-detail-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 25px;

  padding: 28px;
}


.expense-detail-field span:first-child {
  display: block;

  margin-bottom: 7px;

  color: #999;

  font-size: 0.75rem;
  font-weight: 800;

  text-transform: uppercase;
}


.expense-detail-field--wide {
  grid-column: 1 / -1;
}


/* =========================================
   DANGER ZONE
   ========================================= */

.workspace-danger-zone {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  margin-top: 35px;
  padding: 18px 22px;

  background: #fffafa;

  border: 1px solid #f1dada;
  border-radius: 16px;
}


.workspace-danger-zone p {
  margin: 3px 0 0;

  color: #999;

  font-size: 0.82rem;
}


/* =========================================
   WORKSPACE FORMS
   ========================================= */

.workspace-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.workspace-form__section {
  background: #fff;
  border: 1px solid #f0dcc1;
  border-radius: 24px;
  padding: 32px;
}

.workspace-form__section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 28px;
}

.workspace-form__section h2 {
  margin: 6px 0 8px;
  font-size: 1.5rem;
  color: #242424;
}

.workspace-form__section p {
  margin: 0;
  color: #777;
}

.workspace-form__intro {
  margin-bottom: 28px !important;
}

.workspace-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 28px;
}

.workspace-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.workspace-field__label {
  font-weight: 700;
  color: #292929;
}

.workspace-field__input,
.workspace-field__select {
  width: 100%;
  border: 1px solid #dedede;
  border-radius: 12px;
  background: #fff;
  padding: 14px 16px;
  font: inherit;
  color: #292929;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.workspace-field__input:focus,
.workspace-field__select:focus {
  outline: none;
  border-color: #ff4b00;
  box-shadow: 0 0 0 3px rgba(255, 75, 0, 0.1);
}

.workspace-field__select--categories {
  min-height: 110px;
}

.workspace-field__hint {
  color: #888;
  font-size: 0.85rem;
}

.workspace-money-input {
  position: relative;
}

.workspace-money-input__symbol {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 700;
  color: #777;
  pointer-events: none;
}

.workspace-money-input .workspace-field__input {
  padding-left: 34px;
}

.workspace-form__footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  padding-top: 8px;
}

.workspace-form__errors {
  padding: 18px 22px;
  border: 1px solid #f1b6a2;
  border-radius: 14px;
  background: #fff5f1;
  color: #9c3210;
}

.workspace-form__errors ul {
  margin: 10px 0 0;
  padding-left: 20px;
}


/* =========================================
   RESPONSIVE
   ========================================= */

@media (max-width: 760px) {
  .workspace-form__grid {
    grid-template-columns: 1fr;
  }

  .workspace-form__section-header {
    flex-direction: column;
  }

  .workspace-form__section {
    padding: 22px;
  }

  .workspace-form__footer {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .workspace-form__footer .workspace-button {
    text-align: center;
  }
}


/* =========================================
   QUICK CATEGORY MODAL
   ========================================= */

.workspace-modal[hidden] {
  display: none;
}

.workspace-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;

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

  padding: 24px;
}

.workspace-modal__backdrop {
  position: absolute;
  inset: 0;

  background: rgba(20, 20, 20, 0.48);
  backdrop-filter: blur(3px);
}

.workspace-modal__dialog {
  position: relative;
  z-index: 1;

  width: min(520px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;

  padding: 34px;

  background: #fff;
  border: 1px solid #f0dcc1;
  border-radius: 24px;

  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.18);
}

.workspace-modal__dialog h2 {
  margin: 6px 0 8px;

  font-size: 1.8rem;
  color: #242424;
}

.workspace-modal__intro {
  margin: 0 0 28px;

  color: #777;
  line-height: 1.5;
}

.workspace-modal__close {
  position: absolute;
  top: 18px;
  right: 20px;

  width: 38px;
  height: 38px;

  border: 0;
  border-radius: 50%;

  background: #f8f8f8;
  color: #333;

  font-size: 1.6rem;
  line-height: 1;

  cursor: pointer;
}

.workspace-modal__close:hover {
  background: #fff0e8;
  color: #ff4b00;
}

.workspace-modal .workspace-field {
  margin-bottom: 22px;
}

.workspace-field__file {
  width: 100%;

  padding: 12px;

  border: 1px dashed #d8c5ac;
  border-radius: 12px;

  background: #fffaf5;
}

.workspace-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;

  margin-top: 30px;
}

body.workspace-modal-open {
  overflow: hidden;
}

@media (max-width: 600px) {
  .workspace-modal {
    padding: 14px;
  }

  .workspace-modal__dialog {
    padding: 26px 20px 22px;
  }

  .workspace-modal__actions {
    flex-direction: column-reverse;
  }
}


/* =========================================
   RESPONSIVE
   ========================================= */

@media (max-width: 850px) {

  .workspace-header {
    flex-direction: column;
  }


  .workspace-summary {
    grid-template-columns: 1fr;
  }


  .expense-table-header {
    display: none;
  }


  .expense-row {
    grid-template-columns: 1fr auto;
  }


  .expense-row__categories {
    grid-column: 1 / -1;
  }


  .expense-row__date {
    grid-column: 1;
  }


  .expense-row__amount {
    grid-column: 2;
    grid-row: 1;

    text-align: right;
  }


  .expense-row__action {
    grid-column: 2;

    text-align: right;
  }


  .workspace-form-grid,
  .expense-detail-grid {
    grid-template-columns: 1fr;
  }


  .expense-detail-field--wide {
    grid-column: auto;
  }


  .workspace-danger-zone {
    align-items: flex-start;
    flex-direction: column;
  }

}

/* ============================================================
   WORKSPACE TABS
   ============================================================ */

.workspace-tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 10px;

  margin:
    34px 0
    40px;

  padding:
    0 0
    14px;

  border-bottom:
    1px solid
    #ececec;
}


/*
 * Support both the older class and
 * the newer class while we migrate views.
 */
.workspace-tab,
.workspace-tabs__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 46px;

  padding:
    10px 20px;

  border-radius:
    999px;

  color:
    #555;

  background:
    transparent;

  font-size:
    1rem;

  font-weight:
    700;

  text-decoration:
    none;

  white-space:
    nowrap;

  transition:
    background 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
}


.workspace-tab:hover,
.workspace-tabs__link:hover {
  color:
    orangered;

  background:
    #fff5e5;

  transform:
    translateY(-1px);
}


/* Active tab */

.workspace-tab--active,
.workspace-tabs__link--active {
  color:
    orangered;

  background:
    #fff0d2;
}


/* ============================================================
   OVERVIEW
   ============================================================ */

.workspace-overview {
  width:
    100%;

  padding-bottom:
    70px;
}


.workspace-overview__header {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    30px;

  margin-bottom:
    36px;
}


.workspace-overview__header h1 {
  margin:
    6px 0 10px;

  font-size:
    clamp(
      2.4rem,
      5vw,
      4.7rem
    );

  line-height:
    1;

  color:
    #252525;
}


.workspace-overview__header p {
  max-width:
    720px;

  margin:
    0;

  color:
    #6d6d6d;

  font-size:
    1.05rem;

  line-height:
    1.6;
}


/* ============================================================
   OVERVIEW MAIN METRICS
   ============================================================ */

.overview-metrics {
  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap:
    24px;

  margin-bottom:
    56px;
}


.overview-card {
  min-height:
    170px;

  padding:
    30px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;

  border:
    1px solid
    #efd8b6;

  border-radius:
    28px;

  background:
    #fff;

  box-shadow:
    0 10px 30px
    rgba(
      80,
      55,
      20,
      0.035
    );
}


.overview-card__label {
  color:
    #808080;

  font-size:
    0.88rem;

  font-weight:
    800;

  letter-spacing:
    0.07em;

  text-transform:
    uppercase;
}


.overview-card__value {
  margin:
    14px 0 8px;

  color:
    #141414;

  font-size:
    2.3rem;

  line-height:
    1;

  font-weight:
    800;
}


.overview-card__meta {
  color:
    #898989;

  font-size:
    0.92rem;
}


.overview-card--balance {
  background:
    #fffaf2;
}


.overview-card--negative
.overview-card__value {
  color:
    #b9412c;
}


/* ============================================================
   OVERVIEW SECTIONS
   ============================================================ */

.overview-section {
  margin-bottom:
    56px;
}


.overview-section__heading {
  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    20px;

  margin-bottom:
    22px;
}


.overview-section__heading h2 {
  margin:
    5px 0 0;

  color:
    #202020;

  font-size:
    1.7rem;

  line-height:
    1.2;
}


/* ============================================================
   SMALL STAT CARDS
   ============================================================ */

.overview-small-cards {
  display:
    grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(
        180px,
        1fr
      )
    );

  gap:
    18px;
}


.overview-small-card {
  min-height:
    135px;

  padding:
    24px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  gap:
    8px;

  border:
    1px solid
    #efd8b6;

  border-radius:
    24px;

  background:
    #fffaf2;

  color:
    #202020;

  text-decoration:
    none;

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}


a.overview-small-card:hover {
  transform:
    translateY(-3px);

  border-color:
    #efb762;

  box-shadow:
    0 12px 30px
    rgba(
      80,
      55,
      20,
      0.09
    );
}


.overview-small-card__number {
  color:
    #181818;

  font-size:
    2.3rem;

  line-height:
    1;

  font-weight:
    800;
}


.overview-small-card__label {
  color:
    #777;

  font-size:
    0.95rem;

  font-weight:
    700;
}


/* ============================================================
   QUICK ACTIONS
   ============================================================ */

.overview-actions {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    12px;
}


/* ============================================================
   RECENT ACTIVITY
   ============================================================ */

.overview-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap:
    24px;
}


.overview-panel {
  min-height:
    280px;

  padding:
    28px;

  border:
    1px solid
    #efd8b6;

  border-radius:
    28px;

  background:
    white;
}


.overview-panel__header {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    20px;

  margin-bottom:
    24px;
}


.overview-panel__header h2 {
  margin:
    4px 0 0;

  font-size:
    1.35rem;
}


.overview-panel__link {
  color:
    orangered;

  font-weight:
    700;

  text-decoration:
    none;
}


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


/* ============================================================
   RECENT LIST
   ============================================================ */

.overview-list {
  display:
    flex;

  flex-direction:
    column;
}


.overview-list__item {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  padding:
    16px 0;

  border-bottom:
    1px solid
    #eeeeee;
}


.overview-list__item:last-child {
  border-bottom:
    0;
}


.overview-list__item > div {
  min-width:
    0;
}


.overview-list__item strong {
  display:
    block;

  margin-bottom:
    4px;

  color:
    #222;
}


.overview-list__item small {
  color:
    #888;
}


.overview-list__amount {
  flex-shrink:
    0;

  color:
    #222;

  font-weight:
    800;
}


.overview-list__amount--expense {
  color:
    #b9412c;
}


.overview-list__date {
  flex-shrink:
    0;

  color:
    #888;

  font-size:
    0.88rem;
}


.overview-empty {
  margin:
    20px 0 0;

  color:
    #888;

  line-height:
    1.6;
}


/* ============================================================
   USER MENU
   ============================================================ */

.workspace-user-menu {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    10px;
}


.workspace-user-menu__identity {
  display:
    flex;

  flex-direction:
    column;

  margin-right:
    8px;
}


.workspace-user-menu__name {
  color:
    #222;

  font-weight:
    800;
}


.workspace-user-menu__email {
  color:
    #8a8a8a;

  font-size:
    0.78rem;
}


.workspace-user-menu__link,
.workspace-user-menu__logout {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    40px;

  padding:
    8px 15px;

  border:
    1px solid
    #efd8b6;

  border-radius:
    999px;

  background:
    white;

  color:
    #4c4c4c;

  font-family:
    inherit;

  font-size:
    0.9rem;

  font-weight:
    700;

  text-decoration:
    none;

  cursor:
    pointer;
}


.workspace-user-menu__link:hover,
.workspace-user-menu__logout:hover {
  color:
    orangered;

  border-color:
    #efb762;

  background:
    #fff7eb;
}


.workspace-user-menu__link--admin {
  color:
    orangered;
}


/*
 * button_to creates a form wrapper.
 */
.workspace-user-menu form {
  margin:
    0;
}


/* ==========================================================
   LANGUAGE SWITCHER
   ========================================================== */

.workspace-language-switcher {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;

  padding: 0.25rem;

  border: 1px solid rgba(232, 164, 65, 0.45);
  border-radius: 999px;

  background: #fff;

  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;

  white-space: nowrap;
}


/* ----------------------------------------------------------
   LANGUAGE LINKS
   ---------------------------------------------------------- */

.workspace-language-switcher__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 2.4rem;
  height: 2rem;

  padding: 0 0.65rem;

  border-radius: 999px;

  color: #777;
  text-decoration: none;

  transition:
    background-color 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}


.workspace-language-switcher__link:hover {
  color: #222;

  background: rgba(232, 164, 65, 0.12);

  transform: translateY(-1px);
}


/* ----------------------------------------------------------
   CURRENT LANGUAGE
   ---------------------------------------------------------- */

.workspace-language-switcher__link--active {
  color: #fff;

  background: #e8a441;

  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.08);
}


.workspace-language-switcher__link--active:hover {
  color: #fff;

  background: #d99532;

  transform: none;
}


/* ----------------------------------------------------------
   SEPARATOR
   ---------------------------------------------------------- */

.workspace-language-switcher__separator {
  color: #c7c7c7;

  font-weight: 400;

  user-select: none;
}



/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (
  max-width: 1000px
) {

  .overview-metrics {
    grid-template-columns:
      1fr 1fr;
  }


  .overview-grid {
    grid-template-columns:
      1fr;
  }

}


@media (
  max-width: 700px
) {

  .workspace-overview__header {
    flex-direction:
      column;
  }


  .workspace-user-menu {
    justify-content:
      flex-start;
  }


  .overview-metrics {
    grid-template-columns:
      1fr;
  }


  .overview-small-cards {
    grid-template-columns:
      1fr 1fr;
  }


  .workspace-tabs {
    gap:
      6px;
  }


  .workspace-tab,
  .workspace-tabs__link {
    padding:
      8px 12px;

    font-size:
      0.88rem;
  }

}


@media (
  max-width: 460px
) {

  .overview-small-cards {
    grid-template-columns:
      1fr;
  }

}
/* ============================================================
   LOUNGE AREA
   ============================================================ */

.lounge-area {
  position: relative;

  width: 100%;
  min-width: 100%;

  height: 520px;

  padding: 32px;

  background:
    linear-gradient(
      135deg,
      #fffdf9 0%,
      #fff8ee 100%
    );

  box-sizing: border-box;

  overflow: hidden;
}


/* ============================================================
   HEADER
   ============================================================ */

.lounge-area__header {
  position: absolute;

  top: 28px;
  left: 32px;

  z-index: 10;

  max-width: 330px;
}


.lounge-area__eyebrow {
  display: block;

  margin-bottom: 5px;

  color: var(--oranged-color);

  font-size: 0.7rem;

  font-weight: 900;

  letter-spacing: 0.16em;

  text-transform: uppercase;
}


.lounge-area__header h2 {
  margin: 0 0 6px;

  color: #222;

  font-size: 1.5rem;
}


.lounge-area__header p {
  margin: 0;

  color: #777;

  font-size: 0.82rem;

  line-height: 1.4;
}


/* ============================================================
   SOFAS
   ============================================================ */

.lounge-sofa {
  position: absolute;

  width: 150px;
  height: 65px;

  display: flex;

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

  background: #d7a96b;

  border-radius:
    18px 18px
    10px 10px;

  color: #65421c;

  font-size: 0.72rem;

  font-weight: 800;

  box-shadow:
    0 4px 0 #a97941;
}


.lounge-sofa--left {
  left: 60px;
  top: 225px;
}


.lounge-sofa--right {
  right: 60px;
  top: 225px;
}


/* ============================================================
   CHAIRS
   ============================================================ */

.lounge-chair {
  position: absolute;

  width: 48px;
  height: 48px;

  background: #806650;

  border-radius:
    12px 12px
    19px 19px;
}


.lounge-chair--left-one {
  left: 85px;
  top: 315px;
}


.lounge-chair--left-two {
  left: 155px;
  top: 315px;
}


.lounge-chair--right-one {
  right: 85px;
  top: 315px;
}


.lounge-chair--right-two {
  right: 155px;
  top: 315px;
}


/* ============================================================
   COFFEE TABLE
   ============================================================ */

.lounge-coffee-table {
  position: absolute;

  left: 50%;
  top: 235px;

  width: 120px;
  height: 75px;

  transform:
    translateX(-50%);

  display: flex;

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

  background: #c99557;

  border-radius: 50%;

  color: #65421c;

  font-size: 0.7rem;

  font-weight: 800;

  box-shadow:
    0 5px 0 #976938;
}


/* ============================================================
   NETWORKING TABLE
   ============================================================ */

.lounge-networking-table {
  position: absolute;

  left: 50%;
  bottom: 58px;

  width: 92px;
  height: 92px;

  transform:
    translateX(-50%);

  display: flex;

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

  background: #e4bd88;

  border-radius: 50%;

  color: #6b491f;

  font-size: 0.7rem;

  font-weight: 800;
}


/* ============================================================
   PLANTS
   ============================================================ */

.lounge-plant {
  position: absolute;

  width: 52px;
  height: 62px;

  display: flex;

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

  border-radius:
    50% 50%
    14px 14px;

  background: #e8d4ae;

  font-size: 1.6rem;
}


.lounge-plant--one {
  left: 25px;
  bottom: 28px;
}


.lounge-plant--two {
  right: 25px;
  bottom: 28px;
}


.lounge-plant--three {
  right: 30px;
  top: 30px;
}


/* ============================================================
   WALKABLE FLOOR

   Intentionally contains no collision.
   ============================================================ */

.lounge-area__walking-floor {
  position: absolute;

  inset: 0;

  pointer-events: none;

  z-index: 0;
}


/* ============================================================
   KEEP FURNITURE ABOVE THE FLOOR
   ============================================================ */

.lounge-sofa,
.lounge-chair,
.lounge-coffee-table,
.lounge-networking-table,
.lounge-plant {
  z-index: 5;
}
/* ============================================================
   PRODUCT MANAGEMENT — STAND CONTEXT
   ============================================================ */

.product-management-stand {
  margin:
    28px 0;

  padding:
    22px 24px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 24px;

  background: #fff;

  border:
    1px solid #ece7df;

  border-radius: 18px;

  box-shadow:
    0 8px 28px
    rgba(0, 0, 0, 0.05);
}


.product-management-stand__identity {
  display: flex;

  align-items: center;

  gap: 18px;
}


.product-management-stand__identity h2 {
  margin:
    4px 0;

  color: #272727;
}


.product-management-stand__identity p {
  margin: 0;

  color: #777;

  font-size:
    0.85rem;
}


.product-management-stand__image,
.product-management-stand__placeholder {
  width: 90px;
  height: 90px;

  flex: 0 0 90px;

  border-radius: 14px;
}


.product-management-stand__image {
  object-fit: cover;
}


.product-management-stand__placeholder {
  display: flex;

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

  background:
    #fff3e8;

  color:
    var(--oranged-color);

  font-size:
    1.8rem;

  font-weight:
    900;
}


.product-management-stand__actions {
  display: flex;

  flex-wrap: wrap;

  gap: 8px;
}


.product-management-stand__actions
.workspace-button {
  width: auto;

  margin: 0;
}


/* ============================================================
   ENTERPRISE SUMMARY
   ============================================================ */

.product-management-enterprise-name {
  font-size:
    1.05rem;

  line-height: 1.2;
}


/* ============================================================
   PRODUCT GRID
   ============================================================ */

.product-management-grid {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(300px, 1fr)
    );

  gap: 24px;
}


/* ============================================================
   PRODUCT CARD
   ============================================================ */

.product-management-card {
  overflow: hidden;

  display: flex;
  flex-direction: column;

  background: #fff;

  border:
    1px solid #ece7df;

  border-radius: 18px;

  box-shadow:
    0 8px 28px
    rgba(0, 0, 0, 0.06);
}


/* ============================================================
   PRODUCT VISUAL
   ============================================================ */

.product-management-card__visual {
  height: 190px;

  background:
    #fff8f1;
}


.product-management-card__image {
  width: 100%;
  height: 100%;

  object-fit: cover;
}


.product-management-card__placeholder {
  width: 100%;
  height: 100%;

  display: flex;

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

  background:
    linear-gradient(
      135deg,
      #fffaf5,
      #ffefe1
    );

  color:
    var(--oranged-color);

  font-size:
    3rem;

  font-weight:
    900;
}


/* ============================================================
   CARD BODY
   ============================================================ */

.product-management-card__body {
  flex: 1;

  padding: 20px;

  display: flex;
  flex-direction: column;

  gap: 14px;
}


.product-management-card__heading {
  display: flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap: 14px;
}


.product-management-card__heading h3 {
  margin:
    4px 0 0;

  color: #292929;

  font-size:
    1.15rem;
}


.product-management-card__eyebrow {
  color:
    var(--oranged-color);

  font-size:
    0.68rem;

  font-weight:
    900;

  letter-spacing:
    0.1em;

  text-transform:
    uppercase;
}


/* ============================================================
   PRICE
   ============================================================ */

.product-management-card__price {
  color:
    #222;

  font-size:
    1rem;

  white-space:
    nowrap;
}


/* ============================================================
   DESCRIPTION
   ============================================================ */

.product-management-card__description {
  margin: 0;

  color: #666;

  font-size:
    0.86rem;

  line-height:
    1.5;
}


.product-management-card__description--empty {
  color: #aaa;

  font-style:
    italic;
}


/* ============================================================
   META
   ============================================================ */

.product-management-card__meta {
  padding:
    9px 11px;

  background:
    #faf8f5;

  border-radius:
    10px;

  color: #666;

  font-size:
    0.78rem;
}


.product-management-card__meta strong {
  color: #444;

  margin-right:
    5px;
}


/* ============================================================
   ACTIONS
   ============================================================ */

.product-management-card__actions {
  margin-top: auto;

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 8px;
}


.product-management-card__actions
.workspace-button {
  width: auto;

  margin: 0;
}


.product-management-card__actions form {
  margin: 0;
}


/* ============================================================
   DELETE BUTTON
   ============================================================ */

.workspace-button--danger {
  background: #fff;

  color: #b83932;

  border:
    1px solid
    rgba(
      184,
      57,
      50,
      0.35
    );
}


.workspace-button--danger:hover {
  background: #b83932;

  color: #fff;

  border-color:
    #b83932;
}


/* ============================================================
   CURRENT PRODUCT IMAGE
   ============================================================ */

.product-management-current-image {
  margin-top: 8px;

  display: flex;
  flex-direction: column;

  gap: 10px;
}


.product-management-current-image img {
  width: 220px;
  height: 150px;

  object-fit: cover;

  border-radius: 14px;

  border:
    1px solid #e7e0d8;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (
  max-width: 760px
) {

  .product-management-stand {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .product-management-grid {
    grid-template-columns:
      1fr;
  }

}
:root {
  --as-orange: #efb762;
  --as-orange-strong: orangered;
  --as-cream: #fff8ee;
  --as-soft: #fff1d8;
  --as-text: #252525;
  --as-muted: #6e6e6e;
  --as-border: rgba(239, 183, 98, 0.65);
}

.public-stand {
  min-height: 100vh;
  width: 100%;
  background:
    radial-gradient(circle at top right, #fff2d8 0, transparent 28%),
    linear-gradient(180deg, #fff 0%, #fffaf2 100%);
  color: var(--as-text);
  font-family: Arial, sans-serif;
}

/* HEADER */

.public-stand__header {
  min-height: 110px;
  padding: 22px 5%;
  display: grid;
  grid-template-columns: 180px 1fr 180px;
  align-items: center;
  border-bottom: 1px solid var(--as-border);
  background: rgba(255, 255, 255, 0.96);
}

.public-stand__exit {
  color: var(--as-text);
  text-decoration: none;
  font-weight: 700;
}

.public-stand__exit:hover {
  color: var(--as-orange-strong);
}

.public-stand__identity {
  text-align: center;
}

.public-stand__identity h1 {
  margin: 5px 0 0;
  font-size: clamp(1.7rem, 3vw, 2.8rem);
}

.public-stand__number,
.public-stand__eyebrow {
  color: var(--as-orange-strong);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.78rem;
  font-weight: 800;
}

.public-stand__actions {
  display: flex;
  justify-content: flex-end;
}


/* BUTTONS */

.public-stand button {
  border: 1px solid var(--as-orange);
  background: white;
  color: var(--as-text);
  padding: 11px 18px;
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.public-stand button:hover {
  transform: translateY(-2px);
  background: var(--as-orange);
  box-shadow: 0 8px 24px rgba(82, 60, 25, 0.12);
}


/* HERO */

.public-stand__hero {
  width: min(1400px, 92%);
  margin: 55px auto;
  display: grid;
  grid-template-columns: minmax(330px, 0.9fr) 1.1fr;
  gap: 55px;
  align-items: center;
}

.public-stand__visual {
  min-height: 420px;
  border-radius: 45px;
  overflow: hidden;
  background: var(--as-soft);
  box-shadow: 0 18px 60px rgba(64, 45, 19, 0.12);
}

.public-stand__hero-image {
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
  display: block;
}

.public-stand__placeholder {
  min-height: 420px;
  display: grid;
  place-items: center;
}

.public-stand__placeholder span {
  width: 130px;
  height: 130px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--as-orange);
  font-size: 4rem;
  font-weight: 800;
}

.public-stand__about h2 {
  font-size: clamp(2rem, 4vw, 4rem);
  margin: 12px 0 20px;
  line-height: 1.05;
}

.public-stand__about p {
  max-width: 720px;
  color: var(--as-muted);
  font-size: 1.05rem;
  line-height: 1.7;
}

.public-stand__quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}


/* PRODUCTS */

.public-stand__products {
  padding: 65px 5%;
  background: white;
}

.public-stand__section-heading {
  width: min(1400px, 100%);
  margin: 0 auto 35px;
  display: flex;
  justify-content: space-between;
  align-items: end;
}

.public-stand__section-heading h2 {
  margin: 7px 0 0;
  font-size: 2.3rem;
}

.product-count {
  color: var(--as-muted);
  font-weight: 700;
}

.public-products-grid {
  width: min(1400px, 100%);
  margin: auto;
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

.public-product-card {
  overflow: hidden;
  border: 1px solid var(--as-border);
  border-radius: 24px;
  background: white;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.public-product-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 18px 45px rgba(65, 49, 25, 0.14);
}

.public-product-card__image {
  height: 230px;
  background: var(--as-soft);
}

.public-product-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-image-placeholder {
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--as-orange-strong);
  font-weight: 800;
  letter-spacing: 0.15em;
}

.public-product-card__body {
  padding: 20px;
}

.public-product-card__body h3 {
  margin: 0 0 10px;
  font-size: 1.2rem;
}

.public-product-card__body p {
  color: var(--as-muted);
  line-height: 1.5;
}

.public-product-card__actions {
  margin-top: 18px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}


/* EMPTY PRODUCTS */

.public-stand__empty-products {
  width: min(700px, 90%);
  margin: 25px auto;
  padding: 60px;
  text-align: center;
  background: var(--as-cream);
  border-radius: 28px;
}

.public-stand__empty-products > span {
  display: block;
  font-size: 3rem;
  color: var(--as-orange-strong);
}


/* CONTACT */

.public-stand__contact {
  width: min(1300px, 90%);
  margin: 70px auto;
  padding: 45px 55px;
  border-radius: 35px;
  background: var(--as-soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
}

.public-stand__contact h2 {
  margin: 10px 0;
  font-size: 2rem;
}

.public-stand__contact p {
  color: var(--as-muted);
}

.public-stand__contact-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}


/* FOOTER */

.public-stand__footer {
  padding: 35px 5%;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--as-border);
}

.public-stand__footer span {
  color: var(--as-orange-strong);
  letter-spacing: 0.35em;
  font-weight: 900;
}

.public-stand__footer a {
  color: var(--as-text);
  font-weight: 700;
}


/* RESPONSIVE */

@media (max-width: 850px) {
  .public-stand__header {
    grid-template-columns: 1fr;
    gap: 18px;
    text-align: center;
  }

  .public-stand__actions {
    justify-content: center;
  }

  .public-stand__hero {
    grid-template-columns: 1fr;
  }

  .public-stand__contact {
    flex-direction: column;
    align-items: flex-start;
  }
  
}

.stand-entry-link {
  display: block;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.stand-entry-link:visited {
  color: inherit;
}

.stand-entry-link:focus-visible {
  outline: 3px solid var(--oranged-color);
  outline-offset: 2px;
}
/* ============================================================
   STAND MANAGEMENT GRID
   ============================================================ */

.stand-management-grid {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(320px, 1fr)
    );

  gap: 24px;
}


/* ============================================================
   CARD
   ============================================================ */

.stand-management-card {
  overflow: hidden;

  display: grid;

  grid-template-columns:
    150px 1fr;

  min-height: 220px;

  background: #fff;

  border:
    1px solid #ece7df;

  border-radius: 18px;

  box-shadow:
    0 8px 28px
    rgba(0, 0, 0, 0.06);
}


/* ============================================================
   VISUAL
   ============================================================ */

.stand-management-card__visual {
  min-height: 220px;

  background: #fff9f3;
}


.stand-management-card__image {
  width: 100%;
  height: 100%;

  min-height: 220px;

  object-fit: cover;
}


.stand-management-card__placeholder {
  width: 100%;
  height: 100%;

  min-height: 220px;

  display: flex;

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

  color: var(--oranged-color);

  font-size: 2.4rem;

  font-weight: 900;

  background:
    linear-gradient(
      135deg,
      #fffaf5,
      #fff2e6
    );
}


/* ============================================================
   BODY
   ============================================================ */

.stand-management-card__body {
  padding: 22px;

  display: flex;
  flex-direction: column;

  gap: 14px;
}


/* ============================================================
   HEADING
   ============================================================ */

.stand-management-card__heading {
  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  gap: 12px;
}


.stand-management-card__heading h3 {
  margin: 4px 0 0;

  color: #272727;

  font-size: 1.25rem;
}


.stand-management-card__number {
  color: var(--oranged-color);

  font-size: 0.7rem;

  font-weight: 900;

  letter-spacing: 0.09em;

  text-transform: uppercase;
}


.stand-management-card__enterprise {
  padding: 5px 9px;

  background: #fff4ea;

  border-radius: 999px;

  color: #a5551d;

  font-size: 0.68rem;

  font-weight: 800;

  white-space: nowrap;
}


/* ============================================================
   DESCRIPTION
   ============================================================ */

.stand-management-card__description {
  margin: 0;

  color: #666;

  line-height: 1.5;

  font-size: 0.88rem;
}


.stand-management-card__description--empty {
  color: #aaa;

  font-style: italic;
}


/* ============================================================
   STATS
   ============================================================ */

.stand-management-card__stats {
  display: flex;

  gap: 14px;

  color: #666;

  font-size: 0.8rem;
}


.stand-management-card__stats strong {
  color: #333;
}


/* ============================================================
   ACTIONS
   ============================================================ */

.stand-management-card__actions {
  margin-top: auto;

  display: flex;

  flex-wrap: wrap;

  gap: 8px;
}


.stand-management-card__actions
.workspace-button {
  width: auto;

  margin: 0;
}


/* ============================================================
   CURRENT IMAGE ON EDIT PAGE
   ============================================================ */

.stand-management-current-image {
  margin-top: 8px;

  display: flex;

  flex-direction: column;

  gap: 10px;
}


.stand-management-current-image img {
  width: 180px;
  height: 120px;

  object-fit: cover;

  border-radius: 12px;

  border:
    1px solid #e7e0d8;
}
/* ============================================================
   TRAINING CENTRE
   ============================================================ */

.venue-training-zone {
  width: 3815px;
  min-width: 3815px;

  background: #fff;

  border-top: 1px solid #efb762;
}


/* ============================================================
   MAIN WALKWAY BETWEEN UPPER VENUE AND TRAINING CENTRE
   ============================================================ */

.venue-main-walkway {
  width: 100%;
  height: 170px;

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

  background: #fffaf3;

  color: #bc792a;

  font-size: 0.78rem;
  font-weight: 900;

  letter-spacing: 0.15em;

  text-transform: uppercase;

  border-bottom:
    1px solid rgba(239, 183, 98, 0.45);
}


/* ============================================================
   TRAINING AREA
   ============================================================ */

.training-area {
  position: relative;

  width: 100%;

  padding:
    40px
    55px
    100px;

  background: #fff;

  box-sizing: border-box;
}


/* ============================================================
   HEADER
   ============================================================ */

.training-area__header {
  margin-bottom: 30px;
}


.training-area__eyebrow {
  color: orangered;

  font-size: 0.72rem;
  font-weight: 900;

  letter-spacing: 0.16em;
}


.training-area__title {
  margin:
    5px 0
    7px;

  font-size: 2rem;
}


.training-area__description {
  margin: 0;

  color: #777;
}


/* ============================================================
   INTERNAL MAIN AVENUE
   ============================================================ */

.training-area__main-avenue {
  height: 100px;

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

  margin-bottom: 35px;

  background: #fffaf3;

  border-top:
    1px dashed #e5cfac;

  border-bottom:
    1px dashed #e5cfac;

  color: #bd8242;

  font-size: 0.72rem;
  font-weight: 800;

  letter-spacing: 0.12em;

  text-transform: uppercase;
}


/* ============================================================
   THREE MODULES
   ============================================================ */

.training-area__modules {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 50px;

  align-items: start;

  width: 100%;
}


/* ============================================================
   MODULE
   ============================================================ */

.training-module {
  min-width: 0;

  padding: 20px;

  background: white;

  border:
    0px solid rgba(239, 183, 98, 0.35);

  border-radius: 18px;
}


.training-module__header {
  display: flex;
  flex-direction: column;

  gap: 3px;

  margin:
    0 0
    18px;

  padding-left: 5px;
}


.training-module__header span {
  color: orangered;

  font-size: 0.68rem;

  font-weight: 900;

  letter-spacing: 0.13em;
}


.training-module__header strong {
  color: #3d3d3d;

  font-size: 1rem;
}


/* ============================================================
   THREE LEVELS PER MODULE
   ============================================================ */

.training-module__rooms {
  display: flex;

  flex-direction: column;

  gap: 65px;
}


/* ============================================================
   TRAINING ROOM
   ============================================================ */

.training-room {
  position: relative;

  width: 100%;
  height: 610px;

  background: #f8f5ef;

  overflow: hidden;
}


/* ============================================================
   THIN WALLS
   ============================================================ */

.training-room__wall {
  position: absolute;

  z-index: 30;

  background: #d4bea0;
}


/* LEFT */

.training-room__wall--left {
  left: 0;
  top: 0;

  width: 7px;
  height: 100%;
}


/* RIGHT */

.training-room__wall--right {
  right: 0;
  top: 0;

  width: 7px;
  height: 100%;
}


/* BOTTOM */

.training-room__wall--bottom {
  left: 0;
  bottom: 0;

  width: 100%;
  height: 7px;
}


/* TOP LEFT */

.training-room__wall--top-left {
  top: 0;
  left: 0;

  width: calc(50% - 80px);
  height: 7px;
}


/* TOP RIGHT */

.training-room__wall--top-right {
  top: 0;
  right: 0;

  width: calc(50% - 80px);
  height: 7px;
}


/* ============================================================
   CENTRAL ENTRANCE
   ============================================================ */

.training-room__door {
  position: absolute;

  top: 0;
  left: 50%;

  width: 160px;
  height: 60px;

  transform: translateX(-50%);

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

  color: #a66b25;

  font-size: 0.68rem;

  font-weight: 800;

  pointer-events: none;

  z-index: 25;
}


/* ============================================================
   ROOM SIGN
   ============================================================ */

.training-room__sign {
  position: absolute;

  left: 30px;
  top: 27px;

  z-index: 20;

  display: flex;

  flex-direction: column;

  gap: 2px;
}


.training-room__sign strong {
  color: #333;

  font-size: 0.95rem;
}


.training-room__sign span {
  color: #888;

  font-size: 0.68rem;
}


/* ============================================================
   SCREEN
   ============================================================ */

.training-room__screen {
  position: absolute;

  top: 85px;
  left: 50%;

  width: 260px;
  height: 62px;

  transform:
    translateX(-50%);

  padding: 6px;

  background: #3d454a;

  border-radius: 6px;

  z-index: 10;
}


.training-room__screen-surface {
  width: 100%;
  height: 100%;

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

  background: #dceef4;

  color: #48616a;

  font-size: 0.72rem;

  font-weight: 700;
}


/* ============================================================
   TRAINER DESK
   ============================================================ */

.training-room__trainer-desk {
  position: absolute;

  top: 175px;
  left: 50%;

  width: 165px;
  height: 44px;

  transform:
    translateX(-50%);

  display: flex;

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

  background: #aa7b4c;

  border-radius: 6px;

  color: white;

  font-size: 0.7rem;

  font-weight: 700;
}


/* ============================================================
   TABLES
   ============================================================ */

.training-room__table {
  position: absolute;

  width: 195px;
  height: 64px;

  display: flex;

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

  background: #d8ab6c;

  border-radius: 14px;

  color: #6c481d;

  font-size: 0.68rem;

  font-weight: 700;
}


.training-room__table--1 {
  left: 90px;
  top: 300px;
}


.training-room__table--2 {
  right: 90px;
  top: 300px;
}


.training-room__table--3 {
  left: 90px;
  top: 440px;
}


.training-room__table--4 {
  right: 90px;
  top: 440px;
}


/* ============================================================
   CHAIRS
   ============================================================ */

.training-room__chair {
  position: absolute;

  width: 31px;
  height: 31px;

  background: #705846;

  border-radius:
    7px 7px
    14px 14px;
}


.training-room__chair--1 {
  left: 170px;
  top: 260px;
}

.training-room__chair--2 {
  left: 170px;
  top: 370px;
}

.training-room__chair--3 {
  right: 170px;
  top: 260px;
}

.training-room__chair--4 {
  right: 170px;
  top: 370px;
}

.training-room__chair--5 {
  left: 170px;
  top: 400px;
}

.training-room__chair--6 {
  left: 170px;
  top: 515px;
}

.training-room__chair--7 {
  right: 170px;
  top: 400px;
}

.training-room__chair--8 {
  right: 170px;
  top: 515px;
}


/* ============================================================
   CABINET
   ============================================================ */

.training-room__cabinet {
  position: absolute;

  top: 85px;
  right: 28px;

  width: 82px;
  height: 125px;

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

  background: #b4936a;

  border-radius: 5px;

  color: white;

  font-size: 0.62rem;
}


/* ============================================================
   WHITEBOARD
   ============================================================ */

.training-room__whiteboard {
  position: absolute;

  left: 28px;
  top: 90px;

  width: 120px;
  height: 75px;

  display: flex;

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

  background: white;

  border:
    3px solid #bbb;

  border-radius: 4px;

  color: #777;

  font-size: 0.62rem;
}


/* ============================================================
   WALKING FLOOR
   ============================================================ */

.training-room__walking-floor {
  position: absolute;

  inset: 7px;

  pointer-events: none;
}


/* ============================================================
   BETWEEN-LEVEL WALKING SPACE
   ============================================================ */

.training-module__rooms {
  position: relative;
}


/*
 * The gap between rooms is intentionally
 * completely collision-free.
 */


/* ============================================================
   BOTTOM AVENUE
   ============================================================ */

.training-area__bottom-avenue {
  width: 100%;
  height: 140px;

  margin-top: 55px;

  border-top:
    1px dashed #e5cfac;

  background: #fffaf3;
}


/* ============================================================
   COLLISION DEBUGGING
   Uncomment temporarily if needed.
   ============================================================ */

/*
[data-collision] {
  outline: 2px solid red !important;
}
*/
/* ============================================================
   COMPLETE WALKABLE VENUE
   ============================================================ */

.venue-world {
  position: relative;

  width: 3815px;
  min-width: 3815px;

  min-height: 100vh;

  margin: 0;
  padding: 0;

  display: flex;
  flex-direction: column;

  background: #fff;

  overflow: visible;
}


/* ============================================================
   UPPER VENUE

   2855px exhibition
   +
   960px conference/library
   =
   3815px
   ============================================================ */

.venue-world > .space {
  width: 3815px;
  min-width: 3815px;

  min-height: 100vh;

  margin: 0;
  padding: 0;

  display: flex;

  flex-direction: row-reverse;

  justify-content: flex-start;
  align-items: stretch;

  overflow: visible;
}


/* ============================================================
   IMPORTANT

   The existing exhibition geometry remains 2855px.
   ============================================================ */

.venue-world .space-as {
  flex: 0 0 2855px;

  width: 2855px;
  min-width: 2855px;

  margin: 0;

  position: relative;
}


/* ============================================================
   CONFERENCE / LIBRARY SLOT
   ============================================================ */

.space-conference-library {
  flex: 0 0 960px;

  width: 960px;
  min-width: 960px;

  min-height: 100vh;

  position: relative;

  padding:
    20px
    0
    20px
    120px;

  background: white;

  box-sizing: border-box;
}


/* ============================================================
   TRAINING ZONE

   Full venue width.
   ============================================================ */

.venue-training-zone {
  position: relative;

  width: 3815px;
  min-width: 3815px;

  margin: 0;

  background: #fff;

  border: 0;

  overflow: visible;
}


/* ============================================================
   MAIN WALKING AVENUE

   NO COLLISION.
   ============================================================ */

.venue-main-walkway {
  position: relative;

  width: 100%;
  height: 180px;

  margin: 0;

  display: flex;

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

  background:
    linear-gradient(
      to bottom,
      #fff,
      #fffaf3,
      #fff
    );

  border-top:
    0px solid rgba(239, 183, 98, 0.35);

  border-bottom:
    0px solid rgba(239, 183, 98, 0.35);

  color: #bd7a2b;

  font-size: 0.75rem;

  font-weight: 900;

  letter-spacing: 0.16em;

  text-transform: uppercase;
}


/* ============================================================
   AVATARS

   They belong to venue-world, not space-as.
   ============================================================ */

.venue-world > [data-avatar],
.venue-world > [data-remote-avatar] {
  position: absolute;

  z-index: 500;

  margin: 0;
}


/*
 * Make sure a decorative area never creates
 * an accidental clipping boundary.
 */

.space,
.space-as,
.space-conference-library,
.venue-training-zone,
.training-area {
  overflow: visible;
}


/* ============================================================
   WALKABLE AREAS

   These are documentation hooks as much as styling hooks.
   They MUST NEVER become collision objects.
   ============================================================ */

[data-walking-area] {
  pointer-events: none;
}

.venue-world {
  position: relative;

  width: 3815px;
  min-width: 3815px;

  min-height: 100vh;

  display: flex;
  flex-direction: column;

  overflow: visible;
}

.venue-world > .space {
  flex: 0 0 auto;
}

.venue-training-zone {
  position: relative;

  flex: 0 0 auto;

  width: 3815px;
  min-width: 3815px;

  overflow: visible;
}



/* ============================================================
   EXHIBITION SOUTH WALL
   ============================================================ */

.exhibition-south-wall {
  position: absolute;

  left: 0;
  bottom: 0;

  width: 100%;
  height: 8px;

  z-index: 40;

  pointer-events: none;
}


/* ============================================================
   PHYSICAL WALL SEGMENTS
   ============================================================ */

.exhibition-south-wall__segment {
  position: absolute;

  bottom: 0;

  height: 7px;

  background: #efb762;
}


/*
 * Two 180px entrances.
 *
 * The exact positions can easily be adjusted later.
 */

.exhibition-south-wall__segment--left {
  left: 0;
  width: 700px;
}


.exhibition-south-wall__segment--middle {
  left: 880px;
  width: 1200px;
}


.exhibition-south-wall__segment--right {
  left: 2260px;
  right: 0;
}


/* ============================================================
   ENTRANCE 1
   ============================================================ */

.exhibition-training-entrance--one {
  position: absolute;

  left: 700px;
  bottom: -1px;

  width: 180px;
  height: 75px;
}


/* ============================================================
   ENTRANCE 2
   ============================================================ */

.exhibition-training-entrance--two {
  position: absolute;

  left: 2080px;
  bottom: -1px;

  width: 180px;
  height: 75px;
}


/* ============================================================
   ENTRANCE APPEARANCE
   ============================================================ */

.exhibition-training-entrance {
  display: flex;

  flex-direction: column;

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

  gap: 2px;

  padding-bottom: 9px;

  box-sizing: border-box;

  color: #b77325;

  font-size: 0.67rem;

  font-weight: 800;

  letter-spacing: 0.06em;

  text-transform: uppercase;

  pointer-events: none;
}


.exhibition-training-entrance strong {
  font-size: 1.15rem;

  line-height: 1;
}


/* ============================================================
   EXHIBITION CAPACITY
   ============================================================ */

.exhibition-capacity-notice {
  max-width: 420px;
  margin: 16px auto;
  padding: 16px 18px;

  border: 1px solid var(--stand-gold);
  border-radius: 16px;

  background: #fff8ef;

  text-align: center;
}

.exhibition-capacity-notice strong {
  display: block;
  margin-bottom: 6px;

  color: var(--oranged-color);
}

.exhibition-capacity-notice p {
  margin: 0;
  color: #666;
}


/* ============================================================
   IMMERSIVE VENUE CURSOR
   ============================================================ */

/*
 * Hide the cursor while exploring the virtual venue.
 */
[data-venue-world] {
  cursor: none;
}


/*
 * Interactive HTML elements automatically restore
 * the normal pointer/cursor.
 */
[data-venue-world] a,
[data-venue-world] button,
[data-venue-world] input,
[data-venue-world] select,
[data-venue-world] textarea,
[data-venue-world] label,
[data-venue-world] [role="button"] {
  cursor: pointer;
}


/*
 * Text-entry fields should retain the familiar text cursor.
 */
[data-venue-world] input[type="text"],
[data-venue-world] input[type="email"],
[data-venue-world] input[type="password"],
[data-venue-world] input[type="search"],
[data-venue-world] input[type="number"],
[data-venue-world] textarea,
[data-venue-world] [contenteditable="true"] {
  cursor: text;
}


/* ============================================================
   COLLISION DEBUGGING

   Uncomment whenever we need to inspect the physical world.
   ============================================================ */

/*
[data-collision] {
  outline: 2px solid red !important;
}
*/
/* ============================================================
   WELCOME / RECEPTION AREA
   ============================================================ */

.welcome {
  width: 360px;
  min-width: 360px;

  min-height: 360px;

  padding: 28px 24px 30px;

  margin: 0 24px;

  background: #fff;

  border-right:
    4px double var(--oranged-color);

  border-bottom:
    4px double var(--oranged-color);

  border-radius:
    0 0 30% 30%;

  display: flex;

  align-items: stretch;
  justify-content: center;

  box-sizing: border-box;
}


/* ============================================================
   INNER CONTENT
   ============================================================ */

.welcome__inner {
  width: 100%;

  display: flex;
  flex-direction: column;

  align-items: center;

  text-align: center;

  gap: 18px;
}


/* ============================================================
   HEADING
   ============================================================ */

.welcome__heading {
  width: 100%;
}


.welcome__eyebrow {
  display: block;

  margin-bottom: 6px;

  color: var(--oranged-color);

  font-size: 0.72rem;

  font-weight: 900;

  letter-spacing: 0.16em;

  text-transform: uppercase;
}


.welcome__heading h2 {
  margin: 0 0 8px;

  color: #222;

  font-size: 1.35rem;

  line-height: 1.15;
}


.welcome__heading p {
  margin: 0;

  color: #777;

  font-size: 0.86rem;

  line-height: 1.4;
}


/* ============================================================
   USER ACTIONS
   ============================================================ */

.welcome__actions {
  width: 100%;

  display: flex;
  flex-direction: column;

  gap: 8px;

  align-items: center;
}


.welcome__user {
  width: 100%;

  display: flex;
  flex-direction: column;

  align-items: center;

  gap: 8px;
}


.welcome__user strong {
  margin-bottom: 4px;

  color: #333;

  font-size: 0.9rem;
}


/* ============================================================
   BUTTONS
   ============================================================ */

.welcome__button {
  width: 100%;

  padding: 9px 14px;

  box-sizing: border-box;

  display: block;

  border:
    1px solid var(--oranged-color);

  border-radius: 18px;

  background:
    var(--oranged-color);

  color: #fff !important;

  font-size: 0.8rem;

  font-weight: 800;

  text-align: center;

  cursor: pointer;

  transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}


.welcome__button:hover {
  background: #fff;

  color:
    var(--oranged-color) !important;

  transform:
    translateY(-1px);
}


.welcome__button--secondary {
  background: #fff;

  color:
    var(--oranged-color) !important;
}

/* ============================================================
   SIGNED-IN USER
   ============================================================ */

.welcome__user {
  width: 100%;

  display: flex;
  flex-direction: column;

  align-items: center;

  gap: 14px;
}


.welcome__user-row {
  width: 100%;

  display: flex;

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

  gap: 12px;
}


.welcome__username {
  color: #333;

  font-size: 0.9rem;
  font-weight: 800;
}


/*
 * button_to generates a form around the button.
 */

.welcome__user-row form {
  margin: 0;

  display: flex;
  align-items: center;
}


.welcome__logout {
  padding: 5px 12px;

  border: 1px solid var(--oranged-color);
  border-radius: 16px;

  background: #fff;

  color: var(--oranged-color);

  font: inherit;
  font-size: 0.75rem;
  font-weight: 800;

  cursor: pointer;

  transition:
    background 0.2s ease,
    color 0.2s ease;
}


.welcome__logout:hover {
  background: var(--oranged-color);

  color: #fff;
}


/*
 * button_to creates a form.
 * Make sure that form does not disturb the layout.
 */

.welcome__user form {
  width: 100%;

  margin: 0;
}


/* ============================================================
   MENU LINKS
   ============================================================ */

.welcome__menu {
  width: 100%;

  display: flex;
  flex-direction: column;

  gap: 5px;
}


.welcome__menu a {
  display: block;

  padding: 6px 10px;

  color: #555;

  font-size: 0.82rem;

  font-weight: 700;

  text-decoration: none;

  border-radius: 10px;

  transition:
    color 0.2s ease,
    background 0.2s ease;
}


.welcome__menu a:hover {
  color:
    var(--oranged-color);

  background:
    rgba(255, 69, 0, 0.06);
}


/* ============================================================
   SOCIAL ICONS
   ============================================================ */

.welcome__socials {
  width: 100%;

  margin-top: 4px;

  display: flex;

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

  gap: 14px;
}


.welcome__socials a {
  width: 34px;
  height: 34px;

  display: flex;

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

  border:
    1px solid rgba(255, 69, 0, 0.25);

  border-radius: 50%;

  background: #fff;

  text-decoration: none;

  transition:
    background 0.2s ease,
    transform 0.2s ease;
}


.welcome__socials a:hover {
  background:
    rgba(255, 69, 0, 0.08);

  transform:
    translateY(-2px);
}


.welcome__socials i {
  color:
    var(--oranged-color);

  font-size: 1.1rem;
}


/* ============================================================
   REMOVE OLD GENERIC WELCOME LINK STYLING
   ============================================================ */

.welcome p {
  margin: 0;
}


.welcome a {
  font-weight: 700;
}



/* ============================================================
   MINI DASHBOARDS
   ============================================================ */

.welcome__dashboards {
  width: 100%;

  display: grid;
  grid-template-columns:
    repeat(3, 1fr);

  gap: 8px;

  margin-top: 4px;
}


.welcome__dashboard {
  min-height: 76px;

  padding: 10px 6px;

  display: flex;
  flex-direction: column;

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

  gap: 7px;

  background: #fff;

  border:
    1px solid rgba(255, 69, 0, 0.22);

  border-radius: 14px;

  color: #444 !important;

  font-size: 0.68rem;
  font-weight: 800;

  text-align: center;

  text-decoration: none;

  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease;
}


.welcome__dashboard:hover {
  transform:
    translateY(-2px);

  border-color:
    var(--oranged-color);

  background:
    rgba(255, 69, 0, 0.04);
}


.welcome__dashboard-icon {
  width: 34px;
  height: 34px;

  display: flex;

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

  border-radius: 10px;

  background:
    rgba(255, 69, 0, 0.08);

  font-size: 1.15rem;
}


.welcome__dashboard-icon i {
  color:
    var(--oranged-color);
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */
:root {
  --main-blue: #3778c2;
  --main-green: #5fb523;
  --main-gray: #434b54;
  --main-white: #fcfafa;
  --main-black: #020202;
  --error-color: #f00;

  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

body {
  min-height: 100vh;
}

* {
  margin-top: 0;
  padding: 0;
  box-sizing: border-box;
  list-style-type: none;
  text-decoration: none;
}

.button {
  cursor: pointer;
  font-size: 1rem;
  width: 100%;
  color: var(--main-white);
  padding: 0.2rem 0;
  margin: 0.1rem 0;
  border: solid 0.1rem var(--main-white);
  transition: background-color 1s ease-out;
}

.button-white {
  cursor: pointer;
  font-size: small;
  width: 100%;
  color: var(--main-black);
  padding: 0.2rem 0;
  margin: 0.1rem 0;
  border: solid 0.1rem var(--main-blue);
  transition: background-color 1s ease-out;
}

.my-flex {
  display: flex;
  flex-direction: column;
  text-align: start;
}

.my-flex-row {
  display: flex;
  flex-direction: row;
}

.no-style {
  background-color: var(--main-green);
}

.left {
  text-align: left;
}

a {
  color: var(--main-gray);
}

/* Homepage */
.homepage {
  width: 100%;
  height: 100%;
  background-color: var(--main-blue);
}

.homepage-user-list {
  list-style: none;
  padding: 5% 5% 0 5%;
  width: 40%;
}

/* User */
.user-list {
  list-style: none;
  padding: 5% 5% 0 5%;
}

.user {
  display: flex;
  align-items: center;
  margin-bottom: 2%;
}

.username {
  font-size: 1.2rem;
  margin: 0;
}

.item-count {
  font-size: 0.9rem;
  margin: 0 1% 0 0;
  color: #888;
  text-align: right;
}

li {
  list-style-type: none;
  text-align: center;
}

/* Form */
.container {
  width: 100%;
  /* min-height: 100vh; */
  display: flex;
  overflow: scroll;
}

.scroll {
  overflow: scroll;
}

.form-group {
  width: 100%;
  height: 100%;
  display: flex;
}

.sign-up-form,
.login-form,
.all-form {
  cursor: pointer;
  margin: 1rem 0;
  background-color: var(--main-white);
  font-size: 1.2rem;
  padding: 0.3rem 0.6rem;
  border: solid 0.1rem white;
  color: var(--main-black);
}

.sign-up-form label .login-form label .all-form label {
  font-weight: bold;
}

.sign-up-form input,
.login-form input,
.all-form input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

.sign-up-form .sign-up-form-button,
.login-form .login-button,
.all-form .all-button {
  color: #fff;
  padding: 10px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

.sign-up-form .sign-up-form-button:hover,
.login-form .login-button:hover,
.all-form .all-button:hover {
  background-color: var(--main-blue);
}

.sign-up-form a,
.login-form a,
.all-form a {
  text-decoration: none;
  color: var(--main-blue);
  font-weight: bold;
}

.sign-up-form .text-center,
.login-form .text-center,
.all-form .text-center {
  text-align: center;
}

.error-message {
  color: var(--error-color);
  margin: 10px 0;
  font-weight: bold;
}

.sign-up-form .form-element,
.login-form .form-element,
.all-form .form-element {
  margin: 10px 0;
}

/* Title */
.title-container {
  width: 100%;
  height: 10rem;
}

/* Header */
.header-container {
  width: 100%;
  background-color: var(--main-blue);
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5%;
}

nav ul {
  width: 100%;
  height: 100%;
  background-color: var(--main-blue);
  color: var(--main-white);
  list-style: none;
  font-size: 1.3rem;
  padding: 0.5rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

/* gift credit */
.gift-credit-container {
  width: 100%;
  height: 5%;
  color: var(--main-black);
  display: flex;
  align-items: center;
  box-shadow: 0.1rem 0.1rem 0.1rem var(--main-blue);
}

.text-left {
  align-self: flex-start;
}

.text-right {
  align-self: flex-end;
}

/*
  main

  - view templates prefixed 'view'
*/
.main-container {
  width: 100%;
  min-height: 60%;
  color: var(--main-gray);
  overflow-y: scroll;
}

.items-list {
  padding: 5%;
  color: var(--main-black);
}

.item {
  background-color: var(--main-white);
  display: flex;
  margin-bottom: 5%;
  padding: 4%;
  gap: 5%;
  box-shadow: 0 0 0.3rem lightgrey;
}

.view-item {
  background-color: var(--main-white);
  display: flex;
  font-size: x-large;
  padding: 4%;
  gap: 5%;
  border-bottom: 0.01px solid var(--main-gray);
  flex-direction: row;
  justify-content: space-between;
}

.item-details {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 50%;
}

.view-item-details {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  gap: 5%;
  font-size: xx-large;
  text-transform: capitalize;
}

.details-heading {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.img {
  width: 5%;
  height: 5%;
}

.view-total-payment {
  width: 100%;
  background-color: var(--main-white);
  display: flex;
  font-size: x-large;
  font-weight: bold;
  padding: 4%;
  justify-content: space-between;
}

/* Footer */
.footer-container {
  width: 100%;
  background-color: var(--main-green);
  position: fixed;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5%;
}

.footer-btn {
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  font-size: 1rem;
  width: 100%;
  background-color: var(--main-green);
  color: var(--main-white);
  margin: 0.8rem 0;
  border: solid 0.1rem var(--main-white);
  transition: background-color 1s ease-out;
  padding: 3%;
}

@media (min-width: 768px) {
  .footer-container {
    width: 100%;
    background-color: var(--main-green);
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1%;
  }

  .footer-btn {
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    font-size: 1rem;
    width: 100%;
    background-color: var(--main-green);
    color: var(--main-white);
    border: solid 0.1rem var(--main-white);
    transition: background-color 1s ease-out;
    padding: 1%;
  }

  /*
  .container {
    width: 100%;
    min-height: 100vh;
    display: flex;
  }
  */
}