/*!
 * DST CUSTOM CLAUDE 2026-10-22 - Support and Order Status pages (shared by every store). Linked only from support.asp and
 * orderstatus.asp, and every rule is scoped to those pages' own blocks (.dstsupport, .ectorderstatus), so nothing else
 * changes. Order Status also links css/dstcheckout.css for its receipt (the same receipt as the thanks page).
 */

/* =============================== Support =============================== */
.dstsupport .title { margin-bottom: 8px !important; }
.dstsupport .dstsupport-intro { max-width: 720px; margin: 0 0 20px !important; font-size: 1rem; line-height: 1.5; color: #6c757d; }
.dstsupport .row { row-gap: 16px; }
.dstsupport .dstsupport-card { margin: 0 !important; border: 1px solid rgba(0,0,0,.125) !important; border-radius: .5rem !important; box-shadow: none !important; overflow: hidden; }
.dstsupport .dstsupport-card > .card-body { padding: 20px 24px !important; }
.dstsupport .dstsupport-h { margin: 0 0 6px !important; font-size: 1.25rem !important; font-weight: 600 !important; color: #212529; font-family: inherit !important; }

/* contact list: icon, bold line, muted line; the whole row is the link */
.dstsupport .dstsupport-item { display: flex !important; flex-wrap: nowrap !important; align-items: flex-start; gap: 14px; padding: 14px 18px !important; border-color: rgba(0,0,0,.08) !important; color: #212529 !important; text-decoration: none !important; background: #fff; }
.dstsupport a.dstsupport-item:hover { background: #f8f9fa; }
.dstsupport .dstsupport-item > .material-icons { flex: 0 0 auto; margin: 1px 0 0 !important; font-size: 24px; color: #28a745; }
.dstsupport .dstsupport-text { flex: 1 1 auto; min-width: 0; }
.dstsupport .dstsupport-label { font-weight: 600; font-size: 1rem; line-height: 1.35; overflow-wrap: anywhere; }
.dstsupport .dstsupport-sub { margin-top: 2px; font-weight: 400 !important; font-size: .875rem; line-height: 1.45; color: #6c757d; }
.dstsupport .dstsupport-text img { max-width: 100%; height: auto; margin-top: 8px; }

/* the question form (inc/askaquestionform.asp): labels above full-width 38px boxes, a green full-width Submit */
.dstsupport #questionform .text-center { text-align: left !important; }
.dstsupport #questionform p.description { margin: 0 0 16px !important; font-size: .95rem; line-height: 1.45; color: #6c757d; }
.dstsupport #questionform .form-group { margin: 0 0 14px !important; padding: 0 !important; }
.dstsupport #questionform label { display: block; position: static !important; margin: 0 0 4px !important; font-size: .85rem !important; font-weight: 600; color: #495057 !important; transform: none !important; }
.dstsupport #questionform .form-control {
	height: 38px !important; padding: 6px 10px !important; font-size: 1rem !important; line-height: 1.5; color: #212529;
	border: 1px solid #ced4da !important; border-radius: .375rem !important; background: #fff !important; background-image: none !important; box-shadow: none !important; }
.dstsupport #questionform textarea.form-control { height: auto !important; min-height: 120px; resize: vertical; }
.dstsupport #questionform .form-control:focus { border-color: #80bdff !important; outline: 0; box-shadow: 0 0 0 .2rem rgba(0,123,255,.25) !important; }
.dstsupport #questionform fieldset.securityCheck { margin: 0 !important; padding: 0 !important; border: 0 !important; }
.dstsupport #questionform fieldset.securityCheck .form-group:empty { display: none; }
.dstsupport #questionform #submit { margin: 4px 0 0 !important; padding: 12px 16px !important; font-size: 1rem !important; font-weight: 600; text-transform: none !important;
	border-radius: .5rem !important; box-shadow: none !important; }
.dstsupport #result:not(:empty) { margin-top: 12px; }

@media (min-width: 768px) {
	.dstsupport .dstsupport-contact { order: 2; }
	.dstsupport .dstsupport-formcol { order: 1; }
}
@media (max-width: 767.98px) {
	.main-raised:has(> .dstsupport) { width: auto !important; margin: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
	.dstsupport, .dstsupport .container { width: auto !important; max-width: 100% !important; }
	.dstsupport .container { padding-left: 16px !important; padding-right: 16px !important; }
	.dstsupport .row { margin-left: 0 !important; margin-right: 0 !important; }
	.dstsupport .row > [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; }
	.dstsupport .title { font-size: 1.75rem !important; margin-top: 8px !important; }
	.dstsupport .dstsupport-intro { font-size: .95rem; }
	.dstsupport .dstsupport-card > .card-body { padding: 16px !important; }
}

/* =============================== Order Status =============================== */
/* ECT's lookup / result (vsadmin/inc/incorderstatus.asp) sits in a dark card placed straight in a .row, so it hung off the
   right edge. One centered white card instead; ECT's markup is untouched. */
.row:has(> .card .ectorderstatus) { margin: 0 !important; justify-content: center; }
.card.bg-dark:has(.ectorderstatus) { width: 100%; max-width: 760px; margin: 0 auto 32px !important; background: #fff !important; color: #212529 !important;
	border: 1px solid rgba(0,0,0,.125) !important; border-radius: .5rem !important; box-shadow: none !important; }
.card.bg-dark:has(.ectorderstatus) > .card-body { padding: 20px 24px !important; }
.ectorderstatus { width: auto !important; margin: 0 !important; padding: 0 !important; color: #212529; text-align: left; }
.ectorderstatus .ectdivhead { margin: 0 0 6px !important; padding: 0 !important; border: 0 !important; background: none !important; text-align: left !important;
	font-size: 1.25rem; font-weight: 600; color: #212529 !important; }
.ectorderstatus > .ectdiv2column { margin: 0 0 16px !important; padding: 0 !important; text-align: left !important; font-size: .95rem; line-height: 1.45; color: #6c757d; }
/* lookup fields: label above a full-width box */
.ectorderstatus .ectdivcontainer:has(input) { display: block !important; width: auto !important; margin: 0 0 14px !important; padding: 0 !important; }
.ectorderstatus .ectdivcontainer:has(input) > div { display: block !important; width: auto !important; float: none !important; padding: 0 !important; margin: 0 !important; text-align: left !important; }
.ectorderstatus .ectdivcontainer:has(input) > .ectdivleft { margin: 0 0 4px !important; font-size: .85rem; font-weight: 600; color: #495057; }
.ectorderstatus input[type=text] { display: block; width: 100% !important; max-width: none !important; height: 38px !important; margin: 0 !important; padding: 6px 10px !important;
	font-size: 1rem !important; color: #212529; border: 1px solid #ced4da !important; border-radius: .375rem !important; background: #fff !important; box-shadow: none !important; }
.ectorderstatus input[type=text]:focus { border-color: #80bdff !important; outline: 0; box-shadow: 0 0 0 .2rem rgba(0,123,255,.25) !important; }
.ectorderstatus .vieworderstatus { margin: 4px 0 0 !important; padding: 12px 16px !important; font-size: 1rem !important; font-weight: 600; text-transform: none !important;
	border-radius: .5rem !important; box-shadow: none !important; }
.ectorderstatus > .ectdiv2column:has(.vieworderstatus) { margin: 0 !important; }
/* result: Status / Date / Time / Tracking as a label / value list; errors in red */
.ectorderstatus .ectdivcontainer:not(:has(input)) { display: grid !important; width: auto !important; grid-template-columns: 110px minmax(0, 1fr); column-gap: 12px;
	margin: 0 !important; padding: 8px 0 !important; border-top: 1px solid #e9ecef; }
.ectorderstatus .ectdivcontainer:not(:has(input)) > div { width: auto !important; float: none !important; padding: 0 !important; margin: 0 !important; text-align: left !important; }
.ectorderstatus .ectdivcontainer:not(:has(input)) > .ectdivleft { font-size: .85rem; color: #6c757d; line-height: 1.6; }
.ectorderstatus .ectdivcontainer:not(:has(input)) > .ectdivright { font-weight: 600; }
.ectorderstatus .ectdivcontainer:not(:has(input)) + .ectdiv2column { margin-top: 8px !important; }
/* lookup error ("Please enter a valid order id."): a red alert box */
.ectorderstatus .ectdivcontainer:not(:has(input)):has(> .ectwarning) { display: block !important; margin: 0 0 14px !important; padding: 10px 12px !important;
	border: 1px solid #f5c6cb !important; border-radius: .375rem; background: #f8d7da; }
.ectorderstatus .ectdivcontainer:not(:has(input)):has(> .ectwarning) > .ectdivleft { font-size: .8rem; color: #721c24; line-height: 1.4; }
.ectorderstatus .ectdivright.ectwarning { color: #721c24 !important; font-weight: 600; }
.ectorderstatus .tracknumline { margin: 0 0 2px !important; }
.ectorderstatus .tracknumline a { color: #007bff; text-decoration: underline; }
/* receipt under the result (styled by css/dstcheckout.css): no "Order Complete!" heading here, and a gap before the next lookup */
.ectorderstatus .orderreceipt > input.continueshopping { display: none !important; }
.ectorderstatus .ectdiv2column:has(.orderreceipt) { margin: 12px 0 20px !important; padding: 0 !important; color: inherit; font-size: 1rem; }
.ectorderstatus .ectdiv2column:has(.orderreceipt) + .ectdiv2column { padding-top: 16px !important; border-top: 1px solid #dee2e6 !important; }
/* an unfinished order ("Order Found" + Continue Checkout) uses the same dark card */
.card.bg-dark:has(form[name=recart]) { background: #fff !important; color: #212529 !important; border: 1px solid rgba(0,0,0,.125) !important; border-radius: .5rem !important; box-shadow: none !important; }
.card.bg-dark:has(form[name=recart]) .cart2header { text-align: left !important; font-size: 1.25rem; font-weight: 600; color: #212529 !important; border: 0 !important; padding: 0 0 8px !important; }
.card.bg-dark:has(form[name=recart]) label { margin: 8px 0 2px; font-size: .85rem; color: #6c757d; }
.card.bg-dark:has(form[name=recart]) .cartstateselector { font-weight: 600; }
.card.bg-dark:has(form[name=recart]) input[type=submit] { margin-top: 16px; border-radius: .5rem !important; text-transform: none !important; font-weight: 600; }
@media (max-width: 767.98px) {
	.card.bg-dark:has(.ectorderstatus) { margin: 0 0 24px !important; }
	.card.bg-dark:has(.ectorderstatus) > .card-body { padding: 16px !important; }
	.ectorderstatus .ectdivcontainer:not(:has(input)) { grid-template-columns: 90px minmax(0, 1fr); }
}