/* 多功能按鈕元件 v95368 樣式表 */

/* 全域設定 */
body {
    background-color: #1C1C1E;
    color: #c6c7bd;
    font-size: 1rem;
}

.container {
    background-color: #242426;
    border-radius: 8px;
    padding: 40px;
}

h1, h2, h3, h4 {
    color: #c6c7bd;
}

h1 {
    font-size: 2rem;
}

h2 {
    font-size: 1.5rem;
}

h3 {
    font-size: 1.25rem;
}

.demo-section {
    padding: 20px;
    background-color: #1C1C1E;
    border-radius: 6px;
}

.content-display {
    padding: 16px;
    background-color: #242426;
    border-radius: 6px;
    min-height: 60px;
}

.color-palette {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* 按鈕基礎樣式 */
.btn-v95368 {
    border: none;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

/* 預設尺寸為 large */
.btn-v95368:not([class*="size-"]) {
    padding: 10px 24px;
    font-size: 1rem;
}

/* 尺寸控制 */
.btn-v95368.size-x-small {
    padding: 4px 12px;
    font-size: 0.8rem;
    border-radius: 4px;
}

.btn-v95368.size-small {
    padding: 6px 16px;
    font-size: 1rem;
    border-radius: 5px;
}

.btn-v95368.size-normal {
    padding: 8px 20px;
    font-size: 1rem;
    border-radius: 5px;
}

.btn-v95368.size-large {
    padding: 10px 24px;
    font-size: 1rem;
    border-radius: 6px;
}

.btn-v95368.size-x-large {
    padding: 14px 32px;
    font-size: 1.25rem;
    border-radius: 8px;
}

.btn-v95368:hover {
    opacity: 0.85;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.btn-v95368:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* 配色主題 */
.btn-v95368[data-color="shell"] {
    background-color: #c6c7bd;
    color: #1C1C1E;
}

.btn-v95368[data-color="lavender"] {
    background-color: #C3A5E5;
    color: #1C1C1E;
}

.btn-v95368[data-color="special"] {
    background-color: #b9c971;
    color: #1C1C1E;
}

.btn-v95368[data-color="warning"] {
    background-color: #E5A6A6;
    color: #1C1C1E;
}

.btn-v95368[data-color="salmon"] {
    background-color: #E5C3B3;
    color: #1C1C1E;
}

.btn-v95368[data-color="attention"] {
    background-color: #E5E5A6;
    color: #1C1C1E;
}

.btn-v95368[data-color="sky"] {
    background-color: #A6E5E5;
    color: #1C1C1E;
}

.btn-v95368[data-color="safe"] {
    background-color: #84c498;
    color: #1C1C1E;
}

.btn-v95368[data-color="brown"] {
    background-color: #a88e31;
    color: #1C1C1E;
}

.btn-v95368[data-color="info"] {
    background-color: #8aa1f2;
    color: #1C1C1E;
}

.btn-v95368[data-color="pink"] {
    background-color: #FFB3D9;
    color: #1C1C1E;
}

.btn-v95368[data-color="orange"] {
    background-color: #f69653;
    color: #1C1C1E;
}

/* Modal 樣式 */
.modal-v95368 .modal-content {
    background-color: #242426;
    color: #c6c7bd;
    border: 3px solid;
}

.modal-v95368 .modal-header {
    border-bottom: 2px solid;
}

.modal-v95368 .modal-footer {
    border-top: 2px solid;
}

.modal-v95368 .modal-title {
    color: #c6c7bd;
    font-size: 1.25rem;
}

.modal-v95368 .btn-close {
    filter: invert(1);
}

/* Modal 配色主題 */
.modal-v95368[data-modal-color="shell"] .modal-content {
    border-color: #c6c7bd;
}

.modal-v95368[data-modal-color="shell"] .modal-header,
.modal-v95368[data-modal-color="shell"] .modal-footer {
    border-color: #c6c7bd;
}

.modal-v95368[data-modal-color="lavender"] .modal-content {
    border-color: #C3A5E5;
}

.modal-v95368[data-modal-color="lavender"] .modal-header,
.modal-v95368[data-modal-color="lavender"] .modal-footer {
    border-color: #C3A5E5;
}

.modal-v95368[data-modal-color="special"] .modal-content {
    border-color: #b9c971;
}

.modal-v95368[data-modal-color="special"] .modal-header,
.modal-v95368[data-modal-color="special"] .modal-footer {
    border-color: #b9c971;
}

.modal-v95368[data-modal-color="warning"] .modal-content {
    border-color: #E5A6A6;
}

.modal-v95368[data-modal-color="warning"] .modal-header,
.modal-v95368[data-modal-color="warning"] .modal-footer {
    border-color: #E5A6A6;
}

.modal-v95368[data-modal-color="salmon"] .modal-content {
    border-color: #E5C3B3;
}

.modal-v95368[data-modal-color="salmon"] .modal-header,
.modal-v95368[data-modal-color="salmon"] .modal-footer {
    border-color: #E5C3B3;
}

.modal-v95368[data-modal-color="attention"] .modal-content {
    border-color: #E5E5A6;
}

.modal-v95368[data-modal-color="attention"] .modal-header,
.modal-v95368[data-modal-color="attention"] .modal-footer {
    border-color: #E5E5A6;
}

.modal-v95368[data-modal-color="sky"] .modal-content {
    border-color: #A6E5E5;
}

.modal-v95368[data-modal-color="sky"] .modal-header,
.modal-v95368[data-modal-color="sky"] .modal-footer {
    border-color: #A6E5E5;
}

.modal-v95368[data-modal-color="safe"] .modal-content {
    border-color: #84c498;
}

.modal-v95368[data-modal-color="safe"] .modal-header,
.modal-v95368[data-modal-color="safe"] .modal-footer {
    border-color: #84c498;
}

.modal-v95368[data-modal-color="brown"] .modal-content {
    border-color: #a88e31;
}

.modal-v95368[data-modal-color="brown"] .modal-header,
.modal-v95368[data-modal-color="brown"] .modal-footer {
    border-color: #a88e31;
}

.modal-v95368[data-modal-color="info"] .modal-content {
    border-color: #8aa1f2;
}

.modal-v95368[data-modal-color="info"] .modal-header,
.modal-v95368[data-modal-color="info"] .modal-footer {
    border-color: #8aa1f2;
}

.modal-v95368[data-modal-color="pink"] .modal-content {
    border-color: #FFB3D9;
}

.modal-v95368[data-modal-color="pink"] .modal-header,
.modal-v95368[data-modal-color="pink"] .modal-footer {
    border-color: #FFB3D9;
}

.modal-v95368[data-modal-color="orange"] .modal-content {
    border-color: #f69653;
}

.modal-v95368[data-modal-color="orange"] .modal-header,
.modal-v95368[data-modal-color="orange"] .modal-footer {
    border-color: #f69653;
}

.modal-v95368 .modal-body {
    font-size: 1rem;
}

.modal-v95368 .btn-secondary {
    background-color: #1C1C1E;
    border-color: #c6c7bd;
    color: #c6c7bd;
}

.modal-v95368 .btn-secondary:hover {
    background-color: #2a2a2c;
    border-color: #c6c7bd;
}