/* ===========================
   GoMT5 — custom.css (calm ocean aurora)
   Blue to Cyan gradient: #0078D4 → #00D9C0
   =========================== */

/* 1) Material Symbols (Rounded) — icon font */
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400..700,0..1,0..200');

/* Smooth Scroll Behavior - CSS only, no JavaScript */
html {
  scroll-behavior: smooth;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

.material-symbols-rounded{
  font-family: 'Material Symbols Rounded';
  font-weight: 500;
  font-style: normal;
  font-size: 1.25rem;
  line-height: 1;
  display: inline-block;
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 48;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: normal;
  white-space: nowrap;
}

/* 2) Background: Light theme (default) - soft teal gradient */
[data-md-color-scheme="default"] body {
  background: linear-gradient(135deg, #f1f8f8 0%, #e8f5f4 50%, #e0f2f1 100%);
  background-attachment: fixed;
}

[data-md-color-scheme="default"] body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(50% 50% at 30% 20%, rgba(178,223,219,.05), transparent 50%),
    radial-gradient(60% 60% at 70% 60%, rgba(77,182,172,.06), transparent 55%),
    radial-gradient(45% 45% at 50% 80%, rgba(38,166,154,.04), transparent 50%);
  filter: blur(40px);
  animation: oceanGlow 60s ease-in-out infinite;
  opacity:.5;
}

/* Background: Dark theme (slate) - dark gradient with teal warmth */
[data-md-color-scheme="slate"] body {
  background: linear-gradient(135deg, #0a1414 0%, #0d1a1a 50%, #0a1212 100%);
  background-attachment: fixed;
}

[data-md-color-scheme="slate"] body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(50% 50% at 30% 20%, rgba(77,182,172,.08), transparent 50%),
    radial-gradient(60% 60% at 70% 60%, rgba(38,166,154,.1), transparent 55%),
    radial-gradient(45% 45% at 50% 80%, rgba(0,150,136,.06), transparent 50%);
  filter: blur(40px);
  animation: oceanGlow 60s ease-in-out infinite;
  opacity:.6;
}
@keyframes oceanGlow{
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(3%,2%,0) scale(1.03); }
  100% { transform: translate3d(0,0,0) scale(1); }
}
.md-container, .md-main, .md-content { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce){
  body::before{ animation: none !important; }
}

/* 3) New Grid Layout: Quick Start (top square) + Wide Getting Started + 2-3 pyramid */
.home-grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0.75rem;
  margin: 0.8rem 0 1.5rem;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* First card (Quick Start) - centered square, spans 4 columns (12) */
.home-grid .card:nth-child(1) {
  grid-column: 5 / 9;
}

/* Second card (Getting Started) - medium rectangle, centered with visible gaps */
.home-grid .card:nth-child(2) {
  grid-column: 4 / 10;
  min-height: 110px; /* Shorter for wide card */
}

/* Third row - 2 cards (Project Map, Glossary) - each 4 columns */
.home-grid .card:nth-child(3) {
  grid-column: 3 / 7;
}
.home-grid .card:nth-child(4) {
  grid-column: 7 / 11;
}

/* Fourth row - 3 cards (MT5Service, MT5Account, MT5Sugar) - each 4 columns */
.home-grid .card:nth-child(5) {
  grid-column: 1 / 5;
}
.home-grid .card:nth-child(6) {
  grid-column: 5 / 9;
}
.home-grid .card:nth-child(7) {
  grid-column: 9 / 13;
}

/* Responsive: tablet */
@media (max-width: 960px){
  .home-grid{
    grid-template-columns: repeat(2, 1fr);
  }
  .home-grid .card:nth-child(1),
  .home-grid .card:nth-child(2),
  .home-grid .card:nth-child(3),
  .home-grid .card:nth-child(4),
  .home-grid .card:nth-child(5),
  .home-grid .card:nth-child(6),
  .home-grid .card:nth-child(7) {
    grid-column: span 1;
  }
}

/* Responsive: mobile */
@media (max-width: 620px){
  .home-grid{
    grid-template-columns: 1fr;
  }
}

/* 4) Cards: glass + gradient frame */
.card{
  position:relative; display:block;
  padding:1rem 0.9rem; min-height:140px;
  border-radius:16px; text-decoration:none; color:inherit;
  text-align: center;
  border:2px solid transparent;
  backdrop-filter: blur(8px);
  transform-style: preserve-3d;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-width .2s ease;
}

/* Light theme cards */
[data-md-color-scheme="default"] .card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(248,250,252,.92)) padding-box,
    linear-gradient(135deg, rgb(var(--g1)), rgb(var(--g2))) border-box;
  box-shadow:0 8px 20px rgba(0,0,0,.08);
}

/* Dark theme cards */
[data-md-color-scheme="slate"] .card{
  background:
    linear-gradient(180deg, rgba(15,20,30,.92), rgba(10,14,23,.88)) padding-box,
    linear-gradient(135deg, rgb(var(--g1)), rgb(var(--g2))) border-box;
  box-shadow:0 12px 28px rgba(0,0,0,.3);
}

.card h3{ margin:.5rem 0 .2rem; font-weight:700; font-size:1rem; letter-spacing:.3px; }
.card p{ margin:0; font-size:.82rem; line-height:1.2rem; opacity:.88; }

/* 5) Centered icon with gradient fill */
.card .material-symbols-rounded{
  display: block;
  font-size: 2.2rem;
  margin: 0 auto .4rem;
  background: linear-gradient(135deg, rgb(var(--g1)), rgb(var(--g2)));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  filter: drop-shadow(0 6px 18px rgba(var(--g1), .3));
}

/* 6) Hover Cards: Easy Lift and Inner Shade */
.card:hover{
  transform: translateY(-4px);
  border-width: 3px;
}

[data-md-color-scheme="default"] .card:hover{
  box-shadow: 0 12px 32px rgba(0,0,0,.15);
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.95)) padding-box,
    linear-gradient(135deg, rgb(var(--g1)), rgb(var(--g2))) border-box;
}

[data-md-color-scheme="slate"] .card:hover{
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  background:
    linear-gradient(180deg, rgba(20,25,35,.95), rgba(15,20,30,.92)) padding-box,
    linear-gradient(135deg, rgb(var(--g1)), rgb(var(--g2))) border-box;
}

/* 7) Side color glow (soft, color = card gradient) */
.card::after{
  content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  background:
    radial-gradient(60% 90% at -12% 50%, rgba(var(--g1), .18), transparent 60%),
    radial-gradient(60% 90% at 112% 50%, rgba(var(--g2), .18), transparent 60%);
  opacity:0; transition: opacity .22s ease;
}
.card:hover::after{ opacity:.7; }

/* 8) Unique Gradient Palettes - Each card has its own colors */

/* Card 0: Quick Start - Red-Orange (energetic, "start here!") */
.card-0{
  --g1: 239,83,80;    /* #EF5350 - Red */
  --g2: 255,171,64;   /* #FFAB40 - Orange */
}

/* Card 1: Getting Started - Yellow-Orange-Pink */
.card-1{
  --g1: 255,213,79;   /* #FFD54F - Warm Yellow */
  --g2: 255,138,128;  /* #FF8A80 - Coral Pink */
}

/* Card 2: Project Map - Yellow-Blue (Row 4, Col 4) */
.card-2{
  --g1: 255,241,118;  /* #FFF176 - Light Yellow */
  --g2: 100,181,246;  /* #64B5F6 - Sky Blue */
}

/* Card 3: Glossary - Pink-Purple (harmonized) */
.card-3{
  --g1: 240,98,146;   /* #F06292 - Pink */
  --g2: 171,71,188;   /* #AB47BC - Purple */
}

/* Card 4: MT5Service - Blue (clean) */
.card-4{
  --g1: 66,165,245;   /* #42A5F5 - Blue */
  --g2: 33,150,243;   /* #2196F3 - Deep Blue */
}

/* Card 5: MT5Account - Cyan (clean) */
.card-5{
  --g1: 38,198,218;   /* #26C6DA - Cyan */
  --g2: 0,188,212;    /* #00BCD4 - Deep Cyan */
}

/* Card 6: MT5Sugar - Green (clean emerald) */
.card-6{
  --g1: 102,187,106;  /* #66BB6A - Light Green */
  --g2: 56,142,60;    /* #388E3C - Emerald Green */
}

/* 9) Accessibility */
@media (prefers-reduced-motion: reduce){
  .card{ transition: none !important; }
}

/* 10) Code blocks enhancement - Light theme */
[data-md-color-scheme="default"] .md-typeset code {
  background-color: rgba(0,120,212,.06);
  border: 1px solid rgba(0,120,212,.15);
}

[data-md-color-scheme="default"] .md-typeset pre {
  background-color: rgba(248,250,252,.95);
  border: 1px solid rgba(0,120,212,.2);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

/* Code blocks enhancement - Dark theme */
[data-md-color-scheme="slate"] .md-typeset code {
  background-color: rgba(0,120,212,.08);
  border: 1px solid rgba(0,120,212,.12);
}

[data-md-color-scheme="slate"] .md-typeset pre {
  background-color: rgba(13,17,23,.92);
  border: 1px solid rgba(0,120,212,.15);
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
}

/* 11) Architecture diagram styling - Light theme */
[data-md-color-scheme="default"] .architecture-diagram {
  background: linear-gradient(180deg, rgba(248,250,252,.95), rgba(241,245,249,.92));
  border: 1px solid rgba(0,120,212,.2);
  border-radius: 12px;
  padding: 1.5rem;
  margin: 1rem 0;
  text-align: center;
  line-height: 2;
  font-size: 0.95rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

[data-md-color-scheme="default"] .architecture-diagram strong {
  color: #0078D4;
  font-size: 1.05rem;
}

/* Architecture diagram styling - Dark theme */
[data-md-color-scheme="slate"] .architecture-diagram {
  background: linear-gradient(180deg, rgba(13,17,23,.86), rgba(13,17,23,.82));
  border: 1px solid rgba(0,217,192,.15);
  border-radius: 12px;
  padding: 1.5rem;
  margin: 1rem 0;
  text-align: center;
  line-height: 2;
  font-size: 0.95rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
}

[data-md-color-scheme="slate"] .architecture-diagram strong {
  color: #00D9C0;
  font-size: 1.05rem;
}

/* ===========================
   12) Progress Tracker - Floating Button & Side Panel
   =========================== */

/* Floating Button */
.progress-float-btn {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transition: transform 0.2s, box-shadow 0.2s;
}

/* ===========================
   13) Contact/Support Button - Floating Button & Side Panel
   =========================== */

/* Floating Contact Button */
.contact-float-btn {
  position: fixed;
  bottom: 5.5rem;
  right: 2rem;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transition: transform 0.2s, box-shadow 0.2s;
}

.contact-float-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}

[data-md-color-scheme="default"] .contact-float-btn {
  background: linear-gradient(135deg, #25D366, #128C7E);
  color: white;
}

[data-md-color-scheme="slate"] .contact-float-btn {
  background: linear-gradient(135deg, #25D366, #128C7E);
  color: white;
}

.contact-float-btn svg {
  width: 28px;
  height: 28px;
}

.progress-float-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}

[data-md-color-scheme="default"] .progress-float-btn {
  background: linear-gradient(135deg, #0078D4, #00D9C0);
  color: white;
}

[data-md-color-scheme="slate"] .progress-float-btn {
  background: linear-gradient(135deg, #0078D4, #00D9C0);
  color: white;
}

.progress-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.9rem;
  font-weight: 700;
  text-align: center;
  pointer-events: none;
  z-index: 10;
}

[data-md-color-scheme="default"] .progress-badge {
  color: #0078D4;
}

[data-md-color-scheme="slate"] .progress-badge {
  color: #00D9C0;
}

/* Overlay */
.progress-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.progress-overlay.visible {
  opacity: 1;
  pointer-events: all;
}

/* Side Panel */
.progress-panel {
  position: fixed;
  top: 0;
  right: -400px;
  width: 400px;
  max-width: 90vw;
  height: 100vh;
  z-index: 1001;
  transition: right 0.3s ease;
  overflow-y: auto;
}

.progress-panel.open {
  right: 0;
}

[data-md-color-scheme="default"] .progress-panel {
  background: linear-gradient(180deg, #ffffff, #f8fafb);
  box-shadow: -4px 0 20px rgba(0,0,0,0.15);
}

[data-md-color-scheme="slate"] .progress-panel {
  background: linear-gradient(180deg, #1a1f2e, #151a27);
  box-shadow: -4px 0 20px rgba(0,0,0,0.5);
}

/* Panel Header */
.progress-panel-header {
  padding: 1.5rem;
  border-bottom: 2px solid;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

[data-md-color-scheme="default"] .progress-panel-header {
  border-color: rgba(0,120,212,0.2);
}

[data-md-color-scheme="slate"] .progress-panel-header {
  border-color: rgba(0,217,192,0.2);
}

.progress-panel-header h3 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 700;
}

.progress-panel-close {
  background: none;
  border: none;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s, transform 0.2s;
  padding: 0;
  width: 32px;
  height: 32px;
}

.progress-panel-close:hover {
  opacity: 1;
  transform: rotate(90deg);
}

[data-md-color-scheme="default"] .progress-panel-close {
  color: #0078D4;
}

[data-md-color-scheme="slate"] .progress-panel-close {
  color: #00D9C0;
}

/* Panel Content */
.progress-panel-content {
  padding: 1.5rem;
}

/* Overall Section */
.progress-overall-section {
  margin-bottom: 2rem;
  padding: 1.5rem;
  border-radius: 12px;
  border: 2px solid;
}

[data-md-color-scheme="default"] .progress-overall-section {
  background: rgba(255,255,255,0.8);
  border-color: rgba(0,120,212,0.2);
}

[data-md-color-scheme="slate"] .progress-overall-section {
  background: rgba(10,14,23,0.5);
  border-color: rgba(0,217,192,0.2);
}

.progress-stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.progress-count {
  font-size: 1.5rem;
  font-weight: 700;
}

.progress-percentage {
  font-size: 2rem;
  font-weight: 700;
  background: linear-gradient(135deg, #0078D4, #00D9C0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.progress-subtitle {
  margin: 0.5rem 0 0 0;
  font-size: 0.85rem;
  opacity: 0.7;
}

/* Categories Section */
.progress-categories-section {
  margin-bottom: 2rem;
}

.progress-categories-section h4 {
  margin: 0 0 1rem 0;
  font-size: 1.1rem;
  font-weight: 600;
  opacity: 0.9;
}

.progress-bar-wrapper {
  position: relative;
  width: 100%;
  height: 10px;
  border-radius: 5px;
  overflow: hidden;
}

[data-md-color-scheme="default"] .progress-bar-wrapper {
  background: rgba(0,120,212,0.15);
}

[data-md-color-scheme="slate"] .progress-bar-wrapper {
  background: rgba(0,217,192,0.15);
}

.progress-bar-wrapper.small {
  height: 6px;
  border-radius: 3px;
  margin-top: 0.25rem;
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #0078D4, #00D9C0);
  transition: width 0.5s ease;
  border-radius: inherit;
}

/* Category Item */
.progress-category {
  margin-bottom: 1.25rem;
  padding: 0.75rem;
  border-radius: 8px;
  transition: background 0.2s;
}

[data-md-color-scheme="default"] .progress-category {
  background: rgba(0,120,212,0.05);
}

[data-md-color-scheme="default"] .progress-category:hover {
  background: rgba(0,120,212,0.1);
}

[data-md-color-scheme="slate"] .progress-category {
  background: rgba(0,217,192,0.05);
}

[data-md-color-scheme="slate"] .progress-category:hover {
  background: rgba(0,217,192,0.1);
}

.progress-category-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.progress-category-name {
  font-size: 0.95rem;
  font-weight: 600;
}

.progress-category-count {
  font-size: 0.85rem;
  font-weight: 600;
  opacity: 0.7;
}

/* Reset Button */
.progress-reset-btn-panel {
  width: 100%;
  padding: 0.75rem;
  border: 2px solid;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

[data-md-color-scheme="default"] .progress-reset-btn-panel {
  background: white;
  color: #0078D4;
  border-color: #0078D4;
}

[data-md-color-scheme="default"] .progress-reset-btn-panel:hover {
  background: #0078D4;
  color: white;
}

[data-md-color-scheme="slate"] .progress-reset-btn-panel {
  background: rgba(10,14,23,0.5);
  color: #00D9C0;
  border-color: #00D9C0;
}

[data-md-color-scheme="slate"] .progress-reset-btn-panel:hover {
  background: #00D9C0;
  color: #1a1f2e;
}

/* ============================================================================
   PROGRESS BAR ENHANCEMENTS - Animations and Visual Improvements
   ============================================================================ */

/* Header Progress Bar */
.header-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  z-index: 9999;
  pointer-events: none;
  width: 100%;
}

.header-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #0078D4, #00D9C0);
  width: 0%;
  transition: width 0.5s ease;
  box-shadow: 0 0 8px rgba(0, 120, 212, 0.5);
}

/* Shimmer Effect on Progress Bars */
.progress-bar-fill {
  background: linear-gradient(90deg,
    #0078D4 0%,
    #00D9C0 25%,
    #0078D4 50%,
    #00D9C0 75%,
    #0078D4 100%
  );
  background-size: 200% 100%;
  animation: shimmer 3s linear infinite;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Circular Progress Ring */
.progress-ring {
  position: absolute;
  top: 0;
  left: 0;
  transform: rotate(-90deg);
  pointer-events: none;
}

.progress-ring-circle {
  fill: none;
  stroke-width: 3;
}

.progress-ring-bg {
  stroke: rgba(0, 120, 212, 0.15);
}

[data-md-color-scheme="slate"] .progress-ring-bg {
  stroke: rgba(0, 217, 192, 0.15);
}

.progress-ring-fill {
  transition: stroke-dashoffset 0.5s ease;
}

[data-md-color-scheme="default"] .progress-ring-fill {
  stroke: url(#progress-gradient-light);
}

[data-md-color-scheme="slate"] .progress-ring-fill {
  stroke: url(#progress-gradient-dark);
}

/* Progress Badge Pulse Animation */
.progress-badge.pulse {
  animation: pulse 0.6s ease-out;
}

@keyframes pulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.15);
  }
}

/* Milestone Modal */
.milestone-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  background: white;
  padding: 2.5rem;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  z-index: 10001;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
  text-align: center;
  max-width: 400px;
}

.milestone-modal.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: all;
}

[data-md-color-scheme="slate"] .milestone-modal {
  background: linear-gradient(135deg, #1a1f2e, #151a27);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.milestone-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
  animation: bounce 0.6s ease;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

.milestone-title {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  background: linear-gradient(135deg, #0078D4, #00D9C0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

[data-md-color-scheme="slate"] .milestone-title {
  background: linear-gradient(135deg, #00D9C0, #0078D4);
  -webkit-background-clip: text;
  background-clip: text;
}

.milestone-message {
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
  opacity: 0.8;
}

.milestone-close {
  padding: 0.8rem 1.5rem;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #0078D4, #00D9C0);
  color: white;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.milestone-close:hover {
  transform: scale(1.05);
}

/* Confetti Container */
.confetti-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10000;
  overflow: hidden;
}

.confetti {
  position: absolute;
  width: 10px;
  height: 10px;
  opacity: 0;
}

.confetti.active {
  animation: confetti-fall 3s linear forwards;
}

@keyframes confetti-fall {
  0% {
    transform: translateY(-100vh) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(720deg);
    opacity: 0;
  }
}

/* Contact Panel */
.contact-panel {
  position: fixed;
  top: 0;
  right: -400px;
  width: 400px;
  max-width: 90vw;
  height: 100vh;
  z-index: 1001;
  transition: right 0.3s ease;
  overflow-y: auto;
}

.contact-panel.open {
  right: 0;
}

[data-md-color-scheme="default"] .contact-panel {
  background: linear-gradient(180deg, #ffffff, #f8fafb);
  box-shadow: -4px 0 20px rgba(0,0,0,0.15);
}

[data-md-color-scheme="slate"] .contact-panel {
  background: linear-gradient(180deg, #1a1f2e, #151a27);
  box-shadow: -4px 0 20px rgba(0,0,0,0.5);
}

/* Contact Panel Header */
.contact-panel-header {
  padding: 1.5rem;
  border-bottom: 2px solid;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

[data-md-color-scheme="default"] .contact-panel-header {
  border-color: rgba(37,211,102,0.2);
}

[data-md-color-scheme="slate"] .contact-panel-header {
  border-color: rgba(37,211,102,0.2);
}

.contact-panel-header h3 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 700;
}

.contact-panel-close {
  background: none;
  border: none;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s, transform 0.2s;
  padding: 0;
  width: 32px;
  height: 32px;
}

.contact-panel-close:hover {
  opacity: 1;
  transform: rotate(90deg);
}

[data-md-color-scheme="default"] .contact-panel-close {
  color: #25D366;
}

[data-md-color-scheme="slate"] .contact-panel-close {
  color: #25D366;
}

/* Contact Panel Content */
.contact-panel-content {
  padding: 1.5rem;
}

.contact-intro {
  margin-bottom: 2rem;
  padding: 1.5rem;
  border-radius: 12px;
  border: 2px solid;
  text-align: center;
}

[data-md-color-scheme="default"] .contact-intro {
  background: rgba(255,255,255,0.8);
  border-color: rgba(37,211,102,0.2);
}

[data-md-color-scheme="slate"] .contact-intro {
  background: rgba(10,14,23,0.5);
  border-color: rgba(37,211,102,0.2);
}

.contact-intro h4 {
  margin: 0 0 0.5rem 0;
  font-size: 1.2rem;
  font-weight: 700;
}

.contact-intro p {
  margin: 0;
  font-size: 0.95rem;
  opacity: 0.8;
  line-height: 1.5;
}

/* Contact Buttons */
.contact-buttons {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  padding: 1.25rem;
  border-radius: 12px;
  border: 2px solid;
  text-decoration: none;
  transition: all 0.2s;
  cursor: pointer;
}

.contact-btn-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
}

.contact-btn-content {
  flex: 1;
  text-align: left;
}

.contact-btn-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 0.25rem 0;
}

.contact-btn-desc {
  font-size: 0.85rem;
  opacity: 0.7;
  margin: 0;
}

/* Telegram Button */
.contact-btn-telegram {
  background: rgba(255,255,255,0.8);
  border-color: rgba(0,136,204,0.3);
  color: #0088cc;
}

.contact-btn-telegram:hover {
  transform: translateX(-4px);
  border-color: #0088cc;
  box-shadow: 0 4px 12px rgba(0,136,204,0.2);
}

.contact-btn-telegram .contact-btn-icon {
  background: linear-gradient(135deg, #0088cc, #039be5);
  color: white;
}

[data-md-color-scheme="slate"] .contact-btn-telegram {
  background: rgba(10,14,23,0.5);
  border-color: rgba(0,136,204,0.3);
  color: #0088cc;
}

[data-md-color-scheme="slate"] .contact-btn-telegram:hover {
  background: rgba(0,136,204,0.1);
}

/* WhatsApp Button */
.contact-btn-whatsapp {
  background: rgba(255,255,255,0.8);
  border-color: rgba(37,211,102,0.3);
  color: #25D366;
}

.contact-btn-whatsapp:hover {
  transform: translateX(-4px);
  border-color: #25D366;
  box-shadow: 0 4px 12px rgba(37,211,102,0.2);
}

.contact-btn-whatsapp .contact-btn-icon {
  background: linear-gradient(135deg, #25D366, #128C7E);
  color: white;
}

[data-md-color-scheme="slate"] .contact-btn-whatsapp {
  background: rgba(10,14,23,0.5);
  border-color: rgba(37,211,102,0.3);
  color: #25D366;
}

[data-md-color-scheme="slate"] .contact-btn-whatsapp:hover {
  background: rgba(37,211,102,0.1);
}

/* GitHub Button */
.contact-btn-github {
  background: rgba(255,255,255,0.8);
  border-color: rgba(36,41,47,0.3);
  color: #24292f;
}

.contact-btn-github:hover {
  transform: translateX(-4px);
  border-color: #24292f;
  box-shadow: 0 4px 12px rgba(36,41,47,0.2);
}

.contact-btn-github .contact-btn-icon {
  background: linear-gradient(135deg, #24292f, #57606a);
  color: white;
}

[data-md-color-scheme="slate"] .contact-btn-github {
  background: rgba(10,14,23,0.5);
  border-color: rgba(87,96,106,0.3);
  color: #c9d1d9;
}

[data-md-color-scheme="slate"] .contact-btn-github:hover {
  background: rgba(36,41,47,0.1);
}

/* Email Button */
.contact-btn-email {
  background: rgba(255,255,255,0.8);
  border-color: rgba(234,88,12,0.3);
  color: #ea580c;
}

.contact-btn-email:hover {
  transform: translateX(-4px);
  border-color: #ea580c;
  box-shadow: 0 4px 12px rgba(234,88,12,0.2);
}

.contact-btn-email .contact-btn-icon {
  background: linear-gradient(135deg, #ea580c, #f97316);
  color: white;
}

[data-md-color-scheme="slate"] .contact-btn-email {
  background: rgba(10,14,23,0.5);
  border-color: rgba(234,88,12,0.3);
  color: #fb923c;
}

[data-md-color-scheme="slate"] .contact-btn-email:hover {
  background: rgba(234,88,12,0.1);
}

/* Responsive */
@media (max-width: 620px) {
  .progress-float-btn {
    bottom: 1rem;
    right: 1rem;
    width: 50px;
    height: 50px;
  }

  .contact-float-btn {
    bottom: 4.5rem;
    right: 1rem;
    width: 50px;
    height: 50px;
  }

  .contact-float-btn svg {
    width: 24px;
    height: 24px;
  }

  .progress-badge {
    font-size: 0.65rem;
    padding: 0.15rem 0.35rem;
    min-width: 28px;
  }

  .progress-panel,
  .contact-panel {
    width: 100%;
    max-width: 100%;
  }

  .progress-percentage {
    font-size: 1.5rem;
  }

  .progress-count {
    font-size: 1.2rem;
  }

  .contact-btn {
    padding: 1rem;
  }

  .contact-btn-icon {
    width: 40px;
    height: 40px;
  }

  .contact-btn-title {
    font-size: 1rem;
  }
}