/* Base Button Styles */
.jewelStyle .buttonFramed,
.jewelStyle .buttonFramed:active,
.jewelStyle .buttonFramed:hover,
.jewelStyle .expandableBox:not(.information) {
    background-image: linear-gradient(180deg, #cba467 5%, #f3e2ae 13%, #efbf7b 32%, #aa8050 48%, #835e35 72%, #ad8a54 93%, #d7b672);
}

/* Default Button Style */
.jewelStyle .button.default,
.jewelStyle .button.default:active,
.jewelStyle .button.default:hover {
    background-image: linear-gradient(180deg, #cba467 5%, #f3e2ae 13%, #efbf7b 32%, #aa8050 48%, #835e35 72%, #ad8a54 93%, #d7b672);
    border: 1px solid #34220d;
    border-radius: 3px;
    font-family: Arial, Helvetica, Verdana, sans-serif;
    height: auto;
    min-height: 37px;
    padding: 0;
    position: relative;
    text-transform: none;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    min-width: 120px;
}

.jewelStyle .button.default:before {
    background-image: linear-gradient(180deg, #5d8137, #466428);
    border: 1px solid #34353c;
    border-radius: 2px;
    box-shadow: inset 0 -4px 0 -2px #344a1d, inset 0 4px 0 -2px #b9d890, inset 0 0 0 1px #679f1b;
    content: "";
    inset: 2px;
    position: absolute;
    z-index: 2;
}

.jewelStyle .button.default:hover:before {
    background-image: linear-gradient(180deg, #84b253, #5a8133);
    box-shadow: inset 0 -4px 0 -2px #48711e, inset 0 4px 0 -2px #cee8ad, inset 0 0 0 1px #a9d075;
}

.jewelStyle .button.default:active:before {
    background-color: #54792f;
    background-image: none;
    box-shadow: inset 0 -4px 0 -2px #83a05b, inset 0 4px 0 -2px #486727, inset 0 0 0 1px #4a6e26;
}

.jewelStyle .button.default.disabled:before,
.jewelStyle .button.default:disabled:before {
    background-color: #6f795f;
    background-image: none;
    box-shadow: none;
}

.jewelStyle .button.default > span {
    color: #fff9eb;
    font-size: 14px;
    font-weight: 700;
    padding: 10px 24px;
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
}

.jewelStyle .rtl .button.default > span {
    padding: 10px 24px;
}

/* Simple Button Style */
.jewelStyle .button.simple {
    background-color: #fffdf8;
    border: 1px solid #5a9a0a;
    border-radius: 3px;
    box-shadow: none;
    color: #5a9a0a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: Arial, Helvetica, Verdana, sans-serif;
    padding: 0;
    position: relative;
    text-transform: none;
    transition-duration: .15s;
    text-decoration: none;
    min-width: 120px;
    height: auto;
    min-height: 37px;
}

.jewelStyle .button.simple:focus-visible {
    box-shadow: 0 0 2px 3px #0066ffb3;
}

.jewelStyle .button.simple > span {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    padding: 10px 24px;
    text-align: center;
    white-space: nowrap;
}

.jewelStyle .rtl .button.simple > span {
    padding: 10px 24px;
}

.jewelStyle .button.simple:not(.disabled):not(:disabled):focus,
.jewelStyle .button.simple:not(.disabled):not(:disabled):hover {
    background-color: #5a9a0a;
    box-shadow: none;
    color: #fffdf8;
}

.jewelStyle .button.simple:not(.disabled):not(:disabled):active {
    background-color: #274403;
    border-color: #274403;
    box-shadow: none;
    color: #fffdf8;
}

.jewelStyle .button.simple.disabled,
.jewelStyle .button.simple:disabled {
    border-color: #777;
    color: #777;
}

.jewelStyle .button.simple.disabled > div > svg,
.jewelStyle .button.simple:disabled > div > svg {
    fill: #777;
}

/* Icon Styles */
.jewelStyle .button i {
    font-size: 16px;
}

/* Small Button Variation */
.jewelStyle .button.small > span {
    padding: 6px 16px;
    font-size: 13px;
}

/* Large Button Variation */
.jewelStyle .button.large > span {
    padding: 12px 32px;
    font-size: 16px;
}

/* تنسيقات الأزرار المذهبة العامة */
.jewel-button {
    min-width: 120px;
    min-height: 37px;
    padding: 0;
    position: relative;
    border: 1px solid #34220d;
    border-radius: 3px;
    cursor: pointer;
    font-family: Arial, Helvetica, Verdana, sans-serif;
    text-transform: none;
    background-image: linear-gradient(180deg, #cba467 5%, #f3e2ae 13%, #efbf7b 32%, #aa8050 48%, #835e35 72%, #ad8a54 93%, #d7b672);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: white;
    transition: all 0.3s ease;
}

.jewel-button:before {
    background-image: linear-gradient(180deg, #d4af37 0%, #f9e076 25%, #d4af37 50%, #b38728 75%, #d4af37 100%);
    border: 1px solid #8b6b29;
    border-radius: 2px;
    box-shadow: 
        inset 0 -4px 0 -2px #8b6b29,
        inset 0 4px 0 -2px #fff6d5,
        inset 0 0 0 1px #d4af37;
    content: "";
    inset: 2px;
    position: absolute;
    z-index: 2;
}

.jewel-button:hover:before {
    background-image: linear-gradient(180deg, #e5c649 0%, #fae688 25%, #e5c649 50%, #c4983a 75%, #e5c649 100%);
    box-shadow: 
        inset 0 -4px 0 -2px #9c7c3a,
        inset 0 4px 0 -2px #fff9e6,
        inset 0 0 0 1px #e5c649;
}

.jewel-button:active:before {
    background-color: #d4af37;
    background-image: none;
    box-shadow: 
        inset 0 -4px 0 -2px #8b6b29,
        inset 0 4px 0 -2px #b38728,
        inset 0 0 0 1px #d4af37;
}

.jewel-button span {
    position: relative;
    z-index: 3;
    padding: 0 20px;
    font-weight: 500;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}

/* تنسيقات إضافية للأزرار */
.jewel-button.small {
    min-width: 100px;
    min-height: 32px;
}

.jewel-button.large {
    min-width: 160px;
    min-height: 44px;
}

.jewel-button.full-width {
    width: 100%;
}

/* تنسيقات الأزرار المعطلة */
.jewel-button[disabled],
.jewel-button.disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.jewel-button[disabled]:before,
.jewel-button.disabled:before {
    background-image: linear-gradient(180deg, #a8a8a8 0%, #d4d4d4 25%, #a8a8a8 50%, #8f8f8f 75%, #a8a8a8 100%);
    box-shadow: none;
}

/* تنسيقات أيقونات الأزرار */
.jewel-button i {
    margin-right: 8px;
    position: relative;
    z-index: 3;
}

.jewel-button.icon-only {
    min-width: 37px;
    padding: 0;
}

.jewel-button.icon-only i {
    margin: 0;
}