/* body {
      margin: 0;
      font-family: Arial, sans-serif;
      background: #f8f9fa;
      display: flex;
      flex-direction: column;
      align-items: center;
    } */

    h2 {
      text-align: center;
      margin: 15px 0;
      color: #333;
    }

    .viewer-wrapper {
		position: relative;
		width: 90%;
		max-width: 700px;
		height: 90vh;
		margin: 20px auto; /* Center horizontally */
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center; /* Center vertically */
    }

    #pdf-container, #gdocs-container {
      width: 100%;
	  height: 100%;
	  border: 1px solid #ccc;
	  overflow: auto;
	  background: #fff;
	  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
	  border-radius: 8px;
	  display: flex; /* Add flex for centering content */
	  flex-direction: column;
	  align-items: center; /* Center canvas horizontally */
	  padding: 10px;
	  box-sizing: border-box;
    }
	
	/* Ensure canvas is centered */
	#pdf-container canvas {
	  display: block;
	  margin: 10px auto;
	  max-width: 100%;
	  height: auto !important;
	  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
	}

    canvas {
      display: block;
      margin: 0 auto 10px;
      max-width: 100%;
      height: auto !important;
    }

    iframe {
      width: 100%;
      height: 100%;
      border: none;
    }

    /* Control panel (top right buttons) */
    .controls {
      position: absolute;
      top: 10px;
      right: 15px;
      background: rgba(255,255,255,0.9);
      padding: 8px 12px;
      border-radius: 8px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.2);
      display: flex;
      align-items: center;
      gap: 12px;
      z-index: 30; /* above overlay */
    }

    .controls label {
      font-size: 14px;
      cursor: pointer;
    }

    .download-btn {
      background: #007bff;
      color: #fff;
      border: none;
      padding: 6px 10px;
      border-radius: 6px;
      cursor: pointer;
      font-size: 16px;
      display: flex;
      align-items: center;
      transition: background 0.2s;
    }

    .download-btn:hover {
      background: #0056b3;
    }

    /* Spinner Loader */
	.spinner {
      border: 6px solid #f3f3f3;
      border-top: 6px solid #007bff;
      border-radius: 50%;
      width: 60px;
      height: 60px;
      animation: spin 1s linear infinite;
    }
	
    .loader {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border: 6px solid #f3f3f3;
      border-top: 6px solid #007bff;
      border-radius: 50%;
      width: 50px;
      height: 50px;
      animation: spin 1s linear infinite;
      z-index: 20;
    }
	
	/* Semi-transparent overlay loader */
    .loader-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.4);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 20;
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    /* Responsive tweaks */
    @media (max-width: 768px) {
      .viewer-wrapper {
        width: 95%;
        height: 80vh;
      }
    }

    @media (max-width: 480px) {
      .viewer-wrapper {
        width: 100%;
        height: 75vh;
      }
      .controls {
        flex-direction: column;
        gap: 6px;
        right: 5px;
        padding: 6px 8px;
      }
    }