/* Website Design Galaxy v207 process-theme patch.
   The process cards now belong to the active site theme instead of sharing
   the old non-Light purple treatment. */

html[data-theme] {
  --process-card-bg: linear-gradient(145deg, #17102a 0%, #2e1b4a 58%, #15384a 100%);
  --process-card-bg-hover: linear-gradient(145deg, #21153a 0%, #3b245d 58%, #19495d 100%);
  --process-card-title: #fffaf2;
  --process-card-copy: #e6deef;
  --process-card-border: rgba(213, 195, 231, .30);
  --process-card-border-hover: rgba(243, 203, 117, .68);
  --process-card-accent: linear-gradient(90deg, #f3cb75, #35c7c7 54%, #9b7cff);
  --process-icon-bg: rgba(255, 250, 242, .10);
  --process-icon-border: rgba(255, 250, 242, .20);
  --process-icon-color: #f3cb75;
  --process-card-shadow: 0 18px 42px rgba(9, 4, 18, .28), inset 0 1px rgba(255, 255, 255, .10);
  --process-card-shadow-hover: 0 25px 56px rgba(9, 4, 18, .38), 0 0 0 1px rgba(243, 203, 117, .18), inset 0 1px rgba(255, 255, 255, .14);
  --process-card-sheen: rgba(255, 255, 255, .50);
}

html[data-theme="light"] {
  --process-card-bg: linear-gradient(145deg, #ffffff 0%, #f3f6f7 100%);
  --process-card-bg-hover: linear-gradient(145deg, #ffffff 0%, #e9f1f2 100%);
  --process-card-title: #121920;
  --process-card-copy: #46515c;
  --process-card-border: #c8cfd4;
  --process-card-border-hover: #398c91;
  --process-card-accent: linear-gradient(90deg, #1b5b60, #398c91 62%, #8c713e);
  --process-icon-bg: #e3edef;
  --process-icon-border: #b9cdd0;
  --process-icon-color: #164e53;
  --process-card-shadow: 0 16px 34px rgba(18, 25, 32, .12), inset 0 1px #ffffff;
  --process-card-shadow-hover: 0 23px 48px rgba(18, 25, 32, .18), 0 0 0 1px rgba(57, 140, 145, .16), inset 0 1px #ffffff;
  --process-card-sheen: rgba(255, 255, 255, .76);
}

html[data-theme="solar"] {
  --process-card-bg: linear-gradient(145deg, #211a13 0%, #3b2b1d 58%, #49331f 100%);
  --process-card-bg-hover: linear-gradient(145deg, #2b2117 0%, #4b3522 58%, #5b3d22 100%);
  --process-card-title: #fff8ec;
  --process-card-copy: #eadfce;
  --process-card-border: rgba(224, 181, 115, .34);
  --process-card-border-hover: rgba(242, 200, 131, .76);
  --process-card-accent: linear-gradient(90deg, #e2af64, #c07835 56%, #70a2a2);
  --process-icon-bg: rgba(242, 200, 131, .12);
  --process-icon-border: rgba(242, 200, 131, .28);
  --process-icon-color: #f2c883;
  --process-card-shadow: 0 18px 42px rgba(19, 13, 7, .30), inset 0 1px rgba(255, 248, 236, .09);
  --process-card-shadow-hover: 0 25px 56px rgba(19, 13, 7, .42), 0 0 0 1px rgba(242, 200, 131, .18), inset 0 1px rgba(255, 248, 236, .13);
  --process-card-sheen: rgba(255, 244, 223, .42);
}

html[data-theme="midnight"] {
  --process-card-bg: linear-gradient(145deg, #0b1624 0%, #152a40 58%, #193a50 100%);
  --process-card-bg-hover: linear-gradient(145deg, #0e1d2f 0%, #1c3651 58%, #204a63 100%);
  --process-card-title: #f7fbff;
  --process-card-copy: #d4e0e9;
  --process-card-border: rgba(137, 182, 214, .32);
  --process-card-border-hover: rgba(157, 207, 232, .72);
  --process-card-accent: linear-gradient(90deg, #79a4c2, #5f9dab 58%, #c2b980);
  --process-icon-bg: rgba(121, 164, 194, .14);
  --process-icon-border: rgba(157, 207, 232, .28);
  --process-icon-color: #a8d4f0;
  --process-card-shadow: 0 18px 42px rgba(2, 8, 16, .34), inset 0 1px rgba(247, 251, 255, .09);
  --process-card-shadow-hover: 0 25px 56px rgba(2, 8, 16, .46), 0 0 0 1px rgba(157, 207, 232, .17), inset 0 1px rgba(247, 251, 255, .13);
  --process-card-sheen: rgba(228, 244, 255, .44);
}

html[data-theme="nebula"] {
  --process-card-bg: linear-gradient(145deg, #201723 0%, #39283f 58%, #47334d 100%);
  --process-card-bg-hover: linear-gradient(145deg, #291d2d 0%, #493451 58%, #59405f 100%);
  --process-card-title: #fff8ff;
  --process-card-copy: #e5d9e7;
  --process-card-border: rgba(190, 160, 194, .34);
  --process-card-border-hover: rgba(218, 187, 221, .72);
  --process-card-accent: linear-gradient(90deg, #a68aaa, #6da0a4 58%, #c4a76c);
  --process-icon-bg: rgba(190, 160, 194, .13);
  --process-icon-border: rgba(218, 187, 221, .28);
  --process-icon-color: #dec0e1;
  --process-card-shadow: 0 18px 42px rgba(12, 7, 14, .32), inset 0 1px rgba(255, 248, 255, .09);
  --process-card-shadow-hover: 0 25px 56px rgba(12, 7, 14, .44), 0 0 0 1px rgba(218, 187, 221, .17), inset 0 1px rgba(255, 248, 255, .13);
  --process-card-sheen: rgba(255, 238, 255, .42);
}

html[data-theme="emerald"] {
  --process-card-bg: linear-gradient(145deg, #0e2018 0%, #1c392c 58%, #224a39 100%);
  --process-card-bg-hover: linear-gradient(145deg, #122a20 0%, #254a39 58%, #2b5c46 100%);
  --process-card-title: #f6fff9;
  --process-card-copy: #d5e8dc;
  --process-card-border: rgba(123, 184, 151, .35);
  --process-card-border-hover: rgba(155, 213, 180, .76);
  --process-card-accent: linear-gradient(90deg, #69a184, #4f8d79 58%, #c3ad6d);
  --process-icon-bg: rgba(105, 161, 132, .15);
  --process-icon-border: rgba(155, 213, 180, .29);
  --process-icon-color: #a9dabf;
  --process-card-shadow: 0 18px 42px rgba(3, 13, 9, .34), inset 0 1px rgba(246, 255, 249, .09);
  --process-card-shadow-hover: 0 25px 56px rgba(3, 13, 9, .46), 0 0 0 1px rgba(155, 213, 180, .18), inset 0 1px rgba(246, 255, 249, .13);
  --process-card-sheen: rgba(225, 255, 237, .42);
}

html[data-theme="crimson"] {
  --process-card-bg: linear-gradient(145deg, #251316 0%, #422329 58%, #552a32 100%);
  --process-card-bg-hover: linear-gradient(145deg, #30181c 0%, #542c34 58%, #683640 100%);
  --process-card-title: #fff8f8;
  --process-card-copy: #ead7da;
  --process-card-border: rgba(198, 125, 134, .34);
  --process-card-border-hover: rgba(235, 164, 172, .74);
  --process-card-accent: linear-gradient(90deg, #b36b72, #91474f 58%, #c6a46c);
  --process-icon-bg: rgba(179, 107, 114, .14);
  --process-icon-border: rgba(235, 164, 172, .28);
  --process-icon-color: #efb7bd;
  --process-card-shadow: 0 18px 42px rgba(17, 6, 8, .33), inset 0 1px rgba(255, 248, 248, .09);
  --process-card-shadow-hover: 0 25px 56px rgba(17, 6, 8, .45), 0 0 0 1px rgba(235, 164, 172, .17), inset 0 1px rgba(255, 248, 248, .13);
  --process-card-sheen: rgba(255, 232, 235, .42);
}

html[data-theme] body main .process-steps-section .process-timeline > article {
  padding: 22px !important;
  background: var(--process-card-bg) !important;
  border-color: var(--process-card-border) !important;
  color: var(--process-card-title) !important;
  -webkit-text-fill-color: var(--process-card-title) !important;
  box-shadow: var(--process-card-shadow) !important;
  animation: none !important;
  filter: none !important;
  transition: transform .22s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease !important;
}

html[data-theme] body main .process-steps-section .process-timeline > article::before {
  background: var(--process-card-accent) !important;
}

html[data-theme] body main .process-steps-section .process-timeline > article::after {
  background: linear-gradient(115deg, transparent 0 34%, var(--process-card-sheen) 48%, transparent 62%) !important;
}

html[data-theme] body main .process-steps-section .process-timeline > article h3 {
  color: var(--process-card-title) !important;
  -webkit-text-fill-color: var(--process-card-title) !important;
  text-shadow: none !important;
}

html[data-theme] body main .process-steps-section .process-timeline > article p {
  color: var(--process-card-copy) !important;
  -webkit-text-fill-color: var(--process-card-copy) !important;
  text-shadow: none !important;
}

html[data-theme] body main .process-steps-section .process-timeline > article > .timeline-icon {
  background: var(--process-icon-bg) !important;
  border-color: var(--process-icon-border) !important;
  color: var(--process-icon-color) !important;
  -webkit-text-fill-color: var(--process-icon-color) !important;
  box-shadow: none !important;
}

html[data-theme] body main .process-steps-section .process-timeline > article > .timeline-icon svg {
  color: inherit !important;
  stroke: currentColor !important;
}

@media (hover: hover) and (pointer: fine) {
  html[data-theme] body main .process-steps-section .process-timeline > article:hover,
  html[data-theme] body main .process-steps-section .process-timeline > article:focus-within {
    background: var(--process-card-bg-hover) !important;
    border-color: var(--process-card-border-hover) !important;
    box-shadow: var(--process-card-shadow-hover) !important;
    transform: translateY(-5px) !important;
    animation: none !important;
    filter: none !important;
  }

  html[data-theme] body main .process-steps-section .process-timeline > article:hover > .timeline-icon,
  html[data-theme] body main .process-steps-section .process-timeline > article:focus-within > .timeline-icon {
    transform: translateY(-2px) scale(1.05) !important;
    border-color: var(--process-card-border-hover) !important;
  }
}

@media (max-width: 760px) {
  html[data-theme] body main .process-steps-section .process-timeline > article {
    padding: 18px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme] body main .process-steps-section .process-timeline > article,
  html[data-theme] body main .process-steps-section .process-timeline > article > .timeline-icon {
    transition: none !important;
    transform: none !important;
  }

  html[data-theme] body main .process-steps-section .process-timeline > article:hover,
  html[data-theme] body main .process-steps-section .process-timeline > article:focus-within,
  html[data-theme] body main .process-steps-section .process-timeline > article:hover > .timeline-icon,
  html[data-theme] body main .process-steps-section .process-timeline > article:focus-within > .timeline-icon {
    transform: none !important;
  }
}
