/* ==========================================================================
Frame & Related Elements
========================================================================== */

/* Main content frame container */
.frame-container {
    position: relative;
    margin: 0 auto 150px auto;
    text-align: center;
}

.frame-wrapper {
    position: relative;
    display: inline-block;
    transform: translateY(var(--vertical-transform, 0px));
}

/* Label overlay on the frame wrapper */
.frame-wrapper:after {
    content: "";
    position: absolute;
    right: -70px;
    bottom: 10px;
    width: 43px;
    height: 34px;
    background-image: url("../assets/label.png");
    z-index: 9999;
}

/* Hide image load button by default */
.frame-wrapper #hiddenUploadTrigger {
    opacity: 0;
    transition: all 0.3s ease;
    background-color: #ffffff11 !important;
    border: 2px dotted white !important;
    /* blur background */
    backdrop-filter: blur(5px);
}

/* Make image load button visible on hover */
.frame-wrapper:hover #hiddenUploadTrigger {
    opacity: 1;
}

.frame-wrapper #hiddenUploadTrigger:hover {
    background-color: #2d8ef7 !important;
    border: 2px solid transparent !important;
}


/* Horizontal Shine */
.frame-shine {
    position: absolute;
    top: 1px;
    left: 0;
    right: 0;
    height: var(--shine-width);
    background: linear-gradient(to right, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
    opacity: var(--shine-opacity);
    z-index: 99999;
}

/* Vertical Shine (after pseudo-element) */
.frame-wrapper .frame-shine::after {
    content: "";
    position: absolute;
    top: var(--shine-width);
    left: 0;
    width: var(--shine-width);
    height: var(--after-height, 0);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
    z-index: 99999;
}

/* Main Frame Container */
.frame-wrapper .frame {
    position: relative;
    display: inline-block;
    padding: var(--frame-size);
    box-shadow: 0 3px var(--frame-size) rgba(0, 0, 0, 0.3);
    z-index: 0;
}


/* Image Wrapper & Image */
.frame .image-wrapper {
    position: relative;
    z-index: 1;
    margin: var(--frame-margin);
    background-color: black;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.frame .image-wrapper img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 3px;
    background-color: black;
    outline: 1px solid rgba(0, 0, 0, 0.3);
}

/* Inner Shadow */
.frame .inner-shadow {
    position: absolute;
    top: var(--frame-size);
    left: var(--inner-shadow-offset, 5px);
    right: var(--inner-shadow-offset, 5px);
    height: 30px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, var(--inner-shadow-opacity, 0.6)), rgba(0, 0, 0, 0));
    transform: translateY(-2px);
    z-index: 2;
    filter: blur(2px);
}

/* Background Image Element */
/* .frame .image-bg {
    position: absolute;
    top: var(--frame-size);
    left: var(--frame-size);
    right: var(--frame-size);
    bottom: var(--frame-size);
    border-radius: 3px;
    z-index: 1;
}*/

/* Background Image Element */
.frame .image-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 3px;
    z-index: 1;
}

/* ==========================================================================
     Shadow Elements
     ========================================================================== */
/* Outer (Bottom) Shadow */
.frame-wrapper .frame-shadow {
    position: absolute;
    left: var(--shadow-horizontal-offset);
    right: var(--shadow-horizontal-offset);
    height: 30px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, var(--outer-shadow-opacity)), rgba(0, 0, 0, 0));
    z-index: -1;
    transform: translateY(-6px);
    filter: blur(2px);
}

/* ==========================================================================
     Frame Corners & Sides
     ========================================================================== */
.corner,
.side {
    position: absolute;
    z-index: 3;
    background-size: 100% 100% !important;
    background-repeat: no-repeat;
    background-position: center;
}

/* Corners */
.corner {
    width: var(--frame-size);
    height: var(--frame-size);
}

.corner-tl {
    top: 0;
    left: 0;
    background-image: var(--bg-corner-tl);
}

.corner-tr {
    top: 0;
    right: 0;
    background-image: var(--bg-corner-tr);
}

.corner-bl {
    bottom: 0;
    left: 0;
    background-image: var(--bg-corner-bl);
}

.corner-br {
    bottom: 0;
    right: 0;
    background-image: var(--bg-corner-br);
}

/* Sides */
.side-top {
    top: 0;
    left: var(--frame-size);
    right: var(--frame-size);
    height: var(--frame-size);
    background-image: var(--bg-side-top);
}

.side-bottom {
    bottom: 0;
    left: var(--frame-size);
    right: var(--frame-size);
    height: var(--frame-size);
    background-image: var(--bg-side-bottom);
}

.side-left {
    top: var(--frame-size);
    bottom: var(--frame-size);
    left: 0;
    width: var(--frame-size);
    background-image: var(--bg-side-left);
}

.side-right {
    top: var(--frame-size);
    bottom: var(--frame-size);
    right: 0;
    width: var(--frame-size);
    background-image: var(--bg-side-right);
}

/* ==========================================================================
     Wood Grain Overlay
     ========================================================================== */
.texture-layer {
    position: absolute;
    top: 0;
    left: 0;
    /* width: 100px;
    height: 100px; */
    pointer-events: none;
    z-index: 99998;
    opacity: 1;
    /* display:none; */
}

#texture-layer-size {
    /* width: var(--frame-width);
    height: var(--frame-height); */
    /* background-color: #a02df797; */
}

    /* ===========================================
       Top Piece (Rotation 180°; dimensions remain)
       =========================================== */
       .texture-top {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: var(--frame-thickness);
        overflow: hidden; /* hide parts of inner that overflow */
        /* Creates a shape with a full top edge and an inset bottom edge */
        clip-path: polygon(0 0, var(--frame-thickness) 100%, calc(100% - var(--frame-thickness)) 100%, 100% 0);
      }
      .texture-top .inner {
        position: absolute;
        left: 50%;
        top: 50%;
        /* The inner is sized to exactly fill the parent's unrotated area */
        width: 100%;
        height: 100%;
        transform: translate(-50%, -50%) rotate(180deg);
        background-image: url('../assets/textures/wood.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        transform-origin: center;
      }

      /* =====================================================
         Left Piece (Rotation 90°; swap dimensions to fill area)
         ===================================================== */
      .texture-left {
        position: absolute;
        top: 0;
        left: 0;
        width: var(--frame-thickness);
        height: 100%;
        overflow: hidden;
        /* Creates a shape with a full left edge and an inset right edge */
        clip-path: polygon(0 0, 100% var(--frame-thickness), 100% calc(100% - var(--frame-thickness)), 0 100%);
      }
      .texture-left .inner {
        /* For the left piece the unrotated inner element needs to be as wide as the container’s height */
        position: absolute;
        /* Set width equal to container height and height equal to frame thickness */
        width: var(--texture-height);
        height: var(--frame-thickness);
        left: 50%;
        top: 50%;
        /* Center the inner element so its center coincides with the parent’s center */
        transform: translate(-50%, -50%) rotate(90deg);
        background-image: url('../assets/textures/wood.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        transform-origin: center;
      }

      /* ======================================================
         Right Piece (Rotation -90°; swap dimensions similarly)
         ====================================================== */
      .texture-right {
        position: absolute;
        top: 0;
        right: 0;
        width: var(--frame-thickness);
        height: 100%;
        overflow: hidden;
        /* Creates a shape with a full right edge and an inset left edge */
        clip-path: polygon(100% 0, 0 var(--frame-thickness), 0 calc(100% - var(--frame-thickness)), 100% 100%);
      }
      .texture-right .inner {
        /* For the right piece, use the same trick as left */
        position: absolute;
        width: var(--texture-height);
        height: var(--frame-thickness);
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) rotate(-90deg);
        background-image: url('../assets/textures/wood.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        transform-origin: center;
      }

      /* ================================
         Bottom Piece (No rotation needed)
         ================================ */
      .texture-bottom {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: var(--frame-thickness);
        background-image: url('../assets/textures/wood.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        /* Creates a shape with an inset top edge and a full bottom edge */
        clip-path: polygon(0 100%, var(--frame-thickness) 0, calc(100% - var(--frame-thickness)) 0, 100% 100%);
      }


      .texture-layer,
.texture-top .inner,
.texture-left .inner,
.texture-right .inner,
.texture-bottom {

  backface-visibility: hidden;
}