/* trackmyparcel-next additions on top of the original style.css / timeline.css.
   Scoped to .tmp-site so the app's own (Tailwind) pages are untouched. */

/* Tailwind preflight undoes a few things the old CSS relied on */
.tmp-site { font-family: "Open Sans", sans-serif; color: #33495e; }
.tmp-site img { display: inline-block; max-width: 100%; height: auto; }
.tmp-site .bx-wrapper img, .tmp-site .slide img { display: inline-block; }
.tmp-site a { color: inherit; }
.tmp-site .profile-page a:not(.green):not(.orange-button):not(.green-button):not(.select2-choice),
.tmp-site .welcome-text a:not(.anonymousLink),
.tmp-site .legal a { color: #2980b9; }
.tmp-site .profile-page a:hover { text-decoration: underline; }
.tmp-site h1 { font-family: "Open Sans Condensed", sans-serif; font-weight: 700; font-size: 32px; color: #33495e; }
.tmp-site .carrier-title { font-size: 26px; padding-bottom: 10px; color: #000; }
.tmp-site input, .tmp-site textarea { color: #33495e; }
.tmp-site .header .nav ul li a { cursor: pointer; }
.tmp-site ul, .tmp-site ol { list-style: none; }

/* select2 rendered by React: drop is inside the container */
.tmp-site .select2-container .select2-drop { position: absolute; margin-top: -1px; }
.tmp-site .select2-results { max-height: 280px; }
.tmp-site .select2-container .select2-choice { text-decoration: none !important; }

/* carrier without a logo */
.carrier-initials { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 40px; border-radius: 4px; background: #354b59; color: #fff; font: 700 15px "Open Sans", sans-serif; letter-spacing: 1px; }

/* searching screen */
.tmp-site .searching { text-align: center; padding: 40px 0 60px; }
.tmp-site .searching .magnify svg { animation: tmp-search 1.6s ease-in-out infinite; margin: 20px auto; display: block; }
@keyframes tmp-search { 0%, 100% { transform: translate(-14px, 0) rotate(-8deg); } 50% { transform: translate(14px, -6px) rotate(8deg); } }

/* result page */
.tracking-updated { float: right; padding-top: 12px; font-size: 13px; color: #78909c; }
.status-steps ul li { width: 25%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.status-steps ul li.grey-step { background: #dfe6ea; color: #8a9aa5; font-family: "Open Sans Condensed", sans-serif; font-weight: bold; }
.status-steps ul li.coloured { background: url(/images/arrow.png) no-repeat right center, #ff952f; }
.status-steps ul li.coloured.problem { background: url(/images/arrow.png) no-repeat right center, #c03b44; }
.status-steps ul li.coloured:nth-last-child(1) { background: #41b799; }
.info-row.multi, .tmp-site .tracking-left .info-row { line-height: 22px; padding: 16px 10px; }
.info-row .info-value { overflow: hidden; }
.info-row .rating-link { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.info-row .rating-link .rating { display: inline-flex; }
.status-icon.st-delivered { background: #41b799; }
.status-icon.st-exception, .status-icon.st-error, .status-icon.st-not_found { background: #c03b44; }
.status-icon.st-out_for_delivery, .status-icon.st-ready_for_collection { background: #ff952f; }
.tracking-problem { background: #fff4e5; border-left: 4px solid #ff952f; padding: 14px 18px; margin: 10px 0 18px; border-radius: 3px; }
.tracking-problem h3 { font-weight: 700; margin-bottom: 6px; }
.tracking-problem p { margin: 4px 0; line-height: 22px; }
.tracking-buttons { padding: 6px 0; }
.tracking-buttons .button { color: #fff; border: 0; padding: 8px 18px; border-radius: 3px; cursor: pointer; margin-right: 6px; font-weight: 600; }
.notify-ok { background: #e8f7f2; border-left: 4px solid #41b799; padding: 10px 14px; margin: 10px 0; }
.notify-form form { display: flex; gap: 8px; flex-wrap: wrap; }
.tracking-source { font-size: 12px; color: #90a4ae; margin: 16px 0 0; }
.tmp-site .cd-timeline-content h2 { font-weight: 700; }
#cd-timeline .cd-timeline-img img { display: block; }
.tmp-site .tracking-left .notify { float: none; display: block; }

/* reviews */
.review-comments { margin-top: 6px; font-size: 13px; color: #546e7a; }
.review-comments p { margin: 2px 0; }
.no-reviews { padding: 16px 0; }

/* my parcels / updates */
.muted { color: #90a4ae; }
.row.unread { background: #fff8ee; }
.notify-check { display: block; margin: 12px 0; }

/* quotes */
.quote-calc { margin-top: 18px; }
.quote-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; align-items: end; background: #eff3f5; padding: 16px; border-radius: 4px; }
.quote-form label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 14px; }
.quote-form input[type=number] { height: 40px; border: 1px solid #cfd8dc; border-radius: 3px; padding: 0 10px; }
.quote-form .quote-check { flex-direction: row; align-items: center; font-weight: 400; }
.quote-kinds { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.quote-kinds button { border: 1px solid #41b799; color: #41b799; background: #fff; border-radius: 14px; padding: 4px 12px; font-size: 13px; cursor: pointer; }
.quote-kinds button.on { background: #41b799; color: #fff; }
.table-quotes { margin-top: 16px; }
.table-quotes .row { display: flex; gap: 10px; padding: 12px 10px; border-bottom: 1px solid #eceff1; align-items: center; }
.table-quotes .header-row { display: flex; gap: 10px; }
.table-quotes .col-1 { flex: 1 1 55%; }
.table-quotes .col-2 { flex: 0 0 22%; }
.table-quotes .col-3 { flex: 0 0 20%; text-align: right; }
.table-quotes .row p { display: none; }
.table-quotes .col-3 b { display: block; font-size: 18px; color: #33495e; margin-bottom: 4px; }
.table-quotes .quote-meta { display: block; font-size: 12px; color: #78909c; margin-top: 2px; }
.table-quotes .cheapest { background: #e8f7f2; }
.cheapest-tag { display: block; font-size: 11px; color: #41b799; text-transform: uppercase; font-weight: 700; margin-top: 4px; }
.quote-sources { font-size: 12px; color: #90a4ae; margin-top: 12px; }

/* map */
.osm-pin { cursor: pointer; }
.osm-label { position: absolute; left: 24px; top: 0; white-space: nowrap; background: #354b59; color: #fff; font-size: 12px; padding: 2px 6px; border-radius: 3px; }
.office-location-map { margin: 14px 0; }

/* legal pages */
.legal h2 { font-size: 20px; font-weight: 700; margin: 14px 0 8px; }
.legal h3 { font-size: 17px; font-weight: 700; margin: 12px 0 6px; }
.legal p, .legal li { line-height: 22px; margin-bottom: 8px; }

/* contact */
.contact-form textarea { min-height: 160px; }

@media (max-width: 768px) {
  .quote-form { grid-template-columns: 1fr; }
  .table-quotes .row { flex-wrap: wrap; }
  .table-quotes .col-1 { flex-basis: 100%; }
  .table-quotes .col-2 { flex: 1 1 50%; }
  .table-quotes .col-3 { flex: 1 1 40%; }
  .table-quotes .header-row { display: none; }
  .tracking-updated { float: none; display: block; padding-top: 0; }
  .status-steps ul li { font-size: 12px; }
}

@media print {
  .no-print, .header, .carousel, .footer, .endorsment, .sidebar, .sweet-overlay, .sweet-alert { display: none !important; }
  .tmp-site .main-content { width: 100% !important; }
}

/* bxSlider direction controls (from jquery.bxslider.css, which isn't loaded) */
.tmp-site .bx-wrapper { position: relative; }
.tmp-site .bx-wrapper .bx-controls-direction a { position: absolute; top: 50%; margin-top: -16px; outline: 0; width: 15px; height: 32px; text-indent: -9999px; overflow: hidden; z-index: 50; }
.tmp-site .carousel .container { position: relative; }
.tmp-site .overview-left .bar .progress { max-width: 82%; }

/* Tailwind utilities that share a name with old classes */
.tmp-site .table { display: block; }
.tmp-site .container { padding-left: 0; padding-right: 0; max-width: none; }

/* cheap flights */
.flight-search form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.flight-search .select2-container { width: 260px; }
.flight-search input[type=submit] { background: #ff952f; color: #fff; border: 0; height: 44px; padding: 0 22px; font-weight: 700; cursor: pointer; border-radius: 2px; }
.popular-title { margin: 18px 0 8px; font-weight: 700; }
.popular-routes { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; margin-bottom: 14px; }
.popular-routes a { display: block; padding: 10px 12px; background: #eff3f5; border-radius: 3px; color: #2980b9 !important; }
.popular-routes a:hover { background: #e2eaee; }
.table-quotes .row > div, .table-quotes .header-row > div { float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; }
.table-quotes .header-row { padding: 14px 10px; }
.table-quotes .col-3 { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.table-quotes .col-3 .green { padding: 4px 12px; }