/* ==========================================================================
   Free Trading Room (SITE-1471) — /AccountManagement/TradingRoomPage.php
   (user/pages/trading-room.html). In the account layout: the form
   column beside the room, as on the free signup page, then the reasons to
   join, a free account prompt and the risk note.

   The room script in the page shows and hides #newAccount,
   #establishedAccount and their switch links, and colours #wait and
   #loginWait inline (transparent until it is working).
   ========================================================================== */

/* Form column | the room */
.tr-main {
  display: grid;
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  align-items: start;
  gap: 56px;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(16px, 4vh, 48px) 24px 56px;
}

/* Card */
.tr-note {
  margin: -4px 0 12px;
  font-size: var(--ti-fs-sm);
  line-height: var(--ti-lh-snug);
  text-align: center;
  color: var(--ti-muted);
}
.ac .g-recaptcha { display: flex; justify-content: center; margin: 4px 0 12px; }
.tr-wait {
  display: block;
  min-height: 1.4em;
  margin: 6px 0 0;
  font-size: var(--ti-fs-sm);
  line-height: var(--ti-lh-snug);
  text-align: center;
}
.tr-err {
  margin: 4px 0 0;
  font-size: var(--ti-fs-sm);
  line-height: var(--ti-lh-snug);
  text-align: center;
  color: var(--ti-muted);
}
.tr-err p { margin: 0 0 4px; font-weight: var(--ti-fw-semibold); color: var(--ti-red); }
.tr-err a { font-weight: var(--ti-fw-semibold); color: var(--ti-orange); text-decoration: none; }
.tr-err a:hover,
.tr-err a:focus { color: var(--ti-orange-hot); text-decoration: underline; }

/* The room: the screenshot in a padded frame, then what happens there */
.tr-room { min-width: 0; }
.tr-frame {
  padding: 10px;
  border: 1px solid var(--ti-border);
  border-radius: var(--ti-radius-lg);
  background: var(--ti-card);
  box-shadow: var(--ti-shadow-md);
}
.tr-frame img { display: block; width: 100%; height: auto; border-radius: var(--ti-radius-sm); }
.tr-room p {
  margin: 18px 0 0;
  font-size: var(--ti-fs-lg);
  line-height: var(--ti-lh-body);
  color: var(--ti-text-soft);
}
.tr-room p + p { margin-top: 10px; }

/* Reasons to join, free account prompt, risk note */
.tr-why,
.tr-cta,
.tr-disc {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding-right: 24px;
  padding-left: 24px;
}
.tr-why { padding-top: 56px; padding-bottom: 56px; border-top: 1px solid var(--ti-border); }
.ac .tr-why h2,
.ac .tr-cta h2 {
  margin: 0 0 28px;
  font-family: inherit;
  font-size: var(--ti-fs-h2);
  font-weight: var(--ti-fw-black);
  line-height: var(--ti-lh-tight);
  letter-spacing: var(--ti-track-snug);
  text-align: center;
  text-wrap: balance;
  color: var(--ti-text);
}
.tr-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.ac .tr-grid h3 {
  margin: 0 0 8px;
  font-family: inherit;
  font-size: var(--ti-fs-xl);
  font-weight: var(--ti-fw-bold);
  line-height: var(--ti-lh-tight);
  color: var(--ti-text);
}
.tr-grid p { margin: 0; font-size: var(--ti-fs-base); line-height: var(--ti-lh-body); color: var(--ti-muted); }

.tr-cta { padding-top: 48px; padding-bottom: 48px; text-align: center; border-top: 1px solid var(--ti-border); }
.ac .tr-cta h2 { margin-bottom: 10px; }
.tr-cta p { margin: 0 0 20px; font-size: var(--ti-fs-lg); color: var(--ti-text-soft); }
.tr-cta .ac-btn { display: inline-flex; width: auto; padding: 12px 36px; }

.tr-disc {
  margin-bottom: 32px;
  font-size: var(--ti-fs-xs);
  line-height: var(--ti-lh-snug);
  text-align: center;
  color: var(--ti-muted-mid);
}
.tr-disc a { color: var(--ti-muted); }
.tr-disc a:hover,
.tr-disc a:focus { color: var(--ti-text); }

@media (max-width: 900px) {
  .tr-main { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 40px; }
  .tr-room { max-width: 560px; }
  .tr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .tr-main { padding: 8px 16px 40px; }
  .tr-why,
  .tr-cta,
  .tr-disc { padding-right: 16px; padding-left: 16px; }
  .tr-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
/* The reCAPTCHA box is a fixed 304px wide */
@media (max-width: 380px) {
  .ac .g-recaptcha { transform: scale(0.9); transform-origin: center top; }
}