/* BOUTONS */
/* Base styles for all buttons */
.btn,
button.btn {
    display: inline-flex;
    padding: 12px 16px 8px 16px;
    justify-content: center;
    align-items: center;
    gap: 8px; /* Add space between text and icon */
    border-radius: 4px;
    text-align: center;
    font-family: 'Yanone Kaffeesatz', sans-serif;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.3s, transform 0.3s, border-color 0.3s, color 0.3s;
    position: relative; /* For icon positioning */
    margin: 3px;
    background: none;
    border: none;
    hyphens: none;
}

.btn.thin,
button.btn.thin {
    padding: 5px 10px 2px 10px;
    width: 80%;
    height: auto;
}

/* Primary button styles */
.btn.primary,
button.btn.primary {
    background: #FEB603;
    color: #FFF;
    word-break: keep-all;
}

.btn.primary:hover:not(.disabled),
button.btn.primary:hover:not(.disabled) {
    background: #FFC841;
}

.btn.primary:focus:not(.disabled),
button.btn.primary:focus:not(.disabled) {
    border: 2px solid #FFFAF5;
    background: #FEB603;
}

.btn.primary:active:not(.disabled),
button.btn.primary:active:not(.disabled) {
    background: #C08A04;
}

.btn.primary.disabled,
button.btn.primary.disabled {
    color: #818181;
    background: #cbcbcb;
    pointer-events: none;
    cursor: not-allowed;
}

.btn.green,
button.btn.green {
    background: #45ba52;
    color: #FFF;
}

.btn.green:hover:not(.disabled),
button.btn.green:hover:not(.disabled) {
    background: #67d374;
}

.btn.green:focus:not(.disabled),
button.btn.green:focus:not(.disabled) {
    border: 2px solid #e8f5e9;
    background: #45ba52;
}

.btn.green:active:not(.disabled),
button.btn.green:active:not(.disabled) {
    background: #388e3c;
}

.btn.green.disabled,
button.btn.green.disabled {
    color: #818181;
    background: #cbcbcb;
    pointer-events: none;
    cursor: not-allowed;
}

/* Outline button styles */
.btn.outline,
button.btn.outline {
    border: 1px solid #FEB603;
    background: #FFFCF5;
    color: #FEB603;
}

.btn.outline:hover:not(.disabled),
button.btn.outline:hover:not(.disabled) {
    border: 1px solid #FFC841;
    background: #FFFCF5;
    color: #FFC841;
}

.btn.outline:focus:not(.disabled),
button.btn.outline:focus:not(.disabled) {
    border: 1px solid #FEB603;
    background: #FFFCF5;
    color: #FEB603;
}

.btn.outline:active:not(.disabled),
button.btn.outline:active:not(.disabled) {
    border: 1px solid #C08A04;
    background: #FFFCF5;
    color: #C08A04;
}

.btn.outline.disabled,
button.btn.outline.disabled {
    color: #818181;
    border-color: #cbcbcb;
    pointer-events: none;
    cursor: not-allowed;
}

.btn.outline.red,
button.btn.outline.red {
    border: 1px solid #ff3333;
    background: #FFFCF5;
    color: #f22d2d;
}

.btn.outline.red:hover:not(.disabled),
button.btn.outline.red:hover:not(.disabled) {
    border: 1px solid #ff6666;
    background: #FFFCF5;
    color: #ff6666;
}

.btn.outline.red:focus:not(.disabled),
button.btn.outline.red:focus:not(.disabled) {
    border: 1px solid #ff3333;
    background: #FFFCF5;
    color: #ff3333;
}

.btn.outline.red:active:not(.disabled),
button.btn.outline.red:active:not(.disabled) {
    border: 1px solid #cc0000;
    background: #FFFCF5;
    color: #cc0000;
}

.btn.outline.red.disabled,
button.btn.outline.red.disabled {
    color: #818181;
    border-color: #cbcbcb;
    pointer-events: none;
    cursor: not-allowed;
}

/* Text button styles */
.btn.text,
button.btn.text {
    background: transparent;
    color: #FEB603;
    border: none;
}

.btn.text:hover:not(.disabled),
button.btn.text:hover:not(.disabled) {
    color: #FFC841;
}

.btn.text:focus:not(.disabled),
button.btn.text:focus:not(.disabled) {
    color: #FEB603;
    border: none;
}

.btn.text:active:not(.disabled),
button.btn.text:active:not(.disabled) {
    color: #C08A04;
}

.btn.text.disabled,
button.btn.text.disabled {
    color: #818181;
    pointer-events: none;
    cursor: not-allowed;
}

/* Icon styles */
.btn.btn-icon::after,
button.btn.btn-icon::after {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: 8px;
    background-size: contain;
    background-repeat: no-repeat;
}

/* Primary button icon styles */
.btn.primary.btn-icon::after,
button.btn.primary.btn-icon::after,
.btn.primary.btn-icon:active::after,
button.btn.primary.btn-icon:active::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14Z' stroke='%23FFFFFF' stroke-miterlimit='10'/%3E%3Cpath d='M7.25 5.75L9.75 8L7.25 10.25' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.btn.primary.disabled.btn-icon::after,
button.btn.primary.disabled.btn-icon::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14Z' stroke='%23C2C2C2' stroke-miterlimit='10'/%3E%3Cpath d='M7.25 5.75L9.75 8L7.25 10.25' stroke='%23C2C2C2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Outline and text button icon styles */
.btn.outline.btn-icon::after,
button.btn.outline.btn-icon::after,
.btn.text.btn-icon::after,
button.btn.text.btn-icon::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14Z' stroke='%23FEB603' stroke-miterlimit='10'/%3E%3Cpath d='M7.25 5.75L9.75 8L7.25 10.25' stroke='%23FEB603' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.btn.outline.btn-icon:hover::after,
button.btn.outline.btn-icon:hover::after,
.btn.text.btn-icon:hover::after,
button.btn.text.btn-icon:hover::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14Z' stroke='%23FFC841' stroke-miterlimit='10'/%3E%3Cpath d='M7.25 5.75L9.75 8L7.25 10.25' stroke='%23FFC841' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.btn.outline.btn-icon:active::after,
button.btn.outline.btn-icon:active::after,
.btn.text.btn-icon:active::after,
button.btn.text.btn-icon:active::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14Z' stroke='%23C08A04' stroke-miterlimit='10'/%3E%3Cpath d='M7.25 5.75L9.75 8L7.25 10.25' stroke='%23C08A04' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.btn.outline.disabled.btn-icon::after,
button.btn.outline.disabled.btn-icon::after,
.btn.text.disabled.btn-icon::after,
button.btn.text.disabled.btn-icon::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14Z' stroke='%23818181' stroke-miterlimit='10'/%3E%3Cpath d='M7.25 5.75L9.75 8L7.25 10.25' stroke='%23818181' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Ensure user-select is applied to the right buttons */
.btn.primary,
button.btn.primary,
.btn.outline,
button.btn.outline {
    -webkit-user-select: none; /* For WebKit browsers (Chrome, Safari) */
    -moz-user-select: none;    /* For Mozilla browsers */
    -ms-user-select: none;     /* For Internet Explorer/Edge */
    user-select: none;         /* Standard */
}


/* BOUTONS AVEC IMAGE DEDANS */
.btn-toggle {
    cursor: pointer;
}

.btn-toggle input[type="checkbox"] {
    display: none;
}

.btn.primary img {
    display: none;
}

.btn.primary img.grid {
    display: block;
}

.btn-toggle input[type="checkbox"]:checked + .btn.primary img.grid {
    display: none;
}

.btn-toggle input[type="checkbox"]:checked + .btn.primary img.list {
    display: block;
}