/* =========================================================
DOCTOR OF PSYCHOLOGICALS
LESSON 1 — PROFESSIONAL WEBSITE STYLESHEET
========================================================= */


/* =========================================================
1. DESIGN SYSTEM
========================================================= */

:root {

--background: #07090d;
--background-secondary: #0c1017;
--background-tertiary: #111720;

--surface: #121923;
--surface-light: #18212c;
--surface-hover: #1c2835;

--border: rgba(255, 255, 255, 0.08);
--border-light: rgba(255, 255, 255, 0.14);

--text: #f5f7fa;
--text-secondary: #b7c0cc;
--text-muted: #7e8997;

--accent: #d4af37;
--accent-light: #f0d776;
--accent-dark: #a9861f;

--success: #35c98a;
--danger: #e45b68;
--warning: #e5b84f;
--info: #4c9fff;

--white: #ffffff;
--black: #000000;

--container: 1200px;

--radius-small: 8px;
--radius-medium: 14px;
--radius-large: 22px;
--radius-xl: 30px;

--shadow-small:
0 8px 25px rgba(0, 0, 0, 0.18);

--shadow-medium:
0 18px 50px rgba(0, 0, 0, 0.25);

--shadow-large:
0 30px 80px rgba(0, 0, 0, 0.38);

--transition:
0.25s ease;

}


/* =========================================================
2. GLOBAL RESET
========================================================= */

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html {
scroll-behavior: smooth;
scroll-padding-top: 100px;
}

body {

font-family:
Inter,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Helvetica,
Arial,
sans-serif;

background: var(--background);

color: var(--text);

line-height: 1.7;

font-size: 16px;

overflow-x: hidden;

}

::selection {

background: var(--accent);
color: #111;

}


/* =========================================================
3. TYPOGRAPHY
========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {

color: var(--text);

line-height: 1.2;

font-weight: 700;

}

h1 {

font-size:
clamp(2.8rem, 7vw, 5.8rem);

letter-spacing:
-0.045em;

}

h2 {

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

letter-spacing:
-0.03em;

}

h3 {

font-size:
clamp(1.2rem, 2vw, 1.55rem);

}

h4 {

font-size:
1.1rem;

}

p {

color:
var(--text-secondary);

}

strong {

color:
var(--text);

font-weight:
700;

}

a {

color:
inherit;

text-decoration:
none;

transition:
var(--transition);

}

a:hover {

color:
var(--accent);

}

img {

display:
block;

max-width:
100%;

}

video {

display:
block;

max-width:
100%;

}


/* =========================================================
4. GLOBAL SECTION STRUCTURE
========================================================= */

main > section {

position:
relative;

width:
100%;

padding:
110px 5%;

}

main > section > header {

max-width:
var(--container);

margin:
0 auto 55px;

}

main > section > header p:first-child {

margin-bottom:
12px;

color:
var(--accent);

font-size:
0.76rem;

font-weight:
800;

letter-spacing:
0.17em;

text-transform:
uppercase;

}

main > section > header h2 {

margin-bottom:
18px;

}

main > section > header > p:last-child {

max-width:
760px;

font-size:
1.02rem;

}


/* =========================================================
5. HEADER
========================================================= */

body > header {

position:
sticky;

top:
0;

z-index:
1000;

width:
100%;

min-height:
78px;

display:
flex;

align-items:
center;

justify-content:
space-between;

gap:
25px;

padding:
15px 5%;

background:
rgba(7, 9, 13, 0.90);

border-bottom:
1px solid var(--border);

backdrop-filter:
blur(18px);

-webkit-backdrop-filter:
blur(18px);

}


/* =========================================================
6. LOGO
========================================================= */

.logo {

flex-shrink:
0;

}

.logo a {

display:
inline-flex;

align-items:
center;

gap:
10px;

color:
var(--text);

font-size:
1.08rem;

font-weight:
800;

letter-spacing:
-0.02em;

}

.logo a::before {

content:
"";

width:
10px;

height:
10px;

flex-shrink:
0;

border-radius:
50%;

background:
var(--accent);

box-shadow:
0 0 18px rgba(212, 175, 55, 0.65);

}


/* =========================================================
7. MAIN NAVIGATION
========================================================= */

body > header nav ul {

display:
flex;

align-items:
center;

gap:
4px;

list-style:
none;

}

body > header nav a {

display:
block;

padding:
8px 10px;

color:
var(--text-secondary);

font-size:
0.80rem;

font-weight:
600;

border-radius:
var(--radius-small);

}

body > header nav a:hover {

color:
var(--text);

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

}


/* =========================================================
8. HEADER ACTIONS
========================================================= */

.header-actions {

display:
flex;

align-items:
center;

gap:
9px;

flex-shrink:
0;

}

.header-actions a {

display:
inline-flex;

align-items:
center;

justify-content:
center;

min-height:
42px;

padding:
0 15px;

border:
1px solid var(--border-light);

border-radius:
8px;

color:
var(--text);

font-size:
0.84rem;

font-weight:
700;

}

.header-actions a:last-child {

background:
var(--accent);

color:
#111;

border-color:
var(--accent);

}

.header-actions a:last-child:hover {

background:
var(--accent-light);

color:
#111;

transform:
translateY(-2px);

}


/* =========================================================
9. HERO
========================================================= */

#home {

min-height:
calc(100vh - 78px);

display:
grid;

grid-template-columns:
minmax(0, 1.15fr)
minmax(320px, 0.85fr);

align-items:
center;

gap:
80px;

padding:
100px 8%;

background:

radial-gradient(
circle at 15% 30%,
rgba(212, 175, 55, 0.12),
transparent 32%
),

radial-gradient(
circle at 90% 70%,
rgba(76, 159, 255, 0.07),
transparent 30%
),

var(--background);

}

.hero-content {

max-width:
760px;

}

.hero-content > p:first-child {

display:
inline-flex;

align-items:
center;

gap:
10px;

margin-bottom:
24px;

color:
var(--accent);

font-size:
0.76rem;

font-weight:
800;

letter-spacing:
0.2em;

}

.hero-content > p:first-child::before {

content:
"";

width:
35px;

height:
1px;

background:
var(--accent);

}

.hero-content h1 {

margin-bottom:
28px;

}

.hero-content > p:not(:first-child) {

max-width:
680px;

margin-bottom:
35px;

font-size:
1.08rem;

}

.hero-content > a {

display:
inline-flex;

align-items:
center;

justify-content:
center;

min-height:
52px;

margin:
0 10px 10px 0;

padding:
0 24px;

border:
1px solid var(--border-light);

border-radius:
8px;

font-weight:
700;

}

.hero-content > a:first-of-type {

background:
var(--accent);

color:
#111;

border-color:
var(--accent);

}

.hero-content > a:first-of-type:hover {

background:
var(--accent-light);

color:
#111;

transform:
translateY(-2px);

}

.hero-content > a:last-of-type:hover {

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

}

.hero-media {

position:
relative;

}

.hero-media::before {

content:
"";

position:
absolute;

inset:
-20px;

border:
1px solid rgba(212, 175, 55, 0.18);

border-radius:
var(--radius-xl);

}

.hero-media img {

position:
relative;

z-index:
1;

width:
100%;

min-height:
450px;

object-fit:
cover;

border:
1px solid var(--border-light);

border-radius:
var(--radius-large);

box-shadow:
var(--shadow-large);

}


/* =========================================================
10. INTRODUCTION
========================================================= */

#introduction {

background:
var(--background-secondary);

}

#introduction > header,
#introduction > div {

max-width:
900px;

margin-left:
auto;

margin-right:
auto;

}

#introduction > div {

display:
grid;

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

gap:
25px;

}

#introduction > div p {

padding:
30px;

background:
var(--surface);

border:
1px solid var(--border);

border-radius:
var(--radius-medium);

}


/* =========================================================
11. UNIVERSAL ARTICLE CARDS
========================================================= */

#mentorship > article,
#trading-edge > article,
#risk-management > article,
#market-updates > article,
#community > article,
#live-classes > article,
#about > article,
#discussion-board > article,
#rules > article,
#privacy > article,
#terms > article,
#refund-policy > article {

background:
var(--surface);

border:
1px solid var(--border);

border-radius:
var(--radius-medium);

transition:
var(--transition);

}

#mentorship > article:hover,
#trading-edge > article:hover,
#risk-management > article:hover,
#market-updates > article:hover,
#community > article:hover,
#live-classes > article:hover,
#about > article:hover {

border-color:
rgba(212, 175, 55, 0.28);

transform:
translateY(-3px);

box-shadow:
var(--shadow-small);

}


/* =========================================================
12. MENTORSHIP
========================================================= */

#mentorship {

background:
var(--background);

}

#mentorship > article {

max-width:
var(--container);

margin:
0 auto 20px;

padding:
32px;

}

#mentorship article h3 {

margin-bottom:
12px;

}

#mentorship article p {

max-width:
850px;

}

#mentorship ul {

display:
grid;

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

gap:
10px 18px;

padding:
0;

list-style-position:
inside;

}

#mentorship ul li {

margin:
0;

padding:
13px 16px;

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

border:
1px solid var(--border);

border-radius:
8px;

}

#mentorship ol {

counter-reset:
process;

padding:
0;

list-style:
none;

}

#mentorship ol li {

counter-increment:
process;

display:
flex;

align-items:
center;

gap:
15px;

margin-bottom:
10px;

padding:
14px;

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

border-radius:
8px;

}

#mentorship ol li::before {

content:
counter(process, decimal-leading-zero);

display:
flex;

align-items:
center;

justify-content:
center;

width:
38px;

height:
38px;

flex-shrink:
0;

border:
1px solid rgba(212,175,55,0.35);

border-radius:
50%;

color:
var(--accent);

font-size:
0.78rem;

font-weight:
800;

}

#assessment {

border-color:
rgba(212,175,55,0.30) !important;

}


/* =========================================================
13. TRADING EDGE
========================================================= */

#trading-edge {

background:
var(--background-secondary);

}

#trading-edge > article {

max-width:
var(--container);

margin:
0 auto 20px;

padding:
32px;

}

#trading-edge article h3 {

margin-bottom:
12px;

}

#trading-edge article section {

display:
inline-block;

vertical-align:
top;

width:
calc(33.333% - 15px);

margin:
25px 15px 0 0;

padding:
25px;

background:
var(--background-tertiary);

border:
1px solid var(--border);

border-radius:
var(--radius-medium);

}

#trading-edge article section:last-child {

margin-right:
0;

}

#trading-edge article section h4 {

margin-bottom:
10px;

color:
var(--accent);

}

#edge-pricing {

border-color:
rgba(212,175,55,0.28) !important;

}


/* =========================================================
14. RISK MANAGEMENT
========================================================= */

#risk-management {

background:
var(--background);

}

#risk-management > article {

display:
inline-block;

vertical-align:
top;

width:
calc(50% - 13px);

margin:
0 20px 20px 0;

padding:
30px;

}

#risk-management > article:nth-of-type(even) {

margin-right:
0;

}

#risk-management a[download] {

background:
var(--accent);

color:
#111;

border-color:
var(--accent);

}


/* =========================================================
15. MARKET UPDATES
========================================================= */

#market-updates {

background:
var(--background-secondary);

}

#market-updates > article {

display:
inline-block;

vertical-align:
top;

width:
calc(50% - 13px);

margin:
0 20px 20px 0;

padding:
30px;

}

#market-updates > article:nth-of-type(even) {

margin-right:
0;

}

#market-updates article time {

display:
block;

margin:
8px 0 12px;

color:
var(--accent);

font-size:
0.85rem;

font-weight:
700;

}


/* =========================================================
16. EDUCATION
========================================================= */

#education {

background:
var(--background);

}

#education > article {

display:
inline-block;

vertical-align:
top;

width:
calc(33.333% - 14px);

min-height:
220px;

margin:
0 20px 20px 0;

padding:
30px;

background:
var(--surface);

border:
1px solid var(--border);

border-radius:
var(--radius-medium);

transition:
var(--transition);

}

#education > article:nth-of-type(3n) {

margin-right:
0;

}

#education > article:hover {

transform:
translateY(-6px);

border-color:
rgba(212,175,55,0.35);

box-shadow:
var(--shadow-medium);

}

#education article h3 {

margin-bottom:
15px;

}


/* =========================================================
17. VIDEO LIBRARY
========================================================= */

#videos {

background:
var(--background-secondary);

}

#videos > article {

display:
inline-block;

vertical-align:
top;

width:
calc(33.333% - 14px);

margin:
0 20px 20px 0;

padding:
20px;

background:
var(--surface);

border:
1px solid var(--border);

border-radius:
var(--radius-medium);

overflow:
hidden;

}

#videos > article:nth-of-type(3n) {

margin-right:
0;

}

#videos article h3 {

margin:
5px 0 18px;

}

#videos video {

width:
100%;

aspect-ratio:
16 / 9;

object-fit:
cover;

border-radius:
10px;

background:
#000;

}


/* =========================================================
18. ARTICLES
========================================================= */

#articles {

background:
var(--background);

}

#articles > article {

display:
inline-block;

vertical-align:
top;

width:
calc(50% - 13px);

margin:
0 20px 20px 0;

padding:
32px;

background:
var(--surface);

border:
1px solid var(--border);

border-radius:
var(--radius-medium);

}

#articles > article:last-child {

margin-right:
0;

}


/* =========================================================
19. COMMUNITY
========================================================= */

#community {

background:
var(--background-secondary);

}

#community > article {

display:
inline-block;

vertical-align:
top;

width:
calc(50% - 13px);

margin:
0 20px 20px 0;

padding:
30px;

}

#community > article:nth-of-type(even) {

margin-right:
0;

}


/* =========================================================
20. DISCUSSION BOARD
========================================================= */

#discussion-board {

background:
var(--background);

}

#discussion-board > article {

max-width:
var(--container);

margin:
0 auto 25px;

padding:
35px;

}

#discussion-board form {

margin-top:
25px;

}

#discussion-board form label {

margin-top:
20px;

}

#discussion-board form label:first-child {

margin-top:
0;

}

#discussion-board textarea {

min-height:
180px;

}


/* =========================================================
21. LIVE CLASSES
========================================================= */

#live-classes {

background:
var(--background-secondary);

}

#live-classes > article {

display:
inline-block;

vertical-align:
top;

width:
calc(50% - 13px);

margin:
0 20px 20px 0;

padding:
32px;

}

#live-classes > article:nth-of-type(even) {

margin-right:
0;

}

#live-classes strong {

color:
var(--accent);

}


/* =========================================================
22. CLASS SCHEDULE
========================================================= */

#class-schedule {

background:
var(--background);

overflow-x:
auto;

}

#class-schedule h2 {

max-width:
var(--container);

margin:
0 auto 30px;

}

#class-schedule table {

width:
min(100%, var(--container));

margin:
auto;

border-collapse:
collapse;

background:
var(--surface);

border:
1px solid var(--border);

border-radius:
var(--radius-medium);

overflow:
hidden;

}

#class-schedule th,
#class-schedule td {

padding:
18px 20px;

text-align:
left;

border-bottom:
1px solid var(--border);

}

#class-schedule th {

background:
var(--surface-light);

color:
var(--accent);

font-size:
0.80rem;

text-transform:
uppercase;

letter-spacing:
0.08em;

}

#class-schedule td {

color:
var(--text-secondary);

}

#class-schedule tr:last-child td {

border-bottom:
none;

}

#class-schedule tbody tr:hover {

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

}


/* =========================================================
23. TRADING JOURNAL
========================================================= */

#trading-journal {

background:
var(--background-secondary);

}

#trading-journal > article {

max-width:
var(--container);

margin:
0 auto 25px;

padding:
35px;

background:
var(--surface);

border:
1px solid var(--border);

border-radius:
var(--radius-large);

box-shadow:
var(--shadow-small);

}


/* JOURNAL STATISTICS */

#trading-journal .journal-stats {

display:
grid;

grid-template-columns:
repeat(4, 1fr);

gap:
15px;

margin-top:
20px;

}

#trading-journal .journal-stats > div {

padding:
25px;

text-align:
center;

background:
var(--background-tertiary);

border:
1px solid var(--border);

border-radius:
var(--radius-medium);

}

#trading-journal .journal-stats strong {

display:
block;

margin-bottom:
5px;

color:
var(--accent);

font-size:
1.8rem;

}

#trading-journal .journal-stats span {

color:
var(--text-muted);

font-size:
0.82rem;

}


/* JOURNAL FORM */

#trading-journal-form {

margin-top:
25px;

}

#trading-journal fieldset {

display:
grid;

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

gap:
18px 20px;

margin-bottom:
25px;

padding:
28px;

background:
var(--background-tertiary);

border:
1px solid var(--border);

border-radius:
var(--radius-medium);

}

#trading-journal fieldset legend {

grid-column:
1 / -1;

}

#trading-journal fieldset label {

margin:
0;

}

#trading-journal fieldset textarea {

min-height:
130px;

}

#trading-journal fieldset input[type="file"] {

padding:
10px;

}

#trading-journal fieldset:last-of-type {

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

}

#trading-journal fieldset:last-of-type label,
#trading-journal fieldset:last-of-type input {

min-width:
0;

}


/* JOURNAL HISTORY */

#journal-history {

margin-top:
20px;

padding:
25px;

background:
var(--background-tertiary);

border:
1px dashed var(--border-light);

border-radius:
var(--radius-medium);

}

#trading-journal > article > ul {

margin-top:
20px;

padding:
0;

list-style:
none;

}

#trading-journal > article > ul li {

display:
flex;

justify-content:
space-between;

gap:
20px;

padding:
13px 0;

border-bottom:
1px solid var(--border);

}

#trading-journal > article > ul li:last-child {

border-bottom:
none;

}


/* =========================================================
24. ABOUT
========================================================= */

#about {

background:
var(--background);

}

#about > article {

display:
inline-block;

vertical-align:
top;

width:
calc(50% - 13px);

margin:
0 20px 20px 0;

padding:
32px;

}

#about > article:nth-of-type(even) {

margin-right:
0;

}


/* =========================================================
25. SOCIAL MEDIA
========================================================= */

#social-media {

text-align:
center;

background:
linear-gradient(
135deg,
#0d1118,
#121923
);

}

#social-media header {

margin-bottom:
35px;

}

#social-media ul {

max-width:
900px;

margin:
auto;

padding:
0;

display:
flex;

justify-content:
center;

flex-wrap:
wrap;

gap:
12px;

list-style:
none;

}

#social-media li {

margin:
0;

}

#social-media a {

display:
inline-flex;

align-items:
center;

justify-content:
center;

min-width:
120px;

padding:
13px 20px;

background:
var(--surface);

border:
1px solid var(--border-light);

border-radius:
8px;

color:
var(--text-secondary);

font-weight:
700;

}

#social-media a:hover {

background:
var(--accent);

color:
#111;

border-color:
var(--accent);

transform:
translateY(-3px);

}


/* =========================================================
26. CONTACT
========================================================= */

#contact {

background:
var(--background-secondary);

}

#contact-form {

max-width:
800px;

margin:
0 auto 45px;

padding:
40px;

background:
var(--surface);

border:
1px solid var(--border);

border-radius:
var(--radius-large);

box-shadow:
var(--shadow-medium);

}

#contact-form > div {

margin-bottom:
22px;

}

#contact address {

max-width:
800px;

margin:
auto;

padding:
30px;

background:
var(--surface);

border:
1px solid var(--border);

border-radius:
var(--radius-medium);

font-style:
normal;

}

#contact address p {

margin-bottom:
10px;

}

#contact address p:last-child {

margin-bottom:
0;

}

#contact address a {

color:
var(--accent);

}


/* =========================================================
27. GENERAL FORM ELEMENTS
========================================================= */

form label {

display:
block;

margin-bottom:
8px;

color:
var(--text);

font-size:
0.9rem;

font-weight:
700;

}

input,
textarea,
select {

width:
100%;

min-height:
50px;

padding:
13px 15px;

background:
var(--background-tertiary);

color:
var(--text);

border:
1px solid var(--border-light);

border-radius:
8px;

outline:
none;

font:
inherit;

transition:
var(--transition);

}

textarea {

min-height:
150px;

resize:
vertical;

}

input::placeholder,
textarea::placeholder {

color:
var(--text-muted);

}

input:focus,
textarea:focus,
select:focus {

border-color:
var(--accent);

box-shadow:
0 0 0 3px rgba(212,175,55,0.10);

}

select option {

background:
var(--surface);

color:
var(--text);

}

button {

min-height:
50px;

padding:
0 24px;

background:
var(--accent);

color:
#111;

border:
none;

border-radius:
8px;

font:
inherit;

font-weight:
800;

cursor:
pointer;

transition:
var(--transition);

}

button:hover {

background:
var(--accent-light);

color:
#111;

transform:
translateY(-2px);

box-shadow:
0 8px 25px rgba(212,175,55,0.18);

}

:focus-visible {

outline:
2px solid var(--accent);

outline-offset:
3px;

}


/* =========================================================
28. APPLICATION
========================================================= */

#application {

background:
var(--background);

}

#application > form {

max-width:
800px;

margin:
auto;

padding:
40px;

background:
var(--surface);

border:
1px solid var(--border);

border-radius:
var(--radius-large);

}

#application form > label {

margin-top:
20px;

}

#application form > label:first-child {

margin-top:
0;

}


/* =========================================================
29. ASSESSMENT
========================================================= */

#assessment-form {

background:
var(--background-secondary);

}

#assessment-form > form {

max-width:
900px;

margin:
auto;

padding:
40px;

background:
var(--surface);

border:
1px solid var(--border);

border-radius:
var(--radius-large);

}

fieldset {

margin-bottom:
30px;

padding:
30px;

border:
1px solid var(--border-light);

border-radius:
var(--radius-medium);

}

legend {

padding:
0 12px;

color:
var(--accent);

font-weight:
800;

}

fieldset label {

margin-top:
20px;

}

fieldset label:first-of-type {

margin-top:
0;

}


/* =========================================================
30. MEMBER AREA
========================================================= */

#member-area {

background:
var(--background);

}

#member-area > article {

display:
inline-flex;

flex-direction:
column;

vertical-align:
top;

width:
calc(33.333% - 14px);

min-height:
190px;

margin:
0 20px 20px 0;

padding:
30px;

background:
var(--surface);

border:
1px solid var(--border);

border-radius:
var(--radius-medium);

}

#member-area > article:nth-of-type(3n) {

margin-right:
0;

}

#member-area article a {

margin-top:
auto;

}


/* =========================================================
31. LOGIN
========================================================= */

#login {

background:
var(--background-secondary);

}

#login > form {

max-width:
500px;

margin:
auto;

padding:
40px;

background:
var(--surface);

border:
1px solid var(--border);

border-radius:
var(--radius-large);

box-shadow:
var(--shadow-medium);

}

#login form label {

margin-top:
20px;

}

#login form label:first-child {

margin-top:
0;

}

#login form button {

width:
100%;

margin-top:
25px;

}

#login form a {

display:
block;

margin-top:
20px;

text-align:
center;

color:
var(--accent);

}


/* =========================================================
32. REGISTRATION
========================================================= */

#register {

background:
var(--background);

}

#register > form {

max-width:
550px;

margin:
auto;

padding:
40px;

background:
var(--surface);

border:
1px solid var(--border);

border-radius:
var(--radius-large);

}

#register form label {

margin-top:
20px;

}

#register form label:first-child {

margin-top:
0;

}

#register button {

width:
100%;

margin-top:
25px;

}


/* =========================================================
33. PAYMENT / PRICING
========================================================= */

#payment {

background:
var(--background-secondary);

}

#payment > article {

display:
inline-flex;

flex-direction:
column;

vertical-align:
top;

width:
calc(33.333% - 14px);

min-height:
300px;

margin:
0 20px 20px 0;

padding:
35px;

background:
var(--surface);

border:
1px solid var(--border);

border-radius:
var(--radius-large);

transition:
var(--transition);

}

#payment > article:nth-of-type(3n) {

margin-right:
0;

}

#payment > article:hover {

transform:
translateY(-7px);

border-color:
rgba(212,175,55,0.40);

box-shadow:
var(--shadow-medium);

}

#payment article p strong {

display:
inline-block;

margin:
15px 0;

color:
var(--accent);

font-size:
1.8rem;

}


/* =========================================================
34. CHECKOUT
========================================================= */

#checkout {

background:
var(--background);

}

#checkout > form {

max-width:
800px;

margin:
auto;

padding:
40px;

background:
var(--surface);

border:
1px solid var(--border);

border-radius:
var(--radius-large);

}

#checkout fieldset label {

display:
flex;

align-items:
center;

gap:
10px;

margin:
12px 0;

padding:
14px;

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

border:
1px solid var(--border);

border-radius:
8px;

}

#checkout fieldset input[type="radio"] {

width:
18px;

min-height:
18px;

height:
18px;

accent-color:
var(--accent);

}

#checkout button {

width:
100%;

}


/* =========================================================
35. PAYMENT CONFIRMATION
========================================================= */

#payment-confirmation {

text-align:
center;

background:
var(--background-secondary);

}

#payment-confirmation h2 {

color:
var(--accent);

}

#payment-confirmation p {

max-width:
700px;

margin:
15px auto;

}


/* =========================================================
36. ADMIN DASHBOARD
========================================================= */

#admin-dashboard {

background:
var(--background);

}

#admin-dashboard > article {

display:
inline-flex;

flex-direction:
column;

vertical-align:
top;

width:
calc(25% - 15px);

min-height:
230px;

margin:
0 20px 20px 0;

padding:
28px;

background:
var(--surface);

border:
1px solid var(--border);

border-radius:
var(--radius-medium);

transition:
var(--transition);

}

#admin-dashboard > article:nth-of-type(4n) {

margin-right:
0;

}

#admin-dashboard > article:hover {

border-color:
rgba(212,175,55,0.30);

transform:
translateY(-4px);

}

#admin-dashboard article h3 {

margin-bottom:
12px;

}

#admin-dashboard article a {

margin-top:
auto;

}


/* =========================================================
37. LEGAL
========================================================= */

#rules,
#privacy,
#terms,
#refund-policy {

background:
var(--background-secondary);

}

#rules > article,
#privacy > article,
#terms > article,
#refund-policy > article {

max-width:
var(--container);

margin:
0 auto 20px;

padding:
30px;

}

#rules ul {

margin-top:
15px;

}


/* =========================================================
38. GENERAL LINKS / CTA BUTTONS
========================================================= */

main article > a,
main section > a {

display:
inline-flex;

align-items:
center;

justify-content:
center;

min-height:
45px;

margin-top:
20px;

padding:
0 20px;

background:
rgba(212,175,55,0.10);

border:
1px solid rgba(212,175,55,0.30);

border-radius:
8px;

color:
var(--accent);

font-weight:
700;

}

main article > a:hover,
main section > a:hover {

background:
var(--accent);

color:
#111;

transform:
translateY(-2px);

}


/* =========================================================
39. FOOTER
========================================================= */

body > footer {

padding:
80px 5% 30px;

background:
#05070a;

border-top:
1px solid var(--border);

}

body > footer > section,
body > footer > nav,
body > footer > p {

max-width:
var(--container);

margin-left:
auto;

margin-right:
auto;

}

body > footer > section {

margin-bottom:
35px;

}

body > footer h2 {

margin-bottom:
10px;

font-size:
1.5rem;

}

body > footer section p {

color:
var(--accent);

}

body > footer nav {

margin-bottom:
25px;

}

body > footer nav ul {

display:
flex;

flex-wrap:
wrap;

gap:
8px 20px;

padding:
0;

list-style:
none;

}

body > footer nav li {

margin:
0;

}

body > footer nav a {

color:
var(--text-muted);

font-size:
0.9rem;

}

body > footer nav a:hover {

color:
var(--accent);

}

body > footer nav[aria-label="Social Media"] {

display:
flex;

flex-wrap:
wrap;

gap:
10px;

}

body > footer nav[aria-label="Social Media"] a {

padding:
8px 14px;

border:
1px solid var(--border);

border-radius:
7px;

}

body > footer > p {

padding-top:
25px;

border-top:
1px solid var(--border);

color:
var(--text-muted);

font-size:
0.85rem;

}


/* =========================================================
40. LISTS
========================================================= */

main ul,
main ol {

padding-left:
25px;

}

main li {

margin-bottom:
9px;

color:
var(--text-secondary);

}

main li::marker {

color:
var(--accent);

}


/* =========================================================
41. SCROLLBAR
========================================================= */

::-webkit-scrollbar {

width:
10px;

}

::-webkit-scrollbar-track {

background:
var(--background);

}

::-webkit-scrollbar-thumb {

background:
#303844;

border-radius:
10px;

}

::-webkit-scrollbar-thumb:hover {

background:
var(--accent-dark);

}


/* =========================================================
42. LARGE TABLETS
========================================================= */

@media (max-width: 1100px) {

body > header {

flex-wrap:
wrap;

}

body > header nav {

order:
3;

width:
100%;

overflow-x:
auto;

}

body > header nav ul {

justify-content:
center;

padding-bottom:
5px;

width:
max-content;

margin:
auto;

}

#home {

grid-template-columns:
1fr;

gap:
55px;

}

.hero-content {

max-width:
900px;

margin:
auto;

text-align:
center;

}

.hero-content > p:first-child {

justify-content:
center;

}

.hero-content > p:not(:first-child) {

margin-left:
auto;

margin-right:
auto;

}

.hero-media {

max-width:
700px;

width:
100%;

margin:
auto;

}

#admin-dashboard > article {

width:
calc(50% - 12px);

}

#admin-dashboard > article:nth-of-type(4n) {

margin-right:
20px;

}

#admin-dashboard > article:nth-of-type(2n) {

margin-right:
0;

}

}


/* =========================================================
43. TABLET
========================================================= */

@media (max-width: 800px) {

main > section {

padding:
80px 5%;

}

#introduction > div {

grid-template-columns:
1fr;

}

#mentorship ul {

grid-template-columns:
1fr;

}

#trading-edge article section {

display:
block;

width:
100%;

margin:
15px 0;

}

#risk-management > article,
#market-updates > article {

width:
100%;

margin-right:
0;

}

#education > article {

width:
calc(50% - 12px);

}

#education > article:nth-of-type(3n) {

margin-right:
20px;

}

#education > article:nth-of-type(2n) {

margin-right:
0;

}

#videos > article {

width:
calc(50% - 12px);

}

#videos > article:nth-of-type(3n) {

margin-right:
20px;

}

#videos > article:nth-of-type(2n) {

margin-right:
0;

}

#community > article,
#live-classes > article,
#about > article {

width:
100%;

margin-right:
0;

}

#member-area > article {

width:
calc(50% - 12px);

}

#member-area > article:nth-of-type(3n) {

margin-right:
20px;

}

#member-area > article:nth-of-type(2n) {

margin-right:
0;

}

#payment > article {

width:
calc(50% - 12px);

}

#payment > article:nth-of-type(3n) {

margin-right:
20px;

}

#payment > article:nth-of-type(2n) {

margin-right:
0;

}

#trading-journal .journal-stats {

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

}

#trading-journal fieldset {

grid-template-columns:
1fr;

}

#trading-journal fieldset legend {

grid-column:
auto;

}

#trading-journal fieldset:last-of-type {

grid-template-columns:
1fr;

}

#class-schedule {

overflow-x:
auto;

}

#class-schedule table {

min-width:
700px;

}

}


/* =========================================================
44. MOBILE
========================================================= */

@media (max-width: 600px) {

body {

font-size:
15px;

}

main > section {

padding:
65px 20px;

}

body > header {

position:
relative;

padding:
15px 20px;

}

.logo {

width:
100%;

}

.header-actions {

width:
100%;

justify-content:
center;

}

.header-actions a {

flex:
1;

}

body > header nav {

width:
100%;

overflow-x:
auto;

}

body > header nav ul {

justify-content:
flex-start;

flex-wrap:
nowrap;

width:
max-content;

margin:
0;

}

body > header nav a {

white-space:
nowrap;

}

#home {

min-height:
auto;

padding-top:
70px;

}

.hero-content h1 {

font-size:
clamp(2.5rem, 13vw, 4rem);

}

.hero-content > a {

width:
100%;

margin-right:
0;

}

.hero-media img {

min-height:
300px;

}

main > section > header {

margin-bottom:
35px;

}

h2 {

font-size:
2.1rem;

}

#education > article,
#videos > article,
#member-area > article,
#admin-dashboard > article,
#payment > article {

width:
100%;

margin-right:
0 !important;

}

#videos > article {

padding:
15px;

}

#articles > article {

width:
100%;

margin-right:
0;

margin-bottom:
20px;

}

#contact-form,
#application > form,
#assessment-form > form,
#login > form,
#register > form,
#checkout > form {

padding:
25px 20px;

}

fieldset {

padding:
20px 15px;

}

#trading-journal > article {

padding:
22px 18px;

}

#trading-journal .journal-stats {

grid-template-columns:
1fr 1fr;

}

#trading-journal .journal-stats > div {

padding:
18px 10px;

}

#trading-journal .journal-stats strong {

font-size:
1.45rem;

}

#trading-journal > article > ul li {

flex-direction:
column;

gap:
4px;

}

#class-schedule table {

font-size:
0.85rem;

}

body > footer {

padding:
60px 20px 25px;

}

body > footer nav ul {

flex-direction:
column;

gap:
8px;

}

}


/* =========================================================
45. SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

.logo a {

font-size:
0.92rem;

}

.header-actions {

flex-direction:
column;

}

.header-actions a {

width:
100%;

}

.hero-content h1 {

font-size:
2.4rem;

}

.hero-media img {

min-height:
240px;

}

main > section {

padding-left:
16px;

padding-right:
16px;

}

#trading-journal .journal-stats {

grid-template-columns:
1fr;

}

}


/* =========================================================
46. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

*,
*::before,
*::after {

scroll-behavior:
auto !important;

transition:
none !important;

animation:
none !important;

}

}


/* =========================================================
END OF LESSON 1 MAIN CSS
========================================================= */
.trade-win {
    color: green;
}

.trade-loss {
    color: red;
}