/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */

/*
 * Checkout palette
 * Keep checkout styling isolated from Creative Elements and the rest of the
 * storefront. The brand purple replaces the Classic theme green/cyan accents.
 */
body#checkout,
body#cart,
body .elementor-cart__container,
body #blockcart-modal {
  --checkout-brand: #8c4fae;
  --checkout-brand-dark: #6f3a8c;
  --checkout-brand-light: #dda0ff;
  --checkout-brand-soft: #25152e;
  --checkout-text: #fff;
  --checkout-muted: #d3c8d8;
  --checkout-border: #60406c;
  --checkout-surface: #080808;
  --checkout-field: #171419;
}

/* Cart page and Creative Elements cart preview: the same dark shop palette. */
body#cart #wrapper,
body#cart #main {
  background: #000;
  color: var(--checkout-text);
}

body#cart .cart-grid .card,
body#cart .cart-grid .card-block,
body#cart .cart-grid .cart-summary-totals,
body#cart .cart-grid .cart-voucher {
  background: var(--checkout-surface);
  color: var(--checkout-text);
  box-shadow: none;
}

body#cart .cart-grid .card {
  border: 1px solid var(--checkout-border);
  border-radius: 4px;
}

body#cart .cart-grid :is(h1, h2, h3, p, .label, .value, .product-price, .price, strong),
body#cart .breadcrumb li {
  color: var(--checkout-text);
}

body#cart .cart-grid :is(a.label, .product-line-info > a, .remove-from-cart),
body#cart .breadcrumb a,
body#cart .cart-voucher a {
  color: var(--checkout-brand-light);
}

body#cart .cart-grid :is(a.label, .remove-from-cart):hover,
body#cart .breadcrumb a:hover {
  color: #f0d1ff;
}

body#cart .cart-grid :is(.text-muted, small, .discount, .regular-price) {
  color: var(--checkout-muted) !important;
}

body#cart .cart-grid :is(hr, .cart-item, .cart-summary-totals, .card-block) {
  border-color: var(--checkout-border);
}

body#cart .cart-grid :is(input, select, textarea) {
  color: #fff;
  background: var(--checkout-field);
  border: 1px solid #9475a3;
  color-scheme: dark;
}

body#cart .cart-grid .bootstrap-touchspin {
  width: 88px;
  min-width: 88px;
  box-shadow: none;
}

body#cart .cart-grid .bootstrap-touchspin input {
  width: 60px;
  min-width: 0;
  height: 44px;
  text-align: center;
}

body#cart .cart-grid .bootstrap-touchspin .btn-touchspin {
  width: 28px;
  height: 22px;
  padding: 0;
  background: var(--checkout-brand);
  color: #fff;
  border-color: #b981d4;
}

body#cart .cart-grid .btn-primary {
  color: #fff;
  background: var(--checkout-brand);
  border: 1px solid var(--checkout-brand);
  white-space: normal;
}

body#cart .cart-grid .btn-primary:hover {
  color: #fff;
  background: var(--checkout-brand-dark);
  border-color: var(--checkout-brand-dark);
}

body#cart .cart-grid .btn-primary:disabled,
body#cart .cart-grid .btn-primary.disabled {
  background: #332c36;
  color: #c8bdcc;
  opacity: 1;
}

body#cart .cart-grid :is(a, button, input):focus-visible,
body .elementor-cart__container :is(a, button):focus-visible,
body #blockcart-modal :is(a, button):focus-visible {
  outline: 2px solid #dda0ff;
  outline-offset: 3px;
}

body .elementor-cart__container .elementor-cart__main {
  background: var(--checkout-surface);
  color: #fff;
  border-left: 1px solid var(--checkout-border);
  color-scheme: dark;
}

body .elementor-cart__container :is(.elementor-cart__title, .elementor-cart__product-name a,
  .elementor-cart__summary-label, .elementor-cart__summary-value, .elementor-cart__empty-message) {
  color: #fff;
}

body .elementor-cart__container :is(.elementor-cart__product-price, .elementor-cart__product-attrs) {
  color: var(--checkout-muted);
}

body .elementor-cart__container :is(.elementor-cart__close-button, .elementor-cart__product-remove) {
  color: var(--checkout-brand-light) !important;
}

body .elementor-cart__container .elementor-cart__product-name a {
  color: #fff !important;
}

body#cart .cart-grid [paypal-messaging-banner] {
  margin-top: 12px;
  padding: 8px;
  background: #fff;
  border-radius: 4px;
}

body#cart .cart-grid iframe[title^="PayPal Message"] {
  background-color: #fff !important;
}

body .elementor-cart__container :is(.elementor-cart__products, .elementor-cart__product, .elementor-cart__summary) {
  border-color: var(--checkout-border);
}

body .elementor-cart__container .elementor-cart__footer-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

body .elementor-cart__container .elementor-cart__footer-buttons > div {
  width: 100%;
  margin: 0;
}

body .elementor-cart__container .elementor-cart__footer-buttons .elementor-button {
  width: 100%;
  margin: 0;
  color: #fff;
  background: var(--checkout-brand);
  border: 1px solid var(--checkout-brand);
  line-height: 1.4;
}

body .elementor-cart__container .elementor-cart__footer-buttons .elementor-button--cart {
  background: var(--checkout-field);
  border-color: #9475a3;
  color: var(--checkout-brand-light);
}

body .elementor-cart__container .elementor-cart__footer-buttons .elementor-button:hover {
  background: var(--checkout-brand-dark);
  color: #fff;
}

/* Native confirmation popup, when the add-to-cart widget uses it. */
body #blockcart-modal :is(.modal-content, .modal-body, .cart-content) {
  background: var(--checkout-surface);
  color: #fff;
}

body #blockcart-modal .modal-content {
  border: 1px solid var(--checkout-border);
}

body #blockcart-modal .modal-header {
  background: var(--checkout-brand-soft);
  border-color: var(--checkout-border);
}

body #blockcart-modal :is(.modal-title, .product-name, .product-price, p, strong, .cart-products-count, .close) {
  color: #fff;
}

body #blockcart-modal .product-name {
  color: var(--checkout-brand-light);
}

body #blockcart-modal .close {
  opacity: 1;
  text-shadow: none;
}

body #blockcart-modal .modal-header .material-icons {
  color: var(--checkout-brand-light) !important;
}

body #blockcart-modal .cart-content :is(.cart-products-count, .label, .value) {
  color: #fff;
}

body #blockcart-modal .cart-content .product-total {
  background: var(--checkout-brand-soft);
  color: #fff;
}

body #blockcart-modal .divide-right {
  border-color: var(--checkout-border);
}

body #blockcart-modal .btn-primary {
  background: var(--checkout-brand);
  border-color: var(--checkout-brand);
  color: #fff;
}

body #blockcart-modal .btn-secondary {
  background: var(--checkout-field);
  border: 1px solid #9475a3;
  color: var(--checkout-brand-light);
}

body #blockcart-modal :is(.btn-primary, .btn-secondary):hover {
  background: var(--checkout-brand-dark);
  color: #fff;
}

@media (max-width: 767px) {
  body#cart .cart-grid .product-line-grid-right .price {
    min-width: 90px;
  }

  body#cart .cart-grid .cart-detailed-actions .btn-primary {
    width: 100%;
  }

  body #blockcart-modal .cart-content-btn :is(a, button) {
    display: block;
    width: 100%;
    margin: 12px 0 0;
    white-space: normal;
  }
}

/* Creative Elements owns footer spacing; remove Classic checkout's white frame. */
body#checkout #footer {
  padding: 0;
  background: #000;
}

body#checkout section.checkout-step,
body#checkout .cart-grid-right .card,
body#checkout .blockreassurance_product {
  color: var(--checkout-text);
  background: var(--checkout-surface);
}

body#checkout section.checkout-step {
  border: 1px solid var(--checkout-border);
  border-bottom: 0;
  box-shadow: none;
}

body#checkout section.checkout-step:first-child {
  border-radius: 4px 4px 0 0;
}

body#checkout section.checkout-step:last-child {
  border-bottom: 1px solid var(--checkout-border);
  border-radius: 0 0 4px 4px;
}

body#checkout section.checkout-step .step-title {
  color: var(--checkout-text);
  border-bottom-color: var(--checkout-border);
}

body#checkout section.checkout-step .step-number,
body#checkout section.checkout-step.-reachable.-current .step-number,
body#checkout section.checkout-step.-current.-reachable.-complete .step-number {
  color: #fff;
  background: var(--checkout-brand);
}

body#checkout section.checkout-step .done,
body#checkout section.checkout-step .step-edit,
body#checkout section.checkout-step.-reachable.-complete h1 .done,
body#checkout section.checkout-step.-reachable.-complete h1 .step-edit {
  color: var(--checkout-brand-light);
}

body#checkout section.checkout-step.-current .step-title,
body#checkout section.checkout-step .nav-link.active {
  color: var(--checkout-brand-light);
}

body#checkout a,
body#checkout section.checkout-step .add-address a {
  color: var(--checkout-brand-light);
  text-decoration-color: currentColor;
}

body#checkout a:hover,
body#checkout a:focus-visible,
body#checkout section.checkout-step .add-address a:hover {
  color: #f0d1ff;
}

body#checkout .btn-primary,
body#checkout section.checkout-step .btn-primary {
  color: #fff;
  background: var(--checkout-brand);
  border-color: var(--checkout-brand);
}

body#checkout .btn-primary:hover,
body#checkout .btn-primary:active,
body#checkout .btn-primary:focus-visible,
body#checkout section.checkout-step .btn-primary:hover,
body#checkout section.checkout-step .btn-primary:active,
body#checkout section.checkout-step .btn-primary:focus-visible {
  color: #fff;
  background: var(--checkout-brand-dark);
  border-color: var(--checkout-brand-dark);
}

body#checkout .btn-primary:disabled,
body#checkout .btn-primary.disabled,
body#checkout section.checkout-step .btn-primary:disabled,
body#checkout section.checkout-step .btn-primary.disabled {
  color: #c8bdcc;
  background: #332c36;
  border-color: #4b4050;
  opacity: 1;
}

body#checkout .form-control,
body#checkout section.checkout-step input.form-control,
body#checkout section.checkout-step select.form-control,
body#checkout section.checkout-step textarea,
body#checkout section.checkout-step .input-group .input-group-btn > .btn {
  color: var(--checkout-text);
  background: var(--checkout-field);
  border-color: var(--checkout-border);
}

body#checkout .form-control::placeholder,
body#checkout section.checkout-step textarea::placeholder {
  color: #b9aebe;
  opacity: 1;
}

body#checkout .form-control:focus,
body#checkout section.checkout-step textarea:focus,
body#checkout section.checkout-step input:focus-visible,
body#checkout section.checkout-step select:focus-visible,
body#checkout section.checkout-step button:focus-visible,
body#checkout section.checkout-step a:focus-visible {
  border-color: var(--checkout-brand);
  outline: 3px solid rgba(140, 79, 174, 0.35);
  outline-offset: 2px;
  box-shadow: none;
}

body#checkout section.checkout-step small,
body#checkout section.checkout-step .form-control-comment,
body#checkout section.checkout-step .text-muted,
body#checkout .cart-grid-right .card .cart-summary-subtotals-container .label {
  color: var(--checkout-muted);
}

body#checkout section.checkout-step .nav-link.active,
body#checkout section.checkout-step .address-alias,
body#checkout section.checkout-step .carrier-name,
body#checkout .cart-grid-right .card .cart-total,
body#checkout .cart-grid-right .card .value {
  color: var(--checkout-text);
}

body#checkout section.checkout-step label,
body#checkout section.checkout-step p,
body#checkout section.checkout-step .form-control-label,
body#checkout section.checkout-step .condition-label,
body#checkout section.checkout-step .payment-options label,
body#checkout section.checkout-step .carrier-delay,
body#checkout section.checkout-step .address,
body#checkout .cart-grid-right .card,
body#checkout .cart-grid-right .card .label,
body#checkout .cart-grid-right .card .cart-summary-line,
body#checkout .cart-grid-right .card .cart-summary-line .value {
  color: var(--checkout-text);
}

body#checkout section.checkout-step .nav-link:not(.active) {
  color: var(--checkout-muted);
}

body#checkout section.checkout-step .address-item.selected {
  background: var(--checkout-brand-soft);
  border-color: var(--checkout-brand-light);
}

body#checkout .cart-grid-right .card,
body#checkout .blockreassurance_product {
  border: 1px solid var(--checkout-border);
  box-shadow: none;
}

body#checkout section.checkout-step .delivery-options .delivery-option {
  background: #111;
  border-color: var(--checkout-border);
}

body#checkout section.checkout-step .custom-radio {
  background: #111;
  border-color: #bdaec4;
}

body#checkout section.checkout-step .custom-radio input[type="radio"]:checked + span {
  background: var(--checkout-brand);
}

body#checkout .custom-checkbox input[type="checkbox"] + span {
  background: #111;
  border-color: #bdaec4;
}

body#checkout .custom-checkbox input[type="checkbox"]:checked + span {
  color: #fff;
  background: var(--checkout-brand);
  border-color: var(--checkout-brand);
}

body#checkout .blockreassurance_product {
  margin-top: 1.5rem;
  padding: 1rem;
  border: 1px solid var(--checkout-border);
  border-radius: 4px;
}

body#checkout .blockreassurance_product,
body#checkout .blockreassurance_product p,
body#checkout .blockreassurance_product span,
body#checkout .blockreassurance_product strong {
  color: var(--checkout-text) !important;
}

body#checkout .blockreassurance_product .block-title,
body#checkout .blockreassurance_product .material-icons,
body#checkout .blockreassurance_product img {
  color: var(--checkout-brand-light) !important;
}

body#checkout .blockreassurance_product p {
  color: var(--checkout-muted) !important;
}

body#checkout .cart-grid-right > div:has(iframe[title^="PayPal Message"]) {
  margin-top: 1rem;
  padding: 0.5rem;
  background: #fff;
  border: 1px solid var(--checkout-border);
  border-radius: 4px;
}

body#checkout iframe[title^="PayPal Message"] {
  background-color: #fff !important;
  border-radius: 4px;
}

body#checkout section.checkout-step .step-edit,
body#checkout section.checkout-step .step-edit .edit,
body#checkout section.checkout-step .nav-link.active {
  color: var(--checkout-brand-light) !important;
}

@media (max-width: 767px) {
  body#checkout section.checkout-step .step-title {
    font-size: 1.15rem;
    line-height: 1.35;
  }

  body#checkout section.checkout-step .step-edit {
    font-size: 0.8rem;
  }

  body#checkout .blockreassurance_product {
    margin-bottom: 1rem;
  }
}

/* Informative CMS 1/3/20: readable dark theme, without changing other pages. */
body#cms:is(.cms-id-1, .cms-id-3, .cms-id-20) #content {
  background: #000;
  color: #fff;
  font-size: 16px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

body#cms:is(.cms-id-1, .cms-id-3, .cms-id-20) #content :is(p, li) {
  color: #fff;
  font-size: 16px;
  line-height: 1.65;
  text-align: left;
}

body#cms:is(.cms-id-1, .cms-id-3, .cms-id-20) :is(.page-header h1, #content h2, #content h3) {
  color: #dda0ff;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

body#cms:is(.cms-id-1, .cms-id-3, .cms-id-20) #content :is(h2, h3) {
  margin-top: 1.6em;
  margin-bottom: 0.6em;
}

body#cms:is(.cms-id-1, .cms-id-3, .cms-id-20) #content a {
  color: #dda0ff;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

body#cms:is(.cms-id-1, .cms-id-3, .cms-id-20) #content a:hover {
  color: #fff;
}

body#cms:is(.cms-id-1, .cms-id-3, .cms-id-20) :is(#content, .breadcrumb) a:focus-visible {
  outline: 2px solid #dda0ff;
  outline-offset: 3px;
}

body#cms:is(.cms-id-1, .cms-id-3, .cms-id-20) .breadcrumb :is(li, a) {
  color: #fff;
}
