:root {
  --navy: #004c97;
  --orange: #ff8200;
  --gold: #ffd700;
  --english-text: #101010;
  --doctor: #e31b23;
  --master: #f37021;
  --bachelor: #39b54a;
  --other: #0071bc;
  --bg-color: #f1f2f6;
  --font-main: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-title: 'Montserrat', var(--font-main);
  --font-en: 'Roboto', var(--font-main);
}

body {
  background-color: var(--bg-color);
  font-family: var(--font-main);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.font-title { font-family: var(--font-title); }
.font-en { font-family: var(--font-en); }

.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.page-frame {
  width: 148mm;
  height: 210mm;
  background-color: white;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 2.5rem; /* p-10 equivalent approx */
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  transition: all 0.5s;
}

@media print {
    @page {
        size: 148mm 210mm;
        margin: 0;
    }
    html, body {
        width: 148mm;
        height: 210mm;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
    }
    
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .page-frame {
        width: 148mm;
        height: 210mm;
        box-shadow: none;
        border: none;
        margin: 0;
        page-break-after: always;
        break-after: page;
        overflow: hidden; /* Ensure content doesn't bleed */
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    body {
        background-color: white;
    }
    
    .no-print, .editor-controls, #editor-controls {
        display: none !important;
    }
    
    #print-container {
        display: block !important;
        width: 148mm;
    }
}

/* Ensure it's hidden on screen even if 'hidden' class wraps it differently */
@media screen {
    #print-container {
        display: none !important;
    }
}