/* ORDER PAGE STYLES */
.order-layout { display: flex; gap: 20px; align-items: flex-start; }
.col-left  { flex: 2; min-width: 0; }
.col-right { flex: 1; min-width: 280px; }
@media (max-width: 900px) {
    .order-layout {flex-direction: column; align-items: stretch; }
    .col-left, .col-right { width: 100%; min-width: 0; }
}

.notice-box {
    background: #fffbeb; border: 1px dashed #f59e0b; border-radius: 6px;
    color: #b45309; font-weight: 500; font-size: 15px;
    line-height: 1.6; padding: 15px; text-align: justify; margin-bottom: 15px;
}
.form-group { margin-bottom: 22px; }
.form-group label { display: block; font-size: 15px; font-weight: 600; color: #334155; margin-bottom: 10px; }
.form-control {
    width: 100%; border: 1px solid #cbd5e1; border-radius: 6px;
    padding: 12px 15px; font-size: 16px; color: #334155;
    outline: none; transition: 0.2s; background: #fff;
}
.form-control:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.1); }
.form-control.converting { 
    border-color: #ec4899; 
    box-shadow: 0 0 0 3px rgba(236,72,153,.1); 
    color: #94a3b8;
    background-color: #fff1f2;
}

/* Custom Select */
.custom-select { position: relative; width: 100%; user-select: none; }
.custom-select-trigger {
    display: flex; align-items: center; justify-content: space-between;
    border: 1px solid #cbd5e1; border-radius: 6px; padding: 10px 15px;
    background: #fff; cursor: pointer; font-size: 16px; color: #334155; transition: 0.2s;
}
.custom-select.active .custom-select-trigger { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.1); }
.trigger-content { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; overflow: hidden; }
.trigger-icon { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.trigger-text-wrapper { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trigger-arrow svg { transition: transform 0.2s; }
.custom-select.active .trigger-arrow svg { transform: rotate(180deg); }
.custom-options {
    position: absolute; top: calc(100% + 5px); left: 0; right: 0;
    background: #fff; border: 1px solid #cbd5e1; border-radius: 6px;
    box-shadow: 0 4px 15px rgba(0,0,0,.05); z-index: 100;
    opacity: 0; visibility: hidden; transform: translateY(-10px); transition: 0.2s; overflow: hidden;
}
.custom-select.active .custom-options { opacity: 1; visibility: visible; transform: translateY(0); }
.custom-option {
    display: flex; align-items: center; gap: 12px; padding: 12px 15px;
    cursor: pointer; transition: background 0.2s; font-size: 15px; color: #334155;
}
.custom-option:hover, .custom-option.selected { background: #f8fafc; }
.option-icon { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.srv-option-content { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.srv-name-line { display: flex; flex-wrap: wrap; gap: 4px; align-items: baseline; }
.srv-price { color: #dc2626; font-weight: 700; font-size: 14px; white-space: nowrap; }

/* Emotion */
.emotion-list { display: flex; gap: 10px; flex-wrap: wrap; }
.emotion-item {
    width: 45px; height: 45px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; border: 2px solid transparent; font-size: 26px;
    transition: 0.2s; background: #f8fafc;
}
.emotion-item:hover { transform: scale(1.1); }
.emotion-item.active { border-color: #22c55e; background: #f0fdf4; }

/* Input group */
.input-group { display: flex; border: 1px solid #cbd5e1; border-radius: 6px; overflow: hidden; transition: 0.2s; background: #fff; }
.input-group:focus-within { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.1); }
.input-group input { flex: 1; padding: 12px 15px; border: none; outline: none; font-size: 16px; background: #fff; }
.input-group .input-addon { background: #fff; padding: 0 15px; display: flex; align-items: center; border-left: 1px solid #cbd5e1; font-weight: 600; color: #3b82f6; font-size: 15px; min-width: 100px; white-space: nowrap; }

/* Total & Submit */
.total-box { background: #dce7fa; border-radius: 8px; padding: 25px; text-align: center; margin-bottom: 25px; }
.total-box h4 { color: #1e293b; font-size: 17px; margin-bottom: 12px; }
.total-box .price { color: #1e293b; font-size: 20px; font-weight: 700; }
.btn-submit-order {
    width: 100%; background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); color: #fff; border: none;
    padding: 12px; border-radius: 10px; font-weight: 700; font-size: 15px;
    cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.2), 0 2px 4px -1px rgba(59, 130, 246, 0.1);
    text-transform: uppercase; letter-spacing: 0.5px;
}
.btn-submit-order:hover { 
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); 
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.3), 0 4px 6px -2px rgba(59, 130, 246, 0.1);
}
.btn-submit-order:active { transform: translateY(0); }
.btn-submit-order:disabled { 
    background: #94a3b8; 
    cursor: not-allowed; 
    transform: none;
    box-shadow: none;
}

/* Spinner */
.spinner {
    width: 20px; height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s linear infinite;
    display: none;
}
.btn-submit-order.loading .spinner { display: inline-block; }
.btn-submit-order.loading { display: flex; align-items: center; justify-content: center; gap: 10px; }

@keyframes spin { to { transform: rotate(360deg); } }

/* Right column description */
.desc-item { margin-bottom: 18px; font-size: 14px; color: #475569; }
.desc-item strong { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: #334155; font-size: 15px; }
.desc-item .check-icon { width: 22px; height: 22px; background: #4ade80; border-radius: 4px; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; }

/* Order result modal */
#orderModal { position: fixed; top:0; left:0; right:0; bottom:0; background: rgba(0,0,0,.5); z-index: 9999; display: none; align-items: center; justify-content: center; }
#orderModal.show { display: flex; }
.modal-box { background:#fff; width:90%; max-width:400px; border-radius:12px; padding:30px 20px; text-align:center; box-shadow:0 10px 25px rgba(0,0,0,.1); }
.modal-icon { width:70px; height:70px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 20px auto; }
/* Get ID Modal */
#idModal { position: fixed; top:0; left:0; right:0; bottom:0; background: rgba(0,0,0,.5); z-index: 9999; display: none; align-items: center; justify-content: center; }
#idModal.show { display: flex; }
.id-modal-box { background:#fff; width:95%; max-width:500px; border-radius:12px; padding:25px; box-shadow:0 10px 25px rgba(0,0,0,.1); }
.id-modal-btn { 
    width: 100%; background: #3b82f6; color: #fff; border: none; 
    padding: 12px; border-radius: 8px; font-weight: 600; cursor: pointer;
    margin-top: 15px; transition: 0.2s;
}
.id-modal-btn:hover { background: #2563eb; }
.get-id-trigger { color: #3b82f6; cursor: pointer; font-weight: 700; text-decoration: underline; margin-left: 5px; }

/* Mobile Optimizations */
@media (max-width: 480px) {
    .notice-box { font-size: 14px; text-align: justify; }
    .form-group label { font-size: 14px; margin-bottom: 8px; }
    .form-control, .custom-select-trigger, .input-group input { font-size: 15px; padding: 10px 12px; }
    .trigger-content { gap: 8px; }
    .option-icon, .trigger-icon { width: 18px; height: 18px; }
    .custom-option { padding: 10px 12px; font-size: 14px; }
    .total-box { padding: 20px 15px; }
    .total-box h4 { font-size: 15px; }
    .total-box .price { font-size: 18px; }
    .input-group .input-addon { padding: 0 10px; font-size: 14px; min-width: 80px; }
}