/* ============================================================
   INFO PAGES — Dashboard overlay
   Loaded after styles.css; overrides to warm-black + gold theme
   terms · privacy · contact · faq
   ============================================================ */

/* ── Terms / Privacy sections → proper cards ─────────────── */
.terms-section {
    background: #0e0d0b;
    border: 1px solid rgba(234, 156, 34, 0.13);
    border-bottom: 1px solid rgba(234, 156, 34, 0.13); /* override the white separator */
    border-radius: 20px;
    padding: 26px 28px;
    margin-bottom: 12px;
    transition: border-color 0.22s;
}

.terms-section:hover {
    border-color: rgba(234, 156, 34, 0.28);
}

.terms-section:last-child {
    border-bottom: 1px solid rgba(234, 156, 34, 0.13);
    margin-bottom: 0;
    padding-bottom: 26px;
}

.terms-header {
    gap: 14px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.terms-number {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    font-size: 16px;
}

.terms-title {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.2px;
}

.terms-text {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.62);
    line-height: 1.72;
}

.terms-text p { margin-bottom: 14px; }

.terms-text p:last-child { margin-bottom: 0; }

/* BULLETS, WHICH THE ORIGINAL DOCUMENT NEVER HAD AND THE NEW ONE IS MOSTLY
   MADE OF.

   legacy-src/info/terms.html was <p> and nothing else, so no stylesheet has
   ever declared a list inside .terms-text. That matters more here than it
   normally would: theme.css opens with `* { margin: 0; padding: 0 }`, so a
   <ul> arrives with no indent at all and `list-style-position: outside` puts
   every marker in the padding that is not there — the discs render outside the
   element box and are clipped by the card, leaving a list that reads as
   unindented, unmarked paragraphs.

   rich_block() emits a <ul> for any block whose every line starts "- ", and
   the refund conditions, the crypto rules and the data inventory are all
   written that way because they are lists, so this is most of the copy on
   /refunds and /privacy rather than an edge case.

   padding-left matches .warning-card ul below, which is the only other list in
   this file and solves the identical problem. The row gap is half a paragraph
   gap: items in one list are closer to each other than paragraphs are, which is
   the whole visual point of making them a list. */
.terms-text ul {
    list-style: disc;
    padding-left: 20px;
    margin-bottom: 14px;
}

.terms-text ul:last-child { margin-bottom: 0; }

.terms-text li { margin-bottom: 7px; }

.terms-text li:last-child { margin-bottom: 0; }

/* <strong> IS THE ONLY EMPHASIS THE COPY CAN REACH FOR, so it has to be worth
   reaching for. .terms-text sets its body colour to 62% white; bold text at the
   same 62% is a weight change nobody notices on a dark background, and the
   sentences using it are the ones the document most needs read — "a ban is not
   refundable", "we do not currently delete any of it on a schedule". Lifting it
   to full white is what makes the emphasis do anything. */
.terms-text strong { color: #ffffff; }

/* THE PLAIN-ENGLISH OPENING OF EACH DOCUMENT.

   A MODIFIER ON .terms-section RATHER THAN A LAYOUT OF ITS OWN. It is the same
   card in the same column carrying the same text; the only difference is that
   it is the part to read first, so it takes the gold tint the .terms-update
   pill directly above it already uses and drops the numbered header, because it
   is not a clause and numbering it would push the real clause 1 to 2.

   The margin overrides .terms-section's 12px so the lead sits apart from the
   numbered set beneath it rather than reading as the first of them. */
.terms-lead {
    background: rgba(234, 156, 34, 0.06);
    border-color: rgba(234, 156, 34, 0.24);
    margin-bottom: 24px;
}

.terms-lead .terms-text { color: rgba(255, 255, 255, 0.75); }

/* The sidebar's section list is prose, not the two-or-three-word labels the
   original hand-wrote — the headings come from config/policies.php and run to
   "The risk you are taking: your game account can be banned". info.css:255
   gives .sidebar-link a fixed row height by way of `align-items: center` on a
   flex box; a wrapping label in one is centred against its number and the list
   loses its alignment down the left. Top-aligning the pair keeps every number
   on the first line of its label however many lines follow. */
.sidebar-link { align-items: flex-start; }

.sidebar-link .link-number { margin-top: 1px; }

.sidebar-link .link-text { line-height: 1.45; }

.terms-subtitle {
    font-size: 14px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.terms-subtitle::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 13px;
    background: #EA9C22;
    border-radius: 2px;
    flex-shrink: 0;
}

.terms-subsection p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.62);
    line-height: 1.72;
}

/* Last-updated pill */
.terms-update {
    display: inline-flex;
    background: rgba(234, 156, 34, 0.07);
    border: 1px solid rgba(234, 156, 34, 0.2);
    border-radius: 40px;
    padding: 7px 16px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 24px;
    letter-spacing: 0.3px;
}

/* Contact card at bottom of terms/privacy */
.terms-contact {
    margin-top: 20px;
    padding: 32px;
    background: #0e0d0b;
    border: 1px solid rgba(234, 156, 34, 0.14);
    border-radius: 22px;
    text-align: center;
}

/* .contact-grid holds the two cards on /contact and is declared in no
   stylesheet at all, so `display` stayed `block` and the two cards stacked at
   every width including 1920, each capped at the 400px .contact-card sets
   below. Two 400px blocks under one another on a 1200px container is not what a
   class called "grid" was written to do.

   auto-fit with a 280px floor rather than a bare `1fr 1fr` so the pair collapses
   to one column on a phone without needing a media query of its own — and so a
   third contact route added later lands in the grid instead of overflowing it.
   align-items: start keeps a short card from stretching to match a tall one,
   which is what makes them read as two cards rather than one split box. */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    align-items: start;
}

.contact-card {
    max-width: 400px;
}

/* The cap above belongs to the card as a lone block; inside a grid track the
   track is already the measure, and leaving it on strands 400px of card in a
   wider column with the rest of the track empty beside it.

   THE MARGIN IS THE HALF OF THIS THAT IS EASY TO MISS. theme.css declares its
   own `.contact-card { max-width: 400px; margin: 0 auto }` — a second copy of
   this rule, which is why clearing only the one in this file was not enough.
   An AUTO inline margin makes a grid item decline to stretch: it shrink-wraps
   to its content and centres in the track instead. Measured with the cap
   already lifted, the two cards came out 570px and 328px in identical 570px
   tracks — the shorter card sizing to its own sentence and sitting adrift in
   the middle of its column, which reads as a rendering fault rather than as a
   pair. Zeroing the margin is what lets both fill. */
.contact-grid > .contact-card {
    max-width: none;
    margin: 0;
}

/* .legal-pending is the ENTIRE body of /terms, /privacy and /refunds — the
   placeholder card explaining that the document is being rewritten — and it was
   declared nowhere either. It is what the note on .info-section in
   enhancements.css is describing when it calls /terms "a 146px placeholder": an
   icon at whatever size it inherited, a heading, two paragraphs and a button,
   run to the full width of the container with no box around them and no
   centring. Three of the site's legal pages therefore looked like markup that
   had lost its stylesheet, which on the documents a payment gateway reads
   during underwriting is the worst place on the site to look unfinished.

   These are .terms-contact's own values rather than new ones, so the
   placeholder reads as the same family of card as everything else here.
   max-width plus auto margins because the text is the only thing on the page: a
   paragraph measured across the full container is a line length nobody reads.

   The icon is sized explicitly because .contact-card i below sets 36px for the
   contact page only, and this one was inheriting body copy — a 13px glyph above
   the heading read as a bullet rather than as the card's mark. */
.legal-pending {
    max-width: 640px;
    margin: 0 auto;
    padding: 32px;
    background: #0e0d0b;
    border: 1px solid rgba(234, 156, 34, 0.14);
    border-radius: 22px;
    text-align: center;
}

.legal-pending > i {
    display: block;
    margin-bottom: 16px;
    font-size: 36px;
    color: #EA9C22;
}

.legal-pending h2 {
    margin-bottom: 14px;
    font-size: 22px;
    font-weight: 800;
}

.legal-pending p {
    margin-bottom: 14px;
    font-size: 14px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.6);
}

.legal-pending .btn-secondary { margin-top: 10px; }

.contact-card i { font-size: 36px; margin-bottom: 14px; }

/* THE 14px ABOVE HAS NEVER BEEN DRAWN, BECAUSE THE BOX IT SITS ON IS INLINE.

   Remix Icon leaves its glyphs `display: inline`, and a vertical margin on an
   inline box is not collapsed or reduced — it is discarded, and no space is laid
   out for it at all. The declaration above therefore reads as 14px of air under
   the mark and produces none: measured on /contact at 1440 the gap between the
   glyph and the <h3> beneath it is 2px. The identical construction on /terms,
   /privacy and /refunds measures 16px, and it escapes this only because
   `.legal-pending > i` happens to declare `display: block` for a different
   reason. So the two cards carrying the only routes a visitor has to support had
   their 36px mark sitting all but on the heading, while the placeholder card one
   page over was spaced as intended.

   .contact-icon is also the last class on the public pages that Blade writes and
   no stylesheet declares — the same reporting gap that previously hid
   .contact-grid and .legal-pending — and the wrapper exists for no other purpose
   than to be the icon's box, so the box is what gets the declaration.

   Making the glyph a block is the entire fix. The 14px is already the intended
   figure and is deliberately left where it is rather than restated here, so that
   the spacing stays one number in one place if it is ever revisited. */
.contact-icon > i { display: block; }

.contact-card h3 {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 10px;
}

.contact-card p {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.52);
    margin-bottom: 22px;
    line-height: 1.6;
}

/* ── Sidebar ──────────────────────────────────────────────── */
.sidebar-sticky {
    background: #0e0d0b;
    border: 1px solid rgba(234, 156, 34, 0.14);
    border-radius: 20px;
    padding: 22px;
    top: 96px;
    backdrop-filter: none;
}

.sidebar-title {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.35);
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Make sidebar links compact & dashboard-style */
.sidebar-link {
    padding: 9px 12px;
    border-radius: 10px;
    background: transparent;
    border: none;
    border-left: 2px solid transparent;
    gap: 10px;
    font-size: 13px;
    transition: background 0.18s, color 0.18s, border-color 0.18s;
}

.sidebar-link:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: transparent;
    border-left-color: rgba(234, 156, 34, 0.3);
    transform: none;
    color: rgba(255, 255, 255, 0.85);
}

.sidebar-link.active {
    background: linear-gradient(90deg, rgba(240, 93, 17, 0.1), transparent);
    border-left-color: #EA9C22;
    color: #EA9C22;
}

.sidebar-link.active .link-number {
    background: rgba(234, 156, 34, 0.15);
    color: #EA9C22;
}

.link-number {
    width: 24px;
    height: 24px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 7px;
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.38);
    transition: background 0.18s, color 0.18s;
}

.sidebar-links { gap: 3px; margin-bottom: 18px; }

.sidebar-actions {
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin-top: 4px;
}

.sidebar-actions .btn-primary,
.sidebar-actions .btn-secondary {
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 13px;
}

/* ── Contact page specific ────────────────────────────────── */

/* Notice banner — gold toned */
.contact-notice {
    border-radius: 20px;
    background: rgba(234, 156, 34, 0.07);
    border: 1px solid rgba(234, 156, 34, 0.22);
    padding: 24px;
    margin-bottom: 24px;
}

.notice-header { gap: 12px; margin-bottom: 14px; }
.notice-header i { font-size: 22px; }
.notice-header h2 { font-size: 17px; font-weight: 700; }

.notice-content p {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.65;
    margin-bottom: 10px;
}

/* Discord support block — dark card with subtle Discord accent line */
.discord-support-section {
    background: #0e0d0b;
    border: 1px solid rgba(88, 101, 242, 0.15);
    border-radius: 22px;
    padding: 28px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}

.discord-support-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, #5865F2 0%, #EA9C22 50%, #5865F2 100%);
    opacity: 0.5;
}

.discord-header {
    gap: 18px;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.discord-icon-large {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    padding: 12px;
}

.discord-header .discord-title {
    font-size: 20px;
    font-weight: 800;
}

.discord-header .discord-subtitle {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.48);
}

/* Step cards */
.step-card {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 18px 20px;
    gap: 14px;
}

.step-card:hover {
    background: rgba(88, 101, 242, 0.05);
    border-color: rgba(88, 101, 242, 0.22);
    transform: translateY(-2px);
}

.step-number {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 800;
}

.step-content h3 { font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.step-content p  { font-size: 13px; color: rgba(255, 255, 255, 0.55); line-height: 1.55; }

.discord-steps { gap: 14px; margin-bottom: 24px; }

.discord-join { padding-top: 4px; }

.btn-discord-large {
    border-radius: 14px;
    padding: 18px 28px;
    gap: 16px;
    max-width: 460px;
    transition: all 0.25s ease;
}

.btn-discord-large:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(88, 101, 242, 0.28);
}

.btn-title { font-size: 15px; font-weight: 700; }
.btn-subtitle { font-size: 12px; opacity: 0.7; }

.discord-link-note {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.38);
    margin-top: 12px;
}

/* Support guidelines block */
.support-guidelines {
    background: #0e0d0b;
    border: 1px solid rgba(234, 156, 34, 0.13);
    border-radius: 22px;
    padding: 26px 28px;
    margin-bottom: 20px;
}

.guidelines-title {
    font-size: 17px;
    font-weight: 800;
    text-align: left;
    margin-bottom: 18px;
}

.guidelines-grid { gap: 12px; }

.guideline-card {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.055);
    border-radius: 16px;
    padding: 18px 20px;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color 0.2s, background 0.2s, transform 0.2s;
}

.guideline-card:hover {
    background: rgba(234, 156, 34, 0.04);
    border-color: rgba(234, 156, 34, 0.22);
    transform: translateY(-2px);
}

.guideline-card i   { font-size: 22px; margin-bottom: 0; }
.guideline-card h3  { font-size: 14px; font-weight: 700; margin: 0; }
.guideline-card p   { font-size: 13px; color: rgba(255,255,255,0.52); line-height: 1.55; margin: 0; }

/* Warning / no-other-methods card */
.no-other-methods { margin-bottom: 0; }

.warning-card {
    padding: 22px 24px;
    gap: 18px;
    border-radius: 18px;
    background: rgba(239, 68, 68, 0.07);
    border: 1px solid rgba(239, 68, 68, 0.22);
}

.warning-card i  { font-size: 24px; }
.warning-card h3 { font-size: 15px; font-weight: 700; margin-bottom: 10px; }
.warning-card p  { font-size: 13px; color: rgba(255,255,255,0.6); line-height: 1.6; margin-bottom: 10px; }
.warning-card ul { padding-left: 20px; margin: 6px 0 10px; }
.warning-card li { font-size: 13px; color: rgba(255,255,255,0.6); margin-bottom: 5px; padding-left: 0; }
.warning-card li::before { display: none; }

/* Discord info sidebar card */
.discord-info-card {
    margin-top: 14px;
    padding: 18px;
    background: rgba(88, 101, 242, 0.07);
    border: 1px solid rgba(88, 101, 242, 0.18);
    border-radius: 14px;
}

.discord-info-title {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 14px;
}

.discord-info-content { gap: 9px; margin-bottom: 14px; }

.info-item {
    font-size: 12px;
    gap: 8px;
    color: rgba(255, 255, 255, 0.6);
}

.info-item i { font-size: 13px; }

/* ── FAQ page specific ────────────────────────────────────── */

/* Override the homepage faq section styles for standalone FAQ page */
.faq {
    padding: 40px 0 80px;
    background: transparent;
}

.faq-glow { display: none; } /* remove the homepage blob bg */

.faq-grid {
    display: block; /* override the 2-col homepage layout */
}

/* FAQ left header — make it full width / inline heading */
.faq-left {
    width: 100%;
    margin-bottom: 36px;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.faq-title {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.5px;
    margin-bottom: 8px;
}

.faq-subtitle {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.5;
}

/* FAQ items — dashboard card style */
.faq-item {
    background: #0e0d0b;
    border: 1px solid rgba(234, 156, 34, 0.12);
    border-radius: 16px;
    margin-bottom: 8px;
    transition: border-color 0.22s;
}

.faq-item:hover  { border-color: rgba(234, 156, 34, 0.28); background: #0e0d0b; }
.faq-item.active { border-color: rgba(234, 156, 34, 0.35); background: #0e0d0b; }

.faq-question {
    padding: 18px 20px;
    font-size: 15px;
    font-weight: 600;
    gap: 12px;
}

.faq-question:hover { color: #fff; }
.faq-question i     { font-size: 18px; flex-shrink: 0; }

.faq-item.active .faq-answer {
    max-height: 400px;
    padding: 0 20px 18px;
}

.faq-answer p {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.58);
    line-height: 1.7;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Category group headers */
.faq-group-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.35);
    margin: 28px 0 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.faq-group-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
}

.faq-group-title:first-child { margin-top: 0; }

/* Support link card at bottom of FAQ */
.faq-support-link {
    margin-top: 28px;
    padding: 18px 22px;
    background: #0e0d0b;
    border: 1px solid rgba(234, 156, 34, 0.14);
    border-radius: 16px;
    text-align: center;
}

.faq-support-link p { font-size: 13px; margin-bottom: 8px; }
.faq-support-link a { font-size: 13px; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1024px) {
    .terms-wrapper { grid-template-columns: 1fr; gap: 24px; }
    .terms-sidebar  { display: none; }
}

@media (max-width: 768px) {
    .terms-section { padding: 20px; }
    .terms-contact { padding: 24px; }
    .discord-steps { grid-template-columns: 1fr; }
    .guidelines-grid { grid-template-columns: 1fr; }
    .support-guidelines { padding: 20px; }
    .discord-support-section { padding: 20px; }
}