/* Container background & padding */
.profile_viewer {
    background-color: #003f7f;
    padding: clamp(20px, 5vw, 40px);
}

/* PDF Viewer Layout */
.pdf-container {
    display: flex;
    justify-content: center;
    gap: clamp(10px, 2vw, 30px);
    width: 100%;
    height: 100vh;
    overflow: hidden;
    align-items: center;
    padding: clamp(30px, 6vw, 60px);
}

/* PDF Canvas Styling */
canvas {
  display: none; /* hide all canvases by default */
  height: 95vh;
  border-radius: 2rem;
}




/* Flipbook Button Controls */
.flipbook-controls {
  text-align: center;
  margin-top: 20px;
}

.flipbook-controls button {
  padding: clamp(8px, 2vw, 12px) clamp(16px, 4vw, 20px);
  margin: clamp(4px, 1vw, 6px);
  border: 2px solid #ffd700;
  background-color: transparent;
  color: #ffd700;
  cursor: pointer;
  font-size: clamp(14px, 2vw, 16px);
  font-weight: 600;
  border-radius: clamp(8px, 2vw, 10px);
  transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

.flipbook-controls button:hover {
  background-color: #ffd700;
  color: #003f7f;
  transform: translateY(-3px);
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);
}

.flipbook-controls button:active {
  background-color: #003f7f;
  color: #ffd700;
  transform: translateY(2px);
  box-shadow: none;
}

.flipbook-controls button:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.6);
}



/* Mobile Styles */
@media (max-width: 768px) {
  .pdf-container {
    flex-direction: column; /* stack vertically */
    padding: clamp(20px, 5vw, 30px);
    height: auto;           /* allow container to grow */
    overflow: visible;      /* show scroll if needed */
  }

  canvas {
    width: 100%;       /* full width */
    max-width: 90%;
    height: 60vh;      /* maintain aspect ratio */
    margin-bottom: clamp(16px, 4vw, 24px);
  }

  .flipbook-controls {
    width: 100%;
    text-align: center;
    order: 2; /* controls below canvas */
    margin: 0%;
  }
}