/* 狀態徽章 */
.status-badge {
padding: 5px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 5px;
}

.status-badge.status-0 { 
background: rgba(239,68,68,.1);
color: #dc2626;
}

.status-badge.status-2 { 
background: rgba(251,191,36,.1);
color: #f59e0b;
}

.status-badge.status-1 { 
background: rgba(34,197,94,.1);
color: #16a34a;
}

.status-badge.status-9 { 
background: rgba(107,114,128,.1);
color: var(--gray-600);
}




/* --- 訂單列表新排版 CSS 結束 --- */


.order-item-tag {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px;
border-radius: 8px;
font-size: 13px;
font-weight: 500;
white-space: nowrap; /* 確保內容不換行 */
}

.order-item-tag.course {
background: rgba(66,153,225,.1);
}

.order-item-tag.field {
background: rgba(72,187,120,.1);
}

.order-item-tag.field_long {
background: rgba(237,137,54,.1);
}

.order-item-tag.group_session {
background: rgba(237,100,166,.1);
}

.order-info-container {
display: flex;
gap: 20px;
flex-wrap: wrap;
}

.order-details-box {
flex: 1;
min-width: 280px;
background: var(--gray-100);
border-radius: 12px;
padding: 12px;
}

.section-title {
font-size: 18px;
font-weight: 600;
color: var(--gray-800);
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 2px solid var(--primary-green);
}

.info-row {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
}

.info-label {
color: var(--gray-600);
min-width: 100px;
font-weight: 500;
}

.info-value {
color: var(--gray-800);
font-weight: 500;
}

/* 右側金額摘要 - 保持原始綠色漸變 */
.order-summary-box {
flex: 0 0 320px;
background: linear-gradient(135deg, var(--primary-green), var(--primary-teal));
border-radius: 8px;
padding: 12px;
color: white;
}

.summary-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 14px;
}

.summary-label {
font-size: 14px;
}

.summary-value {
font-weight: 600;
font-size: 14px;
}

.summary-divider {
border-top: 2px solid rgba(255,255,255,0.3);
margin: 6px 0;
}

.summary-total {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 20px;
}

.summary-total .summary-value {
font-size: 16px;
font-weight: 700;
}

/* 訂單項目詳情區塊 */
.order-items-section {
padding: 12px 0 0 0 ;
background: white;
}

.item-card {
background: white;
border: .5px solid var(--gray-200);
border-radius: 4px; /* 略微方正 */
padding: 10px;
margin-bottom: 20px;
transition: all 0.3s ease;
}

.item-card:hover {
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
transform: translateY(-2px);
}

.item-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 15px;
}

.item-title-group {
display: flex;
align-items: center;
gap: 12px;
}

.item-icon {
width: 40px;
height: 40px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}

.item-icon.course {
background: rgba(66,153,225,.1);
color: var(--color-course);
}

.item-icon.field {
background: rgba(72,187,120,.1);
color: var(--color-short-term);
}

.item-icon.field-long {
background: rgba(237,137,54,.1);
color: var(--color-long-term);
}

.item-icon.activity {
background: rgba(237,100,166,.1);
color: var(--color-activity);
}

.item-title {
font-size: 14px;
font-weight: 600;
color: var(--gray-800);
}

.item-subtitle {
font-size: 13px;
color: var(--gray-600);
margin-top: 2px;
}

.item-price {
font-size: 14px;
font-weight: 700;
color: var(--primary-green);
}

.item-details {
background: var(--gray-100);
border-radius: 8px;
padding: 6px;
}

.detail-row {
display: flex;
align-items: center;
font-size: 14px;
}

.detail-row:last-child {
margin-bottom: 0;
}


/* 報名人員列表 */
.registration-section {
margin-top: 15px;
padding-top: 15px;
border-top: 1px dashed var(--gray-200);
}

.registration-title {
font-size: 14px;
font-weight: 600;
color: var(--gray-700);
margin-bottom: 12px;
}

.registration-grid {
display: grid;
gap: 10px;
}

.registration-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 6px;
background: white;
border: 1px solid var(--gray-200);
border-radius: 8px;
}

.registration-info {
display: flex;
align-items: center;
gap: 15px;
}

.registration-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--light-teal);
color: var(--primary-green);
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
}

.registration-details {
display: flex;
flex-direction: column;
}

.registration-name {
font-weight: 600;
color: var(--gray-800);
font-size: 14px;
}

.registration-meta {
font-size: 12px;
color: var(--gray-600);
}

.registration-price {
font-weight: 600;
color: var(--gray-600);
font-size: 12px;
}

/* 場地預約列表 */
.booking-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 12px;
margin-top: 15px;
}

.booking-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px;
background: white;
border: 1px solid var(--gray-200);
border-radius: 8px;
}

.booking-info {
display: flex;
align-items: center;
gap: 10px;
}

.booking-date-icon {
width: 36px;
height: 36px;
background: var(--light-teal);
color: var(--primary-green);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 14px;
}

.booking-details {
display: flex;
flex-direction: column;
}

.booking-date {
font-weight: 600;
color: var(--gray-800);
font-size: 13px;
}

.booking-time {
font-size: 12px;
color: var(--gray-600);
}

.booking-field {
font-size: 11px;
color: var(--primary-green);
font-weight: 500;
}

.booking-price {
font-weight: 600;
color: var(--gray-600);
font-size: 12px;
}



/* 響應式設計 */
@media (max-width: 768px) {

.order-info-container {
    flex-direction: column;
}

.order-summary-box {
    flex: 1;
    width: 100%;
}

.booking-grid {
    grid-template-columns: 1fr;
}

.modal-dialog {
    margin: 0;
    max-width: 100%;
    height: 100%;
}

.modal-content {
    height: 100%;
    max-height: none;
}

}