/* Custom Code Section v1.0.0 */

.shopify-section--custom-code {
  position: relative;

  & zag-custom-code {
    display: block;
    width: 100%;

    & .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 1rem;

      @media (width >= 48rem) {
        padding: 0 2rem;
      }
    }

    & .section-header {
      margin-bottom: 2rem;

      & .section-title {
        margin: 0 0 1rem 0;
        color: inherit;

        /* Alignement par défaut */
        justify-content: flex-start;
        text-align: start;

        /* Alignement mobile */
        &[data-modifiers*="text-alignment-mobile:start"] {
          justify-content: flex-start;
          text-align: start;
        }

        &[data-modifiers*="text-alignment-mobile:center"] {
          justify-content: center;
          text-align: center;
        }

        &[data-modifiers*="text-alignment-mobile:end"] {
          justify-content: flex-end;
          text-align: end;
        }

        /* Alignement desktop */
        @media (width >= 48rem) {
          &[data-modifiers*="text-alignment:start"] {
            justify-content: flex-start;
            text-align: start;
          }

          &[data-modifiers*="text-alignment:center"] {
            justify-content: center;
            text-align: center;
          }

          &[data-modifiers*="text-alignment:end"] {
            justify-content: flex-end;
            text-align: end;
          }
        }
      }

      & .section-description {
        margin: 0;
        color: inherit;
        opacity: 0.8;

        /* Alignement par défaut */
        text-align: start;

        /* Alignement mobile */
        &[data-modifiers*="text-alignment-mobile:start"] {
          text-align: start;
        }

        &[data-modifiers*="text-alignment-mobile:center"] {
          text-align: center;
        }

        &[data-modifiers*="text-alignment-mobile:end"] {
          text-align: end;
        }

        /* Alignement desktop */
        @media (width >= 48rem) {
          &[data-modifiers*="text-alignment:start"] {
            text-align: start;
          }

          &[data-modifiers*="text-alignment:center"] {
            text-align: center;
          }

          &[data-modifiers*="text-alignment:end"] {
            text-align: end;
          }
        }

        & p {
          margin: 0;
        }
      }
    }

    & .custom-code-placeholder {
      padding: 2rem;
      background-color: #f8f9fa;
      border: 2px dashed #dee2e6;
      border-radius: 8px;
      text-align: center;

      & .placeholder-content {
        & h3 {
          margin: 0 0 0.5rem 0;
          color: #495057;
          font-size: 1.25rem;
        }

        & p {
          margin: 0 0 1rem 0;
          color: #6c757d;
          font-size: 0.95rem;
        }

        & small {
          color: #868e96;
          font-size: 0.85rem;

          & strong {
            color: #495057;
          }
        }
      }
    }
  }
}