@charset "utf-8";



:root {
	/* Active state styling variables */
	--active-border-thickness: 1px;
	--active-border-color: rgb(255, 255, 255);
	--active-outline-thickness: 3px;
	--active-outline-color: rgb(36, 149, 255);

	/* Static Variables */
	--frame-size: 15px;
	/* Default frame thickness */
	--frame-margin: 0px;
	/* Default frame passepartout thickness */
	--shadow-opacity: 0.3;
	/* General shadow opacity */
	--font-family: "Roboto", sans-serif;
	--secondary-color: #ffffff;
	--hover-color: #0e458d;
	--border-radius: 8px;
	--shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

	/* Dynamic Variables (Updated by JS) */
	--frame-thickness: 15px;
	--frame-width: 600px;
	--frame-height: 400px;
	--outer-shadow-opacity: 0.6;
	--inner-shadow-opacity: 0.6;

	/* New Variables */
	--shadow-horizontal-offset: 8px;
	/* Bottom shadow horizontal offset */
	--shine-width: 8px;
	/* Frame-shine thickness */

	/* Passepartout Colors */
	--passepartout-white: #fafafa;
	--passepartout-black: #272525;
	--passepartout-creme: #f7f3ed;
	--passepartout-gray: #444443;
}

/*	body {
		font-family: var(--font-family);
		margin: 0;
		padding: 20px;
		background: #f0f0f0 url("/assets/bg2.jpg") no-repeat center center fixed;
		background-size: cover;
		user-select: none;
	}*/



/* ==========================================================================
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: none;
	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: 0px;
	background-color: black;
	outline: none;
}

/* 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
	 ========================================================================== */
.frame-wrapper .corner,
.frame-wrapper .side {
	position: absolute;
	z-index: 3;
	background-size: 100% 100% !important;
	background-repeat: no-repeat;
	background-position: center;
}

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

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

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

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

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

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

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

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

.frame-wrapper .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/dummy_from_css.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/dummy_from_css.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;
}