/*
 Theme Name:   Divi Lover
 Description:  This is a sample child theme
 Author:       Ania R.
 Template:     Divi
 Version:      1.4
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  dl
*/

html {
    scrollbar-gutter: stable;
}
::view-transition-image-pair(root) {
    isolation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
    display: block;
}
:root {
    /* Divi global color "Pink Light" (gcid-jeso1n63pu). Divi only prints it when something uses it, so keep a fallback. */
    --dl-button-hover: var(--gcid-jeso1n63pu, #FF99B2);
    --dl-text-main: #19191a;
    --dl-text-mid: #6A6E7B;
    --dl-primary-light: #FF99B2;
    --dl-secondary-light: #FFB399;
    --dl-panel-mid: #A2A5AF;
    --dl-canvas: #ffffff;
    --dl-canvas-reversed: #2B2F3B;
    --dl-panel: #EEF2F2;
    --dl-border: #D3D6DF;
    --dl-panel-reversed: #363B4A;
    --dl-text-reversed: #fff;
    --dl-font-regular: 400;
    --dl-font-medium: 500;
    --dl-font-bold: 700;
    --dl-font-extra: 800;
    --dl-font-black: 900;
    --dl-text-dark: #19191a;
}

[data-theme="dark"] {
    --dl-text-main: #ffffff;
    --dl-text-mid: #A2A5AF;
    --dl-panel-mid: #6A6E7B;
    --dl-canvas: #2B2F3B;
    --dl-canvas-reversed: #ffffff;
    --dl-panel: #363B4A;
    --dl-border: #565E76;
    --dl-panel-reversed: #EEF2F2;
    --dl-text-reversed: #19191a;
    --dl-font-regular: 400;
    --dl-font-medium: 500;
    --dl-font-bold: 700;
    --dl-font-extra: 800;
    --dl-font-black: 870;
}
body, #main-content, .et_pb_section, .single-sc_product #et-boc .et-l .et_pb_section {
    background-color:var(--dl-canvas);
    color:var(--dl-text-main);
}

/* Soft shadow: add .has-shadow to any element (module, group, row, column, image).
   Add .shadow-reversed (on the element or a parent) to flip it for reversed panels:
   stronger in light mode, softer in dark mode. */
:root {
  --dl-shadow-soft: 0px 1px 1px rgba(25, 25, 26, 0.01),
    0px 3px 3px rgba(25, 25, 26, 0.02),
    0px 6px 8px rgba(25, 25, 26, 0.03),
    0px 11px 13px rgba(25, 25, 26, 0.05),
    0px 17px 21px rgba(25, 25, 26, 0.06),
    0px 24px 30px rgba(25, 25, 26, 0.07),
    0px 33px 41px rgba(25, 25, 26, 0.08);
  --dl-shadow-strong: 0px 1px 1px rgba(25, 25, 26, 0.04),
    0px 3px 3px rgba(25, 25, 26, 0.08),
    0px 6px 8px rgba(25, 25, 26, 0.12),
    0px 11px 13px rgba(25, 25, 26, 0.15),
    0px 17px 21px rgba(25, 25, 26, 0.19),
    0px 24px 30px rgba(25, 25, 26, 0.23),
    0px 33px 41px rgba(25, 25, 26, 0.27);
}
.has-shadow { --dl-shadow: var(--dl-shadow-soft); }
[data-theme="dark"] .has-shadow,
.shadow-reversed.has-shadow,
.shadow-reversed .has-shadow { --dl-shadow: var(--dl-shadow-strong); }
[data-theme="dark"] .shadow-reversed.has-shadow,
[data-theme="dark"] .shadow-reversed .has-shadow { --dl-shadow: var(--dl-shadow-soft); }

.has-shadow:not(.et_pb_image),
.et_pb_module.has-shadow:not(.et_pb_image),
.et_pb_image.has-shadow .et_pb_image_wrap {
  box-shadow: var(--dl-shadow);
}

/* body::after {
  content: "";
  position: fixed;
  inset: 10px 5vw;
  box-shadow: 0 0 0 50px var(--dl-canvas);
  border-radius: 20px;
  pointer-events: none;
  z-index: 9999;
} */

/* rounded corners */
.et_pb_module, .et_pb_section, .et_pb_row, .et_pb_column, .dl-pill, .et_pb_image_wrap {
  corner-shape:squircle;
}
mark {
  background: transparent;
  --mark-h: .7em;
  --mark-r: calc(var(--mark-h) / 2);
  --mark-color: rgba(255, 102, 128, 0.2);
  --mark-progress: 0;
  --mark-cap-right: 0;
  color: inherit;
  background-repeat: no-repeat;
  background-image:
    radial-gradient(circle var(--mark-r) at 100% 50%, var(--mark-color) 99%, transparent 100%),
    radial-gradient(circle var(--mark-r) at 0% 50%, var(--mark-color) 99%, transparent 100%),
    linear-gradient(var(--mark-color), var(--mark-color));
  background-position: left bottom, right bottom, var(--mark-r) bottom;
  background-size:
    calc(var(--mark-r) * min(1, var(--mark-progress) * 999999)) calc(var(--mark-h) * min(1, var(--mark-progress) * 999999)),
    calc(var(--mark-r) * var(--mark-cap-right)) calc(var(--mark-h) * var(--mark-cap-right)),
    calc((100% - 2 * var(--mark-r)) * var(--mark-progress)) var(--mark-h);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
[data-theme="dark"] mark {
  --mark-color: rgba(255, 102, 128, 0.4);
}
/* Header Fixes */
div#dl-header:not([data-dl-compact]) {
    background:transparent!important;
}
h1,h2,h3,h4,h5,h6 {
  padding-bottom:1rem;
}
.et_pb_heading :is(h1,h2,h3,h4,h5,h6) {
  padding-bottom:0;
}
/* Buttons */
.dl-button {
  corner-shape:squircle;
  box-shadow:0px 4px 0px 0px var(--gcid-2h75ou7t2e);
  text-align:center;
}
.dl-button:hover {
  box-shadow:0px 1px 0px 0px var(--gcid-2h75ou7t2e);
}
[data-theme="dark"] .dl-button:not(.no-shadow) {
  box-shadow:0px 4px 0px 0px var(--gcid-2h75ou7t2e), 0 10px 20px -5px hsl(225 20 50 / 60%);
}
[data-theme="dark"] .dl-button:not(.no-shadow):hover {
  box-shadow:0px 1px 0px 0px var(--gcid-2h75ou7t2e), 0 10px 30px -10px hsl(225 20 50 / 60%)
}



.dl-button.shadow-reversed {
  box-shadow:0px 4px 0px 0px var(--gcid-2h75ou7t2e), 0 10px 20px -5px hsl(225 20 50 / 60%);
}
.dl-button.shadow-reversed:hover {
  box-shadow:0px 1px 0px 0px var(--gcid-2h75ou7t2e), 0 10px 30px -10px hsl(225 20 50 / 60%)
}
[data-theme="dark"] .dl-button.shadow-reversed {
  box-shadow:0px 4px 0px 0px var(--gcid-2h75ou7t2e);
}
[data-theme="dark"] .dl-button.shadow-reversed:hover {
  box-shadow:0px 1px 0px 0px var(--gcid-2h75ou7t2e);
}


/* Light/Dark mode */
.dl-theme-toggle {
  position: relative;
}

.dl-theme-toggle svg {
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}

.sun-icon { opacity: 1; transform: rotate(0deg) scale(1); }
.moon-icon { opacity: 0; transform: rotate(-90deg) scale(0.4); position:absolute; top:0; left:0;}

[data-theme="dark"] .sun-icon { opacity: 0; transform: rotate(90deg) scale(0.4);  }
[data-theme="dark"] .moon-icon { opacity: 1; transform: rotate(0deg) scale(1); }

/* Text Links */
/* Also Link modules with the "DL Text Link" preset (the text sits in .et_pb_link_text)
   and links inside Toggle content (e.g. the FAQ answers). */
#page-container #et-boc .dl-text a,
#page-container #et-boc .et_pb_toggle_content a,
sc-checkbox.wp-block-surecart-checkbox a,
#page-container #et-boc .preset--module--divi-link--0620cdb2-e530-4066-9d40-cc2a9fd9c328 .et_pb_link_text {
  text-decoration: none;
  padding-inline: .1em;
  margin-inline: -.1em;
  padding-bottom:.1em;
  background-image:
    linear-gradient(currentColor, currentColor),
    linear-gradient(
      color-mix(in srgb, var(--gcid-primary-color) 40%, transparent),
      color-mix(in srgb, var(--gcid-primary-color) 40%, transparent)
    );

  background-repeat: no-repeat;
  background-size:
    0% 2.5px,
    100% 2.5px;
  background-position:
    left bottom,
    left bottom;
  transition:
    background-size .35s ease,
    background-position 0s .35s;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

#page-container #et-boc .dl-text a:hover,
#page-container #et-boc .et_pb_toggle_content a:hover,
sc-checkbox.wp-block-surecart-checkbox a:hover,
#page-container #et-boc .preset--module--divi-link--0620cdb2-e530-4066-9d40-cc2a9fd9c328:hover .et_pb_link_text {
  background-size:
    100% 2.5px,
    100% 2.5px;
  background-position:
    right bottom,
    left bottom;
}

/* Linked images (e.g. a Gutenberg Image block with a link) get no underline. */
#page-container #et-boc .dl-text a:has(img),
#page-container #et-boc .et_pb_toggle_content a:has(img) {
  background-image: none;
  padding: 0;
  margin-inline: 0;
}



/* Surecart Styling */
/* Checkout layout (SureCart form 109, its Columns block has the class dl-checkout).
   Desktop: details left; summary, payment, terms and button right.
   Phone: the right column dissolves so the summary goes on top and payment, terms and button below the details. */
.dl-checkout.wp-block-surecart-columns {
    background-color: var(--dl-panel) !important;
}
.dl-checkout > .wp-block-surecart-column.has-white-background-color {
    background-color: var(--dl-canvas) !important;
}
[data-theme="dark"] .dl-checkout .wp-block-surecart-store-logo img {
    filter: invert(1) hue-rotate(180deg);
}
@media (max-width: 781px) {
    .dl-checkout.wp-block-surecart-columns {
        row-gap: 0;
    }
    .dl-checkout.wp-block-surecart-columns > .wp-block-surecart-column:last-child {
        display: contents;
    }
    .dl-checkout.wp-block-surecart-columns > .wp-block-surecart-column:last-child > * {
        flex-basis: 100%;
        box-sizing: border-box;
    }
    .dl-checkout.wp-block-surecart-columns > .wp-block-surecart-column:last-child > .wp-block-surecart-totals {
        order: -1;
        padding: 30px;
        margin-bottom: 0;
    }
    .dl-checkout.wp-block-surecart-columns > .wp-block-surecart-column:last-child > :not(.wp-block-surecart-totals) {
        order: 1;
        margin-bottom: 0;
        padding: 0 30px 30px;
        background-color: var(--dl-canvas);
    }
}

/* Checkout checkboxes (terms): smaller text, roomier lines; links use the Text Links look above. */
sc-checkbox.wp-block-surecart-checkbox::part(label) {
    font-size: var(--sc-font-size-small);
    line-height: 1.55;
}

/* Checkout checkbox links: lighter, thinner underline that sits closer to the text
   (overrides the Text Links look for the small checkbox label). */
sc-checkbox.wp-block-surecart-checkbox a {
    padding-bottom: 0;
    background-image:
        linear-gradient(currentColor, currentColor),
        linear-gradient(
            color-mix(in srgb, var(--gcid-primary-color) 30%, transparent),
            color-mix(in srgb, var(--gcid-primary-color) 30%, transparent)
        );
    background-size: 0% 1.5px, 100% 1.5px;
    background-position: left calc(100% - .1em), left calc(100% - .1em);
}
sc-checkbox.wp-block-surecart-checkbox a:hover {
    background-size: 100% 1.5px, 100% 1.5px;
    background-position: right calc(100% - .1em), left calc(100% - .1em);
}

body.page-template-template-surecart-dashboard a {
    text-decoration:none;
}
/*
 * SureCart → Divi Lover tokens.
 * SureCart builds every color, size and weight from these --sc-* variables
 * (they reach inside its components), so mapping them to the --dl-* colors
 * and the Divi clamp font sizes makes SureCart follow light/dark mode and
 * the site typography everywhere (account, checkout, cart, product).
 * :root:root wins over the brand colors SureCart prints inline.
 */
:root:root {
    /* Colors – grays and white follow light/dark mode */
    --sc-color-white: var(--dl-canvas);
    --sc-color-gray-50: var(--dl-panel);
    --sc-color-gray-100: var(--dl-panel);
    --sc-color-gray-200: var(--dl-border);
    --sc-color-gray-300: var(--dl-border);
    --sc-color-gray-400: var(--dl-text-mid);
    --sc-color-gray-500: var(--dl-text-mid);
    --sc-color-gray-600: var(--dl-text-main);
    --sc-color-gray-700: var(--dl-text-main);
    --sc-color-gray-800: var(--dl-text-main);
    --sc-color-gray-900: var(--dl-text-main);
    --sc-color-gray-950: var(--dl-text-main);
    --sc-input-control-color: var(--dl-text-main); /* quantity number (defaults to black) */

    /* Brand */
    --sc-color-primary-500: var(--gcid-primary-color, #ff6699);
    --sc-focus-ring-color-primary: var(--gcid-primary-color, #ff6699);
    --sc-input-border-color-focus: var(--gcid-primary-color, #ff6699);
    --sc-color-primary-text: #fff;
    --sc-color-success-text: #fff;
    --sc-color-info-text: #fff;
    --sc-color-warning-text: #fff;
    --sc-color-danger-text: #fff;

    /* Status colors (tags, alerts) – soft in both modes */
    --sc-color-success-50: color-mix(in srgb, #22c55e 8%, var(--dl-canvas));
    --sc-color-success-100: color-mix(in srgb, #22c55e 16%, var(--dl-canvas));
    --sc-color-success-200: color-mix(in srgb, #22c55e 30%, var(--dl-canvas));
    --sc-color-success-700: color-mix(in srgb, #16a34a 70%, var(--dl-text-main));
    --sc-color-success-800: color-mix(in srgb, #16a34a 70%, var(--dl-text-main));
    --sc-color-success-900: color-mix(in srgb, #16a34a 60%, var(--dl-text-main));
    --sc-color-info-50: color-mix(in srgb, #3b82f6 8%, var(--dl-canvas));
    --sc-color-info-100: color-mix(in srgb, #3b82f6 16%, var(--dl-canvas));
    --sc-color-info-200: color-mix(in srgb, #3b82f6 30%, var(--dl-canvas));
    --sc-color-info-700: color-mix(in srgb, #2563eb 70%, var(--dl-text-main));
    --sc-color-info-800: color-mix(in srgb, #2563eb 70%, var(--dl-text-main));
    --sc-color-info-900: color-mix(in srgb, #2563eb 60%, var(--dl-text-main));
    --sc-color-warning-50: color-mix(in srgb, #f59e0b 8%, var(--dl-canvas));
    --sc-color-warning-100: color-mix(in srgb, #f59e0b 16%, var(--dl-canvas));
    --sc-color-warning-200: color-mix(in srgb, #f59e0b 30%, var(--dl-canvas));
    --sc-color-warning-700: color-mix(in srgb, #d97706 70%, var(--dl-text-main));
    --sc-color-warning-800: color-mix(in srgb, #d97706 70%, var(--dl-text-main));
    --sc-color-warning-900: color-mix(in srgb, #d97706 60%, var(--dl-text-main));
    --sc-color-danger-50: color-mix(in srgb, #ef4444 8%, var(--dl-canvas));
    --sc-color-danger-100: color-mix(in srgb, #ef4444 16%, var(--dl-canvas));
    --sc-color-danger-200: color-mix(in srgb, #ef4444 30%, var(--dl-canvas));
    --sc-color-danger-700: color-mix(in srgb, #dc2626 70%, var(--dl-text-main));
    --sc-color-danger-800: color-mix(in srgb, #dc2626 70%, var(--dl-text-main));
    --sc-color-danger-900: color-mix(in srgb, #dc2626 60%, var(--dl-text-main));

    /* Font sizes – the Divi clamp variables */
    --sc-font-size-x-small: var(--gvid-i8pms10aho, 0.75em);  /* Text small */
    --sc-font-size-small: var(--gvid-i8pms10aho, 0.875em);   /* Text small */
    --sc-font-size-medium: var(--gvid-r9pokwackb, 1em);      /* Text body */
    --sc-font-size-large: var(--gvid-ywgibgqn65, 1.15em);    /* H6 */
    --sc-font-size-x-large: var(--gvid-029s372wua, 1.25em);  /* H5 */
    --sc-font-size-xx-large: var(--gvid-cxryd7odzq, 1.45em); /* H4 */
    --sc-font-size-xxx-large: var(--gvid-ix03tf8sw0, 2em);   /* H3 */

    /* Font weights */
    --sc-font-weight-normal: var(--dl-font-regular);
    --sc-font-weight-semibold: var(--dl-font-medium);
    --sc-font-weight-bold: var(--dl-font-bold);
    --sc-input-label-font-weight: var(--dl-font-medium);
    --sc-font-sans: Figtree, sans-serif;

    /* Your existing tweaks */
    --sc-card-border-color: var(--dl-canvas);
    --sc-shadow-small: none;
    --sc-input-label-color: var(--dl-text-main);
    --sc-divider-border-top-color: var(--dl-panel);
    --sc-choice-padding-top: .4em;
    --sc-choice-padding-bottom: .4em;
    --sc-choice-padding-left: .4em;
    --sc-choice-padding-right: .4em;
    --sc-choice-border-width: 0;
    --sc-review-secondary-text-color: var(--dl-text-mid);
    --sc-skeleton-color: var(--dl-panel);
    --sc-skeleton-sheen-color: var(--dl-border);
--sc-list-row-background-color: color-mix(in srgb, var(--dl-canvas) 60%, transparent);
--sc-stacked-list-row-hover-color: color-mix(in srgb, var(--dl-canvas) 95%, transparent);
}

/* SureCart inside the Divi cards on /my-account/: no card inside a card */
.dl-account-view,
.dl-account-notice,
.surlywp-sp-customer-support-shortcode {
    font-size: var(--gvid-r9pokwackb);
    --sc-card-background-color: transparent;
    --sc-card-border-color: transparent;
    --sc-table-cell-background-color: transparent;
}

/* Login form: the "or" label sits on the Divi card, not on its own box */
.dl-account-view--login {
    --sc-divider-text-background-color: transparent;
}

/* SureCart loading overlay: the card color, half see-through, so its edges don't show */
.dl-account-view {
    --sc-block-ui-background-color: var(--dl-panel);
    --sc-block-ui-opacity: 0.6;
}

/* Password reminder: "Reminder" the same size as the "Set A Password" heading after it */
sc-password-nag::part(title) {
    font-size: var(--sc-font-size-x-large);
    font-weight: var(--sc-font-weight-bold);
    line-height: var(--sc-line-height-dense);
}

/* Account settings forms (profile, password, billing details): no inner card padding */
.dl-account-view--account,
.dl-account-view--billing sc-customer-edit {
    --sc-card-padding: 0;
}

/* Billing Details "Update" link: no pencil icon */
sc-dashboard-customer-details::part(button__prefix) {
    display: none;
}

/* Gap between the SureCart blocks in Settings (Divi spacing L) */
.dl-account-view--account,
.dl-account-view--billing {
    --dl-account-gap: var(--gvid-f3ps9t8xxl);
}

/* Support Portal for SureCart – its own hardcoded styles */
.surlywp-sp-customer-support-shortcode .view-support-link,
.view-order-link,
.view-product-link,
.view-support-link {
    color: var(--dl-text-main) !important;
    font-weight: var(--dl-font-medium);
}
.surelywp-sp-contract-form-wrap .contract-title {
    font-family: inherit !important;
    font-weight: var(--dl-font-bold) !important;
    font-size: var(--gvid-ywgibgqn65);
    line-height: 1.3 !important;
    color: var(--dl-text-main);
}
/* SureCart buttons: same weight as the Divi buttons */
sc-button::part(base) {
    font-weight: var(--dl-font-bold);
}

/* Support Portal for SureCart – replace its hardcoded fonts, colors and px sizes */
:is(.surlywp-sp-customer-support-shortcode, .surelyp-support-block, .surelywp-sp-support-view, .surelywp-sp-modal) *:not([class*="dashicons"]):not([class*="mce-"]) {
    font-family: var(--sc-font-sans) !important;
}
.surelywp-sp-msg-content p.user-name {
    color: var(--dl-text-main) !important;
}
/* Ticket messages: bubbles look like the account list rows */
.surelywp-sp-msg-content .msg {
    background-color: var(--sc-list-row-background-color) !important;
    border: 0 !important;
    border-radius: var(--sc-input-border-radius-medium) !important;
    padding: var(--sc-spacing-medium) var(--sc-spacing-large) !important;
    color: var(--dl-text-main) !important;
    font-size: var(--gvid-r9pokwackb) !important;
    line-height: 1.6;
}
.surelywp-sp-msg-content .msg * {
    font-size: inherit !important;
}
.surelywp-sp-support-view.customer .surelywp-sp-msg a {
    color: var(--gcid-primary-color);
}
#support-list-table sc-table,
.support-item-list-heading .created-at,
.surelywp-sp-messages,
.surelywp-sp-msg-content .user,
.support-tabs ul li a,
.sulrelywp-sp-form-fields .accordion-content,
.sulrelywp-sp-form-fields .accordion-question p,
.support-form-card .row-content,
.support-product-detail-panel p.label,
.surelywp-sp-support-view .order-track-list .description,
.support-chats-wrap .attachetment-title .title,
.support-form-fields-wrap .attachetment-title .title,
.support-product-detail .variants-wrap .description,
.support-product-detail .variants-wrap .label,
.support-product-detail-panel .tab-card sc-columns > *,
.surelywp-sp-modal .text {
    font-size: var(--gvid-i8pms10aho) !important;
}
#support-list-table .support-view-btn,
.support-item-list .create-new-support-btn,
.sp-list-paginate,
.sp-tag,
.surelyp-support-block .surelyp-support-item sc-tag,
.surelyp-support-block .surelyp-support-item sc-button {
    font-size: var(--gvid-i8pms10aho) !important;
    line-height: 1.3 !important;
}
.surelywp-sp-support-view .heading sc-stacked-list-row,
.card-heading,
.support-product-detail-panel sc-card .order-heading,
.support-product-detail-panel p,
.surelywp-sp-modal .show-modal h4,
.support-chats-wrap .attachetment h3,
.support-form-fields-wrap .attachetment h3 {
    font-size: var(--gvid-ywgibgqn65) !important;
    line-height: 1.3 !important;
}
.surelywp-sp-support-view .heading sc-stacked-list-row,
.sulrelywp-sp-form-fields .accordion-question p,
.support-form-card .row-content,
.surelywp-sp-support-view .order-track-list .description,
.support-product-detail-panel sc-card .order-heading,
.support-product-detail-panel p,
.card-heading,
.support-chats-wrap .attachetment h3,
.support-form-fields-wrap .attachetment h3,
.support-product-detail .variants-wrap .description {
    color: var(--dl-text-main) !important;
}
.support-tabs ul li a,
.sulrelywp-sp-form-fields .accordion-content,
.support-product-detail-panel p.label,
.support-chats-wrap .attachetment-title .title,
.support-form-fields-wrap .attachetment-title .title,
.sulrelywp-sp-form-fields span.question-count,
.support-product-detail .variants-wrap .label {
    color: var(--dl-text-mid) !important;
}
.support-list-table sc-table sc-table-cell,
.surelywp-sp-support-view .support-product-detail sc-table sc-table-cell {
    background-color: transparent !important;
}

/* Empty ticket list: the message runs on one line (Support Portal caps it at 200px) */
#support-list-table .not-found {
    width: auto !important;
}
/* Support ticket list: rows look like the other account lists (no table borders) */
#support-list-table sc-table {
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
    border-collapse: separate;
    border-spacing: 0;
    --sc-table-border-bottom-color: transparent;
}
#support-list-table sc-table-row {
    border: 0;
}
#support-list-table sc-table-row sc-table-cell {
    background-color: var(--sc-list-row-background-color) !important;
}
#support-list-table sc-table-row:not(:last-child) sc-table-cell {
    border-bottom: 1px solid var(--sc-stacked-list-border-color, var(--sc-color-gray-200));
}
#support-list-table sc-table-row:first-of-type sc-table-cell:first-child {
    border-top-left-radius: var(--sc-input-border-radius-medium);
}
#support-list-table sc-table-row:first-of-type sc-table-cell:last-child {
    border-top-right-radius: var(--sc-input-border-radius-medium);
}
#support-list-table sc-table-row:last-of-type sc-table-cell:first-child {
    border-bottom-left-radius: var(--sc-input-border-radius-medium);
}
#support-list-table sc-table-row:last-of-type sc-table-cell:last-child {
    border-bottom-right-radius: var(--sc-input-border-radius-medium);
}
.surelyp-support-block,
.card-heading,
.support-tabs ul li a,
.surelywp-sp-modal .modal-content,
.surelywp-sp-editor .wp-editor-container textarea {
    background-color: var(--dl-canvas) !important;
}
.card-heading {
    border-color: var(--dl-border) !important;
}
.sulrelywp-sp-form-fields span.question-count {
    background-color: var(--dl-panel) !important;
}
.surelywp-sp-msg-content .msg,
.surelywp-sp-editor .wp-editor-container textarea {
    color: var(--dl-text-main) !important;
}

/* Ticket reply editor: one field like the SureCart inputs, in the theme colors.
   The text inside the editor (an iframe) is themed by snippet 19. */
.surelywp-sp-editor .chat-inputs-wrap {
    border: 0 !important;
    padding: 0 !important;
    background: none !important;
  margin: 0 !important; /* plugin adds 20px (Ania, 5 Nov 2026) */
}
/* chat-inputs-wrap on desktop: space between the messages and the reply editor (Ania, 5 Nov 2026). */
@media (min-width: 981px) {
  .surelywp-sp-editor .chat-inputs-wrap {
    margin-top: 20px !important;
  }
}
.surelywp-sp-editor .wp-editor-container {
    background: var(--sc-input-background-color, var(--dl-canvas)) !important;
    border: 1px solid var(--sc-input-border-color, var(--dl-border)) !important;
    border-radius: var(--sc-input-border-radius-medium) !important;
    overflow: hidden;
}
.surelywp-sp-editor .wp-editor-container .mce-panel,
.surelywp-sp-editor .wp-editor-container .mce-container-body,
.surelywp-sp-editor .wp-editor-container .mce-toolbar-grp,
.surelywp-sp-editor .wp-editor-container .mce-edit-area,
.surelywp-sp-editor .wp-editor-container .mce-statusbar,
.surelywp-sp-editor .wp-editor-container .quicktags-toolbar,
.surelywp-sp-editor .wp-editor-container textarea.wp-editor-area {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
.surelywp-sp-editor .wp-editor-container .mce-toolbar-grp,
.surelywp-sp-editor .wp-editor-container .quicktags-toolbar {
    border-bottom: 1px solid var(--sc-input-border-color, var(--dl-border)) !important;
}
.surelywp-sp-editor .wp-editor-container textarea.wp-editor-area {
    color: var(--dl-text-main) !important;
    font-size: var(--gvid-r9pokwackb) !important;
}
.surelywp-sp-editor .mce-ico,
.surelywp-sp-editor .quicktags-toolbar .ed_button {
    color: var(--dl-text-mid) !important;
}
.surelywp-sp-editor .quicktags-toolbar .ed_button {
    background: transparent !important;
    border-color: transparent !important;
}
.surelywp-sp-editor .mce-btn,
.surelywp-sp-editor .mce-btn button {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    outline: 0 !important;
}
.surelywp-sp-editor .mce-btn:hover,
.surelywp-sp-editor .mce-btn:focus,
.surelywp-sp-editor .mce-btn.mce-active,
.surelywp-sp-editor .quicktags-toolbar .ed_button:hover {
    background: var(--dl-panel) !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
.surelywp-sp-editor .mce-btn:hover .mce-ico,
.surelywp-sp-editor .mce-btn:focus .mce-ico,
.surelywp-sp-editor .mce-btn.mce-active .mce-ico {
    color: var(--dl-text-main) !important;
}
/* Ticket view: no "Messages" bar above the conversation */
/* Support tickets list: cards when the list is narrower than 600px (phone, Ania 5 Nov 2026).
   SureCart's sc-table has no mobile view: the Title and Date columns broke every few letters.
   Line 1: #ID + title, line 2: status + date, View on the right. Column headings hidden. */
#support-list-table {
  container-type: inline-size;
}
@container (max-width: 600px) {
  #support-list-table sc-table {
    display: block;
  }
  #support-list-table sc-table-cell[slot="head"] {
    display: none;
  }
  #support-list-table sc-table-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 16px 20px;
  }
  #support-list-table sc-table-row > sc-table-cell {
    display: block;
    --sc-table-cell-spacing: 0; /* SureCart's :host padding is !important and built from this variable */
  }
  #support-list-table sc-table-row > sc-table-cell:nth-child(1)::before {
    content: "#";
  }
  #support-list-table sc-table-row > sc-table-cell:nth-child(2) {
    flex: 1 0 70%;
  }
  #support-list-table sc-table-row > sc-table-cell:nth-child(5) {
    margin-left: auto;
  }
  /* cards: background on the row, not on each cell (the table view colours the cells) */
  #support-list-table sc-table-row {
    background: var(--sc-list-row-background-color);
  }
  #support-list-table sc-table-row sc-table-cell {
    background-color: transparent !important;
    border-bottom: 0 !important;
    border-radius: 0 !important;
  }
  #support-list-table sc-table-row:not(:last-child) {
    border-bottom: 1px solid var(--sc-stacked-list-border-color, var(--sc-color-gray-200));
  }
  #support-list-table sc-table-row:first-of-type {
    border-top-left-radius: var(--sc-input-border-radius-medium);
    border-top-right-radius: var(--sc-input-border-radius-medium);
  }
  #support-list-table sc-table-row:last-of-type {
    border-bottom-left-radius: var(--sc-input-border-radius-medium);
    border-bottom-right-radius: var(--sc-input-border-radius-medium);
  }
}
/* Support chat in My Account: no inner padding around the messages (Ania, 5 Nov 2026; the plugin sets 20px). */
.surelywp-sp-messages.customer {
  padding: 0;
}
.surelywp-sp-support-view .support-chats-wrap > .heading {
    display: none !important;
}
/* Visual / Code switch: plain text, the active one on canvas like the account tabs */
.surelywp-sp-editor .wp-switch-editor {
    background: transparent !important;
    border: 0 !important;
    border-radius: var(--sc-input-border-radius-medium) !important;
    color: var(--dl-text-mid) !important;
}
.surelywp-sp-editor .tmce-active .switch-tmce,
.surelywp-sp-editor .html-active .switch-html {
    background: var(--dl-canvas) !important;
    color: var(--dl-text-main) !important;
}
/* Ticket reply: "Send Message" button on the right */
#surelywp-sp-send-message-btn {
    display: block;
    width: fit-content;
    margin-left: auto;
}
/* Support Portal confirm popup (close / reopen ticket): SureCart card and buttons */
.surelywp-sp-modal .modal-content {
    padding: var(--sc-spacing-x-large) !important;
    border-radius: var(--sc-input-border-radius-large, 12px) !important;
    box-shadow: var(--sc-shadow-x-large) !important;
}
.surelywp-sp-modal .modal-top {
    margin: 0 0 var(--sc-spacing-medium) !important;
    font-size: var(--gvid-029s372wua) !important;
    font-weight: var(--dl-font-bold) !important;
    color: var(--dl-text-main);
}
.surelywp-sp-modal .modal-bottom p {
    margin-bottom: var(--sc-spacing-x-large) !important;
}
.surelywp-sp-modal .close-button {
    left: auto !important;
    background: var(--dl-text-mid) !important;
    -webkit-mask: url("/wp-content/plugins/surelywp-support-portal/assets/images/popup-close-icon.svg") no-repeat 10px 9px;
    mask: url("/wp-content/plugins/surelywp-support-portal/assets/images/popup-close-icon.svg") no-repeat 10px 9px;
}
.surelywp-sp-modal .approve-buttons {
    display: flex;
    justify-content: flex-end;
    gap: var(--sc-spacing-small);
}
.surelywp-sp-modal .approve-buttons a.button-1,
.surelywp-sp-modal .approve-buttons a.button-2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--sc-input-height-medium, 2.5em);
    padding: 0 var(--sc-spacing-large) !important;
    border: 1px solid transparent;
    border-radius: var(--sc-input-border-radius-medium) !important;
    font-size: var(--sc-button-font-size-medium, var(--sc-font-size-medium)) !important;
    font-weight: var(--dl-font-bold) !important;
    line-height: 1 !important;
    text-decoration: none !important;
    background-image: none !important;
    opacity: 1;
    transition: opacity var(--sc-transition-medium, 150ms) ease;
}
.surelywp-sp-modal .approve-buttons a.button-1.hidden,
.surelywp-sp-modal .approve-buttons a.button-2.hidden {
    display: none;
}
.surelywp-sp-modal .approve-buttons a.button-1 {
    background-color: var(--sc-color-primary-500) !important;
    color: var(--sc-color-primary-text, #fff) !important;
}
.surelywp-sp-modal .approve-buttons a.button-2 {
    background-color: var(--sc-input-background-color, var(--dl-canvas)) !important;
    border-color: var(--sc-input-border-color, var(--dl-border));
    color: var(--dl-text-main) !important;
}
.surelywp-sp-modal .approve-buttons a:hover {
    opacity: 0.85;
}
/* Attachments drop zone */
.surelywp-sp-editor .filepond--panel-root {
    background-color: var(--sc-list-row-background-color) !important;
}
.surelywp-sp-editor .filepond--drop-label {
    color: var(--dl-text-mid) !important;
}

/* Product Page */
.dl-license .sc-form-label {
  color: var(--dl-panel-mid)!important;
  font-weight:500;
  font-size:var(--gvid-i8pms10aho);
}
.dl-license .wp-block-surecart-price-name {
    color: var(--dl-text-reversed);
    width: 100%;
    line-height: 1.2;
    flex-basis:100%;
    font-size: var(--gvid-r9pokwackb);
}
.dl-license .wp-block-surecart-price-name {
    font-weight:700!important;
}
.dl-license .sc-choice {
    background: var(--dl-canvas-reversed)!important;
    font-weight:700;
    box-shadow:none;
    opacity:.6;
    transition: all .3s ease-out;
    transform:translateX(-.4em);
    width:calc(100% + .8em);
    padding-left:1.6em;
}
.dl-license .sc-choice:hover {
  opacity:1;
}
.dl-license .sc-choice--checked {
  box-shadow:none;
  opacity:1;
}

.dl-license .sc-choice--checked .wp-block-surecart-price-name::before{
  color: var(--gcid-primary-color);
}
.dl-license .wp-block-surecart-price-name::before {
    content: '';
    font-family: 'FontAwesome';
    font-size: .9em;
    color: var(--dl-panel-reversed);
    transition: all .3s ease-out;
    position: absolute;
    left: .4em;
}

/* Reviews */
div#review-filters,
.wp-block-surecart-product-review-list-sidebar-toggle,
.wp-block-surecart-product-review-summary {
    display: none;
}
#page-container ul.wp-block-surecart-product-review-template li {
    list-style-type: none!important;
}
#page-container .wp-block-group.sc-review-header-group {
    margin-bottom:0!important;
}
#page-container .wp-block-surecart-product-review-add-button .wp-block-button__link {
  background:var(--gcid-secondary-color)!important;
}
#page-container .wp-block-surecart-product-review-add-button .wp-block-button__link:hover {
  background:var(--dl-secondary-light)!important;
}
.wp-block-surecart-product-reviews,
.wp-block-surecart-product-review-average-rating-stars,
.wp-block-surecart-product-review-breakdown,
.sc-rating-input {
    --sc-color-primary-500: var(--gcid-secondary-color);
    --sc-product-review-form-rating-star-fill-color : var(--gcid-secondary-color);
}
li.sc-product-review-link > .wp-block-group {
  border-bottom: 2px var(--dl-panel) solid!important;
}
li.sc-product-review-link:last-of-type > .wp-block-group {
  border-bottom: none!important;
}
#page-container .wp-block-surecart-product-review-content {
    font-size: var(--gvid-r9pokwackb)!important;
}
.wp-block-surecart-product-review-form-template * {
  color: var(--dl-text-dark);
}

/* Breadcrumps */
.dl-breadcrumb-arrow {
    display: inline-block;
    width: 12px;
    height: 12px;
    vertical-align: middle;
    margin: 0 6px;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}




/* Selection styling for highlighted text */
::selection {
    background: var(--dl-text-main);
    color: var(--dl-canvas);
}
:is(h1,h2,h3,h4,h5,h6)::selection {
    background: var(--gcid-secondary-color)!important;
    color: var(--dl-text-dark);
}
a::selection {
    background: var(--gcid-primary-color)!important;
    color: var(--dl-text-dark);
}

/* Fix bottom spacing on elements */
.dl-text p:last-of-type {
    padding-bottom:1em;
}
.dl-text :is(p,ul,ol,blockquote):last-child {
    padding-bottom:0;
}



/* Style quotes */
.dl-text blockquote {
    padding-left: 0;
}

/* Add space before headings */
.dl-text :is(p,ul,ol,blockquote) ~ :is(h1,h2,h3,h4,h5,h6) {
    margin-top:1.75em!important;
}

/* A heading right under another heading (e.g. an H3 that opens an H2 section) is its
   subheading: keep it close instead of adding the full gap from the rule above (5 Nov 2026). */
.dl-text :is(h1,h2,h3,h4,h5,h6) + :is(h2,h3,h4,h5,h6) {
    margin-top:0.25em!important;
}
/* More breathing room after headings than the sitewide 1rem default */
.dl-text :is(h1,h2,h3,h4,h5,h6) {
    padding-bottom:20px;
}
/* Docs: each step sits in its own .dl-doc-step wrapper, so its title (h2) is always a
   first child and the p~heading rule above never reaches it. Put the gap on the title,
   like the blog's H2s, and drop the wrapper's own gap so the two don't stack. */
.dl-text .dl-scenario-intro + .dl-doc-step,
.dl-text .dl-doc-step + .dl-doc-step {
    margin-top:0;
}
.dl-text .dl-doc-step > h2 {
    margin-top:1.75em!important;
}
/* Give figures room to breathe and a softer look */
.dl-text figure {
    margin:1.25em 0;
}
.dl-text figure img {
    border-radius:16px;
    corner-shape:squircle;
}
/* Blog styling */
h3.wp-block-heading strong {
    color: var(--gcid-primary-color);
    font-family: 'Libre';
    display: block;
    font-size: .75em;
}

p:has(+ul) {
    padding-bottom: 0;
}

figcaption.wp-element-caption {
    font-size: var(--gvid-i8pms10aho);
    line-height: 1.2;
    font-weight: 500;
    color: var(--dl-text-mid);
    max-width: 70%;
    margin: 0.5em auto;
    text-align: center;
    font-style: italic;
}
.et_pb_post_content .wp-block-columns {
    padding-bottom: 1em;
}


/* Back-to-top button: plain circle, frosted Panel at 85%, dark Feather arrow-up.
   z-index below the SureCart slide-out cart (99999), so the open cart covers it. */
.et_pb_scroll_top.et-pb-icon {
    box-sizing: border-box;
    width: 48px;
    height: 48px;
    padding: 14px;
    right: 20px;
    z-index: 99990;
    border: 0;
    border-radius: 50%;
    box-shadow: none;
    background: color-mix(in srgb, var(--dl-panel) 85%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: var(--dl-text-main);
    transition: background-color .3s ease;
}
.et_pb_scroll_top.et-pb-icon::before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='19' x2='12' y2='5'/%3E%3Cpolyline points='5 12 12 5 19 12'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='19' x2='12' y2='5'/%3E%3Cpolyline points='5 12 12 5 19 12'/%3E%3C/svg%3E") center / contain no-repeat;
}
.et_pb_scroll_top.et-pb-icon:hover {
    background: var(--dl-panel);
}

/* Font Swap */
#page-container span.libre {
    font-family: 'Libre', serif;
    letter-spacing: -0.03em;
    font-feature-settings:
    "liga" 1,
    "dlig" 1,
    "ss01" 1;
    font-size:.9em
}
#page-container span.libre.small {
  font-size:.6em!important; line-height:0.6;
}

/* Aniamted Toggles */
.et_pb_toggle_title::before {
    transition: all .2s ease-out;
}
.et_pb_toggle_open .et_pb_toggle_title::before {
    transform: rotate(180deg)
}

/* External Links */
#page-container #et-boc .dl-text .ext-link {
  padding-inline: .1em 0;
  margin-inline: 0 .1em;
}
.ext-link svg {
    max-height: .9em;
    margin-left: .1em;
    transform: translate(0,.1em);
    opacity: .6;
    transition: all .2s;
    stroke: 
    color-mix(in srgb, var(--gcid-primary-color) 80%, transparent);
    stroke-width: 2.5px;
}
.ext-link.et_pb_text svg {
    max-height: .8em;
    transform: translate(0,.1em);
    opacity: .4;
}
.ext-link:not(.et_pb_text):hover svg, .ext-link a:hover svg {
  opacity:1;
  color:var(--gcid-primary-color)!important;
} 

#dl-footer .ext-link svg {
    max-height: max-content;
    transform: translate(.1em, .175em);
}


/* Footer Styling */
#page-container #dl-footer .dl-text a {
    background-image:
    linear-gradient(currentColor, currentColor),
    linear-gradient(
      color-mix(in srgb, transparent 40%, transparent),
      color-mix(in srgb, transparent 40%, transparent)
    );
}
#page-container #dl-footer .dl-text .ext-link {
  padding-inline: .1em 0;
  margin-inline: -.1em .1em;
}

#page-container #dl-footer .et_pb_svg svg {
  width:auto; height:100%;
}

/* Cart */
.admin-bar .sc-drawer {
  top:32px;
} 
.wp-block-surecart-cart-close-button svg {
    stroke-width: 3px;
    width: 1.2em;
    height: 1.2em;
    stroke: var(--dl-text-main);
}
/* Slide-out cart: no frame (SureCart's --sc-drawer-border), light and dark mode */
.sc-cart-drawer.wp-block-surecart-slide-out-cart {
    border: 0;
}
.dl-cart-conditional {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.wp-block-group.dl-cart-slot {
    height: 100%;
}
.wp-block-group.no-item-wrap {
height: 80%;
justify-content: center;
}
.wp-block-group.bottom-cart-wrapper {
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    height: calc(100% - 4em);
    flex-wrap: nowrap;
    gap: 0;
}
.wp-block-surecart-slide-out-cart-items-subtotal {
    padding: 0 10px;
}

/* 3rd party buttons */

#page-container :where(.wp-element-button, .wp-block-button__link),
.wp-block-button__link.wp-element-button.dl-button,
.dl-button-style .wp-block-button__link.wp-element-button,
.wp-block-surecart-product-review-form-submit-button button.wp-block-button__link {
    background: var(--gcid-primary-color);
    font-family: var(--et_global_body_font);
    font-weight: 800;
    color: var(--gcid-2h75ou7t2e) !important;
    line-height: 1em !important;
    font-size: var(--gvid-r9pokwackb) !important;
    border-radius: 30px!important;
    border: 2px var(--gcid-2h75ou7t2e) solid;
    transition: all .3s ease-out;
    padding: 0.7em 1.2em;
    corner-shape: squircle;
    text-align: center;
    box-shadow: 0px 4px 0px 0px var(--gcid-2h75ou7t2e);
}
#page-container :where(.wp-element-button, .wp-block-button__link):hover,
.wp-block-button__link.wp-element-button.dl-button:hover,
.dl-button-style .wp-block-button__link.wp-element-button:hover,
.wp-block-surecart-product-review-form-submit-button button.wp-block-button__link:hover {
    transform: translateX(0px) translateY(3px);
    box-shadow: 0px 1px 0px 0px var(--gcid-2h75ou7t2e);
    background: var(--dl-button-hover);
}

/* white */
.wp-block-surecart-product-review-form-submit-button button.wp-block-button__link {
background: var(--gcid-h2oiboo74f);
}
.wp-block-surecart-product-review-form-submit-button button.wp-block-button__link:hover {
background: #ffffff;
}

#page-container .shadow-reversed :where(.wp-element-button, .wp-block-button__link),
.wp-block-button__link.wp-element-button.dl-button.shadow-reversed {
    box-shadow: 0px 4px 0px 0px var(--gcid-2h75ou7t2e), 0 10px 20px -5px hsl(225 20 50 / 60%);
}

#page-container .shadow-reversed :where(.wp-element-button, .wp-block-button__link):hover,
.wp-block-button__link.wp-element-button.dl-button.shadow-reversed:hover {
box-shadow: 0px 1px 0px 0px var(--gcid-2h75ou7t2e), 0 10px 30px -10px hsl(225 20 50 / 60%);
}

a.wp-block-surecart-slide-out-cart-items-submit {
    padding:1em 1.2em!important;
}

/* product page: Customer Reviews / Write a review / Thanks for your review headings (SureCart review blocks) */
[class*="wp-block-surecart-product-review"] h2.wp-block-heading {
    margin: 0!important;
}

/* External link icon on buttons (same Feather icon as "View Demo" on the product page).
   Add the CSS class dl-ext to a Button module that links to another website. */
.et_pb_button.dl-ext .et-pb-parallax-content::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 0.35em;
  vertical-align: -2px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6l-2 2H5l-2-2V8l2-2h6M15 3h6v6M10 14 21 3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6l-2 2H5l-2-2V8l2-2h6M15 3h6v6M10 14 21 3'/%3E%3C/svg%3E") center / contain no-repeat;
}


/* Fluent Forms: match the site in light + dark mode (4 Nov 2026). Colours come from the site's variables. */
#page-container .fluentform .ff-el-group {
  margin-bottom: 24px;
}
#page-container .fluentform .ff-el-input--label {
  margin-bottom: 8px;
}
#page-container .fluentform .ff-el-input--label label {
  color: var(--dl-text-main);
  font-size: var(--gvid-r9pokwackb);
  font-weight: 600;
  line-height: 1.4;
}
#page-container .fluentform .ff-el-is-required.asterisk-right label::after {
  color: var(--gcid-primary-color);
}
#page-container .fluentform .ff-el-form-control {
  background-color: var(--dl-canvas);
  color: var(--dl-text-main);
  border: 2px solid var(--dl-border);
  border-radius: 14px;
  corner-shape: squircle;
  box-shadow: none;
  font-family: inherit;
  font-size: var(--gvid-r9pokwackb);
  line-height: 1.5;
  padding: 12px 16px;
  min-height: 52px;
  height: auto;
  transition: border-color .2s ease, box-shadow .2s ease;
}
#page-container .fluentform textarea.ff-el-form-control {
  min-height: 160px;
}
#page-container .fluentform select.ff-el-form-control {
  appearance: none;
  padding-right: 44px;
  background-image: linear-gradient(45deg, transparent 50%, var(--dl-text-mid) 50%), linear-gradient(135deg, var(--dl-text-mid) 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
#page-container .fluentform .ff-el-form-control::placeholder {
  color: var(--dl-text-mid);
  opacity: 1;
}
#page-container .fluentform .ff-el-form-control:hover {
  border-color: var(--dl-text-mid);
}
#page-container .fluentform .ff-el-form-control:focus {
  border-color: var(--gcid-primary-color);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gcid-primary-color) 20%, transparent);
  outline: none;
}
#page-container .fluentform .ff-btn-submit {
  background: var(--gcid-primary-color);
  color: var(--gcid-2h75ou7t2e);
  border: 2px solid var(--gcid-2h75ou7t2e);
  border-radius: 30px;
  corner-shape: squircle;
  box-shadow: 0 4px 0 0 var(--gcid-2h75ou7t2e);
  padding: 0.7em 1.2em;
  font-family: inherit;
  font-size: var(--gvid-r9pokwackb);
  font-weight: 800;
  line-height: 1.1;
  opacity: 1;
  transition: box-shadow .3s ease, translate .3s ease, background-color .3s ease;
}
#page-container .fluentform .ff-btn-submit:hover {
  background: var(--gcid-jeso1n63pu); /* Pink Light = Pink Button preset hover */
  color: var(--gcid-2h75ou7t2e);
  box-shadow: 0 1px 0 0 var(--gcid-2h75ou7t2e);
  translate: 0 3px; /* = Divi preset "Button Hover" */
  opacity: 1;
}
[data-theme="dark"] #page-container .fluentform .ff-btn-submit {
  box-shadow: 0 4px 0 0 var(--gcid-2h75ou7t2e), 0 10px 20px -5px hsl(225 20 50 / 60%);
}
[data-theme="dark"] #page-container .fluentform .ff-btn-submit:hover {
  box-shadow: 0 1px 0 0 var(--gcid-2h75ou7t2e), 0 10px 30px -10px hsl(225 20 50 / 60%);
}
#page-container .fluentform .ff-el-help-message {
  color: var(--dl-text-mid);
  font-size: var(--gvid-i8pms10aho);
  font-style: normal;
  line-height: 1.5;
  margin-top: 6px;
}
#page-container .fluentform .ff-el-form-check-label {
  color: var(--dl-text-main);
  font-size: var(--gvid-r9pokwackb);
  line-height: 1.5;
}
#page-container .fluentform .ff-el-form-check-input,
#page-container .fluentform input[type="checkbox"],
#page-container .fluentform input[type="radio"] {
  accent-color: var(--gcid-primary-color);
  width: 18px;
  height: 18px;
  vertical-align: -3px;
  margin-right: 8px;
}
#page-container .fluentform .ff-el-form-check {
  margin-bottom: 6px;
}
#page-container .fluentform .ff-custom_html p {
  color: var(--dl-text-mid);
  font-size: var(--gvid-i8pms10aho);
}
#page-container .fluentform .ff-message-success,
#page-container .ff-message-success {
  background: var(--dl-panel);
  color: var(--dl-text-main);
  border: 0;
  border-radius: 20px;
  corner-shape: squircle;
  box-shadow: none;
  padding: 24px;
  font-size: var(--gvid-r9pokwackb);
}



/* Masonry rows (4 Nov 2026): add the class "dl-masonry" to a Row. Its columns (e.g. a Divi loop)
   flow into CSS columns of at least 300px – 3 on desktop, 2 on tablet, 1 on phone. */
#page-container .dl-masonry {
  display: block;
  columns: 3 300px;
  column-gap: var(--gvid-f3ps9t8xxl);
}
#page-container .dl-masonry > .et_pb_column {
  width: 100%;
  margin: 0 0 var(--gvid-f3ps9t8xxl);
  break-inside: avoid;
}
#page-container .dl-masonry > .et_pb_column.dl-filter-hidden {
  display: none;
}
/* Filter buttons (snippet 33): the active one is pink. */
#page-container .et_pb_button.dl-filter.is-active,
#page-container .et_pb_button.dl-filter.is-active:hover {
  background-color: var(--gcid-primary-color);
  color: var(--gcid-2h75ou7t2e);
}


/* Post cards (4 Nov 2026): add the class "dl-post-card" to a card (e.g. the looped column in the
   blog grid, layout 2661). Hovering anywhere on the card zooms and tilts its image; the image's
   rounded group (overflow hidden) crops it. Keyboard focus on the card's links does the same. */
#page-container .dl-post-card .et_pb_image {
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
#page-container .dl-post-card:hover .et_pb_image,
#page-container .dl-post-card:focus-within .et_pb_image {
  transform: scale(1.06) rotate(-2deg);
}
/* Post cards, calm images: the image starts partly desaturated under a soft Panel-coloured
   layer (the card's own background), so it blends into the card; on card hover the layer fades
   out and the colour comes back, together with the zoom. Works in light and dark mode. */
#page-container .dl-post-card .et_pb_image .et_pb_image_wrap {
  position: relative;
}
#page-container .dl-post-card .et_pb_image img {
  filter: saturate(0.35);
  transition: filter 0.55s ease;
}
#page-container .dl-post-card .et_pb_image .et_pb_image_wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--dl-panel);
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 0.55s ease;
}
#page-container .dl-post-card:hover .et_pb_image img,
#page-container .dl-post-card:focus-within .et_pb_image img {
  filter: none;
}
#page-container .dl-post-card:hover .et_pb_image .et_pb_image_wrap::after,
#page-container .dl-post-card:focus-within .et_pb_image .et_pb_image_wrap::after {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  #page-container .dl-post-card .et_pb_image {
    transition: none;
  }
  #page-container .dl-post-card:hover .et_pb_image,
  #page-container .dl-post-card:focus-within .et_pb_image {
    transform: none;
  }
}


/* Pagination (4 Nov 2026): Divi's "Pagination" module (divi/post-nav, e.g. the blog grid's
   Older / Newer posts, linked to a loop) looks like the site's buttons, same values as the
   "White Button" preset + .dl-button (both links light, Ania 4 Nov),
   2px dark border, 4px dark shadow, hover moves 3px down. Previous on the left, Next on the right (Ania). */
#page-container .et_pb_posts_nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--gvid-mn23ldw859, 16px);
}
#page-container .et_pb_posts_nav .nav-previous,
#page-container .et_pb_posts_nav .nav-next {
  float: none;
  margin: 0;
}
/* Divi's clearfix pseudo-elements would become flex items and, with the gap, push the
   right button 10px in from the grid edge. */
#page-container .et_pb_posts_nav::before,
#page-container .et_pb_posts_nav::after {
  content: none;
}
/* Newer on the left, Older on the right, also when only one of them is shown. */
#page-container .et_pb_posts_nav .nav-next {
  margin-left: auto;
}
#page-container .et_pb_posts_nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  background: var(--gcid-h2oiboo74f, #fff);
  color: var(--gcid-2h75ou7t2e, var(--dl-text-dark));
  font-family: var(--et_global_body_font);
  font-weight: 800;
  font-size: var(--gvid-r9pokwackb);
  line-height: 1em;
  text-decoration: none;
  padding: 0.7em 1.2em;
  border: 2px solid var(--gcid-2h75ou7t2e, var(--dl-text-dark));
  border-radius: 30px;
  corner-shape: squircle;
  box-shadow: 0 4px 0 0 var(--gcid-2h75ou7t2e, var(--dl-text-dark));
  transition: all 0.3s ease-out;
}
#page-container .et_pb_posts_nav a:hover {
  background: #fff;
  transform: translateY(3px);
  box-shadow: 0 1px 0 0 var(--gcid-2h75ou7t2e, var(--dl-text-dark));
}
/* !important only because the module's default font preset (h1gny5c) prints pink, weight 400
   links with !important; this keeps them dark and bold like the buttons. */
#page-container .et_pb_posts_nav a,
#page-container .et_pb_posts_nav .nav-label,
#page-container .et_pb_posts_nav .meta-nav {
  color: var(--gcid-2h75ou7t2e, var(--dl-text-dark)) !important;
  font-family: var(--et_global_body_font) !important;
  font-weight: 800 !important;
  font-size: var(--gvid-r9pokwackb) !important;
  line-height: 1em !important;
}
/* Only one page: the module renders empty, so hide its row (no leftover padding under the grid). */
#page-container .et_pb_row:has(> .et_pb_column > .et_pb_posts_nav:empty) {
  display: none;
}
[data-theme="dark"] #page-container .et_pb_posts_nav a {
  box-shadow: 0 4px 0 0 var(--gcid-2h75ou7t2e, var(--dl-text-dark)), 0 10px 20px -5px hsl(225 20 50 / 60%);
}
[data-theme="dark"] #page-container .et_pb_posts_nav a:hover {
  box-shadow: 0 1px 0 0 var(--gcid-2h75ou7t2e, var(--dl-text-dark)), 0 10px 30px -10px hsl(225 20 50 / 60%);
}

/* Numbered headings (5 Nov 2026, Terms & Conditions): wrap content in a Group block with the class "dl-numbered";
   its H2s get 1., 2., 3. from a CSS counter, so the numbers aren't typed into the headings (and the TOC). */
.dl-numbered {
  counter-reset: dl-num;
}
.dl-numbered h2 {
  counter-increment: dl-num;
}
.dl-numbered h2::before {
  content: counter(dl-num) ". ";
  color: var(--gcid-primary-color, #f42279);
  font-family: 'Libre';
  font-size: .8em;
}
/* The first heading in the group follows the intro text outside the group, so the
   ".dl-text p ~ h2" spacing rule doesn't reach it: give it the same top margin. */
.dl-text :is(p, ul, ol, blockquote) ~ .dl-numbered > :is(h1, h2, h3, h4, h5, h6):first-child {
  margin-top: 1.75em;
}


/* Resource Library gate (5 Nov 2026, snippet 37 [dl_resources_gate]). Same look as the Fluent Forms rules above. */
#page-container .dl-res-gate__title {
  margin: 0 0 24px;
  padding: 0;
}
#page-container .dl-res-gate__title[hidden] {
  display: none;
}
#page-container .dl-res-gate__label {
  display: block;
  margin-bottom: 8px;
  color: var(--dl-text-main);
  font-size: var(--gvid-r9pokwackb);
  font-weight: 600;
  line-height: 1.4;
}
#page-container .dl-res-gate__form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}
#page-container .dl-res-gate__field {
  flex: 1 1 220px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
#page-container .dl-res-gate__field .dl-res-gate__input {
  flex: 0 0 auto;
  width: 100%;
  box-sizing: border-box;
}
/* Order: check step = email + button in one row; join step (.is-joining) = name + email, consent, then the button. */
#page-container .dl-res-gate__name { order: 1; }
#page-container .dl-res-gate__email { order: 2; }
#page-container .dl-res-gate__btn { order: 3; }
#page-container .dl-res-gate__hint { order: 4; flex-basis: 100%; }
#page-container .dl-res-gate__consent { order: 5; flex-basis: 100%; }
#page-container .dl-res-gate.is-joining .dl-res-gate__btn { order: 6; }
#page-container .dl-res-gate__msg { order: 7; flex-basis: 100%; }
#page-container .dl-res-gate__input {
  flex: 1 1 240px;
  min-width: 0;
  min-height: 52px;
  padding: 12px 16px;
  background-color: var(--dl-canvas);
  color: var(--dl-text-main);
  border: 2px solid var(--dl-border);
  border-radius: 14px;
  corner-shape: squircle;
  font-family: inherit;
  font-size: var(--gvid-r9pokwackb);
  line-height: 1.5;
  transition: border-color .2s ease, box-shadow .2s ease;
}
#page-container .dl-res-gate__input::placeholder {
  color: var(--dl-text-mid);
  opacity: 1;
}
#page-container .dl-res-gate__input:hover {
  border-color: var(--dl-text-mid);
}
#page-container .dl-res-gate__input:focus {
  border-color: var(--gcid-primary-color);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gcid-primary-color) 20%, transparent);
  outline: none;
}
#page-container .dl-res-gate__btn {
  flex: 0 0 auto;
  background: var(--gcid-primary-color);
  color: var(--gcid-2h75ou7t2e);
  border: 2px solid var(--gcid-2h75ou7t2e);
  border-radius: 30px;
  corner-shape: squircle;
  box-shadow: 0 4px 0 0 var(--gcid-2h75ou7t2e);
  padding: 0.7em 1.2em;
  font-family: inherit;
  font-size: var(--gvid-r9pokwackb);
  font-weight: 800;
  line-height: 1.1;
  cursor: pointer;
  transition: box-shadow .3s ease, translate .3s ease, background-color .3s ease, opacity .2s ease;
}
#page-container .dl-res-gate__btn:hover {
  background: var(--gcid-jeso1n63pu);
  box-shadow: 0 1px 0 0 var(--gcid-2h75ou7t2e);
  translate: 0 3px;
}
[data-theme="dark"] #page-container .dl-res-gate__btn {
  box-shadow: 0 4px 0 0 var(--gcid-2h75ou7t2e), 0 10px 20px -5px hsl(225 20 50 / 60%);
}
#page-container .dl-res-gate.is-busy .dl-res-gate__btn {
  opacity: .6;
  cursor: progress;
}
#page-container .dl-res-gate__hint {
  margin: 4px 0 6px;
  padding: 0;
  color: var(--dl-text-mid);
  font-size: var(--gvid-r9pokwackb);
  line-height: 1.55;
}
#page-container .dl-res-gate__consent {
  margin: 4px 0 6px;
  padding: 0;
  font-size: var(--gvid-r9pokwackb);
  line-height: 1.55;
}
#page-container .dl-res-gate__name[hidden] {
  display: none;
}
#page-container .dl-res-gate__consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--dl-text-main);
  cursor: pointer;
}
#page-container .dl-res-gate__consent[hidden],
#page-container .dl-res-gate__hint[hidden],
#page-container .dl-res-gate__done[hidden],
#page-container .dl-res-gate__form[hidden] {
  display: none;
}
#page-container .dl-res-gate__consent input {
  accent-color: var(--gcid-primary-color);
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin-top: 0.3em;
}
#page-container .dl-res-gate__msg {
  margin: 4px 0 0;
  padding: 0;
  color: var(--dl-text-main);
  font-size: var(--gvid-r9pokwackb);
  line-height: 1.55;
}
#page-container .dl-res-gate__after[hidden] {
  display: none;
}
#page-container .dl-res-gate__after .dl-res-gate__msg {
  margin-top: 14px;
}
#page-container .dl-res-gate__msg:empty {
  display: none;
}
#page-container .dl-res-gate__msg.is-error {
  color: var(--gcid-primary-color);
}
#page-container .dl-res-gate__done {
  margin: 0;
  padding: 0;
  color: var(--dl-text-main);
  font-size: var(--gvid-r9pokwackb);
  font-weight: 600;
}
/* Library cards: locked download buttons get a small lock; the card linked from a post (#slug) is highlighted. */
body:not(.dl-res-unlocked) #page-container .dl-res-download .et-pb-parallax-content::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 8px;
  vertical-align: -1px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
}
#page-container .dl-res-card {
  scroll-margin-top: 120px;
}
#page-container .dl-res-card {
  background-color: var(--dl-canvas);
  transition: background-color .4s ease, border-color .4s ease;
}
#page-container .dl-res-card.dl-res-highlight {
  background-color: color-mix(in srgb, var(--gcid-primary-color) 12%, var(--dl-canvas));
  border-color: color-mix(in srgb, var(--gcid-primary-color) 40%, var(--dl-canvas));
}
#page-container .dl-res-meta {
  color: var(--dl-text-mid);
  font-size: var(--gvid-i8pms10aho);
}
/* Resource Library form on a reversed panel (class "dl-res-panel" on the Divi group around [dl_resources_gate]). */
#page-container .dl-res-panel .dl-res-gate,
#page-container .dl-res-panel h2.dl-res-gate__title,
#page-container .dl-res-panel .dl-res-gate__intro,
#page-container .dl-res-panel .dl-res-gate__label,
#page-container .dl-res-panel .dl-res-gate__consent,
#page-container .dl-res-panel .dl-res-gate__consent a,
#page-container .dl-res-panel .dl-res-gate__msg {
  color: var(--dl-text-reversed);
}
#page-container .dl-res-gate__icon {
  display: block;
  width: 65px;
  height: auto;
  margin: 0 0 20px;
}
#page-container .dl-res-panel h2.dl-res-gate__title {
  margin: 0 0 12px;
  padding: 0;
  font-size: var(--gvid-ix03tf8sw0);
  line-height: 1.15;
}
#page-container .dl-res-gate__intro {
  margin: 0 0 28px;
  padding: 0;
}
#page-container .dl-res-gate__intro p {
  margin: 0 0 0.6em;
  padding: 0;
}
#page-container .dl-res-gate__intro p:last-child {
  margin-bottom: 0;
}
#page-container .dl-res-panel .dl-res-gate__intro p {
  color: var(--dl-text-reversed);
}
#page-container .dl-res-gate__intro[hidden] {
  display: none;
}
#page-container .dl-res-gate__intro[hidden] + .dl-res-gate__form {
  margin-top: 28px;
}
#page-container .dl-res-panel .dl-res-gate__hint {
  color: color-mix(in srgb, var(--dl-text-reversed) 70%, transparent);
}
#page-container .dl-res-panel .dl-res-gate__input {
  border-color: transparent;
}
[data-theme="dark"] #page-container .dl-res-panel .dl-res-gate__input {
  background-color: #ffffff;
  color: #19191a;
}
[data-theme="dark"] #page-container .dl-res-panel .dl-res-gate__input::placeholder {
  color: #6b7280;
}
#page-container .dl-res-panel .dl-res-gate__input:hover {
  border-color: color-mix(in srgb, var(--dl-text-reversed) 40%, transparent);
}
#page-container .dl-res-panel .dl-res-gate__btn {
  box-shadow: 0 4px 0 0 var(--gcid-2h75ou7t2e), 0 10px 20px -5px hsl(225 20 50 / 60%);
}
#page-container .dl-res-panel .dl-res-gate__btn:hover {
  box-shadow: 0 1px 0 0 var(--gcid-2h75ou7t2e), 0 10px 30px -10px hsl(225 20 50 / 60%);
}
/* Unlocked state: the form panel shrinks to one grid cell (icon stays above the text). */
/* !important: Divi writes the column's grid placement with !important (.et_pb_column_N). */
body.dl-res-unlocked #page-container .dl-res-form-col {
  grid-column: auto / span 1 !important;
  grid-row-start: auto !important;
}

/* Form panel in the library grid: stretches to the row height, content centred vertically. */
#page-container .dl-res-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Resource cards reuse the blog's dl-post-card hover; their background is Canvas, so the calm layer is too. */
#page-container .dl-res-card.dl-post-card .et_pb_image .et_pb_image_wrap::after {
  background: var(--dl-canvas);
}

/* Free download block (Gutenberg, acf/dl-freebie - snippet 37). */
#page-container .dl-freebie {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 20px;
  align-items: start;
  margin: 2em 0;
  padding: var(--gvid-nxthc18tfy);
  background: var(--dl-canvas);
  border: 2px solid var(--dl-border);
  border-radius: var(--gvid-psr8wu69km);
  corner-shape: squircle;
}
#page-container .dl-freebie__icon {
  display: block;
  width: 74px;
  height: auto;
  margin-top: 2px;
}
#page-container .dl-freebie p {
  margin: 0;
  padding: 0;
}
#page-container .dl-freebie__kicker {
  color: var(--gcid-primary-color);
  font-size: var(--gvid-i8pms10aho);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
#page-container .dl-freebie__title {
  margin-top: 4px;
  color: var(--dl-text-main);
  font-size: var(--gvid-029s372wua);
  font-weight: 800;
  line-height: 1.25;
}
#page-container .dl-freebie__text {
  margin-top: 8px;
  color: var(--dl-text-main);
}
#page-container #et-boc .dl-freebie a.dl-freebie__btn,
#page-container .dl-freebie a.dl-freebie__btn {
  display: inline-block;
  margin-top: 18px;
  padding: 0.7em 1.2em;
  background: var(--gcid-primary-color);
  background-image: none;
  color: var(--gcid-2h75ou7t2e);
  border: 2px solid var(--gcid-2h75ou7t2e);
  border-radius: 30px;
  corner-shape: squircle;
  box-shadow: 0 4px 0 0 var(--gcid-2h75ou7t2e);
  font-weight: 800;
  line-height: 1.1;
  text-decoration: none;
  transition: box-shadow .3s ease, translate .3s ease, background-color .3s ease;
}
#page-container #et-boc .dl-freebie a.dl-freebie__btn:hover,
#page-container .dl-freebie a.dl-freebie__btn:hover {
  background: var(--gcid-jeso1n63pu);
  box-shadow: 0 1px 0 0 var(--gcid-2h75ou7t2e);
  translate: 0 3px;
}
[data-theme="dark"] #page-container .dl-freebie a.dl-freebie__btn {
  box-shadow: 0 4px 0 0 var(--gcid-2h75ou7t2e), 0 10px 20px -5px hsl(225 20 50 / 60%);
}
@media (max-width: 600px) {
  #page-container .dl-freebie {
    grid-template-columns: 1fr;
  }
}


/* Inline code inside toggles (FAQ answers) looks like inline code in the post text
   (assets/css/prism-theme.css), also on pages that don't load the code snippet styles. */
#page-container .et_pb_toggle_content code {
  color: var(--prism-text, var(--dl-text-main));
  font-family: var(--prism-font, "JetBrains Mono", Consolas, "SFMono-Regular", Menlo, monospace);
  font-size: 0.9em;
  padding: .2em;
  background: var(--dl-panel);
  border-radius: .5em;
}


/* Tables in text (Gutenberg table block inside .dl-text, e.g. Terms & Conditions).
   Scroll sideways on narrow screens instead of squeezing the columns. */
.dl-text .wp-block-table {
    margin: 1.5em 0;
    overflow-x: auto;
}
.dl-text .wp-block-table table {
    width: 100%;
    min-width: 520px;
    border-collapse: separate;
    border-spacing: 0;
    border: 2px solid var(--gcid-87mv57aedh, var(--dl-border));
    border-radius: 14px;
    overflow: hidden;
    font-size: 0.9em;
    line-height: 1.5;
}
.dl-text .wp-block-table :is(th, td) {
    padding: 0.8em 1em;
    text-align: left;
    vertical-align: top;
    border: 0;
    border-bottom: 1px solid var(--gcid-87mv57aedh, var(--dl-border));
}
.dl-text .wp-block-table tr:last-child td {
    border-bottom: 0;
}
.dl-text .wp-block-table th {
    background: var(--dl-panel);
    font-weight: var(--dl-font-bold, 700);
}
.dl-text .wp-block-table td:first-child {
    font-weight: var(--dl-font-medium, 500);
}

/* ==========================================================================
   Product reviews: page numbers as small buttons (6 Nov 2026, Ania)
   SureCart's numbers are plain links inside a block div; the site's text-link
   underline (background-image) applied to them. Previous / Next stay text.
   ========================================================================== */
#page-container #et-boc .wp-block-surecart-product-review-pagination-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}
#page-container #et-boc .wp-block-surecart-product-review-pagination-numbers .sc-page-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	margin: 0;
	padding: 0 12px;
	border: 2px solid var(--dl-panel, #EEF2F2);
	border-radius: 30px;
	background: var(--dl-canvas, #fff);
	color: var(--dl-text-main);
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	opacity: 1;
	transition: background-color .2s ease, border-color .2s ease;
}
#page-container #et-boc .wp-block-surecart-product-review-pagination-numbers .sc-page-link:hover {
	border-color: var(--dl-border, #D3D6DF);
}
#page-container #et-boc .wp-block-surecart-product-review-pagination-numbers .sc-page-link--disabled,
#page-container #et-boc .wp-block-surecart-product-review-pagination-numbers .sc-page-link--disabled:hover {
	background: var(--dl-panel, #EEF2F2);
	border-color: var(--dl-panel, #EEF2F2);
	color: var(--dl-text-main);
	cursor: default;
}

/* ==========================================================================
   Fluent Forms: option chips (6 Nov 2026, Work with me form 5)
   Add the container class "dl-chips" (+ layout ff_list_inline) to any
   checkbox or radio field: options become pill buttons, the chosen one is
   pink, checkbox chips get a check mark. The real input stays in the DOM
   (visually hidden) so keyboard and screen readers keep working.
   ========================================================================== */
#page-container .fluentform .dl-chips .ff-el-input--content {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
#page-container .fluentform .dl-chips .ff-el-form-check {
	display: block;
	margin: 0 !important;
}
#page-container .fluentform .dl-chips .ff-el-form-check-label {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 9px 16px;
	border: 2px solid var(--dl-border, #D3D6DF);
	border-radius: 30px;
	background: var(--dl-canvas, #fff);
	color: var(--dl-text-main);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease;
}
#page-container .fluentform .dl-chips .ff-el-form-check-label:hover {
	border-color: var(--dl-text-main);
}
#page-container .fluentform .dl-chips .ff-el-form-check-input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}
#page-container .fluentform .dl-chips .ff-el-form-check-label:has(input:checked) {
	background: var(--gcid-primary-color, #ff6699);
	border-color: var(--gcid-primary-color, #ff6699);
	color: #19191a;
}
#page-container .fluentform .dl-chips .ff-el-form-check-label:has(input[type="checkbox"]:checked)::before {
	content: "\2713";
	font-weight: 700;
}
#page-container .fluentform .dl-chips .ff-el-form-check-label:has(input:focus-visible) {
	outline: 2px solid var(--dl-text-main);
	outline-offset: 2px;
}
#page-container .fluentform .dl-chips .ff-el-help-message {
	flex-basis: 100%;
	margin-top: 0;
}
#page-container .fluentform .ff-el-section-break .ff-el-section-title {
	font-size: var(--gvid-ix03tf8sw0, 32px);
	line-height: 1.15;
	margin-bottom: 8px;
}
/* Section break used as the form's own heading: no rule under it */
#page-container .fluentform .ff-el-section-break hr {
	display: none;
}

/* ==========================================================================
   Peach accent theme (6 Nov 2026, Divi Stylist Academy page)
   Add the class "dl-peach" to a section (Advanced > Attributes > class) and
   every pink accent inside it turns peach: buttons, <mark>, dots, links,
   form buttons. It swaps the pink variables for the peach ones.
   ========================================================================== */
.dl-peach {
	--gcid-primary-color: var(--gcid-secondary-color, #ff9966);
	--gcid-jeso1n63pu: var(--gcid-efhxe2ni0w, #FFB399);
	--dl-primary-light: var(--dl-secondary-light, #FFB399);
	--dl-button-hover: var(--gcid-efhxe2ni0w, #FFB399);
}
.dl-peach mark {
	--mark-color: rgba(255, 153, 102, 0.25);
}
[data-theme="dark"] .dl-peach mark {
	--mark-color: rgba(255, 153, 102, 0.45);
}

/* ==========================================================================
   Support tickets: message attachments (6 Nov 2026, My Account → Support)
   SurelyWP's dark rules use .surecart-theme-dark; the site switches with
   [data-theme="dark"], so the card kept a bright border and the blue arrow.
   ========================================================================== */
#page-container .support-chats-wrap .attachetment-inner-wrap,
#page-container .support-chats-wrap .attachetment-title,
#page-container .support-form-fields-wrap .attachetment-inner-wrap,
#page-container .support-form-fields-wrap .attachetment-title {
	border-color: var(--dl-border, #D3D6DF);
}
#page-container .support-chats-wrap .attachetment-inner-wrap,
#page-container .support-form-fields-wrap .attachetment-inner-wrap {
	border-radius: 12px;
	overflow: hidden;
}
#page-container .support-chats-wrap .attachetment-title .title,
#page-container .support-form-fields-wrap .attachetment-title .title {
	font-family: inherit;
	color: var(--dl-text-mid, #6b7280);
}
#page-container .support-chats-wrap .attachetment-buttons .download-arrow,
#page-container .support-form-fields-wrap .attachetment-buttons .download-arrow {
	filter: brightness(0);
	opacity: .85;
	transition: opacity .2s ease, filter .2s ease;
}
[data-theme="dark"] #page-container .support-chats-wrap .attachetment-buttons .download-arrow,
[data-theme="dark"] #page-container .support-form-fields-wrap .attachetment-buttons .download-arrow {
	filter: brightness(0) invert(1);
}
#page-container .support-chats-wrap .attachetment-buttons a:hover .download-arrow,
#page-container .support-form-fields-wrap .attachetment-buttons a:hover .download-arrow {
	opacity: 1;
	/* #ff6699 */
	filter: brightness(0) saturate(100%) invert(56%) sepia(51%) saturate(2329%) hue-rotate(310deg) brightness(101%) contrast(101%);
}