/* StudioJAE Core Plugin Styles */

/* Variables spécifiques au plugin */
:root {
    --color-green-flash: #D9E89A;
    --color-green-flash-hover: #c7d68a;
    --color-green: #0C3921;
    --color-green-hover: #092c19;
    --color-violet: #800039;
    --color-violet-hover: #66002c;
}

/* Styles spécifiques au plugin */
.studiojae-elementorBadge {
    background-color: var(--color-violet);
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.8em;
    margin-left: 5px;
}

/* Styles des icônes du plugin */
.oh-emoji,
.heart,
.heart-smiley,
.frenchflag,
.frenchoctogone,
.french,
.studiojae {
    background-size: contain;
    background-repeat: no-repeat;
    color: transparent;
    display: inline-block;
    width: 1em;
    height: 1em;
    margin: 0 .1em 0 6px;
    transform: translateY(.1em);
}

.heart { background-image: url(../img/icons/heart.svg); }
.heart-smiley { background-image: url(../img/icons/emoji-heart.svg); }
.frenchflag { background-image: url(../img/icons/france-flag.svg); }
.frenchoctogone { background-image: url(../img/icons/france-flag.svg); }
.french { background-image: url(../img/icons/france.svg); }
.studiojae { background-image: url(../img/logos/studiojae.svg); }

/* Styles des widgets Elementor personnalisés */
.studiojae-widget {
    margin-bottom: 20px;
}

.studiojae-widget-title {
    font-size: 1.2em;
    margin-bottom: 10px;
    color: var(--color-green);
}

/* Styles des boutons du plugin */
.studiojae-button {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.studiojae-button-primary {
    background-color: var(--color-violet);
    color: white;
}

.studiojae-button-primary:hover {
    background-color: var(--color-violet-hover);
}

.studiojae-button-secondary {
    background-color: var(--color-green);
    color: white;
}

.studiojae-button-secondary:hover {
    background-color: var(--color-green-hover);
}

/* === Glassmorphism Buttons === */
#btn-glass {
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    padding: var(--btn-padding-md);
    font-size: var(--btn-font-size-md);
    font-weight: 500;
    color: var(--color-white);
    transition: all 0.3s ease;
    cursor: pointer;
}

#btn-glass:hover {
    background: rgba(255, 255, 255, 0.35);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);
}

/* White Variant */
#btn-glass-white {
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 32px 0 rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    padding: var(--btn-padding-md);
    font-size: var(--btn-font-size-md);
    font-weight: 500;
    color: var(--color-white);
    transition: all 0.3s ease;
    cursor: pointer;
}

#btn-glass-white:hover {
    background: rgba(255, 255, 255, 0.35);
    box-shadow: 0 8px 32px 0 rgba(255, 255, 255, 0.25);
}

/* Gray Variant */
#btn-glass-gray {
    background: rgba(128, 128, 128, 0.25);
    box-shadow: 0 8px 32px 0 rgba(128, 128, 128, 0.15);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 10px;
    border: 1px solid rgba(128, 128, 128, 0.18);
    padding: var(--btn-padding-md);
    font-size: var(--btn-font-size-md);
    font-weight: 500;
    color: var(--white-100);
    transition: all 0.3s ease;
    cursor: pointer;
}

#btn-glass-gray:hover {
    background: rgba(128, 128, 128, 0.35);
    box-shadow: 0 8px 32px 0 rgba(128, 128, 128, 0.25);
}

/* Black Variant */
#btn-glass-black {
    background: rgba(0, 0, 0, 0.25);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.18);
    padding: var(--btn-padding-md);
    font-size: var(--btn-font-size-md);
    font-weight: 500;
    color: var(--white-100);
    transition: all 0.3s ease;
    cursor: pointer;
}

#btn-glass-black:hover {
    background: rgba(0, 0, 0, 0.35);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.25);
}

/* Red Variant */
#btn-glass-red {
    background: rgba(220, 53, 69, 0.25);
    box-shadow: 0 8px 32px 0 rgba(220, 53, 69, 0.15);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 10px;
    border: 1px solid rgba(220, 53, 69, 0.18);
    padding: var(--btn-padding-md);
    font-size: var(--btn-font-size-md);
    font-weight: 500;
    color: var(--red-300);
    transition: all 0.3s ease;
    cursor: pointer;
}

#btn-glass-red:hover {
    background: rgba(220, 53, 69, 0.35);
    box-shadow: 0 8px 32px 0 rgba(220, 53, 69, 0.25);
}

/* Violet Variant */
#btn-glass-violet {
    background: rgba(128, 0, 57, 0.25);
    box-shadow: 0 8px 32px 0 rgba(128, 0, 57, 0.15);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 10px;
    border: 1px solid rgba(128, 0, 57, 0.18);
    padding: var(--btn-padding-md);
    font-size: var(--btn-font-size-md);
    font-weight: 500;
    color: var(--color-violet);
    transition: all 0.3s ease;
    cursor: pointer;
}

#btn-glass-violet:hover {
    background: rgba(128, 0, 57, 0.35);
    box-shadow: 0 8px 32px 0 rgba(128, 0, 57, 0.25);
}

/* Green Variant */
#btn-glass-green {
    background: rgba(12, 57, 33, 0.25);
    box-shadow: 0 8px 32px 0 rgba(12, 57, 33, 0.15);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 10px;
    border: 1px solid rgba(12, 57, 33, 0.18);
    padding: var(--btn-padding-md);
    font-size: var(--btn-font-size-md);
    font-weight: 500;
    color: var(--color-dark-green);
    transition: all 0.3s ease;
    cursor: pointer;
}

#btn-glass-green:hover {
    background: rgba(12, 57, 33, 0.35);
    box-shadow: 0 8px 32px 0 rgba(12, 57, 33, 0.25);
}

/* Blue Variant */
#btn-glass-blue {
    background: rgba(0, 0, 255, 0.25);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 255, 0.15);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 255, 0.18);
    padding: var(--btn-padding-md);
    font-size: var(--btn-font-size-md);
    font-weight: 500;
    color: var(--color-primary);
    transition: all 0.3s ease;
    cursor: pointer;
}

#btn-glass-blue:hover {
    background: rgba(0, 0, 255, 0.35);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 255, 0.25);
}

/* Size Modifiers */
[id^="btn-glass"].sm {
    padding: var(--btn-padding-sm);
    font-size: var(--btn-font-size-sm);
}

[id^="btn-glass"].lg {
    padding: var(--btn-padding-lg);
    font-size: var(--btn-font-size-lg);
}

/* Rounded Modifier */
[id^="btn-glass"].rounded {
    border-radius: var(--btn-radius-full);
}

/* Disabled State */
[id^="btn-glass"]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* Active State */
[id^="btn-glass"]:active {
    transform: translateY(1px);
    box-shadow: 0 4px 16px 0 rgba(31, 38, 135, 0.1);
}