/* Image-Based Buttons */
.medieval-btn {
    text-decoration: none;
    border: none;
    cursor: pointer;
    background: transparent;

}

.medieval-btn-image {
    position: relative;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    overflow: hidden;
}

.medieval-btn-image .medieval-btn-content {
    position: relative;
    z-index: 2;
    color: #f0f0f0;
    font-weight: 600;
    font-size: 16px;
    font-family: 'MedievalSharp', 'Georgia', cursive;
    letter-spacing: 0.8px;
    text-shadow:
        1px 1px 2px rgba(0, 0, 0, 0.8),
        0 1px 4px rgba(0, 0, 0, 0.4),
        0 0 8px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
}

.medieval-btn-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    transition: all 0.25s ease;
    z-index: 1;
}

.medieval-btn-image:hover::before {
    filter: brightness(1.1) contrast(1.05);
}

.medieval-btn-image:active::before {
    filter: brightness(0.9) contrast(1.1);
}

.medieval-btn-image:hover .medieval-btn-content {
    transform: translateY(-1px);
    text-shadow:
        1px 1px 2px rgba(0, 0, 0, 0.9),
        0 1px 4px rgba(0, 0, 0, 0.5),
        0 0 12px rgba(255, 255, 255, 0.15);
}

.medieval-btn-image:active .medieval-btn-content {
    transform: translateY(1px);
    text-shadow:
        1px 1px 2px rgba(0, 0, 0, 1),
        0 1px 3px rgba(0, 0, 0, 0.7);
}

/* Rectangular Button - Default (Gray/Stone) */
.medieval-btn-rect::before {
    background-image: url('/assets/static/images/buttons/rect.png');
}

.medieval-btn-rect {
    min-width: 160px;
    height: 60px;
    outline: none;
}

.medieval-btn-rect:focus {
    outline: none;
}

/* Rectangular Button - Color Variants */
.medieval-btn-rect.medieval-btn-rect-red::before {
    background-image: url('/assets/static/images/buttons/rect-red.png');
}

.medieval-btn-rect.medieval-btn-rect-green::before {
    background-image: url('/assets/static/images/buttons/rect-green.png');
}

.medieval-btn-rect.medieval-btn-rect-blue::before {
    background-image: url('/assets/static/images/buttons/rect-blue.png');
}

/* Round Button - Default (Gray/Stone) */
.medieval-btn-round-img::before {
    background-image: url('/assets/static/images/buttons/round.png');
}

.medieval-btn-round-img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    outline: none;
}

.medieval-btn-round-img:focus {
    outline: none;
}

/* Round Button - Color Variants */
.medieval-btn-round-img.medieval-btn-danger::before {
    background-image: url('/assets/static/images/buttons/round-red.png');
}

.medieval-btn-round-img.medieval-btn-success::before {
    background-image: url('/assets/static/images/buttons/round-green.png');
}

.medieval-btn-round-img.medieval-btn-info::before {
    background-image: url('/assets/static/images/buttons/round-blue.png');
}

.medieval-btn-round-img .medieval-btn-content {
    padding: 0;
    font-size: 12px;
}

/* Square Button - Default (Gray/Stone) */
.medieval-btn-square::before {
    background-image: url('/assets/static/images/buttons/square.png');
}

.medieval-btn-square {
    width: 55px;
    height: 55px;
    outline: none;
}

.medieval-btn-square:focus {
    outline: none;
}

/* Square Button - Color Variants */
.medieval-btn-square.medieval-btn-danger::before {
    background-image: url('/assets/static/images/buttons/square-red.png');
}

.medieval-btn-square.medieval-btn-success::before {
    background-image: url('/assets/static/images/buttons/square-green.png');
}

.medieval-btn-square.medieval-btn-info::before {
    background-image: url('/assets/static/images/buttons/square-blue.png');
}

.medieval-btn-square .medieval-btn-content {
    padding: 0;
    font-size: 12px;
}

/* Size Variants for Image Buttons */
.medieval-btn-rect.medieval-btn-sm {
    min-width: 128px;
    height: 40px;
}

.medieval-btn-rect.medieval-btn-lg {
    min-width: 192px;
    height: 60px;
}

.medieval-btn-rect.medieval-btn-xl {
    min-width: 224px;
    height: 70px;
}

.medieval-btn-round-img.medieval-btn-sm {
    width: 48px;
    height: 48px;
}

.medieval-btn-round-img.medieval-btn-lg {
    width: 72px;
    height: 72px;
}

.medieval-btn-round-img.medieval-btn-xl {
    width: 84px;
    height: 84px;
}

.medieval-btn-square.medieval-btn-sm {
    width: 44px;
    height: 44px;
}

.medieval-btn-square.medieval-btn-lg {
    width: 66px;
    height: 66px;
}

.medieval-btn-square.medieval-btn-xl {
    width: 77px;
    height: 77px;
}

/* Color Overlays for Image Buttons */


.medieval-btn-image.medieval-btn-danger::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(139, 0, 0, 0.2), rgba(102, 0, 0, 0.3));
    z-index: 1;
    pointer-events: none;
}

.medieval-btn-image.medieval-btn-success::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(34, 139, 34, 0.2), rgba(0, 100, 0, 0.3));
    z-index: 1;
    pointer-events: none;
}

.medieval-btn-image.medieval-btn-info::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(65, 105, 225, 0.2), rgba(25, 25, 112, 0.3));
    z-index: 1;
    pointer-events: none;
}