body {
          font-family: 'Inter', sans-serif;
          background-color: #f2f2f8;
          color: #333;
          min-height: 100vh;
        }

        .pdf-details-cards {
          display: none;
        }

        .pdf-details-cards.active {
          display: none;
        }



        .container {
          width: 100%;
          max-width: 900px;
          margin: 0 auto;
          padding: 2rem 1rem;
        }



        .pdf-details-row {
          display: flex;
          flex-direction: row;
          align-items: flex-end;
          width: 100%;
          position: relative;
          margin-left: -8% !important;
        }

        .pdf-image-area {
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .pdf-details-cards {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 40px;
          position: static;
        }



        .pdf-details-cards img {
          width: 50px;
          height: 50px;
          object-fit: cover;
          border-radius: 5px;
          border: 1px solid #ddd;
        }

        .pdf-image-area {
          width: 80%;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .pdf-images-col {
          max-width: 100%;
          height: auto;
          border-radius: 10%;
          box-shadow: 0 10px 20px rgba(70, 70, 60, 0.3), 0 0 10px #fabc05;
        }

        /*--------------------------------------*/




        /* PDF Details Area (Two-Column Flex Layout) */
        .pdf-details-area {
          width: 100%;
          display: flex;
          flex-direction: row;
          align-items: stretch;
          justify-content: center;
          margin-top: 10%;
          background: none;
        }

        /* Left Column: Details Card */
        .pdf-details-card {
          flex: 6 1 0;
          min-width: 0;
          background: #fff;
          border-radius: 18px;
          padding: 2.2rem 2rem;
          margin-left: -13%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          position: relative;
          overflow: hidden;
        }



        .pdf-details-title {
          font-size: 2rem;
          color: #2c3e50;
          margin-top: -3.3rem !important;
          display: flex;
          align-items: center;
          gap: 0.7rem;
          letter-spacing: 1.5px;
          font-weight: 700;
          background-color: #FABC06;
          width: 120%;
          height: 10%;
          margin-left: -30px;
        }

        .pdf-details-title i {
          color: white;
          font-size: 2.1rem;
          transition: color 0.3s;
          margin-left: 30px;
        }

        .pdf-details-list {
          list-style: none;
          padding: 0;
          margin: 0;
        }

        .pdf-details-list li {
          display: flex;
          align-items: center;
          margin-bottom: 1.1rem;
          padding-bottom: 0.7rem;
          border-bottom: 1px solid #f0e6c7;
          font-size: 1.08rem;
          transition: background 0.18s;
        }

        .pdf-details-list li:last-child {
          border-bottom: none;
        }

        .pdf-detail-icon {
          color: #fabc05;
          font-size: 2rem;
          width: 40px;
          margin-right: 0.7rem;
          flex-shrink: 0;
          transition: color 0.3s;
        }

        .pdf-details-list li:hover .pdf-detail-icon {
          color: black;
        }

        .pdf-detail-label {
          font-weight: 600;
          color: #2c3e50;
          margin-right: 0.5rem;
          min-width: 110px;
          font-size: 1.03rem;
          letter-spacing: 0.5px;
        }

        .pdf-detail-value {
          color: #555;
          font-size: 1.03rem;
          flex: 1;
        }

        /* Right Column: Actions */
        .post-value {
          flex: 1 1 0;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: flex-start;
          gap: 5rem;
          background: transparent;
          border-radius: 18px;
          min-width: 140px;
          max-width: 170px;
          padding: 2rem 1.2rem;
        }

        .post-value-btn,
        .copy-id-button {
          background: #fff;
          border: 2px solid #fabc05 !important;
          border-radius: 12px;
          padding: 0.7rem 1.1rem;
          margin: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: box-shadow 0.18s, border-color 0.18s, background 0.18s;
          cursor: pointer;
          font-size: 1.25rem;
          box-shadow: 0 2px 8px rgba(250, 188, 5, 0.06);
        }

        .like-buttons {
          background: #fff;
          border: 2px solid #fabc05 !important;
          border-radius: 12px;
          padding: 0.7rem 0.6rem;
          margin: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: box-shadow 0.18s, border-color 0.18s, background 0.18s;
          cursor: pointer;
          font-size: 1.25rem;
          box-shadow: 0 2px 8px rgba(250, 188, 5, 0.06);
        }

        .post-value-btn:hover,
        .copy-id-button:hover,
        .like-buttons:hover {
          background: #fabc05;
          border-color: #d32f2f;
          color: #fff;
          box-shadow: 0 4px 16px rgba(250, 188, 5, 0.13);
        }

        .like-buttons.liked i {
          color: #e0245e !important;
        }

        .like-counts {
          font-size: 1rem;
          color: #333;
          font-weight: 600;
          margin-left: 0.3rem;
        }

        .copy-id-button:hover {
          color: black !important;
          background: #fabc05;
        }



        @media (min-width: 320px) and (max-width: 374px) {


          .pdf-details-area {
            gap: 0.6rem;
            margin-top: 1.2rem;
          }



          .pdf-details-card {
            margin-left: 0;
          }

          .pdf-details-title {
            font-size: 0.97rem;
          }

          .pdf-details-title i {
            font-size: 1.1rem;
          }

          .pdf-details-cards img {
            width: 30px;
            height: 30px;

          }

          .pdf-details-list li {
            font-size: 0.88rem;
            margin-bottom: 0.5rem;
            padding-bottom: 0.3rem;
          }

          .pdf-detail-icon {
            font-size: 1.2rem;
            width: 22px;
            margin-right: 0.3rem;
          }

          .pdf-detail-label,
          .pdf-detail-value {
            font-size: 0.9rem;
            min-width: 60px;
          }

          .post-value {
            min-width: 60px;
            margin-top: 20px;
            gap: 1.2rem;
            border-radius: 10px;
            margin-left: -20px;
          }

          .post-value-btn,
          .copy-id-button,
          .like-buttons {
            font-size: 0.95rem;
            padding: 0.4rem 0.6rem;
            border-radius: 8px;
          }

          .like-counts {
            font-size: 0.85rem;
            margin-left: 0.1rem;
          }
        }


        @media (min-width: 375px) and (max-width: 424px) {
          .pdf-details-area {
            gap: 0.6rem;
            margin-top: 1.2rem;
          }



          .pdf-details-card {
            margin-left: 0;
          }

          .pdf-details-title {
            font-size: 0.97rem;
          }

          .pdf-details-title i {
            font-size: 1.1rem;
          }

          .pdf-details-cards img {
            width: 30px;
            height: 30px;

          }

          .pdf-details-list li {
            font-size: 0.88rem;
            margin-bottom: 0.5rem;
            padding-bottom: 0.3rem;
          }

          .pdf-detail-icon {
            font-size: 1.2rem;
            width: 22px;
            margin-right: 0.3rem;
          }

          .pdf-detail-label,
          .pdf-detail-value {
            font-size: 0.9rem;
            min-width: 60px;
          }

          .post-value {
            min-width: 60px;
            margin-top: 20px;
            gap: 1.2rem;
            border-radius: 10px;
            margin-left: -20px;
          }

          .post-value-btn,
          .copy-id-button,
          .like-buttons {
            font-size: 0.95rem;
            padding: 0.4rem 0.6rem;
            border-radius: 8px;
          }

          .like-counts {
            font-size: 0.85rem;
            margin-left: 0.1rem;
          }
        }

        @media (min-width: 425px) and (max-width: 767px) {
          .pdf-details-area {
            gap: 0.6rem;
            margin-top: 1.2rem;
            margin-left: -15%;
          }

          .pdf-details-row {
            margin-left: -20% !important;
          }

          .pdf-details-card {
            margin-left: 0;
          }

          .pdf-details-title {
            font-size: 0.97rem;
          }

          .pdf-details-title i {
            font-size: 1.1rem;
          }

          .pdf-details-cards img {
            width: 30px;
            height: 30px;

          }

          .pdf-details-list li {
            font-size: 0.88rem;
            margin-bottom: 0.5rem;
            padding-bottom: 0.3rem;
          }

          .pdf-detail-icon {
            font-size: 1.2rem;
            width: 22px;
            margin-right: 0.3rem;
          }

          .pdf-detail-label,
          .pdf-detail-value {
            font-size: 0.9rem;
            min-width: 60px;
          }

          .post-value {
            min-width: 60px;
            margin-top: 20px;
            gap: 1.2rem;
            border-radius: 10px;
            margin-left: -20px;
          }

          .post-value-btn,
          .copy-id-button,
          .like-buttons {
            font-size: 0.95rem;
            padding: 0.4rem 0.6rem;
            border-radius: 8px;
          }

          .like-counts {
            font-size: 0.85rem;
            margin-left: 0.1rem;
          }
        }

        @media (min-width: 768px) and (max-width: 1023px) {
          .container {
            padding: 2rem 1rem;
          }

          .pdf-details-area {
            flex-direction: row;
            margin-top: 5%;
          }

          .pdf-details-card {
            margin-left: -6%;
            padding: 1.8rem 1.2rem;
          }

          .pdf-details-title {
            font-size: 1.7rem;
            margin-left: -20px;
            width: 120%;
            height: 10%;
          }

          .pdf-images-col {
            width: 300px;
            border-width: 12px;
          }
        }

        @media (width: 1024px) {
          .container {
            padding: 2rem 1.5rem;
          }

          .pdf-details-area {
            flex-direction: row;
            margin-top: 7%;
          }

          .pdf-details-card {
            margin-left: -13%;
            padding: 2.2rem 2rem;
          }

          .pdf-details-title {
            font-size: 2rem;
            margin-left: -30px;
            width: 120%;
            height: 10%;
          }

          .pdf-images-col {
            border-width: 12px;
          }
        }