/* =============================================
   WEBPAGE WRAPPERS
============================================= */

/* CONTAINER - PURL */
/* This style controls the container around the PURL content */
.webpage-wrapper {
    background-color: #fff;
    margin: 70px 1% 100px 21%;
    height: auto;
    transition: all 0.3s ease; /* Smooth transitions for view changes */
}

.webpage-wrapper-purl {
    background-color: #fff;
    margin: 30px 8% 0 8%;
    height: auto;
}

.webpage-wrapper-preview {
    background-color: #ea6a6a;
    margin: 3% 0;
    height: auto;
}

/* CONTAINER - PURL */
.container-build {
    background-color: #fff;
    margin-top: 0;
    margin-bottom: 2%;
    height: auto; 
    display: flex;
    flex-direction: column; /* stack the cards vertically */
    gap: 2rem; /* adjust as needed - was 1.5rem */
}

/* =============================================
   IMAGE STYLING
============================================= */

.imgs-sidenav {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid #ccc;
}

.logo-placeholder {
    width: 150px;
    height: auto;
    display: block;
    margin: auto;
}

/* =============================================
   SAVING BANNER
============================================= */

#saving-banner {
    color: black;
    border-radius: 5px;
    display: none;
    font-size: 0.8rem;
    padding: 0.25em;
}

#saving-banner .progress-bar {
    height: 8px;
    width: 0;
    background-color: #28a745;
    transition: width 2s ease-in-out;
}

#saving-banner .success-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #4ea5f2;
    font-size: 0.85em;
    font-weight: 500;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#saving-banner.saving .progress-bar {
    width: 100%;
}

#saving-banner.success .progress-bar {
    display: none;
}

#saving-banner.success .success-text {
    opacity: 1;
}

/* =============================================
   VARIABLE PROTECTION
============================================= */

/* Ensure all variable elements are never editable */
[data-variable],
[data-variable-element] {
    contenteditable: false !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Prevent any editing interactions on variable elements */
[data-variable]:focus,
[data-variable-element]:focus {
    outline: none !important;
    border: none !important;
    background-color: yellow !important;
}

/* =============================================
   DIVIDERS
============================================= */

.gradient-divider {
    height: 6px;
    background-color: #eee;
    margin: 6px 0;
}

.divider {
    height: 1px;
    background-color: #CCCCCC;
}

/* =============================================
   MEDIA QUERIES - MOBILE
============================================= */

@media (max-width: 576px) {
    .webpage-wrapper {
        margin: 1em 1em 3em 1em;
    }

    .webpage-wrapper-purl {
        background-color: #fff;
        margin: 1rem;
        height: auto;
    }
}