/* =============================================================================
 * teerabbit-designer.css
 * Styles for the custom designer enhancements (see teerabbit-designer.js).
 * Loaded via a <link> tag in DecoNetwork's custom header code.
 * Colors use Tee Rabbit's brand: charcoal + gold.
 * ========================================================================== */

/* ---- 1) Back to teerabbit link (top of the left product panel) --------- */
/* Clean, centered button on the white panel. Placed here (not the toolbar)
   because the toolbar has no spare width and wraps at smaller sizes. */
#tr-back-btn.tr-back-btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 10px 12px !important;
  margin: 0 0 12px !important;
  background: #f4f4f4 !important;
  border: 1px solid #e4e4e4 !important;
  border-radius: 8px !important;
  color: #1a1a1a !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  cursor: pointer;
  transition: background .15s ease;
}
#tr-back-btn.tr-back-btn:hover { background: #ececec !important; }
.tr-back-arrow { font-size: 16px !important; line-height: 1 !important; }

/* ---- 2) Delivery panel ------------------------------------------------- */
/* Hard reset: this widget lives inside DecoNetwork's product panel, whose CSS
   otherwise bleeds in and mangles the text (overlapping lines, letter-spacing,
   absolute positioning). Lock the properties that matter. */
#tr-delivery, #tr-delivery * {
  box-sizing: border-box !important;
  font-family: inherit !important;
  letter-spacing: normal !important;
  word-spacing: normal !important;
  text-transform: none !important;
  white-space: normal !important;
  text-indent: 0 !important;
  text-align: left !important;
  float: none !important;
  position: static !important;
  transform: none !important;
  max-width: none !important;
  min-width: 0 !important;
  height: auto !important;
}

.tr-delivery {
  display: block !important;
  box-sizing: border-box;
  width: 100%;
  margin: 14px 0 4px;
  padding: 12px 14px;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  background: #fafafa;
  font-size: 13px !important;
  line-height: 1.4 !important;
  color: #1a1a1a;
}
.tr-delivery-title {
  display: block !important;
  font-size: 13px !important;
  font-weight: 700;
  margin: 0 0 8px !important;
}
.tr-delivery-list {
  display: block !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.tr-delivery-list li {
  display: block !important;
  padding: 6px 0 !important;
  margin: 0 !important;
  border-top: 1px dashed #ececec;
  background: none !important;
}
.tr-delivery-list li:first-child { border-top: 0; padding-top: 0 !important; }

/* Name + date on one line; day-count on a quiet line beneath. */
.tr-delivery-row {
  display: flex !important;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.tr-delivery-name { display: inline !important; color: #333; font-weight: 600; font-size: 13px !important; }
#tr-delivery .tr-delivery-date { display: inline !important; font-weight: 700; color: #1a1a1a; font-size: 13px !important; white-space: nowrap !important; }
.tr-delivery-sub  { display: block !important; color: #999; font-size: 11px !important; line-height: 1.3 !important; margin-top: 2px !important; }

.tr-delivery-note {
  display: block !important;
  margin: 10px 0 0 !important;
  padding-top: 8px !important;
  border-top: 1px solid #eee;
  color: #888;
  font-size: 11px !important;
  line-height: 1.4 !important;
}