@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Cinzel:wght@400..900&family=UnifrakturMaguntia&display=swap');

body {
    font-family: 'Inter', sans-serif;
    background-color: #f7f7f7;
}

/* --- FONT STYLES --- */
.font-block {
    font-family: 'Inter', sans-serif;
}
.font-times {
    font-family: 'Times New Roman', Times, serif;
}
.font-irish {
    font-family: 'Cinzel', serif;
}
.font-olde {
    font-family: 'UnifrakturMaguntia', cursive;
    font-size: 1.5rem !important; /* Adjust size for visibility */
}
/* --- END FONT STYLES --- */

/* Headstone container defines the boundary for dragging */
.headstone-base {
    width: 90%;
    max-width: 550px; /* INCREASED MAX WIDTH */
    height: 700px; /* INCREASED HEIGHT */
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
    border-radius: 10px;
    position: relative;
    overflow: hidden; /* Important for containing the image and text */
}

/* Draggable Text/Image Styles */
.draggable-element {
    cursor: grab;
    position: absolute;
    user-select: none;
    text-align: center;
    padding: 5px 10px;
    border: 2px dashed rgba(255, 255, 255, 0); /* Invisible border for selection */
    transition: border-color 0.1s, font-size 0.3s;
    z-index: 10; /* Ensure text is above image */
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.4); /* Subtle shadow for contrast on darker stones */
}

.draggable-element:focus-within, .draggable-element.active {
    border-color: rgba(255, 255, 255, 0.5); /* Show border when dragging or active */
    outline: none;
}

/* New style for shape selection images */
.shape-image-btn {
    width: 60px;
    height: 60px;
    background-size: cover;
    background-position: center;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    border: 2px solid transparent;
}
.shape-image-btn:hover {
    transform: scale(1.05);
}

/* New style for icon/design selection images */
.design-image-btn {
    width: 60px;
    height: 60px;
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    border: 2px solid transparent;
    background-color: #f3f4f6;
}
.design-image-btn:hover {
    transform: scale(1.05);
}

/* Utility classes for selection borders */
.selected-option {
    border-color: #228c22; /* Tailwind indigo-600 */
    box-shadow: 0 0 0 3px #228c22;
}
.selected-design {
    border-color: #228c22; /* Tailwind indigo-600 */
    box-shadow: 0 0 0 3px #228c22;
}
/* New utility class for text color selection buttons */
.selected-text-color {
    border-color: #228c22 !important;
    background-color: #eef2ff !important; /* indigo-50 */
}

/* Add to your existing CSS */
.draggable-element {
    transform-origin: center center;
    will-change: transform, top, left;
}