/* share-trail/main.css */
  @import url('../share-trail/homemade-apple.css');

  .trail-completed-section {
      padding: 0;
      border-radius: 0px;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      background-color: transparent;
  }

  .scrapbook-canvas {
      position: relative;
      width: 100%;
      max-width: 450px;
      height: 100%;
      min-height: 520px;
      margin: 0 auto;
      padding-top: 20px;
  }

  .scrapbook-polaroid {
      background: white;
      padding: 12px 12px 30px 12px;
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
      position: absolute;
      width: 200px;
      transition: transform 0.3s ease;
      z-index: 2;
  }

  .scrapbook-polaroid img {
      width: 100%;
      height: 120px;
      object-fit: cover;
      display: block;
  }

  .scrapbook-tape {
      position: absolute;
      top: -15px;
      left: 50%;
      transform: translateX(-50%) rotate(-3deg);
      width: 100px;
      height: 35px;
      background: rgba(0, 133, 47, 0.4);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
      z-index: 3;
  }

  /* Positions for Polaroids */
  .sp-1 {
      top: 30px;
      left: 40px;
      transform: rotate(-5deg);
  }

  .sp-2 {
      top: 130px;
      right: 40px;
      transform: rotate(4deg);
      width: 200px;
  }

  .sp-2 img {
      height: 120px;
  }

  .sp-3 {
      top: 260px;
      left: 55px;
      transform: rotate(-3deg);
      width: 200px;
  }

  .sp-3 img {
      height: 120px;
  }

  .scrapbook-note {
      position: absolute;
      bottom: 30px;
      right: 60px;
      background: white;
      width: 200px;
      padding: 10px;
      box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1);
      transform: rotate(2deg);
      z-index: 4;
  }

  .note-grid {
      background-image: linear-gradient(#e5e5e5 1px, transparent 1px),
          linear-gradient(90deg, #e5e5e5 1px, transparent 1px);
      background-size: 20px 20px;
      padding: 10px;
  }

  .note-text {
      font-family: 'Homemade Apple', cursive;
      font-size: 16px;
      color: #333;
      line-height: 1.6;
      margin: 0;
      text-align: center;
  }

  .sh {
      position: absolute;
      width: 30px;
      height: 30px;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f9d5e5'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E") no-repeat center;
      background-size: contain;
      z-index: 1;
      opacity: 0.8;
  }

  .sh-white {
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E") no-repeat center;
      background-size: contain;
  }

  .sh-1 {
      top: 0px;
      right: 150px;
      width: 50px;
      height: 50px;
  }

  .sh-2 {
      top: 150px;
      left: 40px;
      transform: rotate(-15deg);
  }

  .sh-3 {
      top: 270px;
      right: 160px;
      transform: rotate(10deg);
      width: 40px;
      height: 40px;
  }

  .sh-4 {
      bottom: 250px;
      right: 200px;
      transform: rotate(-5deg);
  }

  .sh-5 {
      top: 400px;
      left: 90px;
      width: 45px;
      height: 45px;
  }

  /* Responsiveness */
  @media (max-width: 768px) {
      .scrapbook-canvas {
          transform: scale(0.9);
          transform-origin: top center;
          min-height: 500px;
      }

      .scrapbook-polaroid {
          width: 180px;
      }

      .sp-1 {
          left: 10px;
      }

      .sp-2 {
          right: 10px;
          top: 110px;
      }

      .sp-3 {
          left: 20px;
          top: 230px;
      }

      .scrapbook-note {
          width: 180px;
          right: 20px;
          bottom: 0;
      }
  }

  @media (max-width: 480px) {
      .scrapbook-canvas {
          transform: scale(0.85);
          transform-origin: top center;
          min-height: 480px;
      }

      .scrapbook-polaroid {
          width: 160px;
      }

      .sp-1 {
          left: 5px;
      }

      .sp-2 {
          right: 5px;
          top: 100px;
      }

      .sp-3 {
          left: 10px;
          top: 210px;
      }

      .scrapbook-note {
          width: 160px;
          right: 10px;
          bottom: -10px;
      }
  }

  .trail-title-truncate {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1.2;
      max-height: 2.4em;
      /* approximates 2 lines based on line-height */
  }