/* SAR Uniform Orders v3 — scoped to #sar-app to avoid theme conflicts */

#sar-app { max-width: 860px; margin: 0 auto; font-family: inherit; }
#sar-app h2 { font-size: 1.5em; color: #8B0000; margin-bottom: 8px; }
#sar-app p  { margin-bottom: 8px; }

/* Notices */
#sar-app .sar-notice { padding: 11px 15px; border-radius: 4px; margin: 8px 0; font-size: .9em; line-height: 1.5; }
#sar-app .sar-notice--warning { background: #fff3cd !important; color: #856404 !important; border-left: 4px solid #f9a825 !important; }
#sar-app .sar-notice--error   { background: #f8d7da !important; color: #721c24 !important; border-left: 4px solid #dc3545 !important; }
#sar-app .sar-notice--success { background: #d4edda !important; color: #155724 !important; border-left: 4px solid #28a745 !important; }
#sar-app .sar-notice--info    { background: #e3f2fd !important; color: #0d47a1 !important; border-left: 4px solid #1976d2 !important; }

/* Category */
#sar-app .sar-cat-block { margin-bottom: 24px; }
#sar-app .sar-cat-title { background: #8B0000 !important; color: #fff !important; padding: 10px 16px; font-weight: 600; font-size: .95em; border-radius: 5px 5px 0 0; margin: 0; display: block; }

/* Item card */
#sar-app .sar-item         { border: 1px solid #ddd !important; border-top: none !important; background: #fff !important; margin: 0 !important; padding: 0 !important; }
#sar-app .sar-item:last-child { border-radius: 0 0 5px 5px; }
#sar-app .sar-item-row     { display: flex !important; align-items: center !important; gap: 12px; padding: 11px 14px; cursor: pointer; margin: 0 !important; }
#sar-app .sar-item-row:hover { background: #fafafa !important; }
#sar-app .sar-cb           { width: 19px !important; height: 19px !important; flex-shrink: 0; cursor: pointer; accent-color: #8B0000; margin: 0 !important; }
#sar-app .sar-thumb        { width: 50px !important; height: 50px !important; object-fit: cover; border-radius: 4px; border: 1px solid #eee !important; flex-shrink: 0; }
#sar-app .sar-item-lbl     { flex: 1; cursor: pointer; display: flex !important; flex-direction: column !important; gap: 3px; margin: 0 !important; padding: 0 !important; }
#sar-app .sar-item-name    { font-weight: 600; font-size: .95em; display: block !important; }
#sar-app .sar-item-sub     { font-size: .82em; color: #777; display: block !important; }

/* CRITICAL — fields hidden by default, JS controls display */
#sar-app .sar-fields               { display: none !important; }
#sar-app .sar-fields.sar-open      { display: block !important; }
#sar-app .sar-fields-inner         { padding: 12px 16px 14px; background: #f8f8f8 !important; border-top: 1px solid #eee !important; }
#sar-app .sar-frow                 { display: flex !important; flex-wrap: wrap; gap: 14px; margin-bottom: 10px !important; align-items: flex-end; }
#sar-app .sar-f                    { display: flex !important; flex-direction: column !important; gap: 4px; min-width: 120px; }
#sar-app .sar-f label              { font-size: .78em !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .04em; color: #555 !important; margin: 0 !important; padding: 0 !important; display: block !important; }
#sar-app .sar-f label em           { font-style: normal; font-weight: 400; color: #999; text-transform: none; }
#sar-app .sar-f select,
#sar-app .sar-f input[type="number"],
#sar-app .sar-f input[type="text"] { padding: 6px 8px !important; border: 1px solid #ccc !important; border-radius: 4px !important; font-size: .9em !important; background: #fff !important; width: auto !important; margin: 0 !important; box-shadow: none !important; }
#sar-app .sar-f--sm                { min-width: 70px; max-width: 80px; }
#sar-app .sar-f--full              { width: 100% !important; min-width: 100% !important; }
#sar-app .sar-f--full input        { width: 100% !important; }
#sar-app .sar-img-lg               { margin-top: 10px; }
#sar-app .sar-img-lg img           { max-width: 180px; border-radius: 4px; border: 1px solid #eee !important; }

/* Summary */
#sar-app .sar-summary    { background: #f0f8f0 !important; border: 1px solid #c8e6c9 !important; border-radius: 6px; padding: 16px 20px; margin: 20px 0; }
#sar-app .sar-summary h3 { color: #2e7d32 !important; margin: 0 0 12px !important; font-size: 1em; }
#sar-app .sar-sum-line   { display: flex !important; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid #dcedc8 !important; font-size: .9em; }
#sar-app .sar-sum-total  { display: flex !important; justify-content: space-between; padding: 10px 0 0; font-weight: 700; font-size: 1em; }
#sar-app .sar-sum-note   { font-size: .8em; color: #888; margin-top: 6px; }

/* Order details */
#sar-app .sar-order-details     { border: 2px solid #8B0000 !important; border-radius: 6px; padding: 18px 20px; margin: 4px 0 20px; background: #fff !important; }
#sar-app .sar-order-details h3  { color: #8B0000 !important; margin: 0 0 16px !important; font-size: 1em; }
#sar-app .sar-od-grid           { display: grid !important; grid-template-columns: 1fr 1fr; gap: 20px; }
@media(max-width: 600px) { #sar-app .sar-od-grid { grid-template-columns: 1fr !important; } }
#sar-app .sar-od-block          { display: flex !important; flex-direction: column !important; gap: 7px; }
#sar-app .sar-od-label          { font-weight: 700; font-size: .82em; text-transform: uppercase; letter-spacing: .04em; color: #555; margin-bottom: 2px !important; display: block !important; }
#sar-app .sar-radio-opt         { display: flex !important; align-items: flex-start !important; gap: 9px; padding: 9px 11px !important; border: 1px solid #ddd !important; border-radius: 4px; cursor: pointer; background: #fff !important; margin: 0 !important; }
#sar-app .sar-radio-opt:hover   { border-color: #8B0000 !important; background: #fff8f8 !important; }
#sar-app .sar-radio-opt input[type="radio"] { margin: 3px 0 0 0 !important; flex-shrink: 0; accent-color: #8B0000; width: 15px !important; height: 15px !important; cursor: pointer; }
#sar-app .sar-radio-opt span    { font-size: .9em; line-height: 1.4; }
#sar-app .sar-radio-opt span em { display: block !important; font-style: normal; color: #888; font-size: .85em; }
#sar-app .sar-email-input       { width: 100% !important; padding: 8px 10px !important; border: 1px solid #ccc !important; border-radius: 4px !important; font-size: .9em !important; margin-top: 4px; }

/* Submit */
#sar-app .sar-footer      { margin: 4px 0 20px; }
#sar-app .sar-submit-btn  { background: #8B0000 !important; color: #fff !important; border: none !important; padding: 13px 32px !important; border-radius: 5px !important; font-size: 1em !important; font-weight: 700 !important; cursor: pointer; width: 100% !important; display: block !important; box-shadow: none !important; text-transform: none !important; letter-spacing: normal !important; }
#sar-app .sar-submit-btn:hover:not(:disabled) { background: #a00000 !important; }
#sar-app .sar-submit-btn:disabled { background: #bbb !important; cursor: not-allowed; color: #fff !important; }

/* Success */
#sar-app .sar-success        { background: #d4edda !important; border: 1px solid #c3e6cb !important; border-radius: 6px; padding: 28px 24px; text-align: center; margin-top: 20px; }
#sar-app .sar-success-icon   { font-size: 40px; color: #155724; margin-bottom: 10px; display: block; }
#sar-app .sar-success h3     { color: #155724 !important; font-size: 1.3em !important; margin: 0 0 10px !important; }
#sar-app .sar-success p      { color: #155724 !important; font-size: .95em; margin: 0 0 16px !important; }
#sar-app .sar-success-link   { display: inline-block !important; background: #155724 !important; color: #fff !important; padding: 9px 20px !important; border-radius: 4px; text-decoration: none !important; font-size: .9em; }
#sar-app .sar-success-link:hover { background: #0d3b16 !important; }

/* My Orders */
#sar-my-orders h2            { font-size: 1.4em; color: #8B0000; margin-bottom: 16px; }
#sar-my-orders .sar-order-card { border: 1px solid #ddd !important; border-radius: 6px; margin-bottom: 18px; overflow: hidden; }
#sar-my-orders .sar-order-card__hdr { display: flex !important; justify-content: space-between; align-items: center; padding: 11px 16px; background: #fff8f8 !important; border-bottom: 1px solid #ddd !important; flex-wrap: wrap; gap: 8px; }
#sar-my-orders .sar-order-card__right { display: flex !important; align-items: center; gap: 10px; flex-wrap: wrap; }
#sar-my-orders .sar-order-num   { font-weight: 700; color: #8B0000; }
#sar-my-orders .sar-order-date  { color: #888; font-size: .85em; }
#sar-my-orders .sar-order-total { font-weight: 700; }
#sar-my-orders .sar-paid-badge  { background: #d4edda !important; color: #155724 !important; padding: 2px 9px; border-radius: 10px; font-size: .8em; font-weight: 700; }
#sar-my-orders .sar-order-tbl   { width: 100%; border-collapse: collapse; font-size: .88em; }
#sar-my-orders .sar-order-tbl th{ background: #f5f5f5 !important; padding: 7px 12px; text-align: left; font-size: .78em; text-transform: uppercase; letter-spacing: .03em; color: #666; border-bottom: 1px solid #ddd !important; }
#sar-my-orders .sar-order-tbl td{ padding: 7px 12px; border-bottom: 1px solid #f0f0f0 !important; }
#sar-my-orders .sar-complete-bar { background: #d4edda !important; color: #155724 !important; padding: 8px 14px; font-size: .88em; font-weight: 600; }
#sar-my-orders .sar-badge        { display: inline-block; padding: 2px 9px; border-radius: 10px; font-size: .78em; font-weight: 700; }
#sar-my-orders .sar-badge--pending   { background: #fff3cd !important; color: #856404 !important; }
#sar-my-orders .sar-badge--ordered   { background: #cce5ff !important; color: #004085 !important; }
#sar-my-orders .sar-badge--partial   { background: #e1bee7 !important; color: #6a1b9a !important; }
#sar-my-orders .sar-badge--delivered,
#sar-my-orders .sar-badge--completed { background: #d4edda !important; color: #155724 !important; }
#sar-my-orders .sar-badge--cancelled { background: #f8d7da !important; color: #721c24 !important; }

/* Return request button */
#sar-my-orders .sar-return-request-btn {
    background: none;
    border: 1px solid #8B0000;
    color: #8B0000;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
#sar-my-orders .sar-return-request-btn:hover {
    background: #8B0000;
    color: #fff;
}
#sar-my-orders .sar-badge--returned {
    background: #e1bee7 !important;
    color: #6a1b9a !important;
}