/* /gtv_shipment_status_indicator/static/src/scss/shipment_status.scss */
 .sp-theme-gtv{--sp-header-from: #1a237e; --sp-header-to: #2b3790; --sp-footer-bg: #1a237e; --sp-accent: #3949ab; --sp-btn-from: #2b3790; --sp-btn-to: #3949ab; --sp-pill-color: #2b3790; --sp-pill-border: #dce1f5; --sp-pill-bg: rgba(255,255,255,0.85); --sp-link-color: #2b3790; --sp-tile-blue: #1565c0; --sp-tile-indigo: #2b3790; --sp-tile-green: #2e7d32; --sp-tile-orange: #e65100; --sp-provider-left: #2b3790; --sp-provider-bg: linear-gradient(135deg, #e8eaf6 0%, #ede7f6 100%); --sp-provider-icon: #2b3790; --sp-bg: #f0f2ff; --sp-card-border: #e8ecf8; --sp-card-bg: #ffffff; --sp-tile-bg: #f7f8ff; --sp-tile-border: #eef0fb; --sp-input-border: #e0e4f0; --sp-input-bg: #f7f8ff; --sp-input-focus: #3949ab; --sp-input-shadow: rgba(57, 73, 171, 0.12); --sp-hero-icon-from: #2b3790; --sp-hero-icon-to: #3949ab; --sp-hero-shadow: rgba(26, 35, 126, 0.25); --sp-search-shadow: rgba(26, 35, 126, 0.12); --sp-tl-dot-bg: #2b3790; --sp-tl-dot-border: #c5cae9; --sp-tl-line-from: #3949ab; --sp-tl-line-to: #c5cae9; --sp-tl-active-bg: #2e7d32; --sp-tl-active-bdr: #a5d6a7; --sp-tl-content-bg: #f7f8ff; --sp-tl-content-bdr: #eef0fb; --sp-text-dark: #1a237e; --sp-text-mid: #455a64; --sp-text-muted: #90a4ae; --sp-header-btn-bdr: rgba(255,255,255,0.28); --sp-back-link-hover:#1a237e;}.sp-theme-parcel{--sp-header-from: #0f74bc; --sp-header-to: #2d2d44; --sp-footer-bg: #0f74bc; --sp-accent: #ff6b2b; --sp-btn-from: #ff6b2b; --sp-btn-to: #ff8c55; --sp-pill-color: #e55a1c; --sp-pill-border: #fde8d8; --sp-pill-bg: rgba(255,255,255,0.9); --sp-link-color: #e55a1c; --sp-tile-blue: #e55a1c; --sp-tile-indigo: #ff6b2b; --sp-tile-green: #2e7d32; --sp-tile-orange: #c0392b; --sp-provider-left: #ff6b2b; --sp-provider-bg: linear-gradient(135deg, #fff0e8 0%, #ffe8d6 100%); --sp-provider-icon: #ff6b2b; --sp-bg: #fff8f4; --sp-card-border: #fde8d8; --sp-card-bg: #ffffff; --sp-tile-bg: #fff5f0; --sp-tile-border: #fde8d8; --sp-input-border: #fdd5b8; --sp-input-bg: #fff9f6; --sp-input-focus: #ff6b2b; --sp-input-shadow: rgba(255, 107, 43, 0.15); --sp-hero-icon-from: #ff6b2b; --sp-hero-icon-to: #ff8c55; --sp-hero-shadow: rgba(255, 107, 43, 0.3); --sp-search-shadow: rgba(255, 107, 43, 0.1); --sp-tl-dot-bg: #ff6b2b; --sp-tl-dot-border: #fdd5b8; --sp-tl-line-from: #ff6b2b; --sp-tl-line-to: #fdd5b8; --sp-tl-active-bg: #2e7d32; --sp-tl-active-bdr: #a5d6a7; --sp-tl-content-bg: #fff9f6; --sp-tl-content-bdr: #fde8d8; --sp-text-dark: #1a1a2e; --sp-text-mid: #5d4037; --sp-text-muted: #a1887f; --sp-header-btn-bdr: rgba(255,255,255,0.25); --sp-back-link-hover:#c0392b;}.status-public-body{margin: 0; padding: 0; background: var(--sp-bg); font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; color: var(--sp-text-mid); min-height: 100vh; display: flex; flex-direction: column;}.status-public-body #wrapwrap, .status-public-body #wrap{padding-top: 0 !important; margin-top: 0 !important;}.sp-header{background: linear-gradient(135deg, var(--sp-header-from) 0%, var(--sp-header-to) 100%); height: 62px; display: flex; align-items: center; padding: 0 1.5rem; position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 16px rgba(0, 0, 0, 0.25);}.sp-header-inner{width: 100%; max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem;}.sp-logo-link{display: flex; align-items: center; text-decoration: none; flex-shrink: 0;}.sp-logo-img{height: 36px; object-fit: contain;}.sp-header-title{color: rgba(255, 255, 255, 0.85); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.3px;}.sp-header-title i{margin-right: 8px; opacity: 0.75;}@media (max-width: 576px){.sp-header-title{display: none;}}.sp-back-btn{display: flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, 0.8); font-size: 0.82rem; font-weight: 500; text-decoration: none; border: 1px solid var(--sp-header-btn-bdr); padding: 5px 14px; border-radius: 20px; transition: all 0.2s ease; flex-shrink: 0;}.sp-back-btn:hover{background: rgba(255, 255, 255, 0.15); color: #fff; text-decoration: none;}@media (max-width: 400px){.sp-back-label{display: none;}}.sp-footer{background: var(--sp-footer-bg); padding: 1rem 1.5rem; margin-top: auto;}.sp-footer-inner{max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem;}.sp-footer-copy{color: rgba(255, 255, 255, 0.5); font-size: 0.78rem;}.sp-footer-links{display: flex; gap: 1.25rem;}.sp-footer-links a{color: rgba(255, 255, 255, 0.55); font-size: 0.78rem; text-decoration: none; transition: color 0.2s;}.sp-footer-links a:hover{color: #fff;}.sp-main{flex: 1; display: flex; flex-direction: column;}.sp-page-wrap{width: 100%; max-width: 1100px; margin: 0 auto; padding: 2rem 1.25rem 3rem;}.sp-search-hero{display: flex; flex-direction: column; align-items: center; text-align: center; padding: 3rem 1rem 2rem;}.sp-hero-icon{width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, var(--sp-hero-icon-from) 0%, var(--sp-hero-icon-to) 100%); display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; box-shadow: 0 8px 24px var(--sp-hero-shadow);}.sp-hero-icon i{font-size: 2rem; color: #fff;}.sp-hero-title{font-size: 2rem; font-weight: 700; color: var(--sp-text-dark); margin-bottom: 0.5rem;}@media (max-width: 576px){.sp-hero-title{font-size: 1.6rem;}}.sp-hero-subtitle{color: var(--sp-text-mid); font-size: 1rem; margin-bottom: 2rem;}.sp-search-card{width: 100%; max-width: 560px; background: var(--sp-card-bg); border-radius: 14px; padding: 2rem; box-shadow: 0 4px 20px var(--sp-search-shadow); border: 1px solid var(--sp-card-border);}.sp-search-form{display: flex; flex-direction: column; gap: 1rem;}.sp-input-wrap{position: relative; display: flex; align-items: center;}.sp-input-icon{position: absolute; left: 14px; color: var(--sp-text-muted); font-size: 0.9rem; pointer-events: none;}.sp-input{width: 100%; padding: 0.75rem 1rem 0.75rem 2.5rem; border: 1.5px solid var(--sp-input-border); border-radius: 10px; font-size: 0.95rem; color: var(--sp-text-dark); outline: none; transition: border-color 0.2s, box-shadow 0.2s; background: var(--sp-input-bg);}.sp-input:focus{border-color: var(--sp-input-focus); box-shadow: 0 0 0 3px var(--sp-input-shadow); background: #fff;}.sp-input::placeholder{color: var(--sp-text-muted); font-size: 0.88rem;}.sp-search-btn{width: 100%; padding: 0.8rem; background: linear-gradient(135deg, var(--sp-btn-from) 0%, var(--sp-btn-to) 100%); color: #fff; border: none; border-radius: 10px; font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease; letter-spacing: 0.3px;}.sp-search-btn:hover{filter: brightness(0.9); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);}.sp-search-btn--sm{width: auto; padding: 0.6rem 1rem; border-radius: 6px;}.sp-search-hint{margin-top: 0.85rem; margin-bottom: 0; font-size: 0.78rem; color: var(--sp-text-muted); text-align: center;}.sp-info-pills{display: flex; gap: 0.75rem; margin-top: 1.75rem; flex-wrap: wrap; justify-content: center;}.sp-pill{display: flex; align-items: center; gap: 6px; background: var(--sp-pill-bg); border: 1px solid var(--sp-pill-border); padding: 6px 14px; border-radius: 20px; font-size: 0.78rem; font-weight: 500; color: var(--sp-pill-color); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);}.sp-pill i{font-size: 0.72rem; opacity: 0.7;}.sp-result-wrap{padding-top: 1.25rem;}.sp-breadcrumb{margin-bottom: 1.25rem;}.sp-back-link{color: var(--sp-link-color); font-size: 0.85rem; font-weight: 500; text-decoration: none; transition: color 0.2s;}.sp-back-link:hover{color: var(--sp-back-link-hover); text-decoration: underline;}.sp-error-card{max-width: 560px; margin: 2rem auto; background: var(--sp-card-bg); border-radius: 14px; padding: 2.5rem 2rem; text-align: center; box-shadow: 0 4px 20px var(--sp-search-shadow); border: 1px solid var(--sp-card-border);}.sp-error-icon{width: 64px; height: 64px; border-radius: 50%; background: #fff3e0; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem;}.sp-error-icon i{font-size: 1.5rem; color: #f57c00;}.sp-error-title{font-size: 1.3rem; font-weight: 700; color: var(--sp-text-dark); margin-bottom: 0.5rem;}.sp-error-msg{color: var(--sp-text-mid); font-size: 0.9rem; margin-bottom: 1.5rem;}.sp-mt-3{margin-top: 1.5rem;}.sp-status-banner{border-radius: 14px; padding: 1.25rem 1.5rem; margin-bottom: 1.5rem; background: linear-gradient(135deg, var(--sp-header-from) 0%, var(--sp-header-to) 100%); color: #fff; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);}.sp-status-banner.sp-status-confirm{background: linear-gradient(135deg, #2e7d32 0%, #43a047 100%);}.sp-status-banner.sp-status-cancel{background: linear-gradient(135deg, #c62828 0%, #e53935 100%);}.sp-status-banner.sp-status-draft{background: linear-gradient(135deg, #37474f 0%, #546e7a 100%);}.sp-status-banner-inner{display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;}.sp-status-icon-wrap{width: 52px; height: 52px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); display: flex; align-items: center; justify-content: center; flex-shrink: 0;}.sp-status-text{flex: 1;}.sp-status-label{font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.7px; opacity: 0.75;}.sp-status-name{font-size: 1.3rem; font-weight: 700; line-height: 1.3; margin-top: 2px;}.sp-booking-badge{display: inline-flex; align-items: center; margin-top: 6px; background: rgba(255, 255, 255, 0.2); border-radius: 20px; padding: 3px 10px; font-size: 0.78rem; font-weight: 500;}.sp-status-ref{text-align: right; flex-shrink: 0;}@media (max-width: 576px){.sp-status-ref{display: none;}}.sp-ref-label{display: block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.6px; opacity: 0.7;}.sp-ref-value{display: block; font-size: 0.9rem; font-weight: 700; font-family: 'Courier New', monospace; letter-spacing: 0.5px;}.sp-grid{display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: start;}@media (max-width: 768px){.sp-grid{grid-template-columns: 1fr;}}.sp-card{background: var(--sp-card-bg); border-radius: 14px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); overflow: hidden; border: 1px solid var(--sp-card-border);}.sp-card-header{background: linear-gradient(135deg, var(--sp-header-from) 0%, var(--sp-header-to) 100%); color: #fff; padding: 0.85rem 1.25rem; font-size: 0.9rem; font-weight: 600; letter-spacing: 0.2px;}.sp-card-header i{opacity: 0.8;}.sp-card-body{padding: 1.25rem;}.sp-tiles{display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 0.75rem;}.sp-tile{display: flex; align-items: flex-start; gap: 0.75rem; background: var(--sp-tile-bg); border-radius: 10px; padding: 0.85rem; border: 1px solid var(--sp-tile-border);}.sp-tile-icon{width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0;}.sp-tile-icon i{font-size: 0.85rem; color: #fff;}.sp-tile-icon--blue{background: var(--sp-tile-blue);}.sp-tile-icon--indigo{background: var(--sp-tile-indigo);}.sp-tile-icon--green{background: var(--sp-tile-green);}.sp-tile-icon--orange{background: var(--sp-tile-orange);}.sp-tile-text{display: flex; flex-direction: column; gap: 2px; min-width: 0;}.sp-tile-label{font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; color: var(--sp-text-muted);}.sp-tile-value{font-size: 0.9rem; font-weight: 600; color: var(--sp-text-dark); word-break: break-word;}.sp-provider-bar{display: flex; align-items: center; gap: 0.85rem; background: var(--sp-provider-bg); border-left: 4px solid var(--sp-provider-left); border-radius: 6px; padding: 0.85rem 1rem; margin-top: 0.25rem;}.sp-provider-icon{color: var(--sp-provider-icon); font-size: 1.1rem; flex-shrink: 0;}.sp-timeline{position: relative; padding-left: 28px;}.sp-timeline::before{content: ''; position: absolute; left: 9px; top: 0; bottom: 0; width: 2px; background: linear-gradient(to bottom, #2e7d32, #a5d6a7); border-radius: 2px;}.sp-tl-item{position: relative; padding-bottom: 1.25rem;}.sp-tl-item:last-child{padding-bottom: 0;}.sp-tl-dot{position: absolute; left: -28px; top: 0; width: 20px; height: 20px; border-radius: 50%; background: #2e7d32; border-color: #a5d6a7; border: 2px solid var(--sp-tl-dot-border); display: flex; align-items: center; justify-content: center;}.sp-tl-dot i{font-size: 0.55rem; color: #fff;}.sp-tl-item:last-child .sp-tl-dot{background: var(--sp-tl-active-bg); border-color: var(--sp-tl-active-bdr); width: 22px; height: 22px; left: -29px;}.sp-tl-content{background: var(--sp-tl-content-bg); border-radius: 6px; padding: 0.65rem 0.85rem; border: 1px solid var(--sp-tl-content-bdr);}.sp-tl-status{font-size: 0.85rem; font-weight: 600; color: var(--sp-text-dark); margin-bottom: 2px;}.sp-tl-desc{font-size: 0.78rem; color: var(--sp-text-mid); margin-bottom: 3px;}.sp-tl-date{font-size: 0.7rem; color: var(--sp-text-muted); font-weight: 500;}.sp-search-again{margin-top: 2rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; background: var(--sp-card-bg); border-radius: 10px; padding: 1rem 1.25rem; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); border: 1px solid var(--sp-card-border);}.sp-search-again > span{font-size: 0.85rem; color: var(--sp-text-mid); white-space: nowrap;}.sp-search-again-form{display: flex; align-items: center; gap: 0.5rem; flex: 1;}.sp-input-sm .sp-input{padding: 0.55rem 0.75rem 0.55rem 2.2rem; font-size: 0.85rem;}@media (max-width: 768px){.sp-grid{grid-template-columns: 1fr;}}@media (max-width: 576px){.sp-search-card{padding: 1.25rem;}.sp-tiles{grid-template-columns: 1fr;}.sp-search-again{flex-direction: column; align-items: flex-start;}.sp-footer-inner{flex-direction: column; text-align: center;}.sp-status-banner-inner{flex-direction: column; align-items: flex-start;}}.sp-loading{display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, 0.35); border-radius: 50%; border-top-color: #fff; animation: sp-spin 0.8s linear infinite; vertical-align: middle; margin-right: 6px;}@keyframes sp-spin{to{transform: rotate(360deg);}}.status-icon{font-size: 3rem;}.text-status-draft{color: #6c757d !important;}.text-status-confirmed{color: #28a745 !important;}.text-status-cancelled{color: #dc3545 !important;}.text-status-unknown{color: #17a2b8 !important;}