/**
 * MEGA's common styling for Wordpress sites.
 *
 * Contains atomic components:
 * spacing: https://www.figma.com/file/U90j8OCD0pvFFO3fO1YlkN/Website-design-system-v1?node-id=412%3A9850&t=uSRFKSkVWXzRUaXK-0
 * typography: https://www.figma.com/file/U90j8OCD0pvFFO3fO1YlkN/Website-design-system-v1?node-id=121%3A738&t=D5tLygUnvOk9VyVT-0
 * color: https://www.figma.com/file/U90j8OCD0pvFFO3fO1YlkN/Website-design-system-v1?node-id=112%3A12
 */

/* region MEGA Atomic Component: Spacing */

/* Breakpoints XL and L */
:root {
  --spacing-1: 2px;
  --spacing-2: 4px;
  --spacing-3: 8px;
  --spacing-4: 12px;
  --spacing-5: 16px;
  --spacing-6: 20px;
  --spacing-7: 24px;
  --spacing-8: 32px;
  --spacing-9: 40px;
  --spacing-10: 48px;
  --spacing-11: 64px;
  --spacing-12: 80px;
  --spacing-13: 96px;
  --spacing-14: 120px;
  --spacing-15: 160px;
}


/* Breakpoints M */
@media screen and (min-width: 768px) and (max-width: 1080px) {
  :root {
    --spacing-1: 2px;
    --spacing-2: 4px;
    --spacing-3: 8px;
    --spacing-4: 12px;
    --spacing-5: 16px;
    --spacing-6: 20px;
    --spacing-7: 24px;
    --spacing-8: 28px;
    --spacing-9: 36px;
    --spacing-10: 44px;
    --spacing-11: 56px;
    --spacing-12: 72px;
    --spacing-13: 80px;
    --spacing-14: 96px;
    --spacing-15: 144px;
  }
}

/* Breakpoints S and XS */
@media screen and (min-width: 0px) and (max-width: 768px) {
  :root {
    --spacing-1: 2px;
    --spacing-2: 4px;
    --spacing-3: 8px;
    --spacing-4: 12px;
    --spacing-5: 16px;
    --spacing-6: 20px;
    --spacing-7: 24px;
    --spacing-8: 28px;
    --spacing-9: 32px;
    --spacing-10: 40px;
    --spacing-11: 48px;
    --spacing-12: 64px;
    --spacing-13: 72px;
    --spacing-14: 80px;
    --spacing-15: 120px;
  }
}

/* endregion */

/* region MEGA Atomic Component: Typography */

/**
 * See https://www.figma.com/file/U90j8OCD0pvFFO3fO1YlkN/Website-design-system-v1?node-id=121%3A738&t=D5tLygUnvOk9VyVT-0
 *
 * Poppins font: https://fonts.google.com/specimen/Poppins?query=poppins
 * Inter font: https://fonts.google.com/specimen/Inter?query=inter
 */

:root {
  --font-family-poppins: Poppins, arial, sans-serif;
  --font-family-inter: "Inter", arial, sans-serif;
  --font-family-almarai: "Almarai", arial, sans-serif;
  --font-family-lexend: "Lexend", arial, sans-serif;
  --font-family-noto-sans-kr: "Noto Sans KR", arial, sans-serif;
  --font-family-noto-sans-tc: "Noto Sans TC", arial, sans-serif;
  --font-family-noto-sans-sc: "Noto Sans SC", arial, sans-serif;
  --font-family-mulish: "Mulish", arial, sans-serif;
  --font-family-prompt: "Prompt", arial, sans-serif;
  --font-family-m-plus-1p: "M PLUS 1p", arial, sans-serif;
}

:root,
:root .page-container:lang(en) {
  --font-family-for-headings: var(--font-family-poppins);
  --font-family-for-copy: var(--font-family-inter);
}

/* Breakpoints XL and L */
:root,
:root .page-container:lang(en) {
  /* Headings */
  --font-h1: normal bold 60px/72px var(--font-family-for-headings);
  --font-h1-spacing: -0.3px;

  --font-h2: normal 600 48px/56px var(--font-family-for-headings);
  --font-h2-spacing: -0.24px;

  --font-h3: normal 600 40px/48px var(--font-family-for-headings);
  --font-h3-spacing: 0;

  --font-h4: normal 600 32px/40px var(--font-family-for-headings);
  --font-h4-spacing: 0.08px;

  --font-h5: normal 600 24px/28px var(--font-family-for-headings);
  --font-h5-spacing: 0;

  --font-h6: normal bold 20px/24px var(--font-family-for-copy);
  --font-h6-spacing: 0.0025em;

  /* Body Copy */
  --font-copy-lg: normal normal 18px/28px var(--font-family-for-copy);
  --font-copy-lg-bold: normal bold 18px/28px var(--font-family-for-copy);
  --font-copy-md: normal normal 16px/24px var(--font-family-for-copy);
  --font-copy-md-bold: normal bold 16px/24px var(--font-family-for-copy);
  --font-copy-sm: normal normal 14px/20px var(--font-family-for-copy);
  --font-copy-sm-bold: normal bold 14px/20px var(--font-family-for-copy);

  /* Link fonts */
  --font-link-lg: normal normal 18px/24px var(--font-family-for-copy);
  --font-link-md: normal normal 16px/24px var(--font-family-for-copy);
  --font-link-sm: normal normal 14px/20px var(--font-family-for-copy);

  /* buttons fonts */
  --font-btn-xl: normal 600 18px/24px var(--font-family-for-copy);
  --font-btn-lg: normal 600 16px/24px var(--font-family-for-copy);
  --font-btn-md: normal 600 16px/20px var(--font-family-for-copy);
  --font-btn-sm: normal 600 14px/20px var(--font-family-for-copy);
}

/* region MEGA Atomic Component: Colour */

:root {
  --color-brand-red: #DD1405;
  --color-brand-black: #04101E;
  --color-brand-white: #FFFFFF;
}

/* region Light Theme */

:root {
  --color-bg-page: #FFFFFF;
  --color-bg-surface-1: #F9F9FB;
  --color-bg-surface-2: #F5F5F6;
  --color-bg-surface-3: #EDEDED;
  --color-bg-transparent: #0000000D;

  --color-heading: #04101E;
  --color-copy-primary: #333333;
  --color-copy-secondary: #6E6E6E;

  --color-link-enabled: #04101E;
  --color-link-hovered: #38404A;

  --color-system-success: #00B256;
  --color-system-alert: #E09706;
  --color-system-error: #E40046;
  --color-system-info: #2490B2;

  --color-primary-red-500: #DD1405;
  --color-primary-red-600: #B72C1C;

  --color-primary-black-900: #04101E;

  --color-secondary-cobalt-500: #004BB5;
  --color-secondary-cobalt-600: #003C9C;
}

/* endregion */

/* region Transition */

:root {
  --transition-all: all 200ms ease-in-out;
  --transition-transform: transform 300ms ease-out;
  --transition-opacity: opacity 200ms ease-in-out;
  --transition-maxheight: max-height 200ms ease-in-out;
}

/* endregion */

/* region Element Defaults */

/* Global Box Sizing Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  background-color: var(--color-bg-page);
  font: var(--font-copy-md);
  color: var(--color-copy-primary);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* Prevent horizontal scroll */
}

p {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-heading);
  margin: 0;
}

h1 {
  font: var(--font-h1);
  letter-spacing: var(--font-h1-spacing);
}

h2 {
  font: var(--font-h2);
  letter-spacing: var(--font-h2-spacing);
}

h3 {
  font: var(--font-h3);
  letter-spacing: var(--font-h3-spacing);
}

a {
  text-decoration: none;
  color: inherit;
  transition: var(--transition-all);
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ============================================
   LAYOUT COMPONENTS (Adapted for MEGA)
   ============================================ */

/* HEADER */
header {
  height: 80px;
  background-color: var(--color-bg-page);
  border-bottom: 1px solid var(--color-bg-surface-3);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5%;
  box-sizing: border-box;
  /* Ensure padding doesn't add to width */
}

.logo {
  font: var(--font-h4);
  color: var(--color-heading);
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
}

.logo span {
  color: var(--color-brand-red);
}

.nav-links {
  display: flex;
  gap: var(--spacing-8);
}

.nav-links a {
  font: var(--font-link-md);
  color: var(--color-heading);
}

.nav-links a:hover {
  color: var(--color-brand-red);
}

.btn-signup {
  background-color: var(--color-brand-black);
  color: var(--color-brand-white);
  padding: var(--spacing-3) var(--spacing-6);
  border-radius: 4px;
  font: var(--font-btn-md);
}

.btn-signup:hover {
  background-color: var(--color-brand-red);
}

/* HERO SECTION */
.hero-section {
  background-color: var(--color-brand-black);
  color: var(--color-brand-white);
  padding: 160px 20px 100px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hero-section h1 {
  color: var(--color-brand-white);
  margin-bottom: var(--spacing-5);
}

.hero-subtitle {
  font: var(--font-copy-lg);
  color: #B5B7BC;
  /* primary-black-800 equivalent */
  margin-bottom: var(--spacing-10);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* UPLOAD WIDGET */
.upload-widget {
  background-color: var(--color-bg-page);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  padding: var(--spacing-4);
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  transition: var(--transition-transform);
}

.upload-widget:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.upload-zone {
  border: 2px dashed var(--color-bg-surface-3);
  border-radius: 6px;
  padding: var(--spacing-12) var(--spacing-6);
  text-align: center;
  cursor: pointer;
  background-color: var(--color-bg-surface-1);
  transition: var(--transition-all);
}

.upload-zone:hover {
  border-color: var(--color-brand-black);
  background-color: var(--color-bg-surface-2);
}

.upload-zone.dragover {
  border-color: var(--color-brand-red);
  background-color: rgba(221, 20, 5, 0.05);
}

.folder-icon {
  width: 64px;
  height: 64px;
  margin-bottom: var(--spacing-6);
  fill: var(--color-brand-black);
}

.upload-cta {
  font: var(--font-h3);
  color: var(--color-heading);
  margin-bottom: var(--spacing-3);
  pointer-events: none;
}

.upload-sub {
  color: var(--color-copy-secondary);
  font: var(--font-copy-md);
  pointer-events: none;
}

/* FILE PREVIEW */
.file-preview {
  display: none;
  padding: var(--spacing-8);
  align-items: center;
  justify-content: space-between;
  background: var(--color-bg-page);
  border-radius: 6px;
}

.file-preview.active {
  display: flex;
}

.file-details {
  display: flex;
  align-items: center;
  gap: var(--spacing-5);
  text-align: left;
}

.file-icon {
  font-size: 2.5rem;
}

.file-name {
  font: var(--font-h5);
  color: var(--color-heading);
  display: block;
}

.file-size {
  font: var(--font-copy-sm);
  color: var(--color-copy-secondary);
}

.btn-remove {
  background: none;
  border: none;
  color: var(--color-copy-secondary);
  cursor: pointer;
  font-size: 1.5rem;
  padding: var(--spacing-2);
}

.btn-remove:hover {
  color: var(--color-brand-red);
}

/* CONVERSION CONTROLS */
.conversion-controls {
  display: none;
  background: var(--color-brand-black);
  padding: var(--spacing-6);
  border-radius: 0 0 8px 8px;
  margin-top: -5px;
  color: white;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-6);
}

.conversion-controls.active {
  display: flex;
}

.format-select-group {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  flex: 1;
}

.format-label {
  color: #B5B7BC;
  font: var(--font-copy-md);
}

select.format-select {
  background: #1F2834;
  color: white;
  border: 1px solid #38404A;
  padding: var(--spacing-3) var(--spacing-4);
  border-radius: 4px;
  font: var(--font-copy-md);
  cursor: pointer;
  outline: none;
  flex: 1;
}

.btn-convert {
  background-color: var(--color-brand-red);
  color: white;
  border: none;
  padding: var(--spacing-4) var(--spacing-8);
  font: var(--font-btn-lg);
  text-transform: uppercase;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s;
}

.btn-convert:hover:not(:disabled) {
  background-color: var(--color-primary-red-600);
}

.btn-convert:disabled {
  background-color: #515861;
  cursor: not-allowed;
}

/* PROGRESS & DOWNLOAD */
.progress-container {
  display: none;
  margin-top: var(--spacing-6);
}

.progress-container.active {
  display: block;
}

.progress-bar {
  height: 8px;
  background: var(--color-bg-surface-3);
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--color-secondary-cobalt-500);
  width: 0%;
  transition: width 0.3s;
}

.status-text {
  margin-top: var(--spacing-3);
  font: var(--font-copy-sm);
  color: var(--color-copy-secondary);
}

.download-area {
  display: none;
  text-align: center;
  padding: var(--spacing-9) 0;
}

.download-area.active {
  display: block;
}

.btn-download {
  background-color: var(--color-secondary-cobalt-500);
  color: white;
  border: none;
  padding: var(--spacing-4) var(--spacing-9);
  font: var(--font-btn-xl);
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-3);
  transition: var(--transition-transform);
}

.btn-download:hover {
  background-color: var(--color-secondary-cobalt-600);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 75, 181, 0.4);
}

/* FEATURES SECTION */
.features-section {
  padding: var(--spacing-14) var(--spacing-6);
  background-color: var(--color-bg-page);
  text-align: center;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-10);
  max-width: 1100px;
  margin: 0 auto;
}

.feature-item h3 {
  font: var(--font-h4);
  margin: var(--spacing-5) 0 var(--spacing-3);
  color: var(--color-heading);
}

.feature-item p {
  color: var(--color-copy-secondary);
  font: var(--font-copy-md);
}

.feature-icon {
  font-size: 3rem;
  color: var(--color-heading);
  margin-bottom: var(--spacing-3);
}

/* FOOTER */
footer {
  background-color: var(--color-bg-surface-1);
  padding: var(--spacing-10) var(--spacing-6);
  text-align: center;
  border-top: 1px solid var(--color-bg-surface-3);
  color: var(--color-copy-secondary);
  font: var(--font-copy-sm);
}

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

/* Tablet (768px - 1080px) */
@media (max-width: 1080px) {
  .hero-section {
    padding: 140px 20px 80px;
  }

  h1 {
    font-size: 2.5rem;
    line-height: 1.2;
  }

  .upload-widget {
    max-width: 600px;
  }

  .features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-8);
  }
}

/* Mobile (max-width: 768px) */
@media (max-width: 768px) {

  /* Header */
  header {
    height: 70px;
    padding: 0 var(--spacing-5);
  }

  .logo {
    font-size: 1.2rem;
  }

  .nav-links,
  .auth-buttons {
    display: none;
  }

  /* Hero Section */
  .hero-section {
    padding: 100px var(--spacing-5) 60px;
  }

  h1 {
    font-size: 2rem;
    line-height: 1.2;
    margin-bottom: var(--spacing-4);
  }

  .hero-subtitle {
    font-size: 1rem;
    margin-bottom: var(--spacing-8);
  }

  /* Upload Widget */
  .upload-widget {
    padding: var(--spacing-3);
    max-width: 100%;
  }

  .upload-zone {
    padding: var(--spacing-10) var(--spacing-5);
  }

  .upload-cta {
    font-size: 1.3rem;
  }

  .upload-sub {
    font-size: 0.85rem;
  }

  /* File Preview */
  .file-preview {
    padding: var(--spacing-5);
    flex-direction: column;
    gap: var(--spacing-4);
    text-align: center;
  }

  .file-details {
    flex-direction: column;
    gap: var(--spacing-3);
  }

  .file-icon {
    font-size: 2rem;
  }

  .file-name {
    font-size: 1rem;
  }

  /* Conversion Controls */
  .conversion-controls {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-4);
    padding: var(--spacing-5);
  }

  .format-select-group {
    flex-direction: column;
    gap: var(--spacing-3);
  }

  select.format-select {
    width: 100%;
    padding: var(--spacing-4);
    font-size: 1rem;
  }

  .btn-convert {
    width: 100%;
    padding: var(--spacing-4);
    font-size: 1rem;
  }

  /* Progress */
  .progress-bar {
    height: 6px;
  }

  /* Download Button */
  .btn-download {
    padding: var(--spacing-4) var(--spacing-7);
    font-size: 1rem;
  }

  /* Features Section */
  .features-section {
    padding: var(--spacing-11) var(--spacing-5);
  }

  .features-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-8);
  }

  .feature-item h3 {
    font-size: 1.2rem;
  }

  .feature-icon {
    font-size: 2.5rem;
  }

  /* Footer */
  footer {
    padding: var(--spacing-8) var(--spacing-5);
  }
}

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

.mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  z-index: 1001;
}

.mobile-menu-toggle span {
  display: block;
  width: 25px;
  height: 3px;
  background-color: var(--color-heading);
  margin: 5px 0;
  transition: var(--transition-all);
}

/* Hamburger Animation */
.mobile-menu-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -6px);
}

/* Mobile Nav Drawer */
.mobile-nav {
  position: fixed;
  top: 80px;
  /* Header height */
  left: 0;
  width: 100%;
  background-color: var(--color-bg-page);
  border-bottom: 1px solid var(--color-bg-surface-3);
  padding: var(--spacing-5);
  transform: translateY(-150%);
  transition: transform 0.3s ease-in-out;
  z-index: 999;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.mobile-nav.active {
  transform: translateY(0);
}

.mobile-nav nav {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.mobile-link {
  font: var(--font-link-lg);
  color: var(--color-heading);
  text-decoration: none;
  padding: var(--spacing-3) 0;
  border-bottom: 1px solid var(--color-bg-surface-2);
}

.mobile-link:last-child {
  border-bottom: none;
}

.mobile-link.highlight {
  color: var(--color-brand-red);
  font-weight: bold;
}

/* Tablet & Mobile (max-width: 1080px) - Show Hamburger */
@media (max-width: 1080px) {

  .nav-links,
  .auth-buttons {
    display: none;
    /* Hide desktop nav */
  }

  .mobile-menu-toggle {
    display: block;
    /* Show hamburger */
  }
}

/* Small Mobile Adjustments */
@media (max-width: 480px) {
  .mobile-nav {
    top: 70px;
    /* Match smaller header height */
  }
}

@media (max-width: 360px) {
  .mobile-nav {
    top: 60px;
    /* Match extra small header height */
  }
}

@media (max-width: 480px) {
  h1 {
    font-size: 1.75rem;
  }

  .hero-section {
    padding: 90px var(--spacing-4) 50px;
  }

  .upload-widget {
    padding: var(--spacing-2);
  }

  .upload-zone {
    padding: var(--spacing-8) var(--spacing-4);
  }

  .folder-icon {
    width: 48px;
    height: 48px;
  }

  .upload-cta {
    font-size: 1.1rem;
  }

  .conversion-controls {
    padding: var(--spacing-4);
    top: 60px;
    /* Match extra small header height */
  }
}

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

.mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  z-index: 1001;
}

.mobile-menu-toggle span {
  display: block;
  width: 25px;
  height: 3px;
  background-color: var(--color-heading);
  margin: 5px 0;
  transition: var(--transition-all);
}

/* Hamburger Animation */
.mobile-menu-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -6px);
}

/* Mobile Nav Drawer */
.mobile-nav {
  position: fixed;
  top: 80px;
  /* Header height */
  left: 0;
  width: 100%;
  background-color: var(--color-bg-page);
  border-bottom: 1px solid var(--color-bg-surface-3);
  padding: var(--spacing-5);
  transform: translateY(-150%);
  transition: transform 0.3s ease-in-out;
  z-index: 999;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.mobile-nav.active {
  transform: translateY(0);
}

.mobile-nav nav {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.mobile-link {
  font: var(--font-link-lg);
  color: var(--color-heading);
  text-decoration: none;
  padding: var(--spacing-3) 0;
  border-bottom: 1px solid var(--color-bg-surface-2);
}

.mobile-link:last-child {
  border-bottom: none;
}

.mobile-link.highlight {
  color: var(--color-brand-red);
  font-weight: bold;
}

/* Tablet & Mobile (max-width: 1080px) - Show Hamburger */
@media (max-width: 1080px) {

  .nav-links,
  .auth-buttons {
    display: none;
    /* Hide desktop nav */
  }

  .mobile-menu-toggle {
    display: block;
    /* Show hamburger */
  }
}

/* Small Mobile Adjustments */
@media (max-width: 480px) {
  .mobile-nav {
    top: 70px;
    /* Match smaller header height */
  }
}

@media (max-width: 360px) {
  .mobile-nav {
    top: 60px;
    /* Match extra small header height */
  }
}

/* Small Mobile (max-width: 480px) */
@media (max-width: 480px) {

  /* Header - Ultra Compact */
  header {
    height: 60px;
    padding: 0 var(--spacing-3);
  }

  .logo {
    font-size: 1rem;
  }

  /* Hide auth buttons on very small screens to save space */
  .auth-buttons {
    display: none !important;
  }

  /* Make hero more compact */
  h1 {
    font-size: 1.5rem;
    margin-bottom: var(--spacing-3);
  }

  .hero-subtitle {
    font-size: 0.9rem;
  }

  .hero-section {
    padding: 80px var(--spacing-3) 40px;
  }

  /* Even more compact upload zone */
  .upload-zone {
    padding: var(--spacing-6) var(--spacing-3);
  }

  .folder-icon {
    width: 40px;
    height: 40px;
  }

  .upload-cta {
    font-size: 1rem;
  }

  .upload-sub {
    font-size: 0.75rem;
  }

  /* Compact buttons */
  .btn-convert,
  .btn-download,
  #fallbackUploadBtn {
    font-size: 0.85rem;
    padding: var(--spacing-3) var(--spacing-4);
  }
}