.elementor-210 .elementor-element.elementor-element-4178f3b6{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:80px;--padding-bottom:80px;--padding-left:0px;--padding-right:0px;}.elementor-210 .elementor-element.elementor-element-28d54b0c{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;}.elementor-210 .elementor-element.elementor-element-7360a351{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;border-style:solid;--border-style:solid;border-width:5px 0px 0px 0px;--border-top-width:5px;--border-right-width:0px;--border-bottom-width:0px;--border-left-width:0px;border-color:#F3F600;--border-color:#F3F600;--border-radius:18px 18px 18px 18px;--padding-top:30px;--padding-bottom:30px;--padding-left:30px;--padding-right:30px;}.elementor-210 .elementor-element.elementor-element-7360a351:not(.elementor-motion-effects-element-type-background), .elementor-210 .elementor-element.elementor-element-7360a351 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#151515;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Poppins;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-210 .elementor-element.elementor-element-7f29f1aa{text-align:center;}.elementor-210 .elementor-element.elementor-element-7f29f1aa .elementor-heading-title{font-family:"Anton", Poppins;font-size:42px;font-weight:300;text-transform:uppercase;color:#FFFFFF;}.elementor-widget-divider{--divider-color:var( --e-global-color-secondary );}.elementor-widget-divider .elementor-divider__text{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-secondary-font-family ), Poppins;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-divider.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon{color:var( --e-global-color-secondary );border-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-secondary );}.elementor-210 .elementor-element.elementor-element-5d412699{--divider-border-style:solid;--divider-color:#F3F600;--divider-border-width:3px;}.elementor-210 .elementor-element.elementor-element-5d412699 .elementor-divider-separator{width:60px;margin:0 auto;margin-center:0;}.elementor-210 .elementor-element.elementor-element-5d412699 .elementor-divider{text-align:center;padding-block-start:15px;padding-block-end:15px;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Poppins;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-210 .elementor-element.elementor-element-58bb5a5{text-align:center;font-family:"Inter", Poppins;font-size:14px;font-weight:400;line-height:1.4em;color:#777777;}.elementor-210 .elementor-element.elementor-element-b979370{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:center;--gap:10px 10px;--row-gap:10px;--column-gap:10px;border-style:none;--border-style:none;--margin-top:0px;--margin-bottom:-20px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-210 .elementor-element.elementor-element-b979370:not(.elementor-motion-effects-element-type-background), .elementor-210 .elementor-element.elementor-element-b979370 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#02010100;}.elementor-210 .elementor-element.elementor-element-01b366d{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:center;--gap:10px 10px;--row-gap:10px;--column-gap:10px;border-style:none;--border-style:none;--margin-top:0px;--margin-bottom:-20px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-210 .elementor-element.elementor-element-01b366d:not(.elementor-motion-effects-element-type-background), .elementor-210 .elementor-element.elementor-element-01b366d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#02010100;}.elementor-210 .elementor-element.elementor-element-76f06a1b{--divider-border-style:solid;--divider-color:#2A2A2A;--divider-border-width:1px;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 14px) 0px;}.elementor-210 .elementor-element.elementor-element-76f06a1b .elementor-divider-separator{width:100%;}.elementor-210 .elementor-element.elementor-element-76f06a1b .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-210 .elementor-element.elementor-element-a18f3f2{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:center;--gap:10px 10px;--row-gap:10px;--column-gap:10px;border-style:none;--border-style:none;--margin-top:0px;--margin-bottom:-20px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-210 .elementor-element.elementor-element-a18f3f2:not(.elementor-motion-effects-element-type-background), .elementor-210 .elementor-element.elementor-element-a18f3f2 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#02010100;}.elementor-210 .elementor-element.elementor-element-678cff78{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:stretch;}.elementor-210 .elementor-element.elementor-element-7c58bf88{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:32px 32px;--row-gap:32px;--column-gap:32px;--padding-top:40px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-210 .elementor-element.elementor-element-2d29f364{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;border-style:solid;--border-style:solid;border-width:1px 1px 1px 1px;--border-top-width:1px;--border-right-width:1px;--border-bottom-width:1px;--border-left-width:1px;border-color:#1F1F1F;--border-color:#1F1F1F;--border-radius:18px 18px 18px 18px;--padding-top:24px;--padding-bottom:24px;--padding-left:24px;--padding-right:24px;}.elementor-210 .elementor-element.elementor-element-2d29f364:not(.elementor-motion-effects-element-type-background), .elementor-210 .elementor-element.elementor-element-2d29f364 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0B0B0B;}.elementor-210 .elementor-element.elementor-element-2da27a52{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--gap:8px 8px;--row-gap:8px;--column-gap:8px;}.elementor-210 .elementor-element.elementor-element-3b43caa{text-align:start;}.elementor-210 .elementor-element.elementor-element-3b43caa .elementor-heading-title{font-family:"Anton", Poppins;font-size:26px;font-weight:300;color:#FFFFFF;}.elementor-210 .elementor-element.elementor-element-e0995ec{text-align:start;}.elementor-210 .elementor-element.elementor-element-e0995ec .elementor-heading-title{font-family:"Anton", Poppins;font-size:26px;font-weight:300;color:#FFFFFF;}.elementor-widget-icon-list .elementor-icon-list-icon i{color:var( --e-global-color-primary );}.elementor-widget-icon-list .elementor-icon-list-icon svg{fill:var( --e-global-color-primary );}.elementor-widget-icon-list .elementor-icon-list-item > .elementor-icon-list-text, .elementor-widget-icon-list .elementor-icon-list-item > a{font-family:var( --e-global-typography-text-font-family ), Poppins;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-icon-list .elementor-icon-list-text{color:var( --e-global-color-secondary );}.elementor-210 .elementor-element.elementor-element-2034679b{margin:10px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-210 .elementor-element.elementor-element-2034679b .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(16px/2);}.elementor-210 .elementor-element.elementor-element-2034679b .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(16px/2);}.elementor-210 .elementor-element.elementor-element-2034679b .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(16px/2);}.elementor-210 .elementor-element.elementor-element-2034679b .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-16px/2);}.elementor-210 .elementor-element.elementor-element-2034679b .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-16px/2);}.elementor-210 .elementor-element.elementor-element-2034679b .elementor-icon-list-icon i{color:#666666;transition:color 0.3s;}.elementor-210 .elementor-element.elementor-element-2034679b .elementor-icon-list-icon svg{fill:#666666;transition:fill 0.3s;}.elementor-210 .elementor-element.elementor-element-2034679b .elementor-icon-list-item:hover .elementor-icon-list-icon i{color:#FFFFFF;}.elementor-210 .elementor-element.elementor-element-2034679b .elementor-icon-list-item:hover .elementor-icon-list-icon svg{fill:#FFFFFF;}.elementor-210 .elementor-element.elementor-element-2034679b .elementor-icon-list-item > .elementor-icon-list-text, .elementor-210 .elementor-element.elementor-element-2034679b .elementor-icon-list-item > a{font-family:"Inter", Poppins;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;}.elementor-210 .elementor-element.elementor-element-2034679b .elementor-icon-list-text{color:#888888;transition:color 0.3s;}.elementor-210 .elementor-element.elementor-element-2034679b .elementor-icon-list-item:hover .elementor-icon-list-text{color:#FFFFFF;}.elementor-210 .elementor-element.elementor-element-6b344ff3{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;border-style:solid;--border-style:solid;border-width:1px 1px 1px 1px;--border-top-width:1px;--border-right-width:1px;--border-bottom-width:1px;--border-left-width:1px;border-color:#1F1F1F;--border-color:#1F1F1F;--border-radius:18px 18px 18px 18px;--padding-top:24px;--padding-bottom:24px;--padding-left:24px;--padding-right:24px;}.elementor-210 .elementor-element.elementor-element-6b344ff3:not(.elementor-motion-effects-element-type-background), .elementor-210 .elementor-element.elementor-element-6b344ff3 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0B0B0B;}.elementor-210 .elementor-element.elementor-element-2568e02f{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:flex-end;}.elementor-210 .elementor-element.elementor-element-5e1e4767{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-210 .elementor-element.elementor-element-5e1e4767 .elementor-heading-title{font-family:"Anton", Poppins;font-size:40px;font-weight:300;color:#FFFFFF;}.elementor-210 .elementor-element.elementor-element-13cbaff4{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-210 .elementor-element.elementor-element-13cbaff4 .elementor-heading-title{font-family:"Inter", Poppins;font-size:14px;font-weight:800;letter-spacing:1px;color:#F3F600;}.elementor-210 .elementor-element.elementor-element-92f2120{--divider-border-style:solid;--divider-color:#222222;--divider-border-width:1px;}.elementor-210 .elementor-element.elementor-element-92f2120 .elementor-divider-separator{width:100%;}.elementor-210 .elementor-element.elementor-element-92f2120 .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-210 .elementor-element.elementor-element-0866488{margin:-60px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-210 .elementor-element.elementor-element-a1c2840{--display:flex;}.elementor-210 .elementor-element.elementor-element-a1c2840.e-con{--align-self:flex-end;}.elementor-210 .elementor-element.elementor-element-aa665c9{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;border-style:solid;--border-style:solid;border-width:1px 1px 1px 1px;--border-top-width:1px;--border-right-width:1px;--border-bottom-width:1px;--border-left-width:1px;border-color:#1F1F1F;--border-color:#1F1F1F;--border-radius:18px 18px 18px 18px;--padding-top:24px;--padding-bottom:24px;--padding-left:24px;--padding-right:24px;}.elementor-210 .elementor-element.elementor-element-aa665c9:not(.elementor-motion-effects-element-type-background), .elementor-210 .elementor-element.elementor-element-aa665c9 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0B0B0B;}.elementor-210 .elementor-element.elementor-element-373f4a7{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:flex-end;}.elementor-210 .elementor-element.elementor-element-9e91cc0{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-210 .elementor-element.elementor-element-9e91cc0 .elementor-heading-title{font-family:"Anton", Poppins;font-size:40px;font-weight:300;color:#FFFFFF;}.elementor-210 .elementor-element.elementor-element-58ed29e{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-210 .elementor-element.elementor-element-58ed29e .elementor-heading-title{font-family:"Inter", Poppins;font-size:14px;font-weight:800;letter-spacing:1px;color:#F3F600;}.elementor-210 .elementor-element.elementor-element-03f93f8{--divider-border-style:solid;--divider-color:#222222;--divider-border-width:1px;}.elementor-210 .elementor-element.elementor-element-03f93f8 .elementor-divider-separator{width:100%;}.elementor-210 .elementor-element.elementor-element-03f93f8 .elementor-divider{padding-block-start:15px;padding-block-end:15px;}:root{--page-title-display:none;}@media(max-width:767px){.elementor-210 .elementor-element.elementor-element-4178f3b6{--padding-top:3rem;--padding-bottom:5rem;--padding-left:1rem;--padding-right:1rem;}}@media(min-width:768px){.elementor-210 .elementor-element.elementor-element-4178f3b6{--content-width:1400px;}.elementor-210 .elementor-element.elementor-element-7360a351{--width:460px;}.elementor-210 .elementor-element.elementor-element-7c58bf88{--content-width:1400px;}.elementor-210 .elementor-element.elementor-element-2d29f364{--width:25%;}.elementor-210 .elementor-element.elementor-element-6b344ff3{--width:75%;}.elementor-210 .elementor-element.elementor-element-a1c2840{--width:100%;}.elementor-210 .elementor-element.elementor-element-aa665c9{--width:100%;}}/* Start custom CSS for shortcode, class: .elementor-element-290b039d *//* ===============================
Salty Dog — Account Tracker UI
Shortcode wrapper: .sdot-account
================================ */
.sdot-account{
--sd-yellow:#E8F400;
--sd-border:#1f1f1f;
--sd-line:#2a2a2a;
--sd-text:#eaeaea;
--sd-dim:#9a9a9a;
--sd-dimmer:#6f6f6f;
color: var(--sd-text);
width: 100%;
}
/* Header (IN PRODUCTION / EST DELIVERY) */
.sdot-head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:24px;
padding: 8px 0 18px 0;
}
.sdot-status-row{
display:flex;
align-items:center;
gap:10px;
flex-wrap:wrap;
}
.sdot-status-title{
font-weight:900;
letter-spacing:.04em;
text-transform:uppercase;
font-size: 18px;
}
.sdot-badge{
display:inline-flex;
align-items:center;
justify-content:center;
padding: 4px 10px;
border-radius: 6px;
font-size: 11px;
letter-spacing:.06em;
text-transform:uppercase;
color: #111;
background: rgba(232,244,0,.18);
border: 1px solid rgba(232,244,0,.35);
}
.sdot-meta{
margin-top: 6px;
font-size: 12px;
color: var(--sd-dim);
}
.sdot-dot{ opacity:.7; margin: 0 6px; }
.sdot-head-right{
text-align:right;
min-width: 130px;
}
.sdot-est-label{
font-size: 11px;
letter-spacing:.12em;
text-transform:uppercase;
color: var(--sd-dimmer);
}
.sdot-est-date{
margin-top: 4px;
font-size: 18px;
font-weight: 800;
letter-spacing:.06em;
text-transform:uppercase;
color: #fff;
}
/* Tracker line */
.sdot-track{
position:relative;
padding-top: 18px;
padding-bottom: 6px;
}
.sdot-line{
position:absolute;
left: 0;
right: 0;
top: 34px;
height: 2px;
background: rgba(255,255,255,.10);
border-radius: 2px;
overflow:hidden;
}
.sdot-line:before{
content:"";
position:absolute;
left:0; top:0; bottom:0;
width: var(--sdot-progress, 0%);
background: var(--sd-yellow);
box-shadow: 0 0 16px rgba(232,244,0,.25);
}
/* Steps layout */
.sdot-step{
position:relative;
display:inline-flex;
flex-direction:column;
align-items:center;
text-align:center;
width: calc(100% / 5);
}
.sdot-track{
display:flex;
justify-content:space-between;
gap: 0;
}
/* Dot */
.sdot-dot{
width: 42px;
height: 42px;
border-radius: 999px;
display:flex;
align-items:center;
justify-content:center;
background: rgba(0,0,0,.55);
border: 1px solid rgba(255,255,255,.12);
box-shadow: 0 8px 28px rgba(0,0,0,.35);
margin-bottom: 10px;
}
/* Numbers / check / gear */
.sdot-num{ color: rgba(255,255,255,.55); font-weight:800; }
.sdot-check{ color: #111; font-weight:900; }
.sdot-gear{
display:inline-block;
color:#111;
font-size: 16px;
animation: sdotSpin 2.6s linear infinite;
}
@keyframes sdotSpin{
from{ transform: rotate(0deg); }
to{ transform: rotate(360deg); }
}
/* Text */
.sdot-label{
font-size: 11px;
font-weight: 800;
letter-spacing:.08em;
text-transform:uppercase;
color: rgba(255,255,255,.70);
}
.sdot-sub{
margin-top: 4px;
font-size: 11px;
line-height: 1.25;
color: rgba(255,255,255,.45);
}
/* States */
.sdot-step.is-done .sdot-dot{
background: var(--sd-yellow);
border-color: rgba(232,244,0,.55);
}
.sdot-step.is-done .sdot-check{ display:block; }
.sdot-step.is-current .sdot-dot{
border-color: rgba(232,244,0,.9);
box-shadow: 0 0 0 6px rgba(232,244,0,.08), 0 10px 30px rgba(0,0,0,.45);
}
.sdot-step.is-current .sdot-label{ color: var(--sd-yellow); }
.sdot-step.is-current .sdot-sub{ color: rgba(255,255,255,.55); }
/* Mobile */
@media (max-width: 820px){
.sdot-head{ flex-direction:column; align-items:flex-start; }
.sdot-head-right{ text-align:left; }
.sdot-step{ width: calc(100% / 5); }
.sdot-label{ font-size: 10px; }
.sdot-sub{ font-size: 10px; }
.sdot-dot{ width: 38px; height: 38px; }
}
/* Ensure tracker layout is correctly anchored */
.sd-order-tracker {
position: relative;
}
.sd-track {
position: relative;
}
.sd-track__steps {
position: relative;
}
.sd-track__dot {
position: relative; /* was absolute in thank-you context */
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-83ee31c *//* ===============================
Salty Dog — Account Tracker UI
Shortcode wrapper: .sdot-account
================================ */
.sdot-account{
--sd-yellow:#E8F400;
--sd-border:#1f1f1f;
--sd-line:#2a2a2a;
--sd-text:#eaeaea;
--sd-dim:#9a9a9a;
--sd-dimmer:#6f6f6f;
color: var(--sd-text);
width: 100%;
}
/* Header (IN PRODUCTION / EST DELIVERY) */
.sdot-head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:24px;
padding: 8px 0 18px 0;
}
.sdot-status-row{
display:flex;
align-items:center;
gap:10px;
flex-wrap:wrap;
}
.sdot-status-title{
font-weight:900;
letter-spacing:.04em;
text-transform:uppercase;
font-size: 18px;
}
.sdot-badge{
display:inline-flex;
align-items:center;
justify-content:center;
padding: 4px 10px;
border-radius: 6px;
font-size: 11px;
letter-spacing:.06em;
text-transform:uppercase;
color: #111;
background: rgba(232,244,0,.18);
border: 1px solid rgba(232,244,0,.35);
}
.sdot-meta{
margin-top: 6px;
font-size: 12px;
color: var(--sd-dim);
}
.sdot-dot{ opacity:.7; margin: 0 6px; }
.sdot-head-right{
text-align:right;
min-width: 130px;
}
.sdot-est-label{
font-size: 11px;
letter-spacing:.12em;
text-transform:uppercase;
color: var(--sd-dimmer);
}
.sdot-est-date{
margin-top: 4px;
font-size: 18px;
font-weight: 800;
letter-spacing:.06em;
text-transform:uppercase;
color: #fff;
}
/* Tracker line */
.sdot-track{
position:relative;
padding-top: 18px;
padding-bottom: 6px;
}
.sdot-line{
position:absolute;
left: 0;
right: 0;
top: 34px;
height: 2px;
background: rgba(255,255,255,.10);
border-radius: 2px;
overflow:hidden;
}
.sdot-line:before{
content:"";
position:absolute;
left:0; top:0; bottom:0;
width: var(--sdot-progress, 0%);
background: var(--sd-yellow);
box-shadow: 0 0 16px rgba(232,244,0,.25);
}
/* Steps layout */
.sdot-step{
position:relative;
display:inline-flex;
flex-direction:column;
align-items:center;
text-align:center;
width: calc(100% / 5);
}
.sdot-track{
display:flex;
justify-content:space-between;
gap: 0;
}
/* Dot */
.sdot-dot{
width: 42px;
height: 42px;
border-radius: 999px;
display:flex;
align-items:center;
justify-content:center;
background: rgba(0,0,0,.55);
border: 1px solid rgba(255,255,255,.12);
box-shadow: 0 8px 28px rgba(0,0,0,.35);
margin-bottom: 10px;
}
/* Numbers / check / gear */
.sdot-num{ color: rgba(255,255,255,.55); font-weight:800; }
.sdot-check{ color: #111; font-weight:900; }
.sdot-gear{
display:inline-block;
color:#111;
font-size: 16px;
animation: sdotSpin 2.6s linear infinite;
}
@keyframes sdotSpin{
from{ transform: rotate(0deg); }
to{ transform: rotate(360deg); }
}
/* Text */
.sdot-label{
font-size: 11px;
font-weight: 800;
letter-spacing:.08em;
text-transform:uppercase;
color: rgba(255,255,255,.70);
}
.sdot-sub{
margin-top: 4px;
font-size: 11px;
line-height: 1.25;
color: rgba(255,255,255,.45);
}
/* States */
.sdot-step.is-done .sdot-dot{
background: var(--sd-yellow);
border-color: rgba(232,244,0,.55);
}
.sdot-step.is-done .sdot-check{ display:block; }
.sdot-step.is-current .sdot-dot{
border-color: rgba(232,244,0,.9);
box-shadow: 0 0 0 6px rgba(232,244,0,.08), 0 10px 30px rgba(0,0,0,.45);
}
.sdot-step.is-current .sdot-label{ color: var(--sd-yellow); }
.sdot-step.is-current .sdot-sub{ color: rgba(255,255,255,.55); }
/* Mobile */
@media (max-width: 820px){
.sdot-head{ flex-direction:column; align-items:flex-start; }
.sdot-head-right{ text-align:left; }
.sdot-step{ width: calc(100% / 5); }
.sdot-label{ font-size: 10px; }
.sdot-sub{ font-size: 10px; }
.sdot-dot{ width: 38px; height: 38px; }
}
/* Ensure tracker layout is correctly anchored */
.sd-order-tracker {
position: relative;
}
.sd-track {
position: relative;
}
.sd-track__steps {
position: relative;
}
.sd-track__dot {
position: relative; /* was absolute in thank-you context */
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-fe27c10 *//* ===============================
Salty Dog — Account Tracker UI
Shortcode wrapper: .sdot-account
================================ */
.sdot-account{
--sd-yellow:#E8F400;
--sd-border:#1f1f1f;
--sd-line:#2a2a2a;
--sd-text:#eaeaea;
--sd-dim:#9a9a9a;
--sd-dimmer:#6f6f6f;
color: var(--sd-text);
width: 100%;
}
/* Header (IN PRODUCTION / EST DELIVERY) */
.sdot-head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:24px;
padding: 8px 0 18px 0;
}
.sdot-status-row{
display:flex;
align-items:center;
gap:10px;
flex-wrap:wrap;
}
.sdot-status-title{
font-weight:900;
letter-spacing:.04em;
text-transform:uppercase;
font-size: 18px;
}
.sdot-badge{
display:inline-flex;
align-items:center;
justify-content:center;
padding: 4px 10px;
border-radius: 6px;
font-size: 11px;
letter-spacing:.06em;
text-transform:uppercase;
color: #111;
background: rgba(232,244,0,.18);
border: 1px solid rgba(232,244,0,.35);
}
.sdot-meta{
margin-top: 6px;
font-size: 12px;
color: var(--sd-dim);
}
.sdot-dot{ opacity:.7; margin: 0 6px; }
.sdot-head-right{
text-align:right;
min-width: 130px;
}
.sdot-est-label{
font-size: 11px;
letter-spacing:.12em;
text-transform:uppercase;
color: var(--sd-dimmer);
}
.sdot-est-date{
margin-top: 4px;
font-size: 18px;
font-weight: 800;
letter-spacing:.06em;
text-transform:uppercase;
color: #fff;
}
/* Tracker line */
.sdot-track{
position:relative;
padding-top: 18px;
padding-bottom: 6px;
}
.sdot-line{
position:absolute;
left: 0;
right: 0;
top: 34px;
height: 2px;
background: rgba(255,255,255,.10);
border-radius: 2px;
overflow:hidden;
}
.sdot-line:before{
content:"";
position:absolute;
left:0; top:0; bottom:0;
width: var(--sdot-progress, 0%);
background: var(--sd-yellow);
box-shadow: 0 0 16px rgba(232,244,0,.25);
}
/* Steps layout */
.sdot-step{
position:relative;
display:inline-flex;
flex-direction:column;
align-items:center;
text-align:center;
width: calc(100% / 5);
}
.sdot-track{
display:flex;
justify-content:space-between;
gap: 0;
}
/* Dot */
.sdot-dot{
width: 42px;
height: 42px;
border-radius: 999px;
display:flex;
align-items:center;
justify-content:center;
background: rgba(0,0,0,.55);
border: 1px solid rgba(255,255,255,.12);
box-shadow: 0 8px 28px rgba(0,0,0,.35);
margin-bottom: 10px;
}
/* Numbers / check / gear */
.sdot-num{ color: rgba(255,255,255,.55); font-weight:800; }
.sdot-check{ color: #111; font-weight:900; }
.sdot-gear{
display:inline-block;
color:#111;
font-size: 16px;
animation: sdotSpin 2.6s linear infinite;
}
@keyframes sdotSpin{
from{ transform: rotate(0deg); }
to{ transform: rotate(360deg); }
}
/* Text */
.sdot-label{
font-size: 11px;
font-weight: 800;
letter-spacing:.08em;
text-transform:uppercase;
color: rgba(255,255,255,.70);
}
.sdot-sub{
margin-top: 4px;
font-size: 11px;
line-height: 1.25;
color: rgba(255,255,255,.45);
}
/* States */
.sdot-step.is-done .sdot-dot{
background: var(--sd-yellow);
border-color: rgba(232,244,0,.55);
}
.sdot-step.is-done .sdot-check{ display:block; }
.sdot-step.is-current .sdot-dot{
border-color: rgba(232,244,0,.9);
box-shadow: 0 0 0 6px rgba(232,244,0,.08), 0 10px 30px rgba(0,0,0,.45);
}
.sdot-step.is-current .sdot-label{ color: var(--sd-yellow); }
.sdot-step.is-current .sdot-sub{ color: rgba(255,255,255,.55); }
/* Mobile */
@media (max-width: 820px){
.sdot-head{ flex-direction:column; align-items:flex-start; }
.sdot-head-right{ text-align:left; }
.sdot-step{ width: calc(100% / 5); }
.sdot-label{ font-size: 10px; }
.sdot-sub{ font-size: 10px; }
.sdot-dot{ width: 38px; height: 38px; }
}
/* Ensure tracker layout is correctly anchored */
.sd-order-tracker {
position: relative;
}
.sd-track {
position: relative;
}
.sd-track__steps {
position: relative;
}
.sd-track__dot {
position: relative; /* was absolute in thank-you context */
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-f264543 *//* ===============================
Salty Dog — Account Tracker UI
Shortcode wrapper: .sdot-account
================================ */
.sdot-account{
--sd-yellow:#E8F400;
--sd-border:#1f1f1f;
--sd-line:#2a2a2a;
--sd-text:#eaeaea;
--sd-dim:#9a9a9a;
--sd-dimmer:#6f6f6f;
color: var(--sd-text);
width: 100%;
}
/* Header (IN PRODUCTION / EST DELIVERY) */
.sdot-head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:24px;
padding: 8px 0 18px 0;
}
.sdot-status-row{
display:flex;
align-items:center;
gap:10px;
flex-wrap:wrap;
}
.sdot-status-title{
font-weight:900;
letter-spacing:.04em;
text-transform:uppercase;
font-size: 18px;
}
.sdot-badge{
display:inline-flex;
align-items:center;
justify-content:center;
padding: 4px 10px;
border-radius: 6px;
font-size: 11px;
letter-spacing:.06em;
text-transform:uppercase;
color: #111;
background: rgba(232,244,0,.18);
border: 1px solid rgba(232,244,0,.35);
}
.sdot-meta{
margin-top: 6px;
font-size: 12px;
color: var(--sd-dim);
}
.sdot-dot{ opacity:.7; margin: 0 6px; }
.sdot-head-right{
text-align:right;
min-width: 130px;
}
.sdot-est-label{
font-size: 11px;
letter-spacing:.12em;
text-transform:uppercase;
color: var(--sd-dimmer);
}
.sdot-est-date{
margin-top: 4px;
font-size: 18px;
font-weight: 800;
letter-spacing:.06em;
text-transform:uppercase;
color: #fff;
}
/* Tracker line */
.sdot-track{
position:relative;
padding-top: 18px;
padding-bottom: 6px;
}
.sdot-line{
position:absolute;
left: 0;
right: 0;
top: 34px;
height: 2px;
background: rgba(255,255,255,.10);
border-radius: 2px;
overflow:hidden;
}
.sdot-line:before{
content:"";
position:absolute;
left:0; top:0; bottom:0;
width: var(--sdot-progress, 0%);
background: var(--sd-yellow);
box-shadow: 0 0 16px rgba(232,244,0,.25);
}
/* Steps layout */
.sdot-step{
position:relative;
display:inline-flex;
flex-direction:column;
align-items:center;
text-align:center;
width: calc(100% / 5);
}
.sdot-track{
display:flex;
justify-content:space-between;
gap: 0;
}
/* Dot */
.sdot-dot{
width: 42px;
height: 42px;
border-radius: 999px;
display:flex;
align-items:center;
justify-content:center;
background: rgba(0,0,0,.55);
border: 1px solid rgba(255,255,255,.12);
box-shadow: 0 8px 28px rgba(0,0,0,.35);
margin-bottom: 10px;
}
/* Numbers / check / gear */
.sdot-num{ color: rgba(255,255,255,.55); font-weight:800; }
.sdot-check{ color: #111; font-weight:900; }
.sdot-gear{
display:inline-block;
color:#111;
font-size: 16px;
animation: sdotSpin 2.6s linear infinite;
}
@keyframes sdotSpin{
from{ transform: rotate(0deg); }
to{ transform: rotate(360deg); }
}
/* Text */
.sdot-label{
font-size: 11px;
font-weight: 800;
letter-spacing:.08em;
text-transform:uppercase;
color: rgba(255,255,255,.70);
}
.sdot-sub{
margin-top: 4px;
font-size: 11px;
line-height: 1.25;
color: rgba(255,255,255,.45);
}
/* States */
.sdot-step.is-done .sdot-dot{
background: var(--sd-yellow);
border-color: rgba(232,244,0,.55);
}
.sdot-step.is-done .sdot-check{ display:block; }
.sdot-step.is-current .sdot-dot{
border-color: rgba(232,244,0,.9);
box-shadow: 0 0 0 6px rgba(232,244,0,.08), 0 10px 30px rgba(0,0,0,.45);
}
.sdot-step.is-current .sdot-label{ color: var(--sd-yellow); }
.sdot-step.is-current .sdot-sub{ color: rgba(255,255,255,.55); }
/* Mobile */
@media (max-width: 820px){
.sdot-head{ flex-direction:column; align-items:flex-start; }
.sdot-head-right{ text-align:left; }
.sdot-step{ width: calc(100% / 5); }
.sdot-label{ font-size: 10px; }
.sdot-sub{ font-size: 10px; }
.sdot-dot{ width: 38px; height: 38px; }
}
/* Ensure tracker layout is correctly anchored */
.sd-order-tracker {
position: relative;
}
.sd-track {
position: relative;
}
.sd-track__steps {
position: relative;
}
.sd-track__dot {
position: relative; /* was absolute in thank-you context */
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-d3c32af *//* ===============================
Salty Dog — Account Tracker UI
Shortcode wrapper: .sdot-account
================================ */
.sdot-account{
--sd-yellow:#E8F400;
--sd-border:#1f1f1f;
--sd-line:#2a2a2a;
--sd-text:#eaeaea;
--sd-dim:#9a9a9a;
--sd-dimmer:#6f6f6f;
color: var(--sd-text);
width: 100%;
}
/* Header (IN PRODUCTION / EST DELIVERY) */
.sdot-head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:24px;
padding: 8px 0 18px 0;
}
.sdot-status-row{
display:flex;
align-items:center;
gap:10px;
flex-wrap:wrap;
}
.sdot-status-title{
font-weight:900;
letter-spacing:.04em;
text-transform:uppercase;
font-size: 18px;
}
.sdot-badge{
display:inline-flex;
align-items:center;
justify-content:center;
padding: 4px 10px;
border-radius: 6px;
font-size: 11px;
letter-spacing:.06em;
text-transform:uppercase;
color: #111;
background: rgba(232,244,0,.18);
border: 1px solid rgba(232,244,0,.35);
}
.sdot-meta{
margin-top: 6px;
font-size: 12px;
color: var(--sd-dim);
}
.sdot-dot{ opacity:.7; margin: 0 6px; }
.sdot-head-right{
text-align:right;
min-width: 130px;
}
.sdot-est-label{
font-size: 11px;
letter-spacing:.12em;
text-transform:uppercase;
color: var(--sd-dimmer);
}
.sdot-est-date{
margin-top: 4px;
font-size: 18px;
font-weight: 800;
letter-spacing:.06em;
text-transform:uppercase;
color: #fff;
}
/* Tracker line */
.sdot-track{
position:relative;
padding-top: 18px;
padding-bottom: 6px;
}
.sdot-line{
position:absolute;
left: 0;
right: 0;
top: 34px;
height: 2px;
background: rgba(255,255,255,.10);
border-radius: 2px;
overflow:hidden;
}
.sdot-line:before{
content:"";
position:absolute;
left:0; top:0; bottom:0;
width: var(--sdot-progress, 0%);
background: var(--sd-yellow);
box-shadow: 0 0 16px rgba(232,244,0,.25);
}
/* Steps layout */
.sdot-step{
position:relative;
display:inline-flex;
flex-direction:column;
align-items:center;
text-align:center;
width: calc(100% / 5);
}
.sdot-track{
display:flex;
justify-content:space-between;
gap: 0;
}
/* Dot */
.sdot-dot{
width: 42px;
height: 42px;
border-radius: 999px;
display:flex;
align-items:center;
justify-content:center;
background: rgba(0,0,0,.55);
border: 1px solid rgba(255,255,255,.12);
box-shadow: 0 8px 28px rgba(0,0,0,.35);
margin-bottom: 10px;
}
/* Numbers / check / gear */
.sdot-num{ color: rgba(255,255,255,.55); font-weight:800; }
.sdot-check{ color: #111; font-weight:900; }
.sdot-gear{
display:inline-block;
color:#111;
font-size: 16px;
animation: sdotSpin 2.6s linear infinite;
}
@keyframes sdotSpin{
from{ transform: rotate(0deg); }
to{ transform: rotate(360deg); }
}
/* Text */
.sdot-label{
font-size: 11px;
font-weight: 800;
letter-spacing:.08em;
text-transform:uppercase;
color: rgba(255,255,255,.70);
}
.sdot-sub{
margin-top: 4px;
font-size: 11px;
line-height: 1.25;
color: rgba(255,255,255,.45);
}
/* States */
.sdot-step.is-done .sdot-dot{
background: var(--sd-yellow);
border-color: rgba(232,244,0,.55);
}
.sdot-step.is-done .sdot-check{ display:block; }
.sdot-step.is-current .sdot-dot{
border-color: rgba(232,244,0,.9);
box-shadow: 0 0 0 6px rgba(232,244,0,.08), 0 10px 30px rgba(0,0,0,.45);
}
.sdot-step.is-current .sdot-label{ color: var(--sd-yellow); }
.sdot-step.is-current .sdot-sub{ color: rgba(255,255,255,.55); }
/* Mobile */
@media (max-width: 820px){
.sdot-head{ flex-direction:column; align-items:flex-start; }
.sdot-head-right{ text-align:left; }
.sdot-step{ width: calc(100% / 5); }
.sdot-label{ font-size: 10px; }
.sdot-sub{ font-size: 10px; }
.sdot-dot{ width: 38px; height: 38px; }
}
/* Ensure tracker layout is correctly anchored */
.sd-order-tracker {
position: relative;
}
.sd-track {
position: relative;
}
.sd-track__steps {
position: relative;
}
.sd-track__dot {
position: relative; /* was absolute in thank-you context */
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-0866488 *//* ===============================
Salty Dog — Account Tracker UI
Shortcode wrapper: .sdot-account
================================ */
.sdot-account{
--sd-yellow:#E8F400;
--sd-border:#1f1f1f;
--sd-line:#2a2a2a;
--sd-text:#eaeaea;
--sd-dim:#9a9a9a;
--sd-dimmer:#6f6f6f;
color: var(--sd-text);
width: 100%;
}
/* Header (IN PRODUCTION / EST DELIVERY) */
.sdot-head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:24px;
padding: 8px 0 18px 0;
}
.sdot-status-row{
display:flex;
align-items:center;
gap:10px;
flex-wrap:wrap;
}
.sdot-status-title{
font-weight:900;
letter-spacing:.04em;
text-transform:uppercase;
font-size: 18px;
}
.sdot-badge{
display:inline-flex;
align-items:center;
justify-content:center;
padding: 4px 10px;
border-radius: 6px;
font-size: 11px;
letter-spacing:.06em;
text-transform:uppercase;
color: #111;
background: rgba(232,244,0,.18);
border: 1px solid rgba(232,244,0,.35);
}
.sdot-meta{
margin-top: 6px;
font-size: 12px;
color: var(--sd-dim);
}
.sdot-dot{ opacity:.7; margin: 0 6px; }
.sdot-head-right{
text-align:right;
min-width: 130px;
}
.sdot-est-label{
font-size: 11px;
letter-spacing:.12em;
text-transform:uppercase;
color: var(--sd-dimmer);
}
.sdot-est-date{
margin-top: 4px;
font-size: 18px;
font-weight: 800;
letter-spacing:.06em;
text-transform:uppercase;
color: #fff;
}
/* Tracker line */
.sdot-track{
position:relative;
padding-top: 18px;
padding-bottom: 6px;
}
.sdot-line{
position:absolute;
left: 0;
right: 0;
top: 34px;
height: 2px;
background: rgba(255,255,255,.10);
border-radius: 2px;
overflow:hidden;
}
.sdot-line:before{
content:"";
position:absolute;
left:0; top:0; bottom:0;
width: var(--sdot-progress, 0%);
background: var(--sd-yellow);
box-shadow: 0 0 16px rgba(232,244,0,.25);
}
/* Steps layout */
.sdot-step{
position:relative;
display:inline-flex;
flex-direction:column;
align-items:center;
text-align:center;
width: calc(100% / 5);
}
.sdot-track{
display:flex;
justify-content:space-between;
gap: 0;
}
/* Dot */
.sdot-dot{
width: 42px;
height: 42px;
border-radius: 999px;
display:flex;
align-items:center;
justify-content:center;
background: rgba(0,0,0,.55);
border: 1px solid rgba(255,255,255,.12);
box-shadow: 0 8px 28px rgba(0,0,0,.35);
margin-bottom: 10px;
}
/* Numbers / check / gear */
.sdot-num{ color: rgba(255,255,255,.55); font-weight:800; }
.sdot-check{ color: #111; font-weight:900; }
.sdot-gear{
display:inline-block;
color:#111;
font-size: 16px;
animation: sdotSpin 2.6s linear infinite;
}
@keyframes sdotSpin{
from{ transform: rotate(0deg); }
to{ transform: rotate(360deg); }
}
/* Text */
.sdot-label{
font-size: 11px;
font-weight: 800;
letter-spacing:.08em;
text-transform:uppercase;
color: rgba(255,255,255,.70);
}
.sdot-sub{
margin-top: 4px;
font-size: 11px;
line-height: 1.25;
color: rgba(255,255,255,.45);
}
/* States */
.sdot-step.is-done .sdot-dot{
background: var(--sd-yellow);
border-color: rgba(232,244,0,.55);
}
.sdot-step.is-done .sdot-check{ display:block; }
.sdot-step.is-current .sdot-dot{
border-color: rgba(232,244,0,.9);
box-shadow: 0 0 0 6px rgba(232,244,0,.08), 0 10px 30px rgba(0,0,0,.45);
}
.sdot-step.is-current .sdot-label{ color: var(--sd-yellow); }
.sdot-step.is-current .sdot-sub{ color: rgba(255,255,255,.55); }
/* Mobile */
@media (max-width: 820px){
.sdot-head{ flex-direction:column; align-items:flex-start; }
.sdot-head-right{ text-align:left; }
.sdot-step{ width: calc(100% / 5); }
.sdot-label{ font-size: 10px; }
.sdot-sub{ font-size: 10px; }
.sdot-dot{ width: 38px; height: 38px; }
}
/* Ensure tracker layout is correctly anchored */
.sd-order-tracker {
position: relative;
}
.sd-track {
position: relative;
}
.sd-track__steps {
position: relative;
}
.sd-track__dot {
position: relative; /* was absolute in thank-you context */
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-2bf526e *//* ===============================
Salty Dog — Account Tracker UI
Shortcode wrapper: .sdot-account
================================ */
.sdot-account{
--sd-yellow:#E8F400;
--sd-border:#1f1f1f;
--sd-line:#2a2a2a;
--sd-text:#eaeaea;
--sd-dim:#9a9a9a;
--sd-dimmer:#6f6f6f;
color: var(--sd-text);
width: 100%;
}
/* Header (IN PRODUCTION / EST DELIVERY) */
.sdot-head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:24px;
padding: 8px 0 18px 0;
}
.sdot-status-row{
display:flex;
align-items:center;
gap:10px;
flex-wrap:wrap;
}
.sdot-status-title{
font-weight:900;
letter-spacing:.04em;
text-transform:uppercase;
font-size: 18px;
}
.sdot-badge{
display:inline-flex;
align-items:center;
justify-content:center;
padding: 4px 10px;
border-radius: 6px;
font-size: 11px;
letter-spacing:.06em;
text-transform:uppercase;
color: #111;
background: rgba(232,244,0,.18);
border: 1px solid rgba(232,244,0,.35);
}
.sdot-meta{
margin-top: 6px;
font-size: 12px;
color: var(--sd-dim);
}
.sdot-dot{ opacity:.7; margin: 0 6px; }
.sdot-head-right{
text-align:right;
min-width: 130px;
}
.sdot-est-label{
font-size: 11px;
letter-spacing:.12em;
text-transform:uppercase;
color: var(--sd-dimmer);
}
.sdot-est-date{
margin-top: 4px;
font-size: 18px;
font-weight: 800;
letter-spacing:.06em;
text-transform:uppercase;
color: #fff;
}
/* Tracker line */
.sdot-track{
position:relative;
padding-top: 18px;
padding-bottom: 6px;
}
.sdot-line{
position:absolute;
left: 0;
right: 0;
top: 34px;
height: 2px;
background: rgba(255,255,255,.10);
border-radius: 2px;
overflow:hidden;
}
.sdot-line:before{
content:"";
position:absolute;
left:0; top:0; bottom:0;
width: var(--sdot-progress, 0%);
background: var(--sd-yellow);
box-shadow: 0 0 16px rgba(232,244,0,.25);
}
/* Steps layout */
.sdot-step{
position:relative;
display:inline-flex;
flex-direction:column;
align-items:center;
text-align:center;
width: calc(100% / 5);
}
.sdot-track{
display:flex;
justify-content:space-between;
gap: 0;
}
/* Dot */
.sdot-dot{
width: 42px;
height: 42px;
border-radius: 999px;
display:flex;
align-items:center;
justify-content:center;
background: rgba(0,0,0,.55);
border: 1px solid rgba(255,255,255,.12);
box-shadow: 0 8px 28px rgba(0,0,0,.35);
margin-bottom: 10px;
}
/* Numbers / check / gear */
.sdot-num{ color: rgba(255,255,255,.55); font-weight:800; }
.sdot-check{ color: #111; font-weight:900; }
.sdot-gear{
display:inline-block;
color:#111;
font-size: 16px;
animation: sdotSpin 2.6s linear infinite;
}
@keyframes sdotSpin{
from{ transform: rotate(0deg); }
to{ transform: rotate(360deg); }
}
/* Text */
.sdot-label{
font-size: 11px;
font-weight: 800;
letter-spacing:.08em;
text-transform:uppercase;
color: rgba(255,255,255,.70);
}
.sdot-sub{
margin-top: 4px;
font-size: 11px;
line-height: 1.25;
color: rgba(255,255,255,.45);
}
/* States */
.sdot-step.is-done .sdot-dot{
background: var(--sd-yellow);
border-color: rgba(232,244,0,.55);
}
.sdot-step.is-done .sdot-check{ display:block; }
.sdot-step.is-current .sdot-dot{
border-color: rgba(232,244,0,.9);
box-shadow: 0 0 0 6px rgba(232,244,0,.08), 0 10px 30px rgba(0,0,0,.45);
}
.sdot-step.is-current .sdot-label{ color: var(--sd-yellow); }
.sdot-step.is-current .sdot-sub{ color: rgba(255,255,255,.55); }
/* Mobile */
@media (max-width: 820px){
.sdot-head{ flex-direction:column; align-items:flex-start; }
.sdot-head-right{ text-align:left; }
.sdot-step{ width: calc(100% / 5); }
.sdot-label{ font-size: 10px; }
.sdot-sub{ font-size: 10px; }
.sdot-dot{ width: 38px; height: 38px; }
}
/* Ensure tracker layout is correctly anchored */
.sd-order-tracker {
position: relative;
}
.sd-track {
position: relative;
}
.sd-track__steps {
position: relative;
}
.sd-track__dot {
position: relative; /* was absolute in thank-you context */
}/* End custom CSS */
/* Start custom CSS *//* =========================================================
SALTY DOG — MY ACCOUNT (Elementor) — FINAL SCOPED STYLES
Requires widget class on Elementor My Account widget:
.sd-myaccount
========================================================= */
.sd-myaccount{
max-width: 1200px;
margin: 0 auto;
}
/* Base typography inside account */
.sd-myaccount .woocommerce,
.sd-myaccount .woocommerce *{
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.sd-myaccount .woocommerce{
color: #eaeaea;
}
/* =========================================================
LAYOUT: LEFT NAV + RIGHT CONTENT
========================================================= */
@media (min-width: 900px){
.sd-myaccount .woocommerce{
display: flex;
gap: 24px;
align-items: flex-start;
}
.sd-myaccount .woocommerce-MyAccount-navigation{
width: 280px;
flex: 0 0 280px;
}
.sd-myaccount .woocommerce-MyAccount-content{
flex: 1;
min-width: 0;
}
}
/* =========================================================
PANELS (NAV + CONTENT)
========================================================= */
.sd-myaccount .woocommerce-MyAccount-navigation,
.sd-myaccount .woocommerce-MyAccount-content{
background: #0b0b0b !important;
border: 1px solid #1f1f1f !important;
border-radius: 18px;
}
/* Nav spacing */
.sd-myaccount .woocommerce-MyAccount-navigation{
padding: 12px;
}
/* Remove default list styling */
.sd-myaccount .woocommerce-MyAccount-navigation ul{
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 8px;
}
/* Nav links */
.sd-myaccount .woocommerce-MyAccount-navigation li a{
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
border-radius: 14px;
text-decoration: none;
color: #ffffff !important;
background: rgba(255,255,255,0.03) !important;
border: 1px solid rgba(255,255,255,0.06) !important;
transition: background .18s ease, border-color .18s ease, transform .18s ease, color .18s ease;
}
.sd-myaccount .woocommerce-MyAccount-navigation li a:hover{
background: rgba(255,255,255,0.06) !important;
border-color: rgba(255,255,255,0.12) !important;
transform: translateY(-1px);
}
/* Active nav item */
.sd-myaccount .woocommerce-MyAccount-navigation li.is-active a{
background: #f3f600 !important;
border-color: #f3f600 !important;
color: #000 !important;
font-weight: 900;
}
/* Content panel spacing */
.sd-myaccount .woocommerce-MyAccount-content{
padding: 22px;
}
/* Headings */
.sd-myaccount .woocommerce-MyAccount-content h1,
.sd-myaccount .woocommerce-MyAccount-content h2,
.sd-myaccount .woocommerce-MyAccount-content h3,
.sd-myaccount .woocommerce-MyAccount-content h4{
color: #ffffff;
margin-top: 0;
}
/* Links inside content */
.sd-myaccount .woocommerce-MyAccount-content a{
color: #f3f600 !important;
text-decoration: none;
font-weight: 800;
}
.sd-myaccount .woocommerce-MyAccount-content a:hover{
text-decoration: underline;
}
/* =========================================================
FIX THE STUBBORN WHITE DASHBOARD PANEL
(Theme/Woo often styles first paragraph + notice wrapper)
========================================================= */
/* Common Woo notices + wrappers */
.sd-myaccount .woocommerce-MyAccount-content .woocommerce-notices-wrapper,
.sd-myaccount .woocommerce-MyAccount-content .woocommerce-notices-wrapper > *,
.sd-myaccount .woocommerce-MyAccount-content .woocommerce-message,
.sd-myaccount .woocommerce-MyAccount-content .woocommerce-info,
.sd-myaccount .woocommerce-MyAccount-content .woocommerce-error{
background: #0b0b0b !important;
border: 1px solid #1f1f1f !important;
color: #eaeaea !important;
border-radius: 18px !important;
padding: 22px !important;
margin: 0 0 14px 0 !important;
}
/* The “Hello …” dashboard block is very often just the first */
.sd-myaccount .woocommerce-MyAccount-content > p:first-of-type{
background: #0b0b0b !important;
border: 1px solid #1f1f1f !important;
color: #eaeaea !important;
border-radius: 18px !important;
padding: 22px !important;
margin: 0 0 14px 0 !important;
}
/* If a theme wraps dashboard text in a block element, skin it */
.sd-myaccount .woocommerce-MyAccount-content > *:first-child{
background: #0b0b0b !important;
border: 1px solid #1f1f1f !important;
border-radius: 18px !important;
}
/* Remove Woo default icons/borders (theme dependent) */
.sd-myaccount .woocommerce-MyAccount-content .woocommerce-message::before,
.sd-myaccount .woocommerce-MyAccount-content .woocommerce-info::before,
.sd-myaccount .woocommerce-MyAccount-content .woocommerce-error::before{
display: none !important;
}
/* =========================================================
TABLES (orders etc.)
========================================================= */
.sd-myaccount table.shop_table{
width: 100%;
border-collapse: collapse;
border: 1px solid #1f1f1f !important;
border-radius: 14px;
overflow: hidden;
background: #060606 !important;
}
.sd-myaccount table.shop_table th,
.sd-myaccount table.shop_table td{
padding: 12px 14px;
border-bottom: 1px solid #1a1a1a;
color: #eaeaea;
}
.sd-myaccount table.shop_table th{
background: #0e0e0e !important;
color: #ffffff !important;
font-weight: 900;
}
.sd-myaccount table.shop_table tr:last-child td{
border-bottom: 0;
}
/* =========================================================
BUTTONS
========================================================= */
.sd-myaccount .woocommerce a.button,
.sd-myaccount .woocommerce button.button,
.sd-myaccount .woocommerce input.button,
.sd-myaccount .woocommerce #respond input#submit{
background: #f3f600 !important;
color: #000 !important;
border: 0 !important;
border-radius: 12px !important;
padding: 12px 16px !important;
font-weight: 900 !important;
text-transform: uppercase;
letter-spacing: .5px;
}
.sd-myaccount .woocommerce a.button:hover,
.sd-myaccount .woocommerce button.button:hover,
.sd-myaccount .woocommerce input.button:hover,
.sd-myaccount .woocommerce #respond input#submit:hover{
filter: brightness(0.95);
}
/* =========================================================
FORM FIELDS
========================================================= */
.sd-myaccount .woocommerce input[type="text"],
.sd-myaccount .woocommerce input[type="email"],
.sd-myaccount .woocommerce input[type="tel"],
.sd-myaccount .woocommerce input[type="password"],
.sd-myaccount .woocommerce textarea,
.sd-myaccount .woocommerce select{
width: 100%;
background: #070707 !important;
border: 1px solid #232323 !important;
color: #ffffff !important;
border-radius: 12px !important;
padding: 12px 12px !important;
}
.sd-myaccount .woocommerce input:focus,
.sd-myaccount .woocommerce textarea:focus,
.sd-myaccount .woocommerce select:focus{
outline: none;
border-color: rgba(243,246,0,0.9) !important;
box-shadow: 0 0 0 3px rgba(243,246,0,0.18) !important;
}
/* =========================================================
MOBILE: STACK + NAV 2-COLUMN CHIPS
========================================================= */
@media (max-width: 899px){
.sd-myaccount .woocommerce-MyAccount-navigation{
margin-bottom: 14px;
}
.sd-myaccount .woocommerce-MyAccount-navigation ul{
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sd-myaccount .woocommerce-MyAccount-navigation li a{
justify-content: center;
text-align: center;
}
}
/* =========================================================
MY ACCOUNT — TYPOGRAPHY POLISH (Dashboard + Content)
========================================================= */
/* Body copy readability */
.sd-myaccount .woocommerce-MyAccount-content{
line-height: 1.55;
font-size: 15px;
}
/* Make normal paragraph text white/grey and not “link-y” */
.sd-myaccount .woocommerce-MyAccount-content p{
color: #d7d7d7 !important;
}
/* Links inside paragraphs: calm by default */
.sd-myaccount .woocommerce-MyAccount-content p a{
color: #ffffff !important;
font-weight: 800;
text-decoration: none;
border-bottom: 1px solid rgba(255,255,255,0.18);
}
/* Hover: your yellow accent */
.sd-myaccount .woocommerce-MyAccount-content p a:hover{
color: #f3f600 !important;
border-bottom-color: rgba(243,246,0,0.85);
}
/* HARD HIDE: Woo My Account left navigation (everywhere) */
.woocommerce-account .woocommerce-MyAccount-navigation{
display: none !important;
}
/* Let content use full width once nav is gone */
.woocommerce-account .woocommerce-MyAccount-content{
width: 100% !important;
float: none !important;
}
/* Yellow top accent for Track Order card */
.sd-track-card{
position: relative;
}
/* =========================================================
MY ACCOUNT — SIDEBAR NAV (HOVER BAR + ACTIVE BAR + LOGOUT)
========================================================= */
/* Make the
the visual “pill” */
.sd-account-nav .elementor-icon-list-item{
position: relative;
border-radius: 10px;
transition: background .18s ease;
}
/* Space between items */
.sd-account-nav .elementor-icon-list-item + .elementor-icon-list-item{
margin-top: 6px;
}
/* Turn the into a full-width row */
.sd-account-nav .elementor-icon-list-item > a{
position: relative;
display: flex;
align-items: center;
gap: 10px;
padding: 14px 14px 14px 18px;
border-radius: 10px;
width: 100%;
transition: color .18s ease, background .18s ease;
}
/* The yellow indicator bar lives on the */
.sd-account-nav .elementor-icon-list-item > a::before{
content:"";
position:absolute;
left:0;
top:10px;
bottom:10px;
width:3px;
border-radius: 3px;
background: transparent;
transition: background .18s ease;
}
/* Hover state: subtle bg + yellow bar */
.sd-account-nav .elementor-icon-list-item:hover > a{
background: rgba(255,255,255,0.04);
color: #fff;
}
.sd-account-nav .elementor-icon-list-item:hover > a::before{
background: #F3F600;
}
.sd-account-nav .elementor-icon-list-item:hover .elementor-icon-list-icon i,
.sd-account-nav .elementor-icon-list-item:hover .elementor-icon-list-icon svg{
color: #fff !important;
fill: #fff !important;
}
/* Active state: stronger bg + yellow bar */
.sd-account-nav a.elementor-item-active{
background: rgba(255,255,255,0.06);
color: #fff !important;
}
.sd-account-nav a.elementor-item-active::before{
background: #F3F600;
}
.sd-account-nav a.elementor-item-active .elementor-icon-list-icon i,
.sd-account-nav a.elementor-item-active .elementor-icon-list-icon svg{
color: #fff !important;
fill: #fff !important;
}
/* LOG OUT: red text/icon always, but NO weird red “bar” */
.sd-account-nav a[href*="customer-logout"]{
color: #ff4d4d !important;
background: transparent !important;
}
.sd-account-nav a[href*="customer-logout"] .elementor-icon-list-icon i,
.sd-account-nav a[href*="customer-logout"] .elementor-icon-list-icon svg{
color: #ff4d4d !important;
fill: #ff4d4d !important;
}
/* LOG OUT hover: subtle red tint (not a bar) + still show yellow left bar like other hovers */
.sd-account-nav .elementor-icon-list-item:hover > a[href*="customer-logout"]{
background: rgba(255,77,77,0.08) !important;
color: #ffb3b3 !important;
}
.sd-account-nav .elementor-icon-list-item:hover > a[href*="customer-logout"] .elementor-icon-list-icon i,
.sd-account-nav .elementor-icon-list-item:hover > a[href*="customer-logout"] .elementor-icon-list-icon svg{
color: #ffb3b3 !important;
fill: #ffb3b3 !important;
}
.sdot-badge {
color: #F3F600 !important;
}
/* FORCE the separator to be a bullet, not a styled circle */
.sd-meta-sep{
display:inline !important;
width:auto !important;
height:auto !important;
border:0 !important;
background:transparent !important;
border-radius:0 !important;
box-shadow:none !important;
padding:0 !important;
margin:0 8px !important;
line-height:1 !important;
color:#666 !important;
font-weight:700 !important;
}
/* If the separator was accidentally inheriting dot styles */
.sd-order-meta .sd-meta-sep:before,
.sd-order-meta .sd-meta-sep:after{
content:none !important;
}
.sdot-dot {
background: #111;
opacity: 1;
}
/* ACTIVE label (dynamic) */
.sd-active-label{
color: #F3F600;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .12em;
font-size: 12px;
}
/* Past Orders card container (you set this class on the Elementor container) */
.sd-orders-card{
background: rgba(15,15,15,.6);
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,.08);
border-radius: 18px;
}
/* Table */
.sd-orders-table-wrap{ overflow-x:auto; }
.sd-orders-table{
width: 100%;
border-collapse: collapse;
min-width: 720px;
}
.sd-orders-table thead th{
font-size: 10px;
text-transform: uppercase;
letter-spacing: .18em;
color: #666;
padding: 14px 12px;
border-bottom: 1px solid rgba(255,255,255,.10);
}
.sd-orders-table tbody td{
padding: 16px 12px;
border-bottom: 1px solid rgba(255,255,255,.06);
color: #ddd;
font-size: 14px;
}
.sd-orders-table tbody tr:hover{
background: rgba(255,255,255,.04);
}
.sd-order-id a{
color: #F3F600;
text-decoration: none;
font-weight: 800;
}
.sd-order-id a:hover{ color:#fff; }
.sd-col-total, .sd-order-total{ text-align:left; }
.sd-col-action, .sd-order-action{ text-align:right; }
.sd-badge{
display:inline-block;
padding: 6px 10px;
border-radius: 999px;
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .12em;
background: #222;
color: #aaa;
border: 1px solid rgba(255,255,255,.10);
}
/* Optional status accents */
.sd-badge-processing, .sd-badge-on-hold{ color:#F3F600; border-color: rgba(243,246,0,.25); background: rgba(243,246,0,.08); }
.sd-badge-completed{ color:#aaa; }
.sd-badge-cancelled, .sd-badge-failed{ color:#ff6b6b; border-color: rgba(255,107,107,.25); background: rgba(255,107,107,.08); }
.sd-eye{
color:#fff;
text-decoration:none;
font-size: 16px;
opacity:.85;
}
.sd-eye:hover{ color:#F3F600; opacity:1; }
.sd-orders-empty{
color:#888;
font-size: 13px;
padding: 12px 0;
}
/* =========================================================
SALTY DOG — My Account > View Order Styling
Target: /my-account/view-order/{id}/
========================================================= */
.woocommerce-account .woocommerce-MyAccount-content{
color:#eaeaea;
}
/* Container spacing inside your big right panel */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce{
padding-top: 6px;
}
/* Back link */
.woocommerce-account .woocommerce-MyAccount-content a.woocommerce-Button,
.woocommerce-account .woocommerce-MyAccount-content a{
text-decoration:none;
}
.woocommerce-account .woocommerce-MyAccount-content a[href*="my-account/orders"]{
display:inline-flex;
align-items:center;
gap:10px;
color:#ccff00;
font-weight:800;
letter-spacing:.02em;
text-transform:uppercase;
font-size:12px;
padding:10px 14px;
border-radius:12px;
border:1px solid rgba(255,255,255,.12);
background:rgba(0,0,0,.35);
box-shadow: 0 10px 24px rgba(0,0,0,.35);
}
.woocommerce-account .woocommerce-MyAccount-content a[href*="my-account/orders"]:hover{
border-color: rgba(204,255,0,.45);
box-shadow: 0 0 0 3px rgba(204,255,0,.10), 0 10px 24px rgba(0,0,0,.35);
}
/* The small sentence line at the top */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-order-details__title,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-column__title,
.woocommerce-account .woocommerce-MyAccount-content h2{
font-family: inherit; /* keep your global headings */
}
/* “Order #XXXX was placed on…” */
.woocommerce-account .woocommerce-MyAccount-content p.order-info,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-order-overview,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-order-details + p,
.woocommerce-account .woocommerce-MyAccount-content > p:first-of-type{
color: rgba(255,255,255,.70);
font-size: 14px;
line-height: 1.6;
margin: 14px 0 22px;
padding: 14px 16px;
border-radius: 16px;
border: 1px solid rgba(255,255,255,.10);
background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
}
/* Make the order number + status pop */
.woocommerce-account .woocommerce-MyAccount-content mark,
.woocommerce-account .woocommerce-MyAccount-content .order-number,
.woocommerce-account .woocommerce-MyAccount-content .order-status,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Price-amount{
background: transparent;
}
.woocommerce-account .woocommerce-MyAccount-content strong{
color:#ffffff;
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-order-overview__order strong,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-order-overview__date strong,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-order-overview__status strong{
color:#ccff00;
}
/* Section headings */
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3{
color:#ffffff;
font-weight:900;
letter-spacing:.02em;
text-transform:uppercase;
margin: 26px 0 14px;
}
/* “Order details” title specifically */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-order-details__title{
margin-top: 22px;
}
/* Tables (order items + totals) */
.woocommerce-account .woocommerce-MyAccount-content table.shop_table{
width:100%;
border-collapse: separate;
border-spacing: 0;
border:1px solid rgba(255,255,255,.10);
border-radius: 18px;
overflow:hidden;
background: rgba(0,0,0,.28);
}
.woocommerce-account .woocommerce-MyAccount-content table.shop_table th{
color: rgba(255,255,255,.70);
font-size: 12px;
letter-spacing: .12em;
text-transform: uppercase;
padding: 16px 18px;
background: rgba(255,255,255,.03);
border-bottom:1px solid rgba(255,255,255,.08);
}
.woocommerce-account .woocommerce-MyAccount-content table.shop_table td{
padding: 16px 18px;
border-bottom:1px solid rgba(255,255,255,.08);
color: rgba(255,255,255,.80);
vertical-align: middle;
}
/* Last row border removal */
.woocommerce-account .woocommerce-MyAccount-content table.shop_table tr:last-child td,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table tr:last-child th{
border-bottom: none;
}
/* Product name */
.woocommerce-account .woocommerce-MyAccount-content table.shop_table td a{
color:#ffffff;
font-weight:800;
}
.woocommerce-account .woocommerce-MyAccount-content table.shop_table td a:hover{
color:#ccff00;
}
/* Totals column alignment */
.woocommerce-account .woocommerce-MyAccount-content table.shop_table td:last-child,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table th:last-child{
text-align:right;
}
/* Highlight total */
.woocommerce-account .woocommerce-MyAccount-content table.shop_table tfoot tr:last-child th,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table tfoot tr:last-child td{
background: rgba(204,255,0,.06);
}
.woocommerce-account .woocommerce-MyAccount-content table.shop_table tfoot tr:last-child td .woocommerce-Price-amount{
color:#ccff00;
font-weight:900;
}
/* Invoice link */
.woocommerce-account .woocommerce-MyAccount-content a.invoice,
.woocommerce-account .woocommerce-MyAccount-content a[href*="invoice"],
.woocommerce-account .woocommerce-MyAccount-content a.button,
.woocommerce-account .woocommerce-MyAccount-content .button{
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
padding: 12px 16px;
border-radius: 14px;
border:1px solid rgba(204,255,0,.35);
background:#ccff00;
color:#000 !important;
font-weight:900;
text-transform:uppercase;
letter-spacing:.06em;
font-size:12px;
}
.woocommerce-account .woocommerce-MyAccount-content a.invoice:hover,
.woocommerce-account .woocommerce-MyAccount-content a[href*="invoice"]:hover,
.woocommerce-account .woocommerce-MyAccount-content .button:hover{
filter: brightness(1.05);
box-shadow: 0 0 0 3px rgba(204,255,0,.15);
}
/* Address section */
.woocommerce-account .woocommerce-MyAccount-content address{
margin-top: 14px;
padding: 16px 18px;
border-radius: 18px;
border: 1px solid rgba(255,255,255,.10);
background: rgba(255,255,255,.03);
color: rgba(255,255,255,.75);
line-height: 1.7;
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-customer-details,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-columns--addresses{
margin-top: 22px;
}
/* Mobile */
@media (max-width: 767px){
.woocommerce-account .woocommerce-MyAccount-content table.shop_table th,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table td{
padding: 14px 14px;
}
.woocommerce-account .woocommerce-MyAccount-content a[href*="my-account/orders"]{
width:100%;
justify-content:center;
}
}
/* =========================================
ADDRESSES PAGE CLEANUP (Custom My Account)
Targets only when the Addresses shortcode exists
========================================= */
/* 1) Kill any leftover divider line ABOVE the addresses block */
.sd-addr-page{
position: relative;
}
/* Common Elementor dividers/lines that might be above */
.sd-addr-page::before,
.sd-addr-page::after{
display:none !important;
content:none !important;
}
/* If Elementor inserted
or a divider widget just above the addresses block */
.sd-addr-page hr{
display:none !important;
}
/* 2) Pull the Addresses content UP (remove “floating in the middle”) */
.sd-addr-page{
margin-top: -28px !important; /* pulls the whole block upward */
padding-top: 0 !important;
}
/* 3) Remove extra top spacing inside the Addresses header area */
.sd-addr-page .sd-addr-head{
padding-top: 0 !important;
margin-top: 0 !important;
}
/* 4) If there’s still a thin border line showing at the very top of the block */
.sd-addr-page .sd-addr-head{
border-top: 0 !important;
}
/* Mobile tweak (slightly less aggressive) */
@media (max-width: 767px){
.sd-addr-page{
margin-top: -18px !important;
}
}
/* If the hidden Orders header container had a border or divider */
.sd-orders-static-head{
border: none !important;
padding: 0 !important;
margin: 0 !important;
}
/* If the divider is a sibling element right after the header container */
.sd-orders-static-head + *{
border-top: none !important;
}
/* =========================================================
TRACK ORDER MODAL — FORCE BRAND COLOURS (NO PINK EVER)
========================================================= */
/* Base button */
.sd-track-form .sd-track-submit{
background: #F3F600 !important;
color: #000 !important;
border-color: #F3F600 !important;
}
/* Hover */
.sd-track-form .sd-track-submit:hover{
background: #F3F600 !important;
color: #000 !important;
filter: brightness(0.95);
box-shadow: 0 6px 20px rgba(243,246,0,0.35);
}
/* Active / focus */
.sd-track-form .sd-track-submit:active,
.sd-track-form .sd-track-submit:focus{
background: #F3F600 !important;
color: #000 !important;
outline: none !important;
box-shadow: 0 0 0 2px rgba(243,246,0,0.4);
}
/* Kill ANY inherited pink/magenta hover from theme/Elementor */
.sd-track-form .sd-track-submit,
.sd-track-form .sd-track-submit:hover,
.sd-track-form .sd-track-submit:active{
background-image: none !important;
}
.sd-login-to-account{
color:#F3F600 !important;
font-weight:900;
letter-spacing:.06em;
text-transform:uppercase;
text-decoration:none !important;
font-size:12px;
}
.sd-login-to-account:hover{
opacity:.85;
}
/* =========================================================
ORDER PRODUCTION TRACKER — MOBILE VERTICAL LAYOUT
========================================================= */
@media (max-width: 768px) {
/* Tracker container */
.sd-order-tracker,
.sd-production-tracker,
.sd-order-steps {
display: flex !important;
flex-direction: column !important;
align-items: center;
gap: 28px;
}
/* Individual step */
.sd-order-step,
.sd-step {
width: 100%;
max-width: 320px;
text-align: center;
position: relative;
}
/* Remove horizontal connector */
.sd-order-tracker::before,
.sd-order-steps::before {
display: none !important;
}
/* Vertical connector line */
.sd-order-step:not(:last-child)::after,
.sd-step:not(:last-child)::after {
content: "";
position: absolute;
left: 50%;
top: 48px;
transform: translateX(-50%);
width: 2px;
height: 28px;
background: rgba(255,255,255,0.15);
}
/* Step icon / number */
.sd-step-icon,
.sd-step-circle {
margin: 0 auto 8px;
}
/* Step title */
.sd-step-title {
font-size: 12px;
font-weight: 900;
letter-spacing: .06em;
text-transform: uppercase;
margin-bottom: 4px;
}
/* Step description */
.sd-step-desc {
font-size: 12px;
line-height: 1.5;
opacity: .75;
}
}
/* Guest tracker actions - center on mobile (and looks better on desktop too) */
.sd-guest-actions{
justify-content: center !important;
text-align: center !important;
}
.sd-guest-actions a{
display: inline-block !important;
width: 100%;
text-align: center !important;
}
/* =========================================================
GUEST ORDER TRACKER — FORCE VERTICAL (ALL DEVICES)
Scope: only inside .sd-guest-track-wrap
========================================================= */
/* Tracker container */
.sd-guest-track-wrap .sd-guest-steps{
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 28px !important;
}
/* Individual step */
.sd-guest-track-wrap .sd-guest-step{
width: 100% !important;
max-width: 320px !important;
text-align: center !important;
position: relative !important;
}
/* Remove any horizontal connector (if your theme/snippet adds one later) */
.sd-guest-track-wrap .sd-guest-steps::before{
display: none !important;
}
/* Vertical connector line */
.sd-guest-track-wrap .sd-guest-step:not(:last-child)::after{
content: "";
position: absolute;
left: 50%;
top: 48px;
transform: translateX(-50%);
width: 2px;
height: 28px;
background: rgba(255,255,255,0.15);
}
/* Step icon / number */
.sd-guest-track-wrap .sd-guest-dot{
margin: 0 auto 8px !important;
}
/* Step title */
.sd-guest-track-wrap .sd-guest-step-title{
font-size: 12px !important;
font-weight: 900 !important;
letter-spacing: .06em !important;
text-transform: uppercase !important;
margin-bottom: 4px !important;
white-space: normal !important; /* prevent squashing */
}
/* Step description */
.sd-guest-track-wrap .sd-guest-step-desc{
font-size: 12px !important;
line-height: 1.5 !important;
opacity: .75 !important;
}
/* =========================================
GUEST TRACKER — CLEAN VERTICAL CONNECTORS
(paste after the previous guest tracker CSS)
========================================= */
/* Kill the old connector rule */
.sd-guest-track-wrap .sd-guest-step:not(:last-child)::after{
top: auto !important;
height: auto !important;
background: none !important;
}
/* Rebuild connector: starts under the dot, ends before next dot */
.sd-guest-track-wrap .sd-guest-step{
padding-bottom: 8px; /* gives the connector breathing room */
}
.sd-guest-track-wrap .sd-guest-step:not(:last-child)::after{
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 2px;
background: rgba(255,255,255,0.14);
/* Start just below the number circle */
top: calc(34px + 10px); /* dot height (34) + margin-bottom (10) */
/* Extend to the bottom of the step block (keeps it consistent) */
bottom: -18px;
border-radius: 2px;
}/* End custom CSS */