/* ===============================
            按鈕
   =============================== */

/* 按鈕組 */
.buttons{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}

.btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
    width: fit-content;
    padding: 10px 20px;
	border: none;
	border-radius: 10px;
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
	text-decoration: none;
	position: relative;
	overflow: hidden;
}

.btn i {
    font-size: 0.9rem;
}

.btn:hover {
    transform: translateY(-5px); 
    color: var(--light);
}

/* ========================================
   			操作按鈕
   ======================================== */


.btn-icon {
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: rgba(255, 255, 255, 0.05);
	color: var(--sys-text-muted);
	padding: 8px 12px;
	border-radius: 6px;
	cursor: pointer;
	transition: all 0.3s ease;
	font-size: 0.9rem;
}

.btn-icon:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	background: rgba(255, 255, 255, 0.1);
	border-color: var(--accent);
	color: var(--white);
}


/* ===============================
            按鈕樣式
   =============================== */

/* Primary Button */
.btn-primary {
	background: linear-gradient(135deg, #00d9ff, #60a5fa);
	color: #fff;
	box-shadow: 0 4px 12px rgba(0, 217, 255, 0.3);
}

.btn-primary:hover:not(:disabled) {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(0, 217, 255, 0.4);
}

.btn-primary:active:not(:disabled) {
	transform: translateY(0);
}



/* Secondary Button */
.btn-secondary {
	background: rgba(255, 255, 255, 0.05);
	color: rgba(255, 255, 255, 0.9);
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-secondary:hover:not(:disabled) {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.2);
}



/* Outline Button */
.btn-outline {
	background: transparent;
	border: 2px solid rgba(0, 217, 255, 0.5);
	color: #00d9ff;
	padding: 10px 20px;
}

.btn-outline:hover:not(:disabled) {
	background: rgba(0, 217, 255, 0.1);
	border-color: #00d9ff;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 217, 255, 0.2);
}

.btn-outline:active {
	transform: translateY(0);
}





/* Danger Button (取代 sysSetting .btn-danger) */
.btn-danger {
    background: rgba(254, 84, 97, 0.2); 
    color: var(--danger);
    border: 1px solid rgba(254, 84, 97, 0.3);
    padding: 11px 22px;
}

.btn-danger:hover {
    background: rgba(254, 84, 97, 0.3);
    color: #fff;
    transform: translateY(-2px);
}


/* 新增項目按鈕 */
.btn-add {
	margin-left: auto;
	background: rgba(77, 163, 255, 0.2);
	color: #4da3ff;
	transition: all 0.2s ease;
}

.btn-add:hover {
	background: rgba(77, 163, 255, 0.3);
	box-shadow: 0 0 10px rgba(0, 217, 255, 0.3);
	transform: translateY(-1px);
}


/* 放大檢視按鈕 */
/* 上傳照片按鈕 */
 .btn-zoom,
 .btn-upload {
 	padding: 10px 20px;
 	background: rgba(100, 147, 250, .2);
 	border: 1px solid var(--blue);
 	border-radius: 10px;
 	color: var(--text-light);
 	cursor: pointer;
 	transition: all .3s;
 	font-size: 14px;
 	font-weight: 600;
 }

 .btn-zoom:hover,
 .btn-upload:hover {
 	background: rgba(100, 147, 250, .4);
 	border-color: var(--cyan);
 	transform: translateY(-2px);
 	box-shadow: 0 4px 15px rgba(100, 147, 250, .3);
 }


/* 查看按鈕 */
.btn-view {
	background: rgba(79, 172, 254, 0.2);
	border-color: rgba(79, 172, 254, 0.5);
}

.btn-view:hover {
	border-color: rgba(79, 172, 254, 0.8);
	background: rgba(79, 172, 254, 0.2);
}


/* 編輯按鈕 */
.btn-edit {
	border-color: rgba(255, 193, 7, 0.5);
	background: rgba(255, 193, 7, 0.2);
}

.btn-edit:hover {
	border-color: rgba(255, 193, 7, 0.8);
	background: rgba(255, 193, 7, 0.2);
}



/* 刪除按鈕 */
.btn-delete {
	background: rgba(254, 84, 97, 0.2);
	border-color: rgba(254, 84, 97, 0.5);
}

.btn-delete:hover {
	border-color: rgba(254, 84, 97, 0.8);
	background: rgba(254, 84, 97, 0.2);
}


/* 儲存按鈕 */
.btn-success {
    background: linear-gradient(135deg, #0acb8e, #04c7e0);
    border-color: #0acb8e;
    color: var(--white);
    box-shadow: 0 4px 15px rgba(10, 203, 142, .3);
}

.btn-success:hover {
    box-shadow: 0 8px 25px rgba(10, 203, 142, .5);
}


/* 主題與語言按鈕樣式 */
.btn-theme,
.btn-language {
    background: rgba(108, 117, 125, 0.4); 
    color: var(--white);
	width: 100%;
}

.btn-theme:hover,
.btn-language:hover {
    box-shadow: 0 8px 25px rgba(100, 147, 250, 0.5); 
    background: linear-gradient(135deg, #04c7e0, #6493fa);
}




/* ===============================
   載入動畫
   =============================== */

.btn-loading {
	position: relative;
	pointer-events: none;
	opacity: 0.7;
}

.btn-loading::after {
	content: '';
	position: absolute;
	width: 16px;
	height: 16px;
	top: 50%;
	left: 50%;
	margin-left: -8px;
	margin-top: -8px;
	border: 2px solid #fff;
	border-radius: 50%;
	border-top-color: transparent;
	animation: spin 0.6s linear infinite;
}




/* ===============================
            登入按鈕
   =============================== */

/* 登入按鈕 */
.btn-login {
	width: 100%;
	background: linear-gradient(135deg, #00d9ff, #3b82f6);
	color: #fff;
    padding: 15px 25px;
}

.btn-login::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--c-blue), var(--c-cyan));
    opacity: 0;
    transition: opacity 0.4s ease;
}

.btn-login::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.btn-login:hover {
    border-color: var(--white);
    color: var(--light);
    transform: translateY(0px);
}

.btn-login:hover::before {
    opacity: 1;
}

.btn-login:hover::after {
    width: 100%;
    height: 300px;
}


/* 關聯群組 */
.social-group {
    display: grid;
    gap: 15px;
}


/* Google 登入按鈕 */
.btn-google {
	width: 100%;
    padding: 15px 25px;
	background: #fff;
	color: #333;
	border: 1px solid rgba(0, 0, 0, 0.1);
}

.btn-google:hover {
	background: #f8f9fa;
    color: #333;
	transform: translateY(-2px);
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}


/* LINE 登入按鈕 */
.btn-line {
	width: 100%;
    padding: 15px 25px;
	background: #06C755;
	color: #fff;
}

.btn-line:hover {
	background: #05b34c;
	transform: translateY(-2px);
	box-shadow: 0 4px 15px rgba(6, 199, 85, 0.3);
}


/* GitHub 登入按鈕 */
.btn-github {
	width: 100%;
    padding: 15px 25px;
	background: #24292e;
	color: #fff;
	margin-bottom: 15px;
}

.btn-github:hover {
	background: #1b1f23;
	transform: translateY(-2px);
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}