:root {
    --switch-color-primary: var(--e-global-color-primary, #6C203B);
    --switch-primary: var(--switch-color-primary);
    --switch-color-secondary: var(--e-global-color-secondary, #FFFFFF);
    --switch-color-text: var(--e-global-color-text, #272C30);
    --switch-color-accent: var(--e-global-color-accent, #F9B700);
    --switch-accent: var(--switch-color-accent);
    --switch-color-accent-hover: #e6a600;
    --switch-color-warning: var(--e-global-color-f8e959a, #DA7A00);
    --switch-warning: var(--switch-color-warning);
    --switch-color-danger: var(--e-global-color-68fcbcd, #EB5633);
    --switch-danger: var(--switch-color-danger);
    --switch-color-success: var(--e-global-color-699dfbc, #1E675E);
    --switch-success: var(--switch-color-success);
    --switch-color-cream: var(--e-global-color-d52a3ee, #FFF9EE);
    --switch-cream: var(--switch-color-cream);
    --switch-color-alert-border: var(--e-global-color-8224f37, #ECD1CD);
    --switch-color-border: #E8E8E8;
    --switch-border: var(--switch-color-border);
    --switch-color-bg-light: var(--e-global-color-2e7e8b6, #FAFAFA);
}
/* Dashboard-only blocks.
   Put `sm-dashboard-only` in an Elementor element's Advanced → CSS Classes and
   it disappears on every account tab except the landing page. WooCommerce adds
   .woocommerce-dashboard to the body only when the URL is the account page
   itself, so its own tabs and the plugin's custom endpoints all miss it. */
body:not(.woocommerce-dashboard) .sm-dashboard-only {
    display: none !important;
}


.e-my-account-tab.e-my-account-tab__edit-account .woocommerce-MyAccount-content,
.e-my-account-tab.e-my-account-tab__edit-address .woocommerce-MyAccount-content {
    max-width: 840px;
}


.e-my-account-tab.e-my-account-tab__add-ons .switch-account-bar,
.e-my-account-tab.e-my-account-tab__make-payment a.switch-account-bar__back,
.e-my-account-tab.e-my-account-tab__make-payment a.switch-account-bar__titles {
    display: none;
}

/* Header row: greeting on the left, navigation tabs on the right.
   Both are printed inside .sm-account-header by myaccount/navigation.php, so
   the row is there on every account page, not just the dashboard. Items align
   to the bottom so the tab underline lines up with the end of the greeting. */
.sm-account-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px 40px;
    margin: 0 0 40px;
}

/* Static greeting header */
.sm-account-greeting {
    margin: 0;
    flex: 0 1 auto;
}

.sm-account-greeting__title {
    margin: 0 0 6px;
    font-size: 28px;
    line-height: 1.25;
    font-weight: 600;
    color: var(--e-global-color-text);
}

.sm-account-greeting__subtitle {
    margin: 0;
    font-size: 12px;
    line-height: normal;
    opacity: .5;
    color: #000;
}

@media (max-width: 767px) {
    .sm-account-header {
        flex-direction: column;
        align-items: stretch;
        gap: 32px;
        margin-bottom: 24px;
    }

    .sm-account-greeting__title {
        font-size: 22px;
    }

    .sm-account-greeting__subtitle {
        font-size: 14px;
    }
}


/* Account buttons */
/* The same pill button repeats on every account page: dashboard, order view,
   account forms, Make a Payment. The markup differs per template — an Elementor
   button, a plain <a>, a <button> — so the shared shape lives in this one rule
   and the blocks further down only keep what makes each button different.
   The dashboard selectors spell out three classes on purpose: the Elementor kit
   styles `.elementor-kit-6 .elementor-button` and loads after the theme, so a
   shorter selector loses to it and would need !important. */
.switch-dashboard__button.elementor-button.elementor-size-sm,
.sm-usage-change button.sm-inline-usage-btn,
.sm-usage-change button.sm-change-plan-btn,
.switch-dashboard__add-line,
.switch-make-payment a.switch-make-payment__manage,
.switch-make-payment button.switch-make-payment__pay,
.switch-make-payment .sm-mp__modal-actions button,
.woocommerce form.switch-account-form button.switch-account-form__submit,
.elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce a.switch-order-view__billing-edit,
.elementor-widget-woocommerce-my-account .e-my-account-tab__add-payment-method .woocommerce .woocommerce-MyAccount-content-wrapper .button,
.elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce-Address .edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-sizing: border-box;
    padding: 15px 20px;
    border: 0;
    border-radius: 10px;
    font-family: "DM Sans", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}
/* Dark — the primary action. Every selector here names the `a` tag as well:
   the kit paints `.elementor-kit-6 a` in #eb5633, and a class-only selector of
   the same weight would lose the white text to it. The dashboard button also
   repeats itself with :focus, because the kit recolours
   `.elementor-kit-6 .elementor-button:focus`. */
a.switch-dashboard__button.elementor-button.elementor-size-sm,
.switch-make-payment a.switch-make-payment__manage,
.e-my-account-tab.e-my-account-tab__edit-address .woocommerce-MyAccount-content a.edit,
.elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce a.switch-order-view__billing-edit {
    background: #000;
    color: #fff;
}
a.switch-dashboard__button.elementor-button.elementor-size-sm:hover,
a.switch-dashboard__button.elementor-button.elementor-size-sm:focus-visible,
.switch-make-payment a.switch-make-payment__manage:hover,
.switch-make-payment a.switch-make-payment__manage:focus-visible,
.elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce a.switch-order-view__billing-edit:hover,
.elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce a.switch-order-view__billing-edit:focus-visible,
.elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce-Address .edit:hover,
.elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce-Address .edit:focus-visible {
    background: var(--switch-color-accent);
    color: #000;
}
/* Icons have to follow the text to black on hover. The dashboard arrows are
   inline SVG (some hardcode stroke="white"), the order view pencil is a white
   SVG loaded through <img>, so each takes a different route. */
.switch-dashboard__button.elementor-button.elementor-size-sm:hover .elementor-button-icon svg path,
.switch-dashboard__button.elementor-button.elementor-size-sm:focus-visible .elementor-button-icon svg path {
    stroke: #000;
}
.elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce a.switch-order-view__billing-edit:hover .switch-order-view__billing-edit-icon,
.elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce a.switch-order-view__billing-edit:focus-visible .switch-order-view__billing-edit-icon {
    filter: invert(1);
}
/* Accent — submits and payment confirmations. The modal buttons name their tag
   so WooCommerce's own `.woocommerce button.button` colour cannot win. */
.switch-make-payment button.switch-make-payment__pay,
.switch-make-payment button.sm-mp__modal-confirm,
.woocommerce form.switch-account-form button.switch-account-form__submit {
    background: var(--switch-color-accent);
    color: #000;
}
.switch-make-payment button.switch-make-payment__pay:hover,
.switch-make-payment button.switch-make-payment__pay:focus,
.switch-make-payment button.sm-mp__modal-confirm:hover,
.switch-make-payment button.sm-mp__modal-confirm:focus,
.woocommerce form.switch-account-form button.switch-account-form__submit:hover,
.woocommerce form.switch-account-form button.switch-account-form__submit:focus {
    background: #e6a600;
    color: #000;
}
/* Outline — the quiet second action. It has to answer the dark rule above tag
   for tag, otherwise the white text would carry over onto the white fill. The
   hover state repeats the base colours so the kit cannot recolour it either. */
a.switch-dashboard__button.elementor-button.switch-dashboard__button--outline,
a.switch-dashboard__button.elementor-button.switch-dashboard__button--outline:hover,
a.switch-dashboard__button.elementor-button.switch-dashboard__button--outline:focus,
a.switch-dashboard__button.elementor-button.switch-dashboard__button--outline:focus-visible,
.sm-usage-change button.sm-inline-usage-btn,
.sm-usage-change button.sm-inline-usage-btn:hover,
.sm-usage-change button.sm-inline-usage-btn:focus,
.sm-usage-change button.sm-inline-usage-btn:focus-visible,
.sm-usage-change button.sm-change-plan-btn,
.sm-usage-change button.sm-change-plan-btn:hover,
.sm-usage-change button.sm-change-plan-btn:focus,
.sm-usage-change button.sm-change-plan-btn:focus-visible,
.switch-dashboard a.switch-dashboard__add-line,
.switch-make-payment button.sm-mp__modal-cancel {
    background: #fff;
    box-shadow: inset 0 0 0 1px #e8e8e8;
    color: #000 !important;
}
/* end Account buttons */


/* Dashboard overview ------------------------------------------------------- */
.woocommerce-dashboard .elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .woocommerce-MyAccount-content {
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}
.woocommerce-dashboard .elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .woocommerce-MyAccount-content .woocommerce-MyAccount-content-wrapper {
    background: transparent;
}
.switch-dashboard,
.switch-dashboard__text-button {
    font-family: "DM Sans", sans-serif;
}
.switch-dashboard {
    --switch-dashboard-accent: var(--switch-color-primary);
    --switch-dashboard-border: var(--switch-color-border);
    --switch-dashboard-muted: rgba(0, 0, 0, .55);
    display: flex;
    flex-direction: column;
    gap: 20px;
    color: #000;
}
.switch-dashboard__text-button,
.switch-dashboard__button {
    color: inherit;
}
.switch-dashboard__line-card,
.switch-dashboard-card {
    background: #fff;
    border: 1px solid var(--switch-dashboard-border);
    border-radius: 20px;
}
.switch-dashboard-card .plan-features span:first-child {
    border-top: none;
}
.switch-dashboard-card .plan-features {
    border-bottom: none
}
.switch-dashboard__line-card {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
    padding: 30px;
}
.switch-dashboard__line-card--empty {
    grid-template-columns: minmax(0, 1fr);
}
.switch-dashboard__line-details {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 40px;
}
.switch-dashboard__line-summary {
    display: flex;
    width: 100%;
    min-width: 0;
    align-items: center;
    gap: 40px;
}
.switch-dashboard__line-selector-wrap {
    position: relative;
    display: flex;
    flex: 0 0 275px;
    width: 100%;
    max-width: 275px;
    flex-direction: column;
    gap: 10px;
}
.switch-dashboard__line-selector {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    height: 82px;
    padding: 20px !important;
    box-sizing: border-box;
    background: #fff;
    border: 0;
    box-shadow: inset 0 0 0 1px #E8E8E8;
    border-radius: 20px !important;
    color: #000;
    font: inherit;
    text-align: left;
    cursor: pointer;

    background-color: #fff !important;
}
.switch-dashboard__line-selector[hidden] {
    display: none;
}
.switch-dashboard__line-selector-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0;
}
.switch-dashboard__line-selector-copy[hidden] {
    display: none;
}
.switch-dashboard__line-selector-copy--switching {
    justify-content: center;
}
.switch-dashboard__line-number {
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
    color: #DA7A00 !important;
}
.switch-dashboard__line-name {
    color: var(--switch-dashboard-muted);
    font-size: 12px;
    font-weight: 700;
    line-height: normal;
}
.switch-dashboard__selector-chevron {
    width: 9px;
    height: 9px;
    border-right: 1.5px solid #000;
    border-bottom: 1.5px solid #000;
    transform: rotate(45deg) translateY(-2px);
}
.switch-dashboard__lines-menu {
    position: absolute;
    z-index: 30;
    top: calc(100% + 10px);
    left: 0;
    display: flex;
    width: min(275px, 100%);
    max-height: min(70vh, 520px);
    flex-direction: column;
    gap: 30px;
    padding: min(30px, max(12px, calc((100% - 215px) / 2)));
    overflow: auto;
    box-sizing: border-box;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 4px 7px rgba(0, 0, 0, .1);
}
.switch-dashboard__lines-menu[hidden] {
    display: none;
}
/* No-JS fallback: a <details>, so it opens without script. Styled to match the
   closed selector button — the whole list used to render expanded, which with
   dozens of lines pushed the rest of the dashboard off the screen. */
.switch-dashboard__line-fallback {
    width: min(275px, 100%);
    box-sizing: border-box;
    border: 1px solid #e8e8e8;
    border-radius: 20px;
    background: #fff;
}
.switch-dashboard__line-fallback[hidden] {
    display: none;
}
.switch-dashboard__line-fallback-summary {
    display: flex;
    min-height: 82px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px;
    box-sizing: border-box;
    list-style: none;
    cursor: pointer;
}
.switch-dashboard__line-fallback-summary::-webkit-details-marker {
    display: none;
}
.switch-dashboard__line-fallback[open] .switch-dashboard__selector-chevron {
    transform: rotate(-135deg) translateY(-2px);
}
.switch-dashboard__line-fallback-panel {
    display: flex;
    max-height: min(70vh, 520px);
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    box-sizing: border-box;
    overflow: auto;
    border-top: 1px solid #e8e8e8;
}
.switch-dashboard__lines-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3125;
}
.switch-dashboard__lines-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.switch-dashboard__lines-item:not(:last-child) {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e8e8e8;
}
.switch-dashboard__lines-item.is-selected:not(:last-child) {
    border-bottom-color: #000;
}
.switch-dashboard__lines-item:not(.is-selected) {
    opacity: .5;
}
.switch-dashboard__line-option {
    display: flex;
    min-height: 37px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #000;
    text-decoration: none;
}
.switch-dashboard__line-option-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
}
.switch-dashboard__line-option-copy strong {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3125;
}
.switch-dashboard__line-option-copy small {
    font-size: 12px;
    font-weight: 700;
    line-height: normal;
    opacity: .5;
    color: #000;
}
.switch-dashboard__line-option img,
.switch-dashboard__add-line img {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
}
.switch-dashboard__line-option img {
    transform: rotate(-90deg);
}
/* Full width on purpose: as the last row of the lines menu the shared
   inline-flex would shrink to the label. */
.switch-dashboard__add-line {
    display: flex;
    min-height: 51px;
}
/* The empty state is the only thing left in the card, so it centres itself
   across the full width. Adding a line is offered by the account action bar. */
.switch-dashboard__line-empty {
    width: 100%;
    text-align: center;
}
.switch-dashboard__line-empty-message {
    margin: 0;
}
.switch-dashboard__line-selector:focus-visible,
.switch-dashboard__line-option:focus-visible,
.switch-dashboard__add-line:focus-visible {
    outline: 3px solid rgba(125, 21, 56, .28);
    outline-offset: 3px;
}
.switch-dashboard.is-line-switching {
    cursor: progress;
}
.switch-dashboard.is-line-switching .switch-dashboard__line-meta,
.switch-dashboard.is-line-switching .switch-dashboard__line-meta-item--advance,
.switch-dashboard.is-line-switching .switch-dashboard__line-buttons,
.switch-dashboard.is-line-switching .switch-dashboard__device,
.switch-dashboard.is-line-switching .switch-dashboard__cards,
.switch-dashboard.is-line-switching .switch-dashboard__grid {
    opacity: .5;
    pointer-events: none;
}
.switch-dashboard__line-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
}
.switch-dashboard__line-meta-item {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 5px;
}
.switch-dashboard__line-meta-item--advance {
    flex: 1 1 auto;
}
.switch-dashboard__line-meta-label {
    color: #000;
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
    opacity: .5;
}
.switch-dashboard__line-meta-value {
    font-size: 20px;
    font-weight: 900;
    line-height: normal;
}
.switch-dashboard__line-meta-item--renewal .switch-dashboard__line-meta-value {
    color: var(--switch-color-success);
    font-size: 16px;
    font-weight: 600;
}
.switch-dashboard__status--off {
    color: rgba(0, 0, 0, .5) !important;
}
.switch-dashboard__status--off .switch-dashboard__status-dot {
    background-color: #a7a7a7;
}
.switch-dashboard__line-meta-item--billing {
    color: #000;
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
    opacity: .5;
}
.switch-dashboard__status {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.switch-dashboard__status-dot {
    display: block;
    flex: 0 0 19px;
    width: 19px;
    height: 19px;
    background: var(--switch-color-success) url("../images/dashboard/status-check.svg") center / 18px 18px no-repeat;
    border-radius: 50%;
}
a.switch-dashboard__text-button {
    color: #000 !important;
    text-decoration: underline !important;
    opacity: .5;
    cursor: pointer;
    transition: color .2s ease, opacity .2s ease;
}
a.switch-dashboard__text-button:hover,
a.switch-dashboard__text-button:focus-visible {
    color: var(--switch-color-danger) !important;
    opacity: 1 !important;
}
.switch-dashboard__line-buttons {
    display: flex;
    gap: 20px;
}
.switch-dashboard__button--line {
    flex: 1 1 0;
}
.switch-dashboard__button--card {
    width: 100%;
    margin-top: auto;
}
.switch-dashboard__button-icon {
    width: 16px;
    height: 16px;
    filter: brightness(0) invert(1);
}
.switch-dashboard__text-button:focus-visible,
.switch-dashboard__button:focus-visible,
.sm-usage-change .button.sm-inline-usage-btn:focus-visible,
.sm-usage-change .button.sm-change-plan-btn:focus-visible {
    outline: 3px solid rgba(125, 21, 56, .28);
    outline-offset: 3px;
}
.switch-dashboard__device {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
    gap: 25px;
    padding: 20px;
    border: 1px solid var(--switch-dashboard-border);
    border-radius: 14px;
}
.switch-dashboard__device-image {
    flex: 0 1 210px;
    width: min(210px, 48%) !important;
    height: 210px !important;
    object-fit: contain;
}
.switch-dashboard__device-copy {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
}
.switch-dashboard__device-details {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 5px;
}
.switch-dashboard__device-name {
    color: #000;
    font-size: 20px;
    font-weight: 900;
    line-height: normal;
}
.switch-dashboard__device-data {
    color: #000;
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
    opacity: .5;
}
.switch-dashboard__status--device {
    color: var(--switch-color-success);
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
}
/* Line status dot colours */
.switch-dashboard__status--pending_portin .switch-dashboard__status-dot,
.switch-dashboard__status--enrolled .switch-dashboard__status-dot,
.switch-dashboard__status--payment_recorded .switch-dashboard__status-dot {
    background: #e0a300;
}
.switch-dashboard__status--payment_failed .switch-dashboard__status-dot,
.switch-dashboard__status--enrollment_failed .switch-dashboard__status-dot,
.switch-dashboard__status--enrollment_not_found .switch-dashboard__status-dot {
    background: #c0392b;
}
/* Line the carrier deactivated (templates/myaccount/dashboard.php): grey, no check mark */
.switch-dashboard__status--deactivated {
    color: rgba(0, 0, 0, .5);
}
.switch-dashboard__status-dot--deactivated {
    background: #a7a7a7;
}
.switch-dashboard__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}
.switch-dashboard__cards--three-columns {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.switch-dashboard-card {
    --switch-dashboard-accent: var(--switch-color-primary);
    --switch-dashboard-border: var(--switch-color-border);
    --switch-dashboard-muted: rgba(0, 0, 0, .55);

    display: flex;
    gap: 0;
    min-width: 0;
    min-height: 370px;
    flex-direction: column;

    padding: 30px;
    margin: 0;
}
.switch-dashboard-card--addons {
    min-height: 440px;
    padding: 29px 26px 30px 27px;
}
.switch-dashboard-card__title {
    margin: 0 0 25px;
    color: #000;
    opacity: 0.5;
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
}
.switch-dashboard-card__title--addons {
    padding-bottom: 25px;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--switch-dashboard-border);
}
.switch-dashboard-card__plan-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 5px;

    flex-direction: column;
    margin-bottom: 25px;
}
.switch-dashboard-card__addon-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}
.switch-dashboard-card__plan-name {
    font-size: 28px;
    font-weight: 900;
}
.switch-dashboard-card__price {
    display: flex;
    align-items: baseline;
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
}
.switch-dashboard-card--usage {
    --switch-dashboard-accent: var(--switch-color-primary);

    min-height: 440px;
    justify-content: space-between;
    padding: 30px 27px 31px 28px;
    /* Fallback for the sticky header + admin bar; js/my-account-dashboard.js measures the real value. */
    scroll-margin-top: var(--switch-dashboard-anchor-offset, 150px);
}
.switch-dashboard-card__title--usage {
    margin-bottom: 0;
}
.switch-dashboard-card__usage {
    display: grid;
    /* Stats keep their min-content width, the ring takes what is left. */
    grid-template-columns: minmax(min-content, 1fr) minmax(120px, 179px);
    align-items: center;
    gap: 30px;
}
.switch-dashboard-card__usage--without-ring {
    grid-template-columns: minmax(0, 1fr);
}
.switch-dashboard-card__usage-stats {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 20px;
}
.switch-dashboard-card__usage-stat {
    display: flex;
    align-items: center;
    gap: 15px;
}
.switch-dashboard-card__usage-icon {
    width: 24px;
    height: 24.686px;
}
.switch-dashboard-card__usage-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 5px;
}
.switch-dashboard-card__usage-label,
.switch-dashboard-card__addon-meta {
    color: var(--switch-dashboard-muted);
    font-size: 12px;
    line-height: normal;
}
.switch-dashboard-card__usage-label {
    color: #000;
    font-weight: 700;
    opacity: .5;
}
.switch-dashboard-card__usage-value {
    font-size: 20px;
    font-weight: 900;
    line-height: normal;
}
.switch-dashboard-card__usage-divider {
    width: 100%;
    height: 1px;
    background: var(--switch-dashboard-border);
}
.switch-dashboard-card__usage-stat--data {
    align-items: flex-start;
    flex-direction: column;
}
.switch-dashboard-card__usage-empty {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    max-width: 320px;
    padding: 30px 0;
    margin: 0 auto;
    text-align: center;
}
.switch-dashboard-card__usage-empty-icon {
    width: 31px;
    height: 32px;
    margin-bottom: 5px;
}
.switch-dashboard-card__usage-empty-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
}
.switch-dashboard-card__usage-empty-text {
    margin: 0;
    color: var(--switch-dashboard-muted);
    font-size: 13px;
    line-height: 1.4;
}
.switch-dashboard-card__usage-ring-wrap {
    position: relative;
    display: grid;
    width: 100%;
    max-width: 179px;
    aspect-ratio: 1;
    place-items: center;
    /* The figures inside scale with the ring, so they keep fitting when the
       card narrows — see the cqi sizes below. */
    container-type: inline-size;
}
.switch-dashboard-card__usage-ring {
    width: 100%;
    height: 100%;
    overflow: visible;
}
.switch-dashboard-card__usage-track {
    fill: none;
    stroke: #e8e8e8;
    stroke-width: 11;
}
.switch-dashboard-card__usage-progress {
    fill: none;
    stroke: var(--switch-dashboard-accent);
    stroke-width: 11;
    stroke-linecap: round;
    transform: rotate(-90deg);
    transform-origin: center;
    transition: stroke-dashoffset .25s ease;
}
.switch-dashboard-card__usage-total {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 73cqi;
    line-height: normal;
    text-align: center;
}
.switch-dashboard-card__usage-total-value {
    font-size: clamp(20px, 16cqi, 28px);
    font-weight: 900;
    line-height: normal;
}
.switch-dashboard-card__usage-total-limit {
    margin-top: 0;
    color: #000;
    font-size: clamp(12px, 9cqi, 16px);
    font-weight: 600;
    line-height: normal;
}
/* Unlimited rings carry the glyph alone, so it takes over the size the used
   figure would have had. */
.switch-dashboard-card__usage-total-limit--infinite {
    font-size: clamp(48px, 39cqi, 70px);
    font-weight: 400;
    line-height: 1;
}
.switch-dashboard-card__note {
    max-width: 175px;
    margin: 0;
    color: #000;
    font-size: 12px;
    font-weight: 700;
    line-height: normal;
    opacity: .5;
}
.switch-dashboard-card__note-copy,
.switch-dashboard-card__note-updated {
    display: block;
}
.switch-dashboard-card__note-updated {
    margin-top: 4px;

    display: none;
}
.switch-dashboard-card__usage-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 0;
}
.switch-dashboard-card__more-data {
    margin-top: 0;
}
.switch-dashboard-card__alert-trigger,
.switch-usage-alert-modal__submit,
.switch-usage-alert-modal__cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 51px;
    padding: 15px 20px;
    border: 0;
    border-radius: 10px;
    font-family: "DM Sans", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
    cursor: pointer;
}
.switch-dashboard-card__alert-trigger,
.switch-usage-alert-modal__submit {
    background: #000;
    color: #fff;
}
.switch-dashboard-card__alert-trigger:hover,
.switch-dashboard-card__alert-trigger:focus-visible,
.switch-usage-alert-modal__submit:hover,
.switch-usage-alert-modal__submit:focus-visible {
    background: var(--switch-color-accent);
    color: #000;
}
.switch-dashboard-card__alert-trigger:focus-visible,
.switch-dashboard-card__more-data:focus-visible,
.switch-usage-alert-modal__close:focus-visible,
.switch-usage-alert-modal__select:focus-visible,
.switch-usage-alert-modal__submit:focus-visible,
.switch-usage-alert-modal__cancel:focus-visible {
    outline: 3px solid rgba(125, 21, 56, .28);
    outline-offset: 3px;
}
/* Usage Alerts Modal — follows the account modal visual system */
.switch-usage-alert-trigger--hidden {
    display: none !important;
}
.switch-usage-alert-modal-open {
    overflow: hidden;
}
.switch-usage-alert-modal {
    position: fixed;
    z-index: 100000;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.switch-usage-alert-modal[hidden],
.switch-usage-alert-modal--hidden {
    display: none;
}
.switch-usage-alert-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .6);
    backdrop-filter: blur(14px);
    cursor: pointer;
}
.switch-usage-alert-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 800px);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 50px 20px;
    background: #fff9ee;
    border-radius: 20px;
    outline: none;
}
/* Transparent background, sizing and the 90-degree hover spin come from the
   shared close-button rule in style.css; only placement belongs here. */
button.switch-usage-alert-modal__close {
    position: absolute;
    top: 20px;
    right: 20px;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin: 0;
}
.switch-usage-alert-modal__panel {
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 40px 30px;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 20px;
}
.switch-usage-alert-modal__intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: min(100%, 514px);
    margin: 0 auto;
    text-align: center;
}
.switch-usage-alert-modal__icon {
    /* Exported at 24 x 24.686 with preserveAspectRatio="none" — keep the box exact. */
    width: 24px;
    height: 24.69px;
}
.elementor-element .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .switch-usage-alert-modal__panel h3.switch-usage-alert-modal__title {
    margin: 0;
    color: #000;
    font-size: 28px;
    font-weight: 900;
    line-height: normal;
}
.switch-usage-alert-modal__copy {
    margin: 0;
    color: #000;
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
}
.switch-usage-alert-modal__form {
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.switch-usage-alert-modal__metrics {
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.switch-usage-alert-modal__metric {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.switch-usage-alert-modal__metric-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    color: #000;
    font-size: 20px;
    font-weight: 900;
    line-height: normal;
    white-space: nowrap;
}
.switch-usage-alert-modal__track {
    display: block;
    height: 8px;
    border-radius: 4px;
    background: #e6968b;
}
.switch-usage-alert-modal__label {
    color: #000;
    font-size: 14px;
    font-weight: 600;
}
.switch-usage-alert-modal__select {
    width: 100%;
    min-height: 51px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #cfcfcf;
    border-radius: 10px;
    color: #000;
    font: inherit;
}
.switch-usage-alert-modal__metric--slider .switch-usage-alert-modal__label,
.switch-usage-alert-modal__metric--slider .switch-usage-alert-modal__select {
    display: none;
}
.switch-usage-alert-modal__status:empty {
    display: none;
}
.switch-usage-alert-modal__status {
    margin: 0;
    color: var(--switch-color-success);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}
.switch-usage-alert-modal__status--error {
    color: #b42318;
}
.switch-usage-alert-modal__submit:not(:disabled) {
    cursor: pointer;
}
.switch-usage-alert-modal__submit:disabled {
    /* Disabled means the slider still shows the stored limit — nothing to save. */
    cursor: not-allowed;
    opacity: .55;
}
.switch-usage-alert-modal__submit--busy:disabled {
    cursor: wait;
}
.switch-usage-alert-modal__close:focus-visible,
.switch-usage-alert-modal__select:focus-visible,
.switch-usage-alert-modal__submit:focus-visible {
    outline: 3px solid rgba(125, 21, 56, .28);
    outline-offset: 3px;
}
/* end Usage Alerts Modal */


/* noUiSlider skin — doubled class beats the library's own rules regardless of load order */
.switch-usage-alert-modal__slider.noUi-target,
.switch-usage-alert-modal__slider.noUi-target * {
    /* The library defaults to touch-action: none, which would swallow the
       vertical swipe used to scroll the modal on a phone. */
    touch-action: pan-y;
}
.switch-usage-alert-modal__slider.noUi-target {
    height: 8px;
    margin: 0;
    padding: 0;
    background: #e8e8e8;
    border: 0;
    border-radius: 4px;
    box-shadow: none;
}
.switch-usage-alert-modal__slider .noUi-connect {
    background: #e6968b;
}
.switch-usage-alert-modal__slider.noUi-horizontal .noUi-handle {
    top: -4.5px;
    right: -8.5px;
    width: 17px;
    height: 17px;
    background: #6c203b;
    border: 0;
    border-radius: 50%;
    box-shadow: none;
    cursor: grab;
}
.switch-usage-alert-modal__slider.noUi-horizontal .noUi-handle:active {
    cursor: grabbing;
}
.switch-usage-alert-modal__slider .noUi-handle::before {
    display: none;
}
.switch-usage-alert-modal__slider .noUi-handle::after {
    /* Touch target only: the visible handle stays 17px, the grabbable area is 44px. */
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    background: none;
    border: 0;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}
.switch-usage-alert-modal__slider .noUi-handle:focus-visible {
    outline: 3px solid rgba(125, 21, 56, .28);
    outline-offset: 3px;
}
/* end noUiSlider skin */
.switch-dashboard-card__addon {
    padding-bottom: 15px;
}
.switch-dashboard-card__addon--separated {
    padding-top: 14px;
    border-top: 1px solid var(--switch-dashboard-border);
}
.switch-dashboard-card__addon:last-of-type {
    padding-bottom: 0;
}
.switch-dashboard-card__addon-name,
.switch-dashboard-card__addon-price {
    color: #000;
    line-height: normal;
}
.switch-dashboard-card__addon-name {
    min-width: 0;
    font-weight: 600;
}
.switch-dashboard-card__addon-price {
    flex: 0 0 auto;
    font-size: 20px;
    font-weight: 900;
    white-space: nowrap;
}
.switch-dashboard-card__addon-meta {
    display: block;
    margin: 0;
    color: #000;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    opacity: .5;
}
@media (max-width: 1100px) {
    .switch-dashboard__cards--three-columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .switch-dashboard__line-card {
        grid-template-columns: minmax(0, 1fr);
    }
    .switch-dashboard__device {
        justify-content: center;
    }
}
@media (max-width: 767px) {
    .switch-dashboard__cards {
        grid-template-columns: minmax(0, 1fr);
    }
    .switch-dashboard__line-card,
    .switch-dashboard-card {
        padding: 30px 25px;
        border-radius: 16px;
    }
    .switch-dashboard__line-card,
    .switch-dashboard__line-details {
        gap: 30px;
    }
    .switch-dashboard__line-summary,
    .switch-dashboard__line-meta {
        gap: 20px;
    }
    .switch-dashboard__line-buttons {
        flex-direction: column;
        gap: 10px;
    }
    .switch-dashboard__button--line {
        width: 100%;
    }
    .switch-dashboard__device-image {
        flex-basis: 160px;
        height: 160px;
    }
    .switch-dashboard-card {
        grid-column: auto;
        min-height: 0;
    }
    .switch-dashboard-card--usage {
        min-height: 440px;
        padding: 30px 27px 31px 28px;
        border-radius: 20px;
    }
    .switch-dashboard__button--card {
        margin-top: 26px;
    }
    .switch-dashboard-card__more-data {
        margin-top: 0;
    }
}
@media (max-width: 575px) {
    .switch-dashboard-card--usage {
        min-height: 0;
    }
    /* Stacked layout needs the regular card gap under the title. */
    .switch-dashboard-card__title--usage {
        margin-bottom: 25px;
    }
    /* One column: the stats block spans the card, the ring drops underneath. */
    .switch-dashboard-card__usage {
        grid-template-columns: minmax(0, 1fr);
        margin-bottom: 25px;
    }
    .switch-dashboard-card__usage-ring-wrap {
        justify-self: center;
    }
    /* Voice and SMS sit side by side, the note spans both columns below them. */
    .switch-dashboard-card__usage-stats--pair {
        display: grid;
        width: 100%;
        grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
        align-items: center;
    }
    .switch-dashboard-card__usage-stats--pair .switch-dashboard-card__usage-divider {
        width: 1px;
        height: auto;
        align-self: stretch;
    }
    /* Half a card is a tight box for a nowrap figure — tighten icon gap and type. */
    .switch-dashboard-card__usage-stats--pair .switch-dashboard-card__usage-stat {
        min-width: 0;
        gap: 10px;
    }
    .switch-dashboard-card__usage-stats--pair .switch-dashboard-card__usage-value {
        font-size: 18px;
    }
    .switch-dashboard-card__usage-stats--pair .switch-dashboard-card__note {
        max-width: none;
        grid-column: 1 / -1;
    }
}
@media (max-width: 360px) {
    .switch-dashboard-card__usage-stats--pair {
        column-gap: 12px;
    }
    .switch-dashboard-card__usage-stats--pair .switch-dashboard-card__usage-stat {
        gap: 8px;
    }
    .switch-dashboard-card__usage-stats--pair .switch-dashboard-card__usage-value {
        font-size: 16px;
    }
}
@media (max-width: 560px) {
    .switch-dashboard__line-summary {
        align-items: flex-start;
        flex-direction: column;
    }
    .switch-dashboard__line-selector-wrap {
        flex-basis: auto;
    }
    .switch-dashboard__line-meta {
        grid-template-columns: minmax(0, 1fr);
    }
    .switch-dashboard__device {
        align-items: flex-start;
        flex-direction: column;
    }
    .switch-dashboard__device-image {
        width: 100%;
        max-width: 210px;
        margin: 0 auto;
    }
}
@media (max-width: 767px) {
    .switch-usage-alert-modal {
        padding: 16px;
    }
    .switch-usage-alert-modal__dialog {
        padding: 46px 12px 12px;
        border-radius: 16px;
    }
    .switch-usage-alert-modal button.switch-usage-alert-modal__close {
        top: 14px;
        right: 14px;
        padding: 0 !important;
    }
    .switch-usage-alert-modal__panel {
        gap: 24px;
        padding: 30px 20px;
        border-radius: 16px;
    }
    .switch-usage-alert-modal__title {
        font-size: 22px;
    }
    .switch-usage-alert-modal__copy {
        font-size: 14px;
    }
    .switch-usage-alert-modal__form {
        gap: 24px;
    }
    .switch-usage-alert-modal__metrics {
        gap: 28px;
    }
    .switch-usage-alert-modal__metric {
        gap: 16px;
    }
    .switch-usage-alert-modal__metric-head {
        font-size: 16px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .switch-dashboard-card__usage-progress {
        transition: none;
    }
}
/* Layout: navigation on top instead of the left sidebar */
.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce {
    display: block !important;
}

/* The nav is a flex item of .sm-account-header now, so it must shrink to its
   tabs instead of taking the sidebar width WooCommerce (30%) or the Elementor
   widget (100%) gives it. The bottom margin moved to the header row. */
.sm-account-header > .woocommerce-MyAccount-navigation,
.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .woocommerce-MyAccount-navigation {
    float: none !important;
    width: auto !important;
    max-width: 100%;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .woocommerce-MyAccount-content {
    float: none !important;
    width: 100% !important;
    margin: 0;

    background: #fff;
    padding: 30px;
    border: 1px solid #E8E8E8;
    border-radius: 20px;
}

.e-my-account-tab.e-my-account-tab__make-payment .woocommerce .woocommerce-MyAccount-content {
    background: transparent;
    border: none;
    padding: 0;
}

/* Navigation: tabs */
/* No overflow here on purpose: `overflow-x: auto` forces the computed
   `overflow-y` to auto as well, which would clip the submenu that drops out of
   this list. The horizontal scroll only kicks in on narrow screens below. */
.sm-account-nav > ul {
    display: flex !important;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-end !important;
    gap: 16px 60px;
    margin: 0;
    padding: 0;
    list-style: none;
    border-bottom: 1px solid rgba(0, 0, 0, .2);
}
@media (min-width: 768px) and (max-width: 991px) {
    .sm-account-nav > ul {
        gap: 16px 40px;
    }
    .sm-account-nav > ul {
        justify-content: space-between !important;
    }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .sm-account-nav > ul {
        gap: 16px 32px;
    }
}
/* Elementor's My Account widget sizes `ul li` from --tab-width (100% by
   default) with the same specificity as the selectors here, and its stylesheet
   loads later. Without !important every tab is as wide as the whole nav and
   all but the first scroll out of sight. Same story for the spacing it puts
   on `li` and for the divider it draws in `li:after`. */
.sm-account-nav > ul > li {
    position: relative;
    display: block;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    flex: 0 0 auto;
}

.sm-account-nav li::after {
    display: none !important;
}

.sm-account-nav .sm-account-nav__link {
    display: flex !important;
    align-items: center;
    gap: 5px;
    border: 0;
    border-radius: 0 !important;
    background: none !important;
    color: #000 !important;
    font-family: "DM Sans", sans-serif;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: normal !important;
    /* A group toggle is a <button>, and the site-wide button style is uppercase */
    letter-spacing: normal;
    text-transform: none;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

.sm-account-nav > ul > li > .sm-account-nav__link {
    position: relative;
    padding: 0 0 24px !important;
    opacity: .5;
    transition: opacity .25s ease;
}

.sm-account-nav > ul > li > .sm-account-nav__link:hover {
    opacity: .75;
}

.sm-account-nav > ul > li.is-active > .sm-account-nav__link {
    color: var(--switch-color-primary) !important;
    opacity: 1;
}

.sm-account-nav > ul > li.is-active > .sm-account-nav__link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 3px;
    background: var(--switch-color-primary);
}

.sm-account-nav__icon,
.sm-account-nav__chevron {
    display: flex;
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
}

.sm-account-nav__icon svg,
.sm-account-nav__chevron svg {
    width: 14px;
    height: 14px;
}

/* Outline icons are drawn for 24px. The tabs scale them down to 14px, which
   thins the stroke to a hairline, so thicken it back up here. */
.sm-account-nav__icon .switch-icon-outline path {
    stroke-width: 2;
}

.sm-account-nav__chevron--right {
    transform: rotate(-90deg);
}

/* The chevron on a top-level toggle flips over while its submenu is open. It
   keys off the same `.is-open` as the submenu itself, so the arrow can never
   point the wrong way. */
.sm-account-nav__toggle .sm-account-nav__chevron {
    transform: rotate(0deg);
    transition: transform .25s ease;
}

.sm-account-nav__item--has-children.is-open > .sm-account-nav__toggle .sm-account-nav__chevron {
    transform: rotate(180deg);
}

/* Navigation: submenu */
.sm-account-nav__submenu {
    position: absolute;
    top: 70%;
    left: 0;
    z-index: 20;
    display: none;
    min-width: 235px;
    margin: 0;
    padding: 20px !important;
    list-style: none;
    background: #fff;
    border-radius: 10px;
    filter: drop-shadow(0 4px 7px rgba(0, 0, 0, .1));
}

.sm-account-nav > ul > li:last-child .sm-account-nav__submenu {
    left: auto;
    right: 0;
}

/* `.is-open` is the only state that opens a submenu — hover and keyboard focus
   are wired up in js/my-account.js, the way the header menu works. As a CSS
   rule `:hover` would beat the click that closes the submenu (the cursor is
   still on the tab at that moment), and `:hover` also sticks after a tap on
   touch screens. */
.switch-dashboard__line-selector-wrap.is-open > .switch-dashboard__line-selector {
    box-shadow: inset 0 0 0 1px var(--switch-color-primary);
}
.sm-account-nav__item--has-children.is-open > .sm-account-nav__submenu {
    display: block;
}

.sm-account-nav__submenu li {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.sm-account-nav__submenu li + li {
    margin-top: 15px !important;
    padding-top: 15px !important;
    border-top: 1px solid #E8E8E8 !important;
}

/* Figma draws the rule right below the current page in solid black. */
.sm-account-nav__submenu li.is-active + li {
    border-top-color: #000 !important;
}

.sm-account-nav__submenu .sm-account-nav__link {
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    padding: 0 !important;
    opacity: .5;
    transition: opacity .25s ease;
}

.sm-account-nav__submenu .sm-account-nav__link:hover,
.sm-account-nav__submenu li.is-active > .sm-account-nav__link {
    opacity: 1;
}

/* Chevrons sit at .4 next to text at .5, so they need .8 of the link opacity.
   On the current page both go to full strength. */
.sm-account-nav__submenu .sm-account-nav__chevron {
    opacity: .8;
}

.sm-account-nav__submenu .sm-account-nav__link:hover .sm-account-nav__chevron,
.sm-account-nav__submenu li.is-active > .sm-account-nav__link .sm-account-nav__chevron {
    opacity: 1;
}

@media (max-width: 767px) {
    /* The tabs run edge to edge while the rest of the page keeps the side
       padding of its container: the nav pulls itself out of that padding with
       negative margins and the list puts the same amount back as padding, so
       the row still starts level with the content but scrolls out under both
       screen edges. --sm-nav-bleed has to match the container padding — any
       more and the page itself starts scrolling sideways. */
    .sm-account-header > .woocommerce-MyAccount-navigation,
    .elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .woocommerce-MyAccount-navigation {
        width: calc(100% + var(--sm-nav-bleed) * 2) !important;
        max-width: none;
        margin-left: calc(-1 * var(--sm-nav-bleed)) !important;
        margin-right: calc(-1 * var(--sm-nav-bleed)) !important;
    }
    /* The submenu is positioned against the <nav> here instead of its own tab
       (see the `position: static` below): overflow clips only the descendants
       whose containing block sits inside the scroller, so anchoring it to an
       ancestor of the list keeps it visible. */
    .sm-account-nav {
        --sm-nav-bleed: 20px;
        position: relative;
    }
    /* The padding is what keeps the first and last tab level with the page
       content inside the bled-out nav, and it needs !important for the same
       reason the rules above do: the Elementor widget zeroes the padding of
       this list from a longer selector in a stylesheet that loads later.
       The scrollbar is hidden: on phones it is an overlay anyway, and in a
       desktop browser resized this far down it would sit under the tabs as a
       permanent grey bar. */
    .sm-account-nav > ul {
        flex-wrap: nowrap;
        justify-content: flex-start !important;
        gap: 0 32px;
        padding-right: var(--sm-nav-bleed) !important;
        padding-left: var(--sm-nav-bleed) !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .sm-account-nav > ul::-webkit-scrollbar {
        display: none;
    }
    .sm-account-nav > ul > li {
        position: static;
    }
    /* `overflow-x: auto` computes `overflow-y` to auto as well, so the active
       underline has to sit inside the list: on wider screens it hangs 2px below
       and would be clipped, taking a stray vertical scroll with it. */
    .sm-account-nav > ul > li.is-active > .sm-account-nav__link::after {
        bottom: 0;
    }
    /* The panel is a fixed 235px kept level with the right edge of the page
       content — the nav itself now runs wider than that — and rises into the
       tab row so it sits closer to the tab it belongs to. The base `min-width`
       is dropped so `max-width` can still shrink it on a narrow screen: a
       min-width would win over it. */
    .sm-account-nav__submenu,
    .sm-account-nav > ul > li:last-child .sm-account-nav__submenu {
        top: calc(100% - 10px);
        left: auto;
        right: var(--sm-nav-bleed);
        box-sizing: border-box;
        min-width: 0;
        width: 235px;
        max-width: 100%;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    /* On tablets the tabs no longer fit next to the greeting, so the nav takes
       a full-width row of its own below it and the tabs run from the left. */
    .sm-account-header > .woocommerce-MyAccount-navigation,
    .elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .woocommerce-MyAccount-navigation {
        flex: 0 0 100%;
        width: 100% !important;
    }
}
/* Account Action Bar */
/* The bottom margin is the one place this block positions itself. It is
   printed by the woocommerce_after_account_navigation hook, which gives it no
   wrapper element of its own to hang the spacing on, and the neighbouring
   .sm-account-header sets its own spacing the same way. */
.switch-account-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px 40px;
    margin: 0 0 35px;
}
.switch-account-bar__heading {
    display: flex;
    align-items: center;
    gap: 16px;
}
a.switch-account-bar__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 45px;
    height: 45px;
    border: 1px solid var(--switch-color-primary);
    border-radius: 12px;
    background: transparent;
    text-decoration: none;
    transition: border-color .2s ease, background .2s ease;
}
a.switch-account-bar__back svg {
    color: var(--switch-color-primary);
    transition: color .2s ease, background .2s ease;
}
a.switch-account-bar__back:hover svg {
    color: #fff;
}
a.switch-account-bar__back:hover,
a.switch-account-bar__back:focus-visible {
    /* border-color: var(--e-global-color-accent); */
    /* color: var(--e-global-color-accent); */
    background: var(--switch-color-primary);
}
.switch-account-bar__titles {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce h3.switch-account-bar__title {
    margin: 0;
    font-size: 28px;
    line-height: normal;
    font-weight: 900;
    color: var(--e-global-color-text);
}
.switch-account-bar__title-accent {
    color: var(--switch-color-warning);
}
.switch-account-bar__subtitle {
    margin: 0;
    max-width: 640px;
    font-size: 14px;
    line-height: 1.5;
    opacity: .7;
}
.e-my-account-tab__make-payment .switch-account-bar__heading {
    display: grid;
    /* grid-template-columns: 45px minmax(0, 640px); */
    align-items: center;
    column-gap: 16px;
    row-gap: 14px;
}
.e-my-account-tab__make-payment .switch-account-bar__titles {
    /* display: contents; */
}
.e-my-account-tab__make-payment .switch-account-bar__title {
    /* grid-column: 2; */
}
.e-my-account-tab__make-payment .switch-account-bar__subtitle {
    grid-column: 1 / -1;
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
}
.switch-account-bar__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 40px;
}
.e-my-account-tab__current-plan .switch-account-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 32px 40px;
}
.e-my-account-tab__current-plan .switch-account-bar__actions {
    gap: 40px;
    width: 100%;
}
@media (min-width: 768px) and (max-width: 991px) {
    .e-my-account-tab__current-plan .switch-account-bar__actions {
        gap: 20px;
    }
}
.e-my-account-tab__current-plan .switch-account-bar__action {
    flex: 1 0 0;
}
.elementor-widget-woocommerce-my-account .e-my-account-tab.e-my-account-tab__current-plan .woocommerce-MyAccount-content {
    padding: 0;
    background: transparent;
    border: none;
}
.switch-account-bar__action {
    display: inline-flex;
    /* align-items: flex-start; */
    align-items: center;
    gap: 10px;
    color: var(--e-global-color-text);
    text-decoration: none;
    --switch-account-bar-icon-border: var(--switch-color-primary);
}
@media (max-width: 575px) {
    .switch-account-bar__action {
        align-items: center;
    }
}
.switch-account-bar__action--disabled {
    opacity: .5;
    cursor: default;
}
.switch-account-bar__action:hover,
.switch-account-bar__action:focus-visible {
    /* --switch-account-bar-icon-border: var(--e-global-color-accent); */
}
.switch-account-bar__action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border: 1px solid var(--switch-account-bar-icon-border, #e8e8e8);
    border-radius: 12px;
    color: var(--switch-color-primary);
    transition: border-color .2s ease, background .2s ease;
}
a.switch-account-bar__action:hover .switch-account-bar__action-icon,
a.switch-account-bar__action:focus-visible switch-account-bar__action-icon {
    background: var(--switch-color-primary);
}
.switch-account-bar__action-icon svg {
    transition: color .2s ease;
}
a.switch-account-bar__action:hover .switch-account-bar__action-icon svg,
a.switch-account-bar__action:focus-visible .switch-account-bar__action-icon svg {
    /* color: var(--e-global-color-accent); */
    color: #fff;
}
.switch-account-bar__action-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.switch-account-bar__action-title {
    font-size: 16px;
    line-height: normal;
    font-weight: 600;
}
.e-my-account-tab.e-my-account-tab__dashboard .switch-account-bar__actions {
    /* justify-content: flex-end; */
    gap: 20px;
    width: 100%;
}
@media (min-width: 768px) {
    .e-my-account-tab.e-my-account-tab__dashboard .switch-account-bar__actions {
        gap: 100px;
    }
}
.e-my-account-tab.e-my-account-tab__dashboard .switch-account-bar__actions a:is(:first-child) {
    margin-right: auto;
}
.e-my-account-tab.e-my-account-tab__dashboard .switch-account-bar__action-copy {
    gap: 0;
}
.e-my-account-tab.e-my-account-tab__dashboard .switch-account-bar__action-title {
    font-size: 20px;
    font-weight: 900;
}
.switch-account-bar__action-description {
    font-size: 16px;
    color: #000;
    font-weight: 600;
    text-decoration: underline;
    opacity: .5;
}
@media (max-width: 575px) {
    .switch-account-bar__action-description {
        font-size: 14px;
    }
}
/* a.switch-account-bar__action:hover .switch-account-bar__action-description {
    text-decoration: underline;
} */
.switch-account-bar__steps-summary {
    display: none;
}
.switch-account-bar__steps {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.switch-account-bar__step {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    line-height: 1.3;
    color: var(--e-global-color-text);
    opacity: .5;
    --switch-account-bar-marker-border: #cfcfcf;
    --switch-account-bar-marker-bg: transparent;
    --switch-account-bar-marker-color: inherit;
    --switch-account-bar-marker-number: 12px;
    /* "none" keeps the pseudo-element from being generated at all — an empty
       string would still add a flex item next to the step number. */
    --switch-account-bar-marker-check: none;
}
.switch-account-bar__step::after {
    content: "";
    width: 40px;
    height: 1px;
    margin-left: 12px;
    background: #cfcfcf;
}
.switch-account-bar__step:last-child::after {
    display: none;
}
.switch-account-bar__step-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1px solid var(--switch-account-bar-marker-border);
    border-radius: 50%;
    background: var(--switch-account-bar-marker-bg);
    color: var(--switch-account-bar-marker-color);
    font-size: var(--switch-account-bar-marker-number);
    font-weight: 600;
}
/* The step number is hidden by a zero font size on a done step, so the tick
   sets its own size rather than inheriting it. */
.switch-account-bar__step-marker::before {
    content: var(--switch-account-bar-marker-check);
    font-size: 12px;
}
.switch-account-bar__step-label {
    white-space: nowrap;
}
.switch-account-bar__step--current {
    opacity: 1;
    font-weight: 600;
    --switch-account-bar-marker-border: transparent;
    --switch-account-bar-marker-bg: #f5b301;
    --switch-account-bar-marker-color: #000;
}
.switch-account-bar__step--done {
    opacity: 1;
    --switch-account-bar-marker-border: transparent;
    --switch-account-bar-marker-bg: #1f7a5c;
    --switch-account-bar-marker-color: #fff;
    --switch-account-bar-marker-number: 0;
    --switch-account-bar-marker-check: "✓";
}
@media (max-width: 767px) {
    .switch-account-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
        margin-bottom: 24px;
    }
    .switch-account-bar__title {
        font-size: 22px;
    }
    .e-my-account-tab__current-plan .switch-account-bar__actions,
    .switch-account-bar__actions {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
    }
    .switch-account-bar__steps-summary {
        display: block;
        margin: 0;
        font-size: 14px;
        line-height: 1.3;
        font-weight: 600;
        color: var(--e-global-color-text);
    }
    .switch-account-bar__steps {
        display: none;
    }
}

/* Port Number information modal — follows the account modal visual system. */
body.switch-account-modal-open {
    overflow: hidden;
}
.switch-account-modal {
    position: fixed;
    z-index: 100000;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.switch-account-modal[hidden],
.switch-account-modal--hidden {
    display: none;
}
.switch-account-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .6);
    backdrop-filter: blur(14px);
    cursor: pointer;
}
.switch-account-modal .switch-account-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 420px);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 30px;
    border-radius: 20px;
    background: var(--switch-color-cream);
    box-shadow: none;
    text-align: center;
}
.switch-account-modal button.switch-account-modal__close {
    position: absolute;
    top: 20px;
    right: 20px;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.switch-account-modal__title {
    margin: 0 35px 10px;
    color: #000;
    font-size: 20px !important;
    font-weight: 900 !important;
    line-height: 26px !important;
}
.switch-account-modal__copy {
    margin: 0;
    color: #000;
    font-size: 16px;
    font-weight: 600;
    line-height: 21px;
}
.switch-account-modal__actions {
    margin-top: 25px;
}
a.switch-account-modal__continue {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 56px;
    padding: 15px 20px;
    border: 0;
    border-radius: 10px;
    background: var(--switch-color-accent);
    color: #000 !important;
    font-family: "DM Sans", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 26px;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
}
a.switch-account-modal__continue:hover,
a.switch-account-modal__continue:focus-visible {
    background: #000;
    color: #fff !important;
}
.switch-account-modal__close:focus-visible,
a.switch-account-modal__continue:focus-visible {
    outline: 3px solid rgba(108, 32, 59, .28);
    outline-offset: 3px;
}
.switch-account-modal__dialog:focus {
    outline: none;
}
@media (max-width: 767px) {
    .switch-account-modal .switch-account-modal__dialog {
        padding: 30px 20px;
    }
}
/* end Account Action Bar */

/* Billing & Payments orders ----------------------------------------------- */
.elementor-widget-woocommerce-my-account .e-my-account-tab__orders .woocommerce .woocommerce-MyAccount-content {
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}
.e-my-account-tab__orders .woocommerce-MyAccount-content-wrapper {
    background: transparent !important;
}
.switch-orders {
    width: 100%;
    padding: 30px 32px 30px 30px;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 20px;
    color: #000;
    font-family: "DM Sans", sans-serif;
}
.elementor-widget-woocommerce-my-account .e-my-account-tab__orders .woocommerce .switch-orders__title {
    margin: 0 0 33px;
    color: #000;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: normal;
    opacity: .5;
}
.switch-orders__table {
    width: 100%;
}
.switch-orders__head,
.switch-orders__row {
    display: grid;
    grid-template-columns: minmax(250px, 1.33fr) repeat(4, minmax(150px, 1fr));
    width: 100%;
}
.switch-orders__head {
    padding-bottom: 18px;
    border-bottom: 1px solid #e8e8e8;
}
.switch-orders__heading {
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
    opacity: .5;
}
.switch-orders__body {
    display: flex;
    flex-direction: column;
}
.switch-orders__row {
    min-height: 93px;
    align-items: center;
    border-bottom: 1px solid #e8e8e8;
}
.switch-orders__row:last-child {
    border-bottom: 0;
}
.switch-orders__cell {
    min-width: 0;
    padding: 18px 0;
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
}
.switch-orders__cell--order-actions {
    display: flex;
    align-items: center;
}
.switch-orders__cell-label {
    display: none;
}
.switch-orders__summary {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}
.switch-orders__line {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    font-size: 20px;
    font-weight: 900;
}
.switch-orders__phone {
    color: #DA7A00;
}
.switch-orders__device {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
    opacity: .5;
}
.switch-orders__device-icon {
    display: block;
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
}
.switch-orders__number {
    overflow-wrap: anywhere;
}
.switch-orders__status--complete {
    color: var(--switch-color-success);
}
.switch-orders__status--payment-pending,
.switch-orders__status--neutral,
.switch-orders__status--payment-pending {
    color: var(--switch-color-danger);
}
.switch-orders__actions {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 10px;
}
a.switch-orders__action {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px;
    border-radius: 10px;
    background: #000;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: normal;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition: color .2s ease, background .2s ease;
}
.elementor-widget-woocommerce-my-account .e-my-account-tab__orders .woocommerce .switch-orders__action.switch-orders__action--view {
    margin-right: auto;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: #000;
    font-size: 16px;
    font-weight: 600;
    text-decoration: underline;
}
a.switch-orders__action--pay {
    background: var(--switch-color-danger);
}
a.switch-orders__action:hover,
a.switch-orders__action:focus-visible {
    background: var(--switch-color-accent);
    color: #000;
}
.elementor-widget-woocommerce-my-account .e-my-account-tab__orders .woocommerce .switch-orders__action.switch-orders__action--view:hover,
.elementor-widget-woocommerce-my-account .e-my-account-tab__orders .woocommerce .switch-orders__action.switch-orders__action--view:focus-visible {
    background: transparent;
    color: var(--switch-color-danger);
}
.switch-orders__action-icon {
    display: block;
    width: 14px;
    height: 14px;
    position: relative;
    right: 0;
    transition: filter .2s ease, right .2s ease;
}
a.switch-orders__action:hover .switch-orders__action-icon {
    right: -3px;
    filter: invert(1);
}
@media (min-width: 901px) {
    .switch-orders__table:not(:has(.switch-orders__action--pay, .switch-orders__action--cancel)) .switch-orders__head,
    .switch-orders__table:not(:has(.switch-orders__action--pay, .switch-orders__action--cancel)) .switch-orders__row {
        grid-template-columns: minmax(250px, 1.33fr) repeat(3, minmax(150px, 1fr)) 70px;
    }
    .switch-orders__table:not(:has(.switch-orders__action--pay, .switch-orders__action--cancel)) .switch-orders__heading:last-child {
        text-align: right;
    }
    .switch-orders__table:not(:has(.switch-orders__action--pay, .switch-orders__action--cancel)) .switch-orders__actions {
        justify-content: flex-end;
    }
    .elementor-widget-woocommerce-my-account .e-my-account-tab__orders .woocommerce .switch-orders__table:not(:has(.switch-orders__action--pay, .switch-orders__action--cancel)) .switch-orders__action.switch-orders__action--view {
        margin-right: 0;
    }
}
.switch-orders-pagination {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}
.switch-orders-pagination__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 41px;
    padding: 10px 18px;
    border-radius: 10px;
    background: #000;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}
.switch-orders-pagination__link:hover,
.switch-orders-pagination__link:focus-visible {
    background: var(--switch-color-accent);
    color: #000;
}
@media (max-width: 900px) {
    .switch-orders__head {
        display: none;
    }
    .switch-orders__body {
        gap: 16px;
    }
    .switch-orders__row {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
        padding: 18px;
        border: 1px solid #e8e8e8;
        border-radius: 14px;
    }
    .switch-orders__row:last-child {
        border-bottom: 1px solid #e8e8e8;
    }
    .switch-orders__cell {
        display: grid;
        grid-template-columns: minmax(90px, .35fr) minmax(0, 1fr);
        gap: 16px;
        padding: 5px 0;
    }
    .switch-orders__cell--order-number,
    .switch-orders__cell--order-actions {
        display: flex;
    }
    .switch-orders__cell--order-number {
        padding-top: 0;
    }
    .switch-orders__cell--order-actions {
        padding-bottom: 0;
    }
    .switch-orders__cell-label {
        display: block;
        font-weight: 600;
        opacity: .5;
    }
    .switch-orders__cell-label--hidden {
        display: none;
    }
}
@media (max-width: 767px) {
    .switch-orders {
        padding: 24px 20px;
    }
    .elementor-widget-woocommerce-my-account .e-my-account-tab__orders .woocommerce .switch-orders__title {
        margin-bottom: 24px;
    }
    .switch-orders__line {
        font-size: 18px;
    }
    .switch-orders__actions {
        flex-wrap: wrap;
    }
}
@media (max-width: 420px) {
    .switch-orders__cell {
        grid-template-columns: minmax(80px, .4fr) minmax(0, 1fr);
        gap: 10px;
    }
    .switch-orders__actions {
        align-items: stretch;
    }
    a.switch-orders__action--view {
        width: 100%;
        justify-content: flex-start;
    }
}

/* Payment methods ---------------------------------------------------------- */
.e-my-account-tab__payment-methods .switch-account-bar {
    margin-bottom: 30px;
}
.elementor-widget-woocommerce-my-account .e-my-account-tab__payment-methods .woocommerce .woocommerce-MyAccount-content {
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}
.e-my-account-tab__payment-methods .woocommerce-MyAccount-content-wrapper {
    background: transparent !important;
}
.switch-payment-methods {
    display: grid;
    grid-template-columns: minmax(0, 843px) minmax(300px, 417px);
    gap: 20px;
    align-items: start;
    font-family: "DM Sans", sans-serif;
    color: #000;
}
.switch-payment-methods__list {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 10px;
}
.switch-payment-methods__card {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 20px;
    padding: 30px 32px 30px 30px;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 20px;
}
.switch-payment-methods__field {
    display: flex;
    min-width: 0;
    flex: 1 1 0;
    flex-direction: column;
    gap: 10px;
}
.switch-payment-methods__field--method {
    flex: 0 1 340px;
}
.switch-payment-methods__field--expires {
    flex: 0 1 225px;
}
.switch-payment-methods__label,
.switch-payment-methods__value,
.switch-payment-methods__add-copy {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
}
p.switch-payment-methods__label {
    opacity: .5;
    margin-block-end: 0;
}
.switch-payment-methods__last-four {
    color: var(--switch-color-warning);
}
.switch-payment-methods__actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-left: auto;
}
.switch-payment-methods__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border-radius: 10px;
    background: #000;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: normal;
    text-align: center;
    text-decoration: none;
    text-transform: capitalize;
    white-space: nowrap;

    transition: color .2s ease, background .2s ease;
}
.switch-payment-methods__action:hover,
.switch-payment-methods__action:focus-visible {
    background: var(--switch-color-accent);
    color: #000;
}
.switch-payment-methods__add-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    padding: 30px 32px 30px 30px;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 20px;
    text-align: center;
}
.switch-payment-methods__add-icon {
    display: inline-flex;
    flex: 0 0 46px;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    box-sizing: border-box;
    border: 1px solid var(--switch-color-primary);
    border-radius: 12px;
}
.switch-payment-methods__add-icon-image {
    display: block;
    width: 24px;
    height: 25px;
}
.switch-payment-methods__add-copy {
    width: min(100%, 299px);
}
.switch-payment-methods__add-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 51px;
    padding: 15px 20px;
    box-sizing: border-box;
    border-radius: 10px;
    background: var(--switch-color-accent);
    color: #000;
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
    text-align: center;
    text-decoration: none;
}
.switch-payment-methods__add-button-icon {
    display: block;
    width: 14px;
    height: 14px;
}
.elementor-widget-woocommerce-my-account .e-my-account-tab__payment-methods .woocommerce .switch-payment-methods__add-button:any-link {
    color: #000;
    transition: color .2s ease, background .2s ease;
}
.switch-payment-methods__add-button:hover,
.switch-payment-methods__add-button:focus-visible {
    background: #000;
    color: #fff;
}
.switch-payment-methods__add-button img {
    transition: filter .2s ease;
}
.switch-payment-methods__add-button:hover img,
.switch-payment-methods__add-button:focus-visible img {
    filter: invert(1);
}
.elementor-widget-woocommerce-my-account .e-my-account-tab__payment-methods .woocommerce .switch-payment-methods__add-button:any-link:hover,
.elementor-widget-woocommerce-my-account .e-my-account-tab__payment-methods .woocommerce .switch-payment-methods__add-button:any-link:focus-visible {
    color: #fff;
}
@media (max-width: 1024px) {
    .switch-payment-methods {
        grid-template-columns: minmax(0, 1fr);
    }
    .switch-payment-methods__add-card {
        width: 100%;
    }
}
@media (max-width: 767px) {
    .switch-payment-methods__card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(90px, auto);
        padding: 24px 20px;
    }
    .switch-payment-methods__field--method,
    .switch-payment-methods__field--expires {
        min-width: 0;
        flex-direction: row;
    }
    .switch-payment-methods__field--expires {
        margin-top: -10px;
    }
    p.switch-payment-methods__label {
        margin-block-end: 0;
    }
    .switch-payment-methods__actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
        margin-left: 0;
    }
    .switch-payment-methods__add-card {
        padding: 24px 20px;
    }
}
@media (max-width: 420px) {
    .switch-payment-methods__card {
        grid-template-columns: minmax(0, 1fr);
    }
    .switch-payment-methods__actions {
        grid-column: auto;
        flex-wrap: wrap;
    }
}

/* Add payment method ------------------------------------------------------- */
.e-my-account-tab__add-payment-method .switch-account-bar {
    margin-bottom: 20px;
}
.elementor-widget-woocommerce-my-account .e-my-account-tab__add-payment-method .woocommerce .woocommerce-MyAccount-content {
    width: 100% !important;
    max-width: 843px;
    box-sizing: border-box;
}
.e-my-account-tab__add-payment-method .woocommerce-PaymentMethods {
    margin: 0;
    padding: 0;
    border: 0 !important;
    list-style: none;
}
.e-my-account-tab__add-payment-method .woocommerce-PaymentMethod {
    margin: 0;
}
.e-my-account-tab__add-payment-method .woocommerce-PaymentMethod:only-child > .input-radio,
.e-my-account-tab__add-payment-method .woocommerce-PaymentMethod:only-child > label,
.e-my-account-tab__add-payment-method .testmode-info {
    display: none;
}
.e-my-account-tab__add-payment-method .woocommerce-PaymentMethod > label {
    margin: 0 0 10px !important;
    font-family: "DM Sans", sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: normal !important;
    color: #000 !important;
}
.e-my-account-tab__add-payment-method .payment_box,
.e-my-account-tab__add-payment-method .wc-payment-form,
.e-my-account-tab__add-payment-method .wc-stripe-upe-element,
.e-my-account-tab__add-payment-method .__PrivateStripeElement,
.e-my-account-tab__add-payment-method iframe[title="Secure payment input frame"] {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}
.e-my-account-tab__add-payment-method .woocommerce .form-row {
    width: 100% !important;
    margin: 10px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
}
.e-my-account-tab__add-payment-method .woocommerce .form-row .input-text {
    box-sizing: border-box;
    padding: 15px 20px !important;
    border: 1px solid #e8e8e8 !important;
    border-radius: 10px !important;
    background: #fff !important;
    font-family: "DM Sans", sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: normal !important;
    color: #000 !important;
}
/* The kit targets this one through `#add_payment_method #payment #place_order`,
   so the colours are the one place here that still needs !important. */
.elementor-widget-woocommerce-my-account .e-my-account-tab__add-payment-method .woocommerce .woocommerce-MyAccount-content-wrapper .button {
    width: 100%;
    min-height: 51px;
    margin: 0;
    background: var(--switch-color-accent) !important;
    color: #000 !important;
    text-transform: capitalize;
}
.elementor-widget-woocommerce-my-account .e-my-account-tab__add-payment-method .woocommerce .woocommerce-MyAccount-content-wrapper .button::after {
    content: "";
    width: 14px;
    height: 14px;
    background: #000;
    -webkit-mask: url("../images/dashboard/status-check.svg") center / 14px 14px no-repeat;
    mask: url("../images/dashboard/status-check.svg") center / 14px 14px no-repeat;
}
.elementor-widget-woocommerce-my-account .e-my-account-tab__add-payment-method .woocommerce .woocommerce-MyAccount-content-wrapper .button:hover,
.elementor-widget-woocommerce-my-account .e-my-account-tab__add-payment-method .woocommerce .woocommerce-MyAccount-content-wrapper .button:focus-visible {
    background: #e6a600 !important;
    color: #000 !important;
}
@media (max-width: 767px) {
    .elementor-widget-woocommerce-my-account .e-my-account-tab__add-payment-method .woocommerce .woocommerce-MyAccount-content {
        padding: 20px;
        border-radius: 16px;
    }
}
/* Single order ------------------------------------------------------------- */
.elementor-widget-woocommerce-my-account .e-my-account-tab.e-my-account-tab__view-order .woocommerce-MyAccount-content {
    max-width: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.elementor-widget-woocommerce-my-account .e-my-account-tab.e-my-account-tab__view-order .woocommerce-MyAccount-content-wrapper {
    width: 100%;
    background: transparent;
}
.switch-order-view {
    display: grid;
    grid-template-columns: minmax(0, 2.0216fr) minmax(300px, 1fr);
    grid-template-rows: auto auto auto;
    column-gap: 20px;
    color: #000;
    font-family: "DM Sans", sans-serif;
}
.switch-order-view__summary {
    grid-column: 1;
    grid-row: 1;
    padding: 30px 30px 33px;
    border: 1px solid #e8e8e8;
    border-bottom: 0;
    border-radius: 20px 20px 0 0;
    background: #fff;
}
.elementor-widget-woocommerce-my-account .e-my-account-tab.e-my-account-tab__view-order .woocommerce h2.switch-order-view__order-title {
    margin: 0 0 10px;
    color: #000;
    font-size: 20px;
    font-weight: 900;
    line-height: normal;
}
.switch-order-view__order-number,
.switch-order-view__status-value {
    color: var(--switch-color-warning);
}
.elementor-widget-woocommerce-my-account .e-my-account-tab.e-my-account-tab__view-order .woocommerce .switch-order-view__status {
    margin: 0;
    color: #000;
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
}
.switch-order-view__updates {
    margin-top: 24px;
}
.switch-order-view__updates-title {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 900;
}
.switch-order-view__updates-list {
    margin: 0;
    padding-left: 20px;
}
.woocommerce-view-order .switch-order-view > .woocommerce-order-details:not(.sm-vertex-fulfillment) {
    grid-column: 1;
    grid-row: 2;
    width: auto;
    margin: 0;
    padding: 0 30px 12px;
    border: 1px solid #e8e8e8;
    border-top: 0;
    border-radius: 0 0 20px 20px;
    background: #fff;
    color: #000;
}
.woocommerce-view-order .switch-order-view > .woocommerce-order-details:not(.sm-vertex-fulfillment) .woocommerce-order-details__title {
    display: none;
}
.woocommerce-view-order .switch-order-view > .woocommerce-order-details:not(.sm-vertex-fulfillment) .woocommerce-table {
    display: table;
    width: 100%;
    margin: 0;
    border: 0;
    border-collapse: collapse;
    border-spacing: 0;
    color: #000;
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
}
.woocommerce-view-order .switch-order-view > .woocommerce-order-details:not(.sm-vertex-fulfillment) .woocommerce-table thead {
    display: table-header-group;
}
.woocommerce-view-order .switch-order-view > .woocommerce-order-details:not(.sm-vertex-fulfillment) .woocommerce-table tbody {
    display: table-row-group;
}
.woocommerce-view-order .switch-order-view > .woocommerce-order-details:not(.sm-vertex-fulfillment) .woocommerce-table tfoot {
    display: table-footer-group;
}
.woocommerce-view-order .switch-order-view > .woocommerce-order-details:not(.sm-vertex-fulfillment) .woocommerce-table th,
.woocommerce-view-order .switch-order-view > .woocommerce-order-details:not(.sm-vertex-fulfillment) .woocommerce-table td {
    width: 50%;
    padding: 18px 0;
    border: 0;
    background: transparent;
    color: #000;
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
    text-align: left;
    vertical-align: middle;
}
.woocommerce-view-order .switch-order-view > .woocommerce-order-details:not(.sm-vertex-fulfillment) .woocommerce-table thead th {
    padding-top: 0;
    color: rgba(0, 0, 0, .5) !important;
    font-weight: 600;
}
.woocommerce-view-order .switch-order-view > .woocommerce-order-details:not(.sm-vertex-fulfillment) .woocommerce-table tbody td {
    border-top: 1px solid #e8e8e8;
}
.woocommerce-view-order .switch-order-view > .woocommerce-order-details:not(.sm-vertex-fulfillment) .woocommerce-table tfoot th,
.woocommerce-view-order .switch-order-view > .woocommerce-order-details:not(.sm-vertex-fulfillment) .woocommerce-table tfoot td {
    border-top: 1px solid #e8e8e8;
    font-weight: 600;
}
.woocommerce-view-order .switch-order-view > .woocommerce-order-details:not(.sm-vertex-fulfillment) .woocommerce-table tfoot th {
    color: rgba(0, 0, 0, .5);
    text-transform: capitalize;
}
.elementor-widget-woocommerce-my-account .e-my-account-tab.e-my-account-tab__view-order .woocommerce .switch-order-view .order-actions-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-sizing: border-box;
    padding: 10px;
    border: 0;
    border-radius: 10px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: normal;
    text-decoration: none;
    white-space: nowrap;
}
.elementor-widget-woocommerce-my-account .e-my-account-tab.e-my-account-tab__view-order .woocommerce .switch-order-view a.order-actions-button.pay {
    background: var(--switch-color-danger);
}
.elementor-widget-woocommerce-my-account .e-my-account-tab.e-my-account-tab__view-order .woocommerce .switch-order-view a.order-actions-button.pay::after {
    display: block;
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    position: relative;
    right: 0;
    transition: filter .2s ease, right .2s ease;
    background: url("../images/dashboard/arrow-right.svg") center / contain no-repeat;
    content: "";
}
.elementor-widget-woocommerce-my-account .e-my-account-tab.e-my-account-tab__view-order .woocommerce .switch-order-view a.order-actions-button.pay:hover::after,
.elementor-widget-woocommerce-my-account .e-my-account-tab.e-my-account-tab__view-order .woocommerce .switch-order-view a.order-actions-button.pay:focus::after {
    right: -3px;
    filter: invert(1);
}
.elementor-widget-woocommerce-my-account .e-my-account-tab.e-my-account-tab__view-order .woocommerce .switch-order-view a.order-actions-button.cancel {
    margin-left: 10px;
    background: #000;
}
.elementor-widget-woocommerce-my-account .e-my-account-tab.e-my-account-tab__view-order .woocommerce .switch-order-view a.order-actions-button:hover,
.elementor-widget-woocommerce-my-account .e-my-account-tab.e-my-account-tab__view-order .woocommerce .switch-order-view a.order-actions-button:focus-visible {
    background: var(--switch-color-accent);
    color: #000;
}
.woocommerce-view-order .switch-order-view > .woocommerce-order-details:not(.sm-vertex-fulfillment) .product-name a {
    color: var(--switch-color-warning) !important;
    font-size: 16px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.woocommerce-view-order .switch-order-view > .woocommerce-order-details:not(.sm-vertex-fulfillment) .product-name a:hover,
.woocommerce-view-order .switch-order-view > .woocommerce-order-details:not(.sm-vertex-fulfillment) .product-name a:focus-visible {
    color: var(--tables-links-normal-color) !important;
}
.woocommerce-view-order .switch-order-view > .woocommerce-order-details:not(.sm-vertex-fulfillment) .wc-item-meta {
    margin: 0;
    padding: 0;
    font-size: 16px;
    line-height: normal;
    list-style: none;
}
.woocommerce-view-order .switch-order-view > .woocommerce-order-details:not(.sm-vertex-fulfillment) .wc-item-meta p {
    margin: 0;
}
.woocommerce-view-order .switch-order-view > .woocommerce-customer-details {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;
    width: auto;
    margin: 0;
    padding: 30px;
    border: 1px solid #e8e8e8;
    border-radius: 20px;
    background: #fff;
    color: #000;
}
.elementor-widget-woocommerce-my-account .e-my-account-tab.e-my-account-tab__view-order .woocommerce .switch-order-view > .woocommerce-customer-details .woocommerce-column__title {
    margin: 0 0 18px;
    color: #000;
    font-size: 20px;
    font-weight: 900;
    line-height: normal;
}
.woocommerce-view-order .switch-order-view > .woocommerce-customer-details .woocommerce-column__title::after {
    content: ":";
}
.elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce address,
.elementor-widget-woocommerce-my-account .e-my-account-tab.e-my-account-tab__view-order .woocommerce .switch-order-view > .woocommerce-customer-details address {
    margin: 0;
    padding: 0;
    border: 0;
    color: rgba(0, 0, 0, .5);
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
.elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce address {
    margin-top: 40px;
}
.elementor-widget-woocommerce-my-account .e-my-account-tab.e-my-account-tab__view-order .woocommerce .switch-order-view > .woocommerce-customer-details .woocommerce-customer-details--phone,
.elementor-widget-woocommerce-my-account .e-my-account-tab.e-my-account-tab__view-order .woocommerce .switch-order-view > .woocommerce-customer-details .woocommerce-customer-details--email {
    margin: 18px 0 0;
    color: rgba(0, 0, 0, .5);
    font-size: 16px;
    font-weight: 600;
    padding-left: 0;
}
.woocommerce-view-order .switch-order-view > .woocommerce-customer-details .woocommerce-customer-details--email {
    display: flex;
    align-items: center;
    gap: 5px;
}
.woocommerce-view-order .switch-order-view > .woocommerce-customer-details .woocommerce-customer-details--email::before {
    position: static;
    display: block;
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    margin: 0;
    opacity: .5;
    background: url("../images/dashboard/sms-black.svg") center / contain no-repeat;
    content: "";
}
/* Compact take on the shared dark button — it sits inside the customer details
   card, where the full 15px/16px pill would outweigh the text next to it. */
.elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce a.switch-order-view__billing-edit {
    margin-top: 20px;
    padding: 10px;
    font-size: 12px;
    font-weight: 700;
}
.switch-order-view__billing-edit-icon {
    display: block;
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    transition: filter .2s ease;
}
.woocommerce-view-order .switch-order-view > .sm-vertex-fulfillment {
    grid-column: 1;
    grid-row: 3;
    width: auto;
    margin: 20px 0 0;
    padding: 30px;
    border: 1px solid #e8e8e8;
    border-radius: 20px;
    background: #fff;
    color: #000;
}
.woocommerce-view-order .switch-order-view > .sm-vertex-fulfillment h2 {
    margin: 0 0 20px;
    color: #000;
    font-size: 20px;
    font-weight: 900;
    line-height: normal;
}
.woocommerce-view-order .switch-order-view > .sm-vertex-fulfillment .sm-vertex-fulfillment__status-row {
    margin: 0 0 24px;
}
.woocommerce-view-order .switch-order-view > .sm-vertex-fulfillment .sm-vertex-fulfillment__status-row .sm-vertex-badge {
    color: #000;
    font-size: 16px;
    padding: 0;
    letter-spacing: 0;
    text-transform: none;
}
.woocommerce-view-order .switch-order-view > .sm-vertex-fulfillment .sm-vertex-fulfillment__status-row .sm-vertex-badge--pending {
    color: var(--switch-color-warning);
    background: transparent;
}
.elementor-widget-woocommerce-my-account .e-my-account-tab.e-my-account-tab__view-order .woocommerce .switch-order-view > .sm-vertex-fulfillment .sm-vertex-fulfillment__table {
    display: table;
    width: 100%;
    margin: 0;
    border: 0;
    border-collapse: collapse;
    border-spacing: 0;
    color: #000;
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
}
.elementor-widget-woocommerce-my-account .e-my-account-tab.e-my-account-tab__view-order .woocommerce .switch-order-view > .sm-vertex-fulfillment .sm-vertex-fulfillment__table thead {
    display: table-header-group;
}
.elementor-widget-woocommerce-my-account .e-my-account-tab.e-my-account-tab__view-order .woocommerce .switch-order-view > .sm-vertex-fulfillment .sm-vertex-fulfillment__table tbody {
    display: table-row-group;
}
.elementor-widget-woocommerce-my-account .e-my-account-tab.e-my-account-tab__view-order .woocommerce .switch-order-view > .sm-vertex-fulfillment .sm-vertex-fulfillment__table th,
.elementor-widget-woocommerce-my-account .e-my-account-tab.e-my-account-tab__view-order .woocommerce .switch-order-view > .sm-vertex-fulfillment .sm-vertex-fulfillment__table td {
    width: 50%;
    padding: 18px 0;
    border: 0;
    background: transparent;
    color: #000;
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
    text-align: left;
    vertical-align: middle;
}
.elementor-widget-woocommerce-my-account .e-my-account-tab.e-my-account-tab__view-order .woocommerce .switch-order-view > .sm-vertex-fulfillment .sm-vertex-fulfillment__table thead th {
    padding-top: 0;
    color: rgba(0, 0, 0, .5);
}
.elementor-widget-woocommerce-my-account .e-my-account-tab.e-my-account-tab__view-order .woocommerce .switch-order-view > .sm-vertex-fulfillment .sm-vertex-fulfillment__table tbody td {
    border-top: 1px solid #e8e8e8;
}
.elementor-widget-woocommerce-my-account .e-my-account-tab.e-my-account-tab__view-order .woocommerce .switch-order-view > .sm-vertex-fulfillment .sm-vertex-fulfillment__table tbody em {
    font-style: normal;
}
.elementor-widget-woocommerce-my-account .e-my-account-tab.e-my-account-tab__view-order .woocommerce .switch-order-view > .sm-vertex-fulfillment .sm-vertex-fulfillment__table th:first-child,
.elementor-widget-woocommerce-my-account .e-my-account-tab.e-my-account-tab__view-order .woocommerce .switch-order-view > .sm-vertex-fulfillment .sm-vertex-fulfillment__table td:first-child {
    padding-right: 20px;
}
.woocommerce-view-order .switch-order-view > .sm-vertex-fulfillment .sm-vertex-fulfillment__note {
    margin: 20px 0 0;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
@media (max-width: 767px) {
    .switch-order-view {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto auto auto;
    }
    .switch-order-view__summary {
        padding: 20px;
    }
    .elementor-widget-woocommerce-my-account .e-my-account-tab.e-my-account-tab__view-order .woocommerce .switch-order-view__status {
        font-size: 14px;
        line-height: 1.4;
    }
    .woocommerce-view-order .switch-order-view > .woocommerce-order-details:not(.sm-vertex-fulfillment) {
        padding: 0 20px 12px;
    }
    .woocommerce-view-order .switch-order-view > .woocommerce-order-details:not(.sm-vertex-fulfillment) .woocommerce-table th,
    .woocommerce-view-order .switch-order-view > .woocommerce-order-details:not(.sm-vertex-fulfillment) .woocommerce-table td {
        width: auto;
        padding: 14px 0;
        font-size: 14px;
    }
    .woocommerce-view-order .switch-order-view > .woocommerce-order-details:not(.sm-vertex-fulfillment) .woocommerce-table th:first-child,
    .woocommerce-view-order .switch-order-view > .woocommerce-order-details:not(.sm-vertex-fulfillment) .woocommerce-table td:first-child {
        width: 68%;
        padding-right: 15px;
    }
    .woocommerce-view-order .switch-order-view > .woocommerce-customer-details {
        grid-column: 1;
        grid-row: 4;
        margin-top: 20px;
        padding: 24px 20px;
    }
    .woocommerce-view-order .switch-order-view > .sm-vertex-fulfillment {
        grid-column: 1;
        grid-row: 3;
        padding: 24px 20px;
    }
    .elementor-widget-woocommerce-my-account .e-my-account-tab.e-my-account-tab__view-order .woocommerce .switch-order-view > .sm-vertex-fulfillment .sm-vertex-fulfillment__table th,
    .elementor-widget-woocommerce-my-account .e-my-account-tab.e-my-account-tab__view-order .woocommerce .switch-order-view > .sm-vertex-fulfillment .sm-vertex-fulfillment__table td {
        width: auto;
        padding: 14px 0;
        font-size: 14px;
    }
    .elementor-widget-woocommerce-my-account .e-my-account-tab.e-my-account-tab__view-order .woocommerce .switch-order-view > .sm-vertex-fulfillment .sm-vertex-fulfillment__table th:first-child,
    .elementor-widget-woocommerce-my-account .e-my-account-tab.e-my-account-tab__view-order .woocommerce .switch-order-view > .sm-vertex-fulfillment .sm-vertex-fulfillment__table td:first-child {
        width: 68%;
        padding-right: 15px;
    }
}
/* end Single order */

/* Account forms: edit address, edit account -------------------------------------------------------- */
.woocommerce form.switch-account-form {
    /* padding: 30px 32px 30px 30px; */
    /* box-sizing: border-box; */
    /* border: 1px solid #e8e8e8; */
    /* border-radius: 20px; */
    /* background: #fff; */
    /* font-family: "DM Sans", sans-serif; */
}
.woocommerce form.switch-account-form .switch-account-form__title {
    margin: 0;
    font-size: 20px;
    font-weight: 900;
    line-height: normal;
    color: #000;
}
.woocommerce form.switch-account-form .switch-account-form__fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}
/* Anything a third party hooks into the form runs full width unless it asks
   for a half. */
.woocommerce form.switch-account-form .switch-account-form__fields > * {
    grid-column: 1 / -1;
}
.woocommerce form.switch-account-form .switch-account-form__row {
    grid-column: 1 / -1;
    width: auto;
    margin: 0;
    padding: 0;
    float: none;
}
.woocommerce form.switch-account-form .switch-account-form__row--half {
    grid-column: span 1;
}
.woocommerce form.switch-account-form .switch-account-form__row--tight {
    margin-top: -10px;
}
.woocommerce form.switch-account-form .switch-account-form__row label {
    display: block;
    margin: 0 0 10px !important;
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
    color: #000;
}
.woocommerce form.switch-account-form .switch-account-form__row label.screen-reader-text {
    margin: 0;
}
.woocommerce form.switch-account-form .required {
    border: 0;
    color: var(--switch-color-danger);
    text-decoration: none;
}
.woocommerce form.switch-account-form .optional {
    color: #000;
    font-weight: 600;
}
.woocommerce form.switch-account-form .switch-account-form__row .input-text,
.woocommerce form.switch-account-form .switch-account-form__row select {
    width: 100%;
    box-sizing: border-box;
    padding: 15px 20px;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    background: #fff !important;
    font-family: "DM Sans", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
    color: #000;
}
.woocommerce form.switch-account-form .switch-account-form__row .input-text::placeholder {
    color: rgba(0, 0, 0, .5);
    font-weight: 600;
}
.woocommerce form.switch-account-form .switch-account-form__row .input-text:focus,
.woocommerce form.switch-account-form .switch-account-form__row select:focus {
    border-color: var(--switch-color-primary);
    outline: none;
}
/* Country and State render through select2, so the box, the text and the
   caret all have to be restyled on select2's own markup. */
.woocommerce form.switch-account-form .select2-container .select2-selection--single {
    height: auto;
    padding: 3px 0px;
    border: 1px solid #e8e8e8 !important;
    border-radius: 10px;
    background: #fff;
}
.woocommerce form.switch-account-form .select2-container .select2-selection__rendered {
    padding: 0;
    font-family: "DM Sans", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
    color: #000;
}
.woocommerce form.switch-account-form .select2-container .select2-selection__arrow {
    top: 50%;
    right: 20px;
    display: flex;
    width: 14px;
    height: 14px;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
}
.woocommerce form.switch-account-form .select2-container .select2-selection__arrow b {
    position: static;
    display: block;
    width: 7px;
    height: 7px;
    margin: 0;
    border: 0;
    border-right: 1.5px solid #000;
    border-bottom: 1.5px solid #000;
    transform: rotate(45deg) translate(-2px, -2px);
}
.woocommerce form.switch-account-form .switch-account-form__hint {
    display: block;
    margin: 10px 0 0;
    font-size: 12px;
    font-weight: 700;
    line-height: normal;
    opacity: .5;
    color: #000;
}
.woocommerce form.switch-account-form .switch-account-form__hint em {
    font-style: normal;
}
.woocommerce form.switch-account-form .switch-account-form__control {
    position: relative;
    display: block;
}
.woocommerce form.switch-account-form .switch-account-form__control .input-text {
    padding-right: 50px;
}
.woocommerce form.switch-account-form .switch-account-form__reveal {
    position: absolute;
    top: 50%;
    right: 20px;
    display: flex;
    width: 14px;
    height: 14px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 0;
    background: none;
    color: #000;
    transform: translateY(-50%);
    cursor: pointer;
}
.woocommerce form.switch-account-form .switch-account-form__reveal svg {
    width: 14px;
    height: 14px;
}
.woocommerce form.switch-account-form .switch-account-form__reveal-icon--visible {
    display: none;
}
.woocommerce form.switch-account-form .switch-account-form__reveal[aria-pressed="true"] .switch-account-form__reveal-icon--hidden {
    display: none;
}
.woocommerce form.switch-account-form .switch-account-form__reveal[aria-pressed="true"] .switch-account-form__reveal-icon--visible {
    display: block;
}
.woocommerce form.switch-account-form .switch-account-form__actions {
    margin: 20px 0 0;
    padding: 0;
}
.woocommerce form.switch-account-form button.switch-account-form__submit {
    width: 100%;
}
/* The select2 panel is printed at the end of <body>, outside the form. */
.woocommerce-account .select2-dropdown {
    border-color: #e8e8e8;
    border-radius: 10px;
    font-family: "DM Sans", sans-serif;
    font-size: 16px;
    overflow: hidden;
}
.woocommerce-account .select2-search--dropdown .select2-search__field {
    padding: 8px 10px !important;
    font-family: "DM Sans", sans-serif;
    font-size: 16px;
}
.woocommerce-account .select2-container--default .select2-results__option {
    font-size: 16px;
    font-weight: 500;
    font-family: "DM Sans", sans-serif;
}
.woocommerce-account .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--switch-color-primary);
    font-family: "DM Sans", sans-serif;
    font-size: 16px;
    color: #fff;
}
@media (max-width: 767px) {
    .woocommerce form.switch-account-form {
        padding: 20px;
    }
    .woocommerce form.switch-account-form .switch-account-form__fields {
        grid-template-columns: minmax(0, 1fr);
    }
    .woocommerce form.switch-account-form .switch-account-form__row--half {
        grid-column: 1 / -1;
    }
}
/* end Account forms */


/* Make a Payment */
/* The sm-mp__* rules in the plugin's make-payment.css still load on this page,
   so every rule that restyles one of those elements is scoped to the wrapper to
   win on specificity. */
.switch-make-payment {
    font-family: "DM Sans", sans-serif;
    color: #000;
}
.switch-make-payment__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 417px;
    align-items: start;
    gap: 20px;
}
.switch-make-payment__list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.switch-make-payment .switch-make-payment__card {
    display: block;
    padding: 30px 27px 31px 28px;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 20px;
}
.switch-make-payment__card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e8e8e8;
}
.switch-make-payment__plan {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
    opacity: .5;
}
.switch-make-payment__badge {
    padding: 2px 10px;
    border-radius: 20px;
    background: var(--switch-color-cream);
    font-size: 12px;
    font-weight: 700;
    color: var(--switch-color-primary);
}
.e-my-account-tab__make-payment .switch-make-payment__badge {
    display: none;
}
.switch-make-payment__amount {
    font-size: 20px;
    font-weight: 900;
    line-height: normal;
    white-space: nowrap;
}
.switch-make-payment__card-body {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-top: 20px;
}
.switch-make-payment__card-info {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 5px;
}
.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce h3.switch-make-payment__lines,
.switch-make-payment h3.switch-make-payment__lines {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0;
    font-size: 28px !important;
    font-weight: 900 !important;
    line-height: normal;
    color: #000;
}
.switch-make-payment__mdn {
    color: #DA7A00;
}
.switch-make-payment__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 30px;
    margin: 0;
}
.switch-make-payment__meta-item {
    display: flex;
    gap: 20px;
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
}
.switch-make-payment__meta dt {
    margin: 0;
    font-weight: 600;
    opacity: .5;
}
.switch-make-payment__meta dd {
    margin: 0;
}
.switch-make-payment__card-action {
    flex: 0 0 auto;
}
.switch-make-payment button.switch-make-payment__pay:disabled {
    background: #e8e8e8;
    color: rgba(0, 0, 0, .5);
    cursor: not-allowed;
}
.switch-make-payment__note {
    margin: 15px 0 0;
    font-size: 12px;
    font-weight: 700;
    line-height: normal;
    opacity: .5;
}
.switch-make-payment .switch-make-payment__result {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}
.switch-make-payment .switch-make-payment__result:not(:empty) {
    margin-top: 15px;
}
/* Payment-method panel */
.switch-make-payment__side {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    padding: 30px 32px 30px 30px;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 20px;
    text-align: center;
}
.switch-make-payment__side-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border: 1px solid var(--switch-color-primary);
    border-radius: 12px;
    color: var(--switch-color-primary);
}
.switch-make-payment__side-icon svg {
    width: 24px;
    height: 24px;
}
.switch-make-payment__side-text {
    max-width: 299px;
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
}
.switch-make-payment__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 40px 30px;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 20px;
    text-align: center;
}
.switch-make-payment__empty p {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}
/* Confirmation modal */
.switch-make-payment .sm-mp__modal-box {
    max-width: 460px;
    padding: 30px;
    border: 1px solid #e8e8e8;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .18);
}
.switch-make-payment .sm-mp__modal-box h2 {
    margin: 0 0 15px;
    font-size: 20px;
    font-weight: 900;
    line-height: normal;
}
.switch-make-payment .sm-mp__modal-body {
    margin: 0 0 30px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    color: rgba(0, 0, 0, .7);
    white-space: pre-line;
}
.switch-make-payment .sm-mp__modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
.switch-make-payment .sm-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 0;
    border: 0;
    background: none;
    line-height: 0;
    cursor: pointer;
}
@media (max-width: 1200px) {
    .switch-make-payment__layout {
        grid-template-columns: minmax(0, 1fr);
    }
}
@media (max-width: 767px) {
    .switch-make-payment .switch-make-payment__card {
        padding: 20px;
    }
    .switch-make-payment__card-body {
        flex-direction: column;
        align-items: stretch;
    }
    .switch-make-payment h3.switch-make-payment__lines {
        font-size: 22px;
    }
    .switch-make-payment button.switch-make-payment__pay {
        width: 100%;
    }
    .switch-make-payment__meta-item {
        flex-wrap: wrap;
        gap: 6px;
    }
    .switch-make-payment__side {
        padding: 30px 20px;
    }
    .switch-make-payment .sm-mp__modal-actions {
        flex-direction: column-reverse;
    }
}
/* end Make a Payment */




/* Billing Address */
.elementor-widget-woocommerce-my-account .e-my-account-tab:is(.e-my-account-tab__edit-address) .woocommerce-MyAccount-content-wrapper > p {
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: normal;
    color: #757575 !important;
}
.elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce-Address-title h2 {
    display: none;
}
.elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce-Address .edit {
    padding: 10px;
    font-size: 12px;
    font-weight: 700;
    margin-top: -10px;
}
/* end Billing Address */
/* Current Plan - My Lines & Plan */
.switch-mobile-current-plan {
    width: 100%;
    box-sizing: border-box;
}
.switch-mobile-current-plan > p {
    float: none !important;
    width: 100% !important;
    margin: 0;
    background: #fff;
    padding: 30px;
    border: 1px solid #E8E8E8;
    border-radius: 20px;
    
    text-align: center;
    color: #000;
}
.switch-mobile-current-plan__header {
    margin-bottom: 24px;
}
.elementor-element .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) header.switch-mobile-current-plan__header h3.switch-mobile-current-plan__title {
    margin: 0;
    font-size: 28px;
    font-weight: 900;
    line-height: 1.2;
    color: #000;
}
.elementor-element .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) header.switch-mobile-current-plan__header .switch-mobile-current-plan__count {
    color: var(--switch-color-warning);
}
.switch-mobile-current-plan__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    align-items: start;
}
@media (min-width: 992px) {
    .switch-mobile-current-plan__layout {
        grid-template-columns: 340px minmax(0, 1fr);
        gap: 40px;
    }
}
@media (max-width: 575px) {
    .switch-mobile-current-plan__layout {
        gap: 20px;
    }
    .switch-mobile-current-plan__header {
        display: none;
    }    
}
.switch-mobile-current-plan__main {
    min-width: 0;
}
.switch-mobile-current-plan__grid {
    display: flex;
    flex-direction: column;
    /* The plugin stylesheet sets flex-wrap: wrap on this container. Combined with
       flex-direction: column it turns the grid into a multi-line flex container,
       which stretches the line and leaves dead space below the last card inside
       .sm-family-plan-group. */
    flex-wrap: nowrap;
    gap: 10px;
}
@keyframes switch-plan-filter-reveal {
    from {
        opacity: .35;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.switch-mobile-current-plan__grid--filter-reveal {
    animation-name: switch-plan-filter-reveal;
    animation-duration: 220ms;
    animation-timing-function: ease-out;
    animation-fill-mode: both;
}
@media (prefers-reduced-motion: reduce) {
    .switch-mobile-current-plan__grid--filter-reveal {
        animation: none;
    }
    .sm-plan-filter-card__chevron {
        transition: none;
    }
}
.sm-family-plan-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-radius: 30px;
    padding: 10px;
    background: #fff;
    border: 1px solid #E8E8E8;
    overflow: hidden;
}
.sm-family-plan-group .switch-mobile-current-plan__card {
    padding-left: 20px;
    padding-right: 20px;
    flex: none;
}

.sm-family-plan-group__title,
.sm-plan-line-wrap__title {
    margin: 0 0 12px;
    font-family: "DM Sans", sans-serif;
    font-size: 20px;
    font-weight: 900;
    line-height: normal;
    color: #000;
    text-transform: uppercase;
}
.sm-plan-line-wrap {
    /* margin-bottom: 20px; */
    padding: 0;
}
.switch-mobile-current-plan__card {
    background: #fff;
    border: 1px solid #E8E8E8;
    border-radius: 20px;
    padding: 30px;
    box-sizing: border-box;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
/* .switch-mobile-current-plan__card:hover {
    border-color: #D4D4D4;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
} */
/* Pending Activation: accent the card so the activation form reads as a call to action */
.switch-mobile-current-plan__card--pending-activation {
    border-color: var(--switch-color-warning);
    box-shadow:  inset 0 0 0 1px var(--switch-color-warning);
    /* background: rgba(218, 122, 0, 0.04); */
}
.switch-mobile-current-plan__card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #E8E8E8;
}
.switch-mobile-current-plan__plan-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    min-width: 0;
}
.switch-mobile-current-plan__plan-name,
.switch-mobile-current-plan__sim-type,
.switch-mobile-current-plan__status {
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
}
@media (max-width: 575px) {
    .switch-mobile-current-plan__plan-name,
    .switch-mobile-current-plan__sim-type,
    .switch-mobile-current-plan__status {
        font-size: 14px;
    }
}
.switch-mobile-current-plan__plan-name {
    color: rgba(0, 0, 0, 0.5);
}
.switch-mobile-current-plan__plan-separator {
    color: #6C203B;
    font-family: "DM Sans", sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}
.switch-mobile-current-plan__sim-type {
    color: #808080;
}
.switch-mobile-current-plan__status::before {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    content: "";
    flex: 0 0 8px;
}
/* Active status: filled circle with a white check, same treatment as the dashboard status dot */
.switch-mobile-current-plan__status.sm-renewal-badge--active::before {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    background: var(--switch-color-success) url("../images/dashboard/status-check.svg") center / 18px 18px no-repeat;
}
.switch-mobile-current-plan__title-row {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 16px;
    margin-bottom: 16px;
}
.switch-mobile-current-plan__title-row--with-meta {
    margin-bottom: 5px;
}
.switch-mobile-current-plan__card-title {
    margin: 0 !important;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 28px !important;
    font-weight: 900 !important;
    line-height: normal !important;
    color: #000;
}
.switch-mobile-current-plan__line-phone {
    color: #DA7A00;
}
.switch-mobile-current-plan__line-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 5px;
    width: 100%;
    margin-bottom: 16px;
    color: #000;
}
.switch-mobile-current-plan__line-meta-item {
    display: flex;
    align-items: flex-start;
    flex: 1 1 0;
    gap: 20px;
    min-width: 0;
}
.switch-mobile-current-plan__line-meta-item--full-row {
    flex: 1 0 100%;
}
.switch-mobile-current-plan__line-meta-label {
    flex: 0 0 115px;
    color: rgba(0, 0, 0, 0.5);
}
/* "Tracking Number:" is wider than the 115px label column: keep it on one line */
.switch-mobile-current-plan__line-meta-label--nowrap {
    flex-basis: auto;
    white-space: nowrap;
}
.switch-mobile-current-plan__line-meta-value {
    min-width: 0;
    overflow-wrap: anywhere;
}
/* Line Details, templates/myaccount/current-plan.php */
.switch-mobile-current-plan__details {
    flex: 0 0 auto;
    color: #000;
}
.switch-mobile-current-plan__details-summary {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
    list-style: none;
    cursor: pointer;
}
.switch-mobile-current-plan__details-summary::-webkit-details-marker {
    display: none;
}
.switch-mobile-current-plan__details-summary:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}
.switch-mobile-current-plan__details-chevron {
    display: flex;
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    transition: transform .2s ease;
}
.switch-mobile-current-plan__details[open] .switch-mobile-current-plan__details-chevron {
    transform: rotate(180deg);
}
/* Floats over the card, anchored to the title row, so nothing below moves.
   Same look as the My Switch header dropdown (.switch-my-switch__panel in style.css). */
.switch-mobile-current-plan__details-panel {
    position: absolute;
    top: calc(100% + 14px);
    right: 0;
    z-index: 5;
    box-sizing: border-box;
    min-width: 327px;
    max-width: 100%;
    padding: 20px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 4px 7px rgba(0, 0, 0, 0.1);
}
.switch-mobile-current-plan__details-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.switch-mobile-current-plan__details-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px 20px;
    min-width: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
}
.switch-mobile-current-plan__details-item + .switch-mobile-current-plan__details-item {
    padding-top: 15px;
    border-top: 1px solid #E8E8E8;
}
.switch-mobile-current-plan__details-label {
    flex: 0 0 auto;
    opacity: .5;
}
.switch-mobile-current-plan__details-value {
    min-width: 0;
    text-align: right;
    overflow-wrap: anywhere;
}
@media (max-width: 575px) {
    .switch-mobile-current-plan__details-panel {
        left: 0;
        min-width: 0;
    }
    .switch-mobile-current-plan__details-item {
        flex-direction: column;
        gap: 2px;
    }
    .switch-mobile-current-plan__details-value {
        text-align: left;
    }
}
/* end Line Details */


/* Shipment tracking row, templates/myaccount/current-plan.php */
.switch-mobile-current-plan__tracking {
    display: flex;
    flex: 1 0 100%;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 20px;
    min-width: 0;
}
@media (max-width: 575px) {
    .switch-mobile-current-plan__tracking {
        justify-content: flex-end;
    }
    .switch-mobile-current-plan__line-meta-label {
        margin-right: auto;
    }
}
.switch-mobile-current-plan__tracking-logo {
    position: relative;
    flex: 0 0 auto;
    width: 66.316px;
    height: 20.054px;
    overflow: hidden;
}
.switch-mobile-current-plan__card .switch-mobile-current-plan__tracking-logo-image {
    position: absolute;
    top: -131.82%;
    left: -4.81%;
    width: 109.97%;
    max-width: none;
    height: 363.64%;
}
.elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) a.switch-mobile-current-plan__tracking-number,
.elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) a.switch-mobile-current-plan__tracking-link {
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
    text-decoration: underline;
    text-underline-position: from-font;
    transition: color 0.2s ease;
}
.elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) a.switch-mobile-current-plan__tracking-number {
    min-width: 0;
    color: #000;
    overflow-wrap: anywhere;
}
.elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) a.switch-mobile-current-plan__tracking-link {
    color: rgba(0, 0, 0, 0.5);
    white-space: nowrap;
}
.elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) a.switch-mobile-current-plan__tracking-number:hover,
.elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) a.switch-mobile-current-plan__tracking-number:focus-visible {
    color: rgba(0, 0, 0, 0.5);
}
.elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) a.switch-mobile-current-plan__tracking-link:hover,
.elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) a.switch-mobile-current-plan__tracking-link:focus-visible {
    color: #000;
}
.switch-mobile-current-plan__delivery {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 4px 0 20px;
    font-family: "DM Sans", sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: normal;
    color: #000;
}
.switch-mobile-current-plan__delivery-icon {
    flex: 0 0 auto;
    transform: rotate(-90deg);
}
.switch-mobile-current-plan__delivery-date {
    color: #DA7A00;
}
/* end Shipment tracking row */


.sm-card-badges {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.sm-line-badge {
    display: inline-flex;
    align-items: center;
    background: #fff;
    border: 1px solid #E8E8E8;
    border-radius: 31px;
    padding: 6px 14px;
    font-family: "DM Sans", sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    color: #000;
}
.sm-renewal-badge {
    display: inline-flex;
    align-items: center;
    padding: 0;
    text-transform: none;
    letter-spacing: 0;

    background: transparent;

    white-space: nowrap;
    gap: 10px;
}
@media (max-width: 575px) {
    .sm-renewal-badge {
        gap: 6px;
    }
}
.sm-renewal-badge.switch-mobile-current-plan__status {
    color: #808080;
}
.sm-renewal-badge.sm-renewal-badge--pending-activation {
    color: var(--switch-color-warning);
}
.sm-renewal-badge.sm-renewal-badge--active {
    color: var(--switch-color-success);
}
.sm-renewal-badge.sm-renewal-badge--warning {
    color: var(--switch-color-warning);
}
.sm-renewal-badge.sm-renewal-badge--shipment {
    color: var(--switch-color-accent);
}
.sm-renewal-badge.sm-renewal-badge--error {
    color: var(--switch-color-danger);
}
.sm-renewal-badge.sm-renewal-badge--muted {
    color: rgba(0, 0, 0, 0.5);
}
.switch-mobile-current-plan__fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
.switch-mobile-current-plan__device {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 30px;
    min-height: 140px;
    padding: 28px 36px;
    background: #fff;
    border: 1px solid #E8E8E8;
    border-radius: 20px;
    box-sizing: border-box;
}
.switch-mobile-current-plan__card .switch-mobile-current-plan__device-media {
    width: 68px;
    flex: 0 0 68px;
}
.switch-mobile-current-plan__card .switch-mobile-current-plan__device-image {
    display: block;
    width: 100%;
    height: 80px;
    object-fit: contain;
}
.switch-mobile-current-plan__device-details {
    min-width: 0;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 5px;
}
.switch-mobile-current-plan__device-name {
    font-size: 20px;
    font-weight: 900;
    line-height: normal;
    color: #000;
    overflow-wrap: anywhere;
}
.elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .switch-mobile-current-plan__device a.switch-mobile-current-plan__device-link {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 15px 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    color: rgba(0, 0, 0, 0.5);
    text-decoration: underline;
    text-underline-position: from-font;
    white-space: nowrap;
    transition: color 0.2s ease;
}
.elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .switch-mobile-current-plan__device a.switch-mobile-current-plan__device-link:hover,
.elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .switch-mobile-current-plan__device a.switch-mobile-current-plan__device-link:focus-visible {
    color: #000;
}
@media (min-width: 576px) {
    .switch-mobile-current-plan__fields {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}
@media (max-width: 575px) {
    .switch-mobile-current-plan__line-meta {
        flex-direction: column;
    }
    .switch-mobile-current-plan__line-meta-item {
        width: 100%;
        gap: 10px;
        justify-content: space-between;
    }
    .switch-mobile-current-plan__line-meta-item--full-row {
        flex-basis: auto;
    }
    .switch-mobile-current-plan__tracking {
        flex-basis: auto;
        width: 100%;
        gap: 5px 10px;
    }
    /* Image on the left, name and product link stacked on the right */
    .switch-mobile-current-plan__device {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 10px 18px;
        min-height: 0;
        padding: 20px;
    }
    .switch-mobile-current-plan__card .switch-mobile-current-plan__device-media {
        grid-column: 1;
        grid-row: 1 / span 2;
        width: 58px;
        flex-basis: 58px;
    }
    .switch-mobile-current-plan__card .switch-mobile-current-plan__device-image {
        height: 70px;
    }
    .switch-mobile-current-plan__device-details {
        grid-column: 2;
        grid-row: 1;
    }
    .switch-mobile-current-plan__device-name {
        font-size: 16px;
    }
    .elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .switch-mobile-current-plan__device a.switch-mobile-current-plan__device-link {
        grid-column: 2;
        grid-row: 2;
        justify-self: start;
        margin-left: 0;
        padding: 0;
        font-size: 14px;
    }
}
/* 576-812px and 992-1180px: the tabs nav takes the card width, so the meta rows stack */
@media (min-width: 576px) and (max-width: 812px), (min-width: 992px) and (max-width: 1180px) {
    .switch-mobile-current-plan__line-meta {
        flex-direction: column;
    }
    .switch-mobile-current-plan__line-meta-item {
        flex: 1 1 auto;
        width: 100%;
    }
    .switch-mobile-current-plan__line-meta-item--full-row {
        flex-basis: auto;
    }
    .switch-mobile-current-plan__tracking {
        flex-basis: auto;
        width: 100%;
    }
}
.switch-mobile-current-plan__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: #FAFAFA;
    border-radius: 12px;
    padding: 14px 18px;
    border: 1px solid #F0F0F0;
    overflow-wrap: break-word;
    word-break: break-word;
}
.switch-mobile-current-plan__field-label {
    font-family: "DM Sans", sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: normal;
    color: rgba(0, 0, 0, 0.5);
}
.switch-mobile-current-plan__field-value {
    font-family: "DM Sans", sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    color: #000;
    overflow-wrap: break-word;
    word-break: break-all;
}
.switch-mobile-current-plan__field.sm-esim-active {
    grid-column: 1 / -1;
    background: #F4FAF9;
    border-color: #D1ECE7;
    padding: 18px 22px;
}
.switch-mobile-current-plan__field.sm-esim-active .sm-esim-active__mdn {
    font-size: 26px;
    font-weight: 900;
    color: var(--switch-color-success);
}
.sm-line-addons {
    border: 1px solid var(--switch-color-border);
    border-radius: 10px;
    padding: 18px 20px;
    margin-bottom: 20px;
}
.sm-line-addons .sm-line-addons__title {
    padding-bottom: 10px;
    border-bottom: 1px solid #E8E8E8;
    color: rgba(0, 0, 0, .5);
    text-transform: none;
    font-size: 16px;
    font-weight: 600;
}
.sm-line-addons__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0px;
}
.sm-line-addons__item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 0 15px 0;
    border-bottom: 1px solid #E8E8E8;
}
.sm-line-addons__item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.sm-line-addons__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.sm-line-addons__name {
    color: #000;
}
.sm-line-addons__amount {
    font-size: 20px;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
}
.sm-line-addons__meta {
    margin-top: 10px;
    font-size: 12px;
    flex-direction: column;
    gap: 0;
    color: rgba(0, 0, 0, 0.5);
}
.sm-pending-shipment-note {
    margin: 16px 0 0;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.5);
}
/* Line notification bars, templates/myaccount/current-plan.php */
/* Markup classes come from the plugin, so its stylesheet is overridden here by
   selector weight; !important only where the plugin uses it. */
.sm-portin-notification {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    box-sizing: border-box;
    margin-top: 16px;
    padding: 20px;
    border: 2px solid var(--switch-color-accent);
    border-radius: 10px;
    background: rgba(249, 183, 0, 0.2);
    color: var(--switch-color-warning);
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
}
.sm-portin-notification::before {
    content: "";
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--switch-color-warning) url("../images/dashboard/status-pending.svg") center / 18px 18px no-repeat;
}
.sm-portin-notification--error {
    border-color: var(--switch-color-danger);
    background: #ECD1CD;
    color: var(--switch-color-danger);
}
.sm-portin-notification--error::before {
    background-color: var(--switch-color-danger);
    background-image: url("../images/dashboard/status-close.svg");
}
.sm-portin-notification--success {
    border-color: var(--switch-color-success);
    background: #B6DCDF;
    color: var(--switch-color-success);
}
.sm-portin-notification--success::before {
    background-color: var(--switch-color-success);
    background-image: url("../images/dashboard/status-check.svg");
}
.sm-portin-notification .sm-portin-notification__text,
.sm-portin-notification .sm-portin-pending__text {
    flex: 1 1 0;
    min-width: 0;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
    overflow-wrap: break-word;
}
.sm-portin-notification .sm-portin-notification__text strong,
.sm-portin-notification .sm-portin-pending__text strong {
    color: inherit !important;
    font-weight: inherit;
}
.sm-portin-notification a.button.sm-view-portin-status-btn {
    flex: 0 0 auto;
    box-sizing: border-box;
    padding: 15px 20px;
    border: none;
    border-radius: 10px;
    background: #000;
    color: #fff !important;
    font-family: "DM Sans", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}
.sm-portin-notification a.button.sm-view-portin-status-btn:hover,
.sm-portin-notification a.button.sm-view-portin-status-btn:focus-visible {
    background: var(--switch-color-accent) !important;
    color: #000 !important;
}
@media (max-width: 575px) {
    .sm-portin-notification {
        align-items: flex-start;
    }
    .sm-portin-notification .sm-portin-notification__text,
    .sm-portin-notification .sm-portin-pending__text {
        align-self: center;
    }
    .sm-portin-notification a.button.sm-view-portin-status-btn {
        flex: 1 0 100%;
        text-align: center;
    }
}
/* end Line notification bars */


/* BYOP IMEI Form */
/* The same shell as the eSIM activation panel on a line card: white plate,
   hairline border, a 16px lead with the 12px hint right under it, then the
   input row. `.sm-change-imei-*` shares the field and button styling. */
.sm-byop-form,
.sm-physical-sim-byop-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-sizing: border-box;
    margin-top: 20px;
    padding: 20px;
    background: #fff;
    border: 1px solid var(--switch-color-border);
    border-radius: 10px;
}
.sm-byop-form__head {
    display: flex;
    flex-direction: column;
}
.sm-byop-form__intro {
    margin: 0;
    font-family: "DM Sans", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
    color: #000;
}
.sm-byop-form__hint {
    margin: 0;
    font-family: "DM Sans", sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: normal;
    color: rgba(0, 0, 0, 0.5);
}
.sm-byop-form__row,
.sm-change-imei-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
/* The plugin stylesheet paints the field through `.sm-byop-form__row
   input[type="text"]`, so every field rule here has to name the form, the tag
   and the class to outrank it. */
.sm-byop-form input.sm-byop-imei,
.sm-physical-sim-byop-form input.sm-physical-sim-byop-imei,
.sm-change-imei-form input.sm-change-imei-input {
    flex: 1 1 200px;
    box-sizing: border-box;
    padding: 15px 20px;
    background: #fff;
    border: 1px solid var(--switch-color-border);
    border-radius: 10px;
    font-family: "DM Sans", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
    color: #000;
}
.sm-byop-form input.sm-byop-imei::placeholder,
.sm-physical-sim-byop-form input.sm-physical-sim-byop-imei::placeholder,
.sm-change-imei-form input.sm-change-imei-input::placeholder {
    font-weight: 400;
    color: rgba(0, 0, 0, 0.5);
}
.sm-byop-form input.sm-byop-imei:focus,
.sm-physical-sim-byop-form input.sm-physical-sim-byop-imei:focus,
.sm-change-imei-form input.sm-change-imei-input:focus {
    border-color: #000;
    outline: none;
}
/* The submit is the dark account button. Each selector names the form, the tag
   and both classes: WooCommerce paints `.woocommerce button.button` at the same
   weight, and this outranks it without !important. */
.sm-byop-form button.button.sm-byop-submit,
.sm-physical-sim-byop-form button.button.sm-physical-sim-byop-submit,
.sm-change-imei-form button.button.sm-change-imei-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 15px 20px;
    background: #000;
    border: 0;
    border-radius: 10px;
    font-family: "DM Sans", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
    color: #fff;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}
.sm-byop-form button.button.sm-byop-submit:hover,
.sm-byop-form button.button.sm-byop-submit:focus-visible,
.sm-physical-sim-byop-form button.button.sm-physical-sim-byop-submit:hover,
.sm-physical-sim-byop-form button.button.sm-physical-sim-byop-submit:focus-visible,
.sm-change-imei-form button.button.sm-change-imei-submit:hover,
.sm-change-imei-form button.button.sm-change-imei-submit:focus-visible {
    background: var(--switch-color-accent);
    color: #000;
}
/* While the request is in flight the script disables the button, and
   WooCommerce repads a disabled `.button` down to its own `.618em 1em`, so the
   padding is restated here. */
.sm-byop-form button.button.sm-byop-submit:disabled[disabled],
.sm-physical-sim-byop-form button.button.sm-physical-sim-byop-submit:disabled[disabled],
.sm-change-imei-form button.button.sm-change-imei-submit:disabled[disabled] {
    padding: 15px 20px;
    background: #000;
    color: #fff;
    opacity: .5;
    cursor: default;
}
.sm-byop-feedback,
.sm-physical-sim-byop-feedback,
.sm-change-imei-feedback {
    margin: 0;
    font-family: "DM Sans", sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: normal;
    color: #000;
}
/* The change-IMEI feedback sits inside the input row, so it takes a full-width
   basis to wrap onto its own line instead of squeezing the field. */
.sm-change-imei-feedback {
    flex: 1 0 100%;
}
.sm-byop-feedback--error,
.sm-physical-sim-byop-feedback--error,
.sm-change-imei-feedback--error {
    color: var(--switch-color-danger);
}
.sm-change-imei-feedback--success {
    color: var(--switch-color-success);
}
.sm-byop-success {
    margin: 0;
    font-family: "DM Sans", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
    color: var(--switch-color-success);
}
.sm-change-imei-wrap {
    margin-top: 14px;
}
.sm-change-imei-toggle {
    background: none;
    border: none;
    padding: 0;
    font-family: "DM Sans", sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #000;
    text-decoration: underline;
    cursor: pointer;
}
.sm-change-imei-toggle:hover {
    color: var(--switch-color-warning);
}
/* end BYOP IMEI Form */


/* eSIM Activation Code */
.sm-esim-layout {
    margin-top: 20px;
}
.sm-esim-code {
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 20px;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid var(--switch-color-border);
    border-radius: 10px;
}
.sm-esim-code_wrapper {
    display: flex;
    min-width: 0;
    flex: 1 1 0;
    flex-direction: column;
    gap: 16px;
    color: #000;
    font-family: "DM Sans", sans-serif;
    word-break: break-word;
}
.sm-esim-code__intro,
.sm-esim-code__steps {
    display: flex;
    min-width: 0;
    flex-direction: column;
}
.sm-esim-code__steps {
    gap: 4px;
}
.sm-esim-code p.sm-esim-code__label,
.sm-esim-code p.sm-esim-code__steps-title {
    margin: 0;
    color: #000;
    font-size: 16px;
    font-weight: 600;
    text-transform: none;
    line-height: normal;
}
.sm-esim-code p.sm-esim-code__hint,
.sm-esim-code p.sm-esim-code__steps-item {
    margin: 0;
    color: #000;
    font-size: 12px;
    font-weight: 700;
    line-height: normal;
    opacity: .5;
}
.sm-esim-code .sm-esim-code__qr {
    display: flex;
    flex: 0 0 100px;
    align-items: center;
    justify-content: center;
    margin: 0;
}
/* QRCode.js draws a 160px canvas and mirrors it into an <img>; both are scaled
   down to the 100px the design asks for. */
.sm-esim-code__qr img,
.sm-esim-code__qr canvas {
    width: 100px;
    height: 100px;
}
@media (max-width: 560px) {
    .sm-esim-code {
        align-items: stretch;
        flex-direction: column;
        gap: 20px;
    }
    .sm-esim-code__qr {
        flex-basis: auto;
    }
}
/* end eSIM Activation Code */


.sm-usage-change {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-top: 10px;
}
.sm-usage-change .sm-usage-section {
    margin: 0;
    padding-top: 10px;
    border: none;
}
.sm-usage-change .sm-usage-section,
.sm-usage-change .sm-change-plan-wrap {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
}

.sm-usage-change .sm-usage-section {
    flex-direction: column;
}

.sm-usage-change .button.sm-inline-usage-btn,
.sm-usage-change .button.sm-change-plan-btn {
    width: 100%;
    white-space: nowrap;
}
/* While usage is loading the script disables the button, and WooCommerce
   repads any disabled `.button` down to its own `.618em 1em` — the button lost
   height every time the label turned into Loading…. The `[disabled]` half of
   the selector is what outweighs that rule whatever the stylesheet order. */
.sm-usage-change button.button.sm-inline-usage-btn:disabled[disabled] {
    padding: 15px 20px;
    background-color: #e9e6ed;
}
.sm-usage-change button.button.sm-inline-usage-btn:disabled[disabled]::after {
    left: 0;
}
.sm-usage-change .sm-usage-inline p.sm-usage-msg {
    padding: 0;
    font-size: 16px;
    background: transparent;
}
.sm-usage-change .sm-usage-inline p.sm-usage-msg--error {
    color: var(--switch-color-danger);
}

.sm-usage-change .button.sm-inline-usage-btn::after,
.sm-usage-change .button.sm-change-plan-btn::after {
    content: "";
    position: relative;
    left: 0;
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    background: url("../images/arrow-black-right.svg") center / contain no-repeat;
    transition: left .15s;
}

.sm-usage-change .button.sm-inline-usage-btn:hover::after,
.sm-usage-change .button.sm-change-plan-btn:hover::after {
    left: 3px;
}

.no-animations .sm-usage-change .button.sm-inline-usage-btn:hover::after,
.no-animations .sm-usage-change .button.sm-change-plan-btn:hover::after {
    left: 0;
}
.switch-mobile-current-plan .sm-renewal-section {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    border: 0;
    padding: 20px 0 0;
    margin-top: 20px;
    border-top: 1px solid rgba(0, 0, 0, .1);
    /* border-bottom: 1px solid rgba(0, 0, 0, .1); */
}
.sm-autopay-toggle {
    position: relative;
    display: flex;
    align-items: center;
    width: auto;
    min-width: 0;
    min-height: 20px;
    gap: 10px;
    cursor: pointer;
    font-family: "DM Sans", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    color: #000;
    user-select: none;
}
.switch-mobile-current-plan .sm-autopay-toggle input.sm-autopay-checkbox {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border: 1px solid transparent;
    border-radius: 5px;
    background: var(--switch-color-success) url("../images/dashboard/checkbox-check.svg") center / 14.6px 14.6px no-repeat;
    box-shadow: none;
    cursor: pointer;
    transition: opacity .15s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.switch-mobile-current-plan .sm-autopay-toggle input.sm-autopay-checkbox:not(:checked) {
    border-color: #a7a7a7;
    background-color: #fff;
    background-image: none;
}
/* Switched on, waiting for a card: ticked, but grey until it really renews. */
.switch-mobile-current-plan .sm-autopay-toggle--awaiting input.sm-autopay-checkbox:checked {
    background-color: #a7a7a7;
}
.switch-mobile-current-plan .sm-autopay-toggle:hover input.sm-autopay-checkbox:not(:disabled) {
    box-shadow: 0 0 0 4px rgba(30, 103, 94, .16);
}
.switch-mobile-current-plan .sm-autopay-toggle:hover input.sm-autopay-checkbox:not(:checked):not(:disabled) {
    border-color: #8e8e8e;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, .12);
}
.switch-mobile-current-plan .sm-autopay-toggle--awaiting:hover input.sm-autopay-checkbox:checked:not(:disabled) {
    background-color: #8e8e8e;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, .12);
}
.switch-mobile-current-plan .sm-autopay-toggle input.sm-autopay-checkbox:focus-visible {
    outline: 2px solid var(--switch-color-success);
    outline-offset: 2px;
}
.switch-mobile-current-plan .sm-autopay-toggle input.sm-autopay-checkbox:disabled {
    cursor: not-allowed;
}
.sm-autopay-toggle__copy {
    display: inline-flex;
    align-items: baseline;
    min-width: 0;
    white-space: nowrap;
}
.sm-autopay-toggle__status {
    margin-left: 4px;
}
.sm-autopay-toggle--on .sm-autopay-toggle__status {
    color: var(--switch-color-success);
}
.sm-autopay-toggle--off .sm-autopay-toggle__status,
.sm-autopay-toggle--awaiting .sm-autopay-toggle__status {
    color: rgba(0, 0, 0, .5);
}
.sm-autopay-toggle--disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.sm-autopay-spinner {
    position: absolute;
    top: 50%;
    left: 2px;
    display: block;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
}
.sm-autopay-spinner[hidden] {
    display: none;
}
.sm-autopay-toggle--loading input.sm-autopay-checkbox {
    opacity: 0;
}
.sm-autopay-toggle--loading {
    pointer-events: none;
    cursor: wait;
}
.woocommerce .sm-autopay-spinner.loader::before {
    width: 16px;
    height: 16px;
    margin-top: -8px;
    margin-left: -8px;
    font-size: 16px;
}
/* Long messages get their own row under the toggle, aligned with its label
   (20px checkbox + 10px gap), instead of squeezing between toggle and date. */
.sm-autopay-feedback,
.sm-renewal-section__notice {
    order: 1;
    flex: 0 0 calc(100% - 30px);
    margin-left: 30px;
    font-size: 12px;
    font-weight: 600;
}
.sm-autopay-feedback:empty {
    display: none;
}
.sm-autopay-feedback--ok,
.sm-renewal-section__notice {
    color: var(--switch-color-success);
}
.sm-autopay-feedback--error {
    color: var(--switch-color-danger);
}
.sm-renewal-section__meta {
    margin-left: auto;
    font-family: "DM Sans", sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    color: var(--switch-color-success);
    white-space: nowrap;
}
.sm-renewal-section__meta strong {
    color: #000;
}
.switch-mobile-current-plan__sidebar {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.switch-mobile-current-plan__promos {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/* Below 768px the promo cards belong under the lines. The sidebar steps out of
   the layout grid so the filter card and the promo wrapper become grid items of
   their own, and the wrapper orders itself after the main column. On tablets
   they stay beside the lines, but side by side instead of stacked. */
@media (max-width: 767px) {
    .switch-mobile-current-plan__sidebar {
        display: contents;
    }
    .switch-mobile-current-plan__promos {
        order: 1;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .switch-mobile-current-plan__promos {
        flex-direction: row;
    }
    .switch-mobile-current-plan__promos .sm-promo-card {
        width: 100%;
    }
}
.sm-plan-filter-card {
    display: flex;
    flex-direction: column;
    gap: 30px;
    background: #fff;
    border: 0;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 7px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}
.sm-plan-filter-card__list {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.elementor-kit-6 button.sm-plan-filter-btn,
.sm-plan-filter-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    min-width: 0;
    margin: 0 0 19px;
    padding: 0 0 20px;
    padding-inline: 0 !important;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #E8E8E8;
    border-radius: 0;
    font-family: "DM Sans", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 21px;
    color: rgba(0, 0, 0, 0.5);
    cursor: pointer;
    transition: color 0.2s ease, opacity 0.2s ease;
    text-align: left;
}
.elementor-kit-6 button.sm-plan-filter-btn:last-child,
.sm-plan-filter-btn:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}
.sm-plan-filter-btn img {
    display: block;
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    opacity: 0.4;
    transform: rotate(-90deg);
}
.sm-plan-filter-btn:hover,
.sm-plan-filter-btn:focus-visible {
    background: transparent;
    color: rgba(0, 0, 0, 0.75);
}
.elementor-kit-6 button.sm-plan-filter-btn.is-active,
.sm-plan-filter-btn.is-active {
    background: transparent;
    color: #000;
}
.sm-plan-filter-btn:hover img,
.sm-plan-filter-btn:focus-visible img {
    opacity: 0.7;
}
.sm-plan-filter-btn.is-active img {
    opacity: 1;
}
.elementor-kit-6 a.sm-plan-filter-card__add-line,
a.sm-plan-filter-card__add-line {
    width: 100%;
    min-height: 51px;
    margin: 0;
}
a.elementor-button.sm-plan-filter-card__add-line .elementor-button-icon {
    transition: transform .30s ease;
}
a.elementor-button.sm-plan-filter-card__add-line:hover .elementor-button-icon,
a.elementor-button.sm-plan-filter-card__add-line:focus-visible .elementor-button-icon {
    transform: rotate(180deg);
    left: 0;
}
.sm-plan-filter-card__menu {
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.elementor-kit-6 button.sm-plan-filter-card__toggle,
.sm-plan-filter-card__toggle {
    display: none;
}
/* Under 575px the card collapses into the selector pattern of the dashboard
   line switcher: a labelled toggle with the filters floating underneath.
   .is-collapsible is set by script, so a script-less page keeps the plain
   list it can actually use. */
@media (max-width: 575px) {
    .sm-plan-filter-card.is-collapsible {
        position: relative;
        gap: 0;
        padding: 0;
        background: transparent;
        box-shadow: none;
    }
    .elementor-kit-6 .sm-plan-filter-card.is-collapsible button.sm-plan-filter-card__toggle,
    .sm-plan-filter-card.is-collapsible .sm-plan-filter-card__toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        width: 100%;
        min-height: 60px;
        margin: 0;
        padding: 20px;
        box-sizing: border-box;
        background: #fff;
        border: 0;
        border-radius: 20px;
        box-shadow: inset 0 0 0 1px #E8E8E8;
        font-family: "DM Sans", sans-serif;
        font-size: 16px;
        font-weight: 600;
        line-height: 21px;
        color: #000;
        text-align: left;
        cursor: pointer;
    }
    .sm-plan-filter-card__current {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .sm-plan-filter-card__chevron {
        flex: 0 0 9px;
        width: 9px;
        height: 9px;
        border-right: 1.5px solid #000;
        border-bottom: 1.5px solid #000;
        transform: rotate(45deg) translateY(-2px);
        transition: transform .2s ease;
    }
    .sm-plan-filter-card.is-open .sm-plan-filter-card__chevron {
        transform: rotate(-135deg) translateY(-2px);
    }
    .sm-plan-filter-card.is-collapsible .sm-plan-filter-card__toggle:focus-visible {
        outline: 3px solid rgba(125, 21, 56, .28);
        outline-offset: 3px;
    }
    .sm-plan-filter-card.is-collapsible .sm-plan-filter-card__menu {
        position: absolute;
        z-index: 30;
        top: calc(100% + 10px);
        left: 0;
        display: none;
        width: 100%;
        max-height: min(70vh, 520px);
        padding: 20px;
        overflow: auto;
        box-sizing: border-box;
        border-radius: 10px;
        background: #fff;
        box-shadow: 0 4px 7px rgba(0, 0, 0, .1);
    }
    .sm-plan-filter-card.is-collapsible.is-open .sm-plan-filter-card__menu {
        display: flex;
    }
}
.sm-promo-card {
    background: var(--switch-color-cream);
    border: 1px solid var(--switch-color-border);
    border-radius: 10px;
    padding: 20px 30px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
}
@media (max-width: 575px) {
    .sm-promo-card {
        padding: 20px;
    }
}
.sm-promo-card .sm-promo-card__summary {
    display: flex;
    align-items: center;
    gap: 17px;
    min-width: 0;
}
.sm-promo-card .sm-promo-card__content {
    flex: 0 1 169px;
    width: 169px;
    min-width: 0;
}
.sm-promo-card .sm-promo-card__title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 21px;
    color: #000;
    text-decoration: underline;
    text-underline-position: from-font;
}
.sm-promo-card .sm-promo-card__text {
    margin: 15px 0 0;
    font-size: 12px;
    font-weight: 700;
    color: #000;
    opacity: 0.5;
}
.sm-promo-card__image-wrap {
    position: relative;
    flex: 0 0 100px;
    width: 100px;
    height: 100px;
}
.sm-promo-card__image {
    display: block;
    max-width: none;
}
.sm-promo-card--addons .sm-promo-card__image-wrap {
    height: 91.668px;
}
.sm-promo-card--addons .sm-promo-card__image-wrap::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 91.668px;
    height: 91.668px;
    border-radius: 50%;
    background: #6C203B;
    content: "";
    filter: blur(11.25px);
    opacity: 0.2;
}
.sm-promo-card--addons .sm-promo-card__image-clip {
    position: absolute;
    top: 3.333px;
    /* left: 2.499px;
    width: 97.501px;
    height: 80.835px;
    overflow: hidden; */
}
.sm-promo-card--addons .sm-promo-card__image {
    /* position: absolute;
    top: -18.108px;
    left: -56.161px;
    width: 201.559px;
    height: 134.369px; */
}
.sm-promo-card--support .sm-promo-card__image {
    width: 100px;
    height: 101px;
}
/* Line actions row in the card footer - shown on Pending Activation and Activated lines */
.switch-mobile-current-plan__line-actions {
    border-top: 1px solid rgba(0, 0, 0, .1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 20px;
    margin-top: 20px;
}
/* The `a` tag is named on purpose: the kit paints `.elementor-kit-6 a` in
   #eb5633, so a class-only selector would lose the black text to it. */
.elementor-widget-woocommerce-my-account .woocommerce .switch-mobile-current-plan a.switch-mobile-current-plan__line-action {
    /* font-family: "DM Sans", sans-serif; */
    /* font-size: 16px; */
    /* font-weight: 600; */
    /* line-height: normal; */
    color: #000;
    text-decoration: underline;
    white-space: nowrap;
    transition: color .2s ease;
}
.elementor-widget-woocommerce-my-account .woocommerce .switch-mobile-current-plan a.switch-mobile-current-plan__line-action:hover,
.elementor-widget-woocommerce-my-account .woocommerce .switch-mobile-current-plan a.switch-mobile-current-plan__line-action:focus-visible {
    color: var(--switch-color-warning);
    text-decoration: underline;
}
.elementor-widget-woocommerce-my-account .woocommerce .switch-mobile-current-plan a.switch-mobile-current-plan__line-action--danger,
.elementor-widget-woocommerce-my-account .woocommerce .switch-mobile-current-plan a.switch-mobile-current-plan__line-action--danger:hover,
.elementor-widget-woocommerce-my-account .woocommerce .switch-mobile-current-plan a.switch-mobile-current-plan__line-action--danger:focus-visible {
    color: var(--switch-color-danger);
}
.switch-mobile-current-plan__line-actions-separator {
    font-family: "DM Sans", sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    color: #000;
}
@media (max-width: 575px) {
    .switch-mobile-current-plan__card {
        padding: 30px 25px;
    }
    .switch-mobile-current-plan__card-header {
        align-items: center;
        flex-wrap: nowrap;
        gap: 6px;
    }
    .switch-mobile-current-plan__plan-meta {
        flex-wrap: nowrap;
        gap: 6px;
    }
    /* Keep the header on one line: only the plan name may shrink, the separator,
       SIM type and status badge keep their intrinsic width. */
    .switch-mobile-current-plan__plan-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .switch-mobile-current-plan__plan-separator,
    .switch-mobile-current-plan__sim-type,
    .switch-mobile-current-plan__status {
        flex: 0 0 auto;
    }
    .sm-card-badges {
        width: 100%;
        justify-content: flex-start;
    }
    .sm-byop-form__row,
    .sm-change-imei-form {
        flex-direction: column;
        align-items: stretch;
    }
    /* The row turns into a column here, so the field's 200px flex-basis would
       become its height — it has to fall back to its own content height. */
    .sm-byop-form input.sm-byop-imei,
    .sm-physical-sim-byop-form input.sm-physical-sim-byop-imei,
    .sm-change-imei-form input.sm-change-imei-input,
    .sm-byop-form button.button.sm-byop-submit,
    .sm-physical-sim-byop-form button.button.sm-physical-sim-byop-submit,
    .sm-change-imei-form button.button.sm-change-imei-submit {
        flex: 0 0 auto;
        width: 100%;
    }
    .sm-renewal-section,
    .sm-autopay-toggle {
        flex-wrap: wrap;
    }
    .sm-renewal-section__meta {
        flex: 0 0 calc(100% - 30px);
        margin-left: 30px;
    }
    /* Four links never fit one row here: they wrap into two pairs, each keeping
       its own dot. The middle dot turns into a zero-width full-row spacer, so it
       breaks the row after the second link and its height is the row gap. */
    .switch-mobile-current-plan__line-actions {
        flex-wrap: wrap;
        justify-content: flex-start;
        column-gap: 10px;
        row-gap: 0;
    }
    .switch-mobile-current-plan__line-actions-separator:nth-of-type(2) {
        flex: 0 0 100%;
        height: 14px;
        visibility: hidden;
    }
}
/*
 * ============================================================================
 * My Account → My Lines & Plan → Existing Family Plan: Add a Line
 * Button inside the family-plan group and the account modal for configuring
 * additional lines, choosing a phone/SIM, reviewing the quote and adding
 * the configured lines to the cart. Loaded only on My Account pages.
 * ============================================================================
 */
.sm-family-plan-group__actions {
    display: flex;
    justify-content: flex-end;
}
.elementor-kit-6 button.sm-family-plan-group__add-line {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 15px 20px;
    font-size: 16px;
    font-weight: 600;
    line-height: 21px;

    /* padding: 10px;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px; */
}
.elementor-kit-6 button.sm-family-plan-group__add-line::before {
    content: "";
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    background: url("/wp-content/uploads/2026/01/icon-plus.svg") center / contain no-repeat;
    filter: invert(1);
}
.elementor-kit-6 button.sm-family-plan-group__add-line:disabled:hover,
.elementor-kit-6 button.sm-family-plan-group__add-line:disabled {
    opacity: .5;
    cursor: not-allowed;
    background-color: #000;
}
.sm-family-add-modal__body[hidden],
.sm-family-add-modal__catalog[hidden],
.sm-family-add-modal__error[hidden] {
    display: none;
}
/* The body reaches 15px into the content's right padding: the scrollbar moves off the cards, the cards stay put */
.sm-family-add-modal__body {
    margin-right: -15px;
    padding-right: 15px;
}
/* Line cards reuse the plan page .line-card block from style.css; the add button copies .variations_form .add-line-btn */
.elementor-kit-6 button.sm-family-add-modal__add-line,
.elementor-kit-6 button.sm-family-add-modal__add-line:hover,
.elementor-kit-6 button.sm-family-add-modal__add-line:focus {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row-reverse;
    gap: 10px;
    margin-left: auto;
    background-color: transparent;
    color: #000;
    padding: 0;
}
.sm-family-add-modal__add-line svg {
    transition: transform .30s ease;
}
.sm-family-add-modal__add-line:not(.sm-family-add-modal__add-line--pending):hover svg {
    transform: rotate(180deg);
}
.sm-family-add-modal__add-line--pending {
    opacity: .5;
}
.sm-family-add-modal__add-line--pending:hover {
    cursor: not-allowed;
}
/* The modal is narrower than the plan page on phones: let Remove Line and Choose a Plan wrap */
.sm-family-add-modal__card-actions {
    flex-wrap: wrap;
}
/* Back on the left, the title centered on the same row */
.sm-family-add-modal__header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
}
.sm-family-add-modal__title {
    grid-column: 2;
    margin: 0;
}
/* margin-bottom evens out the title's 20px top / 30px bottom margins (style.css), so both centers line up */
.elementor-kit-6 button.sm-family-add-modal__return {
    grid-row: 1;
    grid-column: 1;
    justify-self: start;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 10px 16px;
    font-size: 16px;
    font-weight: 600;
    line-height: 21px;
}
.elementor-kit-6 button.sm-family-add-modal__return[hidden] {
    display: none;
}
.sm-family-add-modal__figures {
    position: relative;
    display: grid;
    gap: 8px;
}
/* Overlay under the WooCommerce spinner (.woocommerce .loader::before) */
.sm-family-add-modal__loader {
    position: absolute;
    inset: 0;
    background-color: rgba(255, 249, 238, 0.8);
}
.sm-family-add-modal__figure {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid #e8d9d0;
    padding: 8px 0;
}
.sm-family-add-modal__limit,
.sm-family-add-modal__device-note {
    margin: 0;
    font-size: 14px;
}
.sm-family-add-modal__error {
    color: #9b1232;
    font-weight: 600;
}
.sm-family-add-modal__catalog {
    min-height: 0;
}
/* The help popup opens from inside the Add a Line modal (.line-config-modal: 100000) and must sit above it */
.elementor-popup-modal.dialog-type-lightbox {
    z-index: 100001;
}
/* So must the plugin's cart conflict popup when the modal shows it (js/family-add-line.js) */
#telgoo-conflict-overlay.sm-family-add-conflict {
    z-index: 100001;
}
.sm-family-add-modal__cart:disabled,
.sm-family-add-modal__confirm:disabled {
    opacity: .5;
    cursor: not-allowed;
}
/* end Current Plan - My Lines & Plan */