/* Page Create order and checkout pages (/order/, /checkout/, /order-1/ … /order-dev/, /checkout-2/, /purchase/).
   Loaded after site.css. Values measured from the WordPress pages at 1440, 768 and 375px. */

/* ---------------------------------------------------------------------------
   Grey title bar under the header ("Order Summary"), the theme's page title strip
   --------------------------------------------------------------------------- */
.title-bar { background: #444; }
.title-bar .container { display: flex; align-items: center; min-height: 56px; padding-top: 10px; padding-bottom: 10px; }
.title-bar h1 { margin: 0; color: #eee; font-size: 16px; font-weight: 700; line-height: 19.2px; letter-spacing: 0; }
.title-bar a { color: inherit; text-decoration: none; }

/* ---------------------------------------------------------------------------
   Logo + "Order Summary" heading band (blank-template order pages)
   --------------------------------------------------------------------------- */
.order-top > .container { padding-top: 70px; padding-bottom: 20px; }
.order-top .row { align-items: center; }
.order-top .logo { display: block; width: 184px; }
.order-top h1 { margin: 0; color: #223949; font-weight: 700; }
.order-main > .container { padding-top: 50px; padding-bottom: 50px; }

/* ---------------------------------------------------------------------------
   Tab box ("Order Summary" / "FAQs")
   --------------------------------------------------------------------------- */
.tabs [role="tablist"] { display: flex; }
.tabs [role="tab"] { margin: 0 -1px 0 0; padding: 12px 16px 14px; border: 1px solid var(--line); border-bottom: 0; border-radius: 0 2px 0 0; background: none; color: var(--body); font: 400 12px/24.75px var(--font-body); cursor: pointer; }
.tabs [role="tab"]:first-child { border-radius: 2px 0 0; }
.tabs [role="tab"][aria-selected="true"] { position: relative; z-index: 1; margin-bottom: -1px; padding-bottom: 15px; background: #f8f8f8; font-weight: 700; }
.tabs [role="tabpanel"] { padding: 21px 19px; border: 1px solid var(--line); border-radius: 0 2px 2px; background: #f8f8f8; }
.tabs [role="tabpanel"] > :first-child { margin-top: 0; }
.tabs [role="tabpanel"] > :last-child { margin-bottom: 0; }
.tabs ul { margin-bottom: 20px; }
.tabs li { padding: 3px 0; }
.tabs h4 { margin: 0 0 4px; text-align: right; }
.tabs h4 del { color: #ddd; font-weight: 400; }
.tabs .faq h3 + p { margin-bottom: 0; }
.tabs .faq p + h3 { margin-top: 30px; }
.tabs .note { margin: 0; text-align: right; }
@media (max-width: 767px) {
  /* Phones: the active tab becomes a full-width grey bar, as on WordPress */
  .tabs [role="tab"] { flex: 1; margin-right: 0; text-align: left; }
  .tabs [role="tab"][aria-selected="true"] { padding: 12px 16px 14px; margin-bottom: 0; border-color: #666; background: #666; color: #fff; }
  .tabs [role="tab"]:not([aria-selected="true"]) { display: none; }
  .tabs [role="tabpanel"] { padding: 21px 26px 40px; }
}

/* ---------------------------------------------------------------------------
   Payment column (former WP Simple Pay form): 400px fields, green pay button
   --------------------------------------------------------------------------- */
.pay h3 { margin-bottom: 8px; }
.pay .order-form .field { margin-bottom: 17px; }
.pay .order-form label { margin-left: -1px; }
.pay .order-form input[type=text], .pay .order-form input[type=email] { max-width: 400px; margin: 0 1px; border-color: var(--line); box-shadow: 0 0 0 1px rgba(0, 0, 0, .05) inset; }
.pay .order-form .options label { margin: 0 0 6px; color: #333; font-size: 13.8px; font-weight: 700; }
.pay .order-form .options input { margin: 0 4px 0 0; }
.pay .order-form .totals { max-width: 402px; margin: 0 0 17px; font-size: 15px; }
.pay .order-form .totals .grand { font-weight: 400; }
.pay .choose-amount { margin: 0 0 6px; color: #333; font-size: 17px; line-height: 25.5px; }
.pay .lead { margin: 0 0 12px; color: var(--ink); font: 600 18px/19.8px var(--font-body); }
.pay .seals-row { display: flex; align-items: flex-start; margin-top: 30px; }
.pay .seals-row .seals { display: block; width: 33%; margin: 0; padding: 10px 10px 0 0; }
.pay .seals-row .seals img { display: block; margin-bottom: 6px; }
.pay .seals-row .seals .cards { width: 150px; }
.pay .seals-row .guarantee { width: 66%; padding: 10px 0 0 20px; }
.pay .seals-row .guarantee img { width: 60px; padding-bottom: 10px; }
.pay .seals-row .guarantee p { max-width: 175px; padding: 10px 0 0 10px; }

/* ---------------------------------------------------------------------------
   Caldera-style checkout card (/order/, /checkout/): grey card, delivery radios, coral button
   --------------------------------------------------------------------------- */
.order-band > .container { padding-top: 40px; padding-bottom: 20px; }
.order-band .row { align-items: flex-start; }
.order-band .summary h3 { margin-bottom: 8px; }
.order-band .summary ul { margin-bottom: 20px; }
.order-band .summary li { padding: 3px 0; }
.order-band .toggles { margin-bottom: 20px; }
/* Below 990px the theme stacks this page as bullets, then the checkout card, then the FAQs */
@media (max-width: 989px) {
  .order-band .row { display: flex; flex-direction: column; align-items: stretch; }
  .order-band .row > .col { width: 100%; margin-left: 0; }
  .order-band .summary { display: contents; }
  .order-band .summary > * { order: 1; }
  .order-band .summary > .faq-title, .order-band .summary > .toggles { order: 3; }
  .order-band .row > .col:last-child { order: 2; margin-bottom: 30px; }
  .order-band .checkout-card { padding: 0; border: 0; background: none; }
}
.checkout-card { padding: min(49px, 3.6vw); border: 1px solid #ddd; background: rgba(232, 232, 232, .77); }
.checkout-card .order-form { color: var(--body); font-family: var(--font-body); }
.checkout-card .order-form label { margin-bottom: 5px; color: var(--body); font-size: 13.8px; line-height: 24.75px; }
.checkout-card .order-form input[type=text], .checkout-card .order-form input[type=email] { height: 34px; margin-bottom: 20px; padding: 8px 6px; border-color: var(--line); }
.checkout-card .order-form .field { margin: 0; }
.checkout-card .req { color: #e00; }
.checkout-card .choose { margin: 0 0 14.45px; color: var(--coral); font-weight: 700; }
.checkout-card .options { margin: 0 0 8px; }
.checkout-card .options label { margin: 0 0 6px; font-size: 13.8px; font-weight: 700; }
.checkout-card .options input { margin: 0 6px 0 0; }
.checkout-card .total-line { margin: 0 0 14px; color: var(--ink); font-size: 18px; font-weight: 600; line-height: 19.8px; }
.checkout-card .btn-checkout { height: 34px; padding: 6px 12px; border: 1px solid #c24026; border-radius: 2px; background: var(--coral); color: #fff; font: 700 14px/20px var(--font-display); cursor: pointer; }
.checkout-card .coupon-field input { margin-bottom: 20px; }
.checkout-card .seals-row { display: flex; align-items: flex-start; margin-top: 30px; }
.checkout-card .seals-row .seals { width: 33%; margin: 0; padding: 10px 10px 0 0; }
.checkout-card .seals-row .guarantee { width: 66%; }
.checkout-card .seals-row .guarantee p { max-width: 175px; }

/* ---------------------------------------------------------------------------
   Contact band with the brokerage logos (shared/partials/contact-trusted.html)
   --------------------------------------------------------------------------- */
.contact-trusted .head { display: flex; align-items: center; }
.contact-trusted .head h3 { margin: 0; }
.contact-trusted .icon { display: flex; flex: none; align-items: center; justify-content: center; width: 27px; height: 27px; margin: -3px 10px 0 0; border-radius: 50%; background: var(--teal); }
.contact-trusted .icon svg { width: 15px; height: 15px; margin: 0; fill: #fff; }
.contact-trusted .body { margin-top: 16px; }
.contact-trusted .body > :first-child { margin-top: 0; }
.contact-trusted .logo-line { margin-bottom: 0; line-height: 0; }
.contact-trusted .address { margin: 14.45px 0 0; }
.contact-trusted .address i { font-style: normal; }   /* WordPress loaded no italic Lato, so the address set upright */
.contact-trusted .trusted { text-align: center; }
.contact-trusted .trusted p { color: #fff; }
.contact-trusted .trusted img { display: block; margin: 24px auto 10px; }
@media (max-width: 767px) {
  .contact-trusted .trusted { margin-top: 20px; }
}

@media (max-width: 767px) {
  .order-top > .container { padding-top: 60px; padding-bottom: 70px; }
  .order-top .logo { width: 249px; margin-bottom: 30px; }
  .order-top h1 { font-size: 34px; }
  .order-main .col + .col { margin-top: 30px; }
  .pay .seals-row .guarantee p { max-width: none; }
  .checkout-card { margin-top: 0; padding: 0; border: 0; background: none; }
}