/* =====================================================================
 * TCA My Account — Login / Register widget
 *
 * Sensible black-on-white defaults that match the supplied design.
 * Every value here is intended to be safely overridable through the
 * Elementor controls (those wins because they emit `selectors` rules
 * with higher specificity that come from inline `<style>` blocks).
 * ===================================================================== */

/* Visually hidden labels (invoice table headers for icon columns, etc.) */
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.tca-auth {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding: 32px;
    background: #ffffff;
    font-family: inherit;
    color: #000;
}

.tca-auth *,
.tca-auth *::before,
.tca-auth *::after {
    box-sizing: border-box;
}

/* ── Close button ──────────────────────────────────────────────── */
.tca-auth__close {
    position: absolute;
    top: 18px;
    right: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: #000;
    text-decoration: none;
    line-height: 0;
    transition: opacity .15s ease;
}
.tca-auth__close:hover {
    opacity: .6;
}

/* ── Heading & subtitle ────────────────────────────────────────── */
.tca-auth__head {
    margin-bottom: 28px;
}
.tca-auth__heading {
    margin: 0 0 8px;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.15;
    color: #000;
}
.tca-auth__subtitle {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    color: #666;
}

/* ── Toggle tabs (mode: toggle) ────────────────────────────────── */
.tca-auth__tabs {
    display: flex;
    gap: 0;
    margin-bottom: 24px;
    border-bottom: 1px solid #e3e3e3;
}
.tca-auth__tab {
    flex: 1;
    padding: 12px 8px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: #666;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}
.tca-auth__tab:hover {
    color: #000;
}
.tca-auth__tab.is-active {
    color: #000;
    border-bottom-color: #000;
}
.tca-auth__tab:focus,
.tca-auth__tab:focus-visible {
    outline: none;
    box-shadow: none;
}
.tca-auth__tab::-moz-focus-inner {
    border: 0;
}

/* ── Status / inline notices ──────────────────────────────────── *
 * Lives inside each form so it sits below the heading and never gets
 * obscured by the close (×) button at the widget's top-right corner.
 * --------------------------------------------------------------------*/
.tca-auth__status {
    margin: 0 0 16px;
}
.tca-auth__status:empty {
    display: none;
    margin: 0;
}
.tca-auth__status .tca-auth__notice {
    padding: 12px 14px;
    font-size: 13px;
    line-height: 1.4;
    border-radius: 4px;
}
.tca-auth__notice--error {
    background: #fbecec;
    color: #8a1f1f;
    border: 1px solid #f4cccc;
}
.tca-auth__notice--success {
    background: #ecf6ec;
    color: #1f5a1f;
    border: 1px solid #ccebcc;
}

/* ── Forms (only the active one is rendered) ──────────────────── */
.tca-auth__form {
    display: none;
}
.tca-auth__form.is-active {
    display: block;
}

/* ── Fields ────────────────────────────────────────────────────── */
.tca-auth__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.tca-auth__row .tca-auth__field {
    margin-bottom: 20px;
}

.tca-auth__field {
    position: relative;
    margin-bottom: 20px;
}

.tca-auth__label {
    display: block;
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    color: #000;
}

.tca-auth__input {
    display: block;
    width: 100%;
    padding: 14px 16px;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.3;
    color: #000;
    background-color: #fff;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    transition: border-color .15s ease, box-shadow .15s ease;
    appearance: none;
    -webkit-appearance: none;
}
.tca-auth__input::placeholder {
    color: #9a9a9a;
    opacity: 1;
}
.tca-auth__input:focus {
    outline: none;
    border-color: #000;
}
.tca-auth__input[aria-invalid="true"] {
    border-color: #d44;
}

.tca-auth__hint {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: #888;
}

/* Remember-me */
.tca-auth__remember {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 13px;
    color: #333;
    cursor: pointer;
}
.tca-auth__remember input {
    accent-color: #000;
}

/* ── Meta row (forgot password + register link on one line) ──── */
.tca-auth__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px 16px;
    margin: -8px 0 20px;
    font-size: 13px;
    line-height: 1.3;
    color: #666;
}

.tca-auth__forgot {
    display: inline-block;
    font-size: 13px;
    line-height: 1.2;
    color: #000;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.tca-auth__forgot:hover {
    opacity: .7;
}

.tca-auth__meta-cta {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px;
    margin-left: auto;
}
.tca-auth__meta-prefix {
    color: #666;
}
.tca-auth__meta-link {
    color: #000;
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 600;
}
.tca-auth__meta-link:hover {
    opacity: .7;
}

.tca-auth__forgot:focus,
.tca-auth__forgot:focus-visible,
.tca-auth__close:focus,
.tca-auth__close:focus-visible,
.tca-auth__meta-link:focus,
.tca-auth__meta-link:focus-visible,
.tca-auth__switch a:focus,
.tca-auth__switch a:focus-visible {
    outline: none;
    box-shadow: none;
}

/* ── Primary button ────────────────────────────────────────────── *
 * The double-class selector + explicit width keep themes / Elementor
 * "elementor-button" resets from squashing this button to its content
 * width. Same trick is applied to the secondary CTA below.
 * --------------------------------------------------------------------*/
.tca-auth .tca-auth__submit,
button.tca-auth__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    margin-top: 28px;
    margin-left: 0;
    margin-right: 0;
    padding: 18px 24px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-align: center;
    color: #fff;
    background-color: #000;
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, opacity .15s ease;
}
.tca-auth .tca-auth__submit:hover,
button.tca-auth__submit:hover {
    background-color: #1f1f1f;
}
.tca-auth .tca-auth__submit:focus,
.tca-auth .tca-auth__submit:focus-visible,
.tca-auth .tca-auth__submit:active,
button.tca-auth__submit:focus,
button.tca-auth__submit:focus-visible,
button.tca-auth__submit:active {
    outline: none;
    box-shadow: none;
    background-color: #1f1f1f;
}
.tca-auth .tca-auth__submit::-moz-focus-inner,
button.tca-auth__submit::-moz-focus-inner {
    border: 0;
}
.tca-auth .tca-auth__submit:disabled,
.tca-auth .tca-auth__submit.is-loading {
    cursor: not-allowed;
    opacity: .7;
}

.tca-auth__submit-arrow {
    display: inline-block;
    line-height: 1;
    transform: translateY(-1px);
}

/* ── Divider ───────────────────────────────────────────────────── */
.tca-auth__divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0;
    color: #666;
    font-size: 13px;
}
.tca-auth__divider::before,
.tca-auth__divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: #e3e3e3;
}
.tca-auth__divider span {
    display: inline-block;
    line-height: 1;
}

/* ── Secondary button (outline) ───────────────────────────────── */
.tca-auth .tca-auth__secondary,
a.tca-auth__secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    margin-left: 0;
    margin-right: 0;
    padding: 18px 24px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    color: #000;
    background-color: #fff;
    border: 1px solid #000;
    border-radius: 0;
    transition: background-color .15s ease, color .15s ease;
}
.tca-auth .tca-auth__secondary:hover,
a.tca-auth__secondary:hover {
    background-color: #000;
    color: #fff;
}
.tca-auth .tca-auth__secondary:focus,
.tca-auth .tca-auth__secondary:focus-visible,
.tca-auth .tca-auth__secondary:active,
a.tca-auth__secondary:focus,
a.tca-auth__secondary:focus-visible,
a.tca-auth__secondary:active {
    outline: none;
    box-shadow: none;
    background-color: #000;
    color: #fff;
}

/* ── Switch (login ↔ register) helper text ─────────────────────── */
.tca-auth__switch {
    margin: 16px 0 0;
    font-size: 13px;
    color: #666;
    text-align: center;
}
.tca-auth__switch a {
    margin-left: 4px;
    color: #000;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Toggle-mode helpers: hide both prompts by default and only show the
   one matching the currently-visible form. The inline switches that
   render inside the login/register forms in non-toggle modes are NOT
   affected because they use the `--inline` modifier. */
.tca-auth--mode-toggle .tca-auth__switch--to-register,
.tca-auth--mode-toggle .tca-auth__switch--to-login {
    display: none;
}
.tca-auth--mode-toggle.tca-auth--view-login .tca-auth__switch--to-register,
.tca-auth--mode-toggle.tca-auth--view-register .tca-auth__switch--to-login {
    display: block;
}

.tca-auth--view-reset .tca-auth__divider,
.tca-auth--view-reset .tca-auth__secondary,
.tca-auth--view-register .tca-auth__divider,
.tca-auth--view-register .tca-auth__secondary,
.tca-auth--view-forgot .tca-auth__divider,
.tca-auth--view-forgot .tca-auth__secondary {
    display: none;
}

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .tca-auth {
        padding: 24px 20px;
    }
    .tca-auth__row {
        grid-template-columns: 1fr;
    }
    .tca-auth__heading {
        font-size: 24px;
    }
}


/* =====================================================================
 * TCA My Account — Dashboard / Hub widget
 * Renders the sidebar + Overview content per the design.
 *
 * The reset below blocks the typical theme "tint everything pink/teal"
 * accent-color from leaking into focus states, links and buttons. Most
 * stores ship a brand-color stylesheet that hits `button:focus`,
 * `a:hover`, `table tr:nth-child` etc. We neutralise that here, then
 * each Elementor control sets explicit values.
 * ===================================================================== */

.tca-dash a,
.tca-dash button,
.tca-dash input,
.tca-dash select,
.tca-dash textarea {
    outline: none;
    box-shadow: none;
}
.tca-dash a:focus,
.tca-dash a:focus-visible,
.tca-dash a:hover,
.tca-dash button:focus,
.tca-dash button:focus-visible,
.tca-dash input:focus,
.tca-dash input:focus-visible,
.tca-dash select:focus,
.tca-dash select:focus-visible,
.tca-dash textarea:focus,
.tca-dash textarea:focus-visible {
    outline: none;
    box-shadow: none;
}
.tca-dash a {
    color: inherit;
    text-decoration: none;
}
.tca-dash button::-moz-focus-inner {
    border: 0;
}
.tca-dash table,
.tca-dash th,
.tca-dash td {
    background: transparent;
    border: 0;
    color: inherit;
}
.tca-dash table tr:hover,
.tca-dash table tr:nth-child(odd),
.tca-dash table tr:nth-child(even) {
    background: transparent !important;
}

.tca-dash {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 40px;
    width: 100%;
    color: #000;
    font-family: inherit;
    box-sizing: border-box;
}
.tca-dash *, .tca-dash *::before, .tca-dash *::after { box-sizing: border-box; }
.tca-dash--no-sidebar { grid-template-columns: 1fr; }

/* ── Sidebar ───────────────────────────────────────────────────── */
.tca-dash__sidebar {
    border-right: 1px solid #e3e3e3;
    padding-right: 24px;
    min-height: 100%;
}
.tca-dash__sidebar-header {
    margin-bottom: 24px;
}
.tca-dash__badge {
    display: inline-block;
    padding: 4px 10px;
    background: #000;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1.2;
    text-transform: capitalize;
    margin-bottom: 8px;
}
.tca-dash__user-name {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: #000;
}
.tca-dash__sidebar-contact {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.tca-dash__sidebar-address {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
    color: #555;
}
.tca-dash__sidebar-phone {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    color: #555;
}
.tca-dash__sidebar-phone a {
    color: inherit;
    text-decoration: none;
}
.tca-dash__sidebar-phone a:hover {
    text-decoration: underline;
}
.tca-dash__sidebar-email {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    color: #555;
    word-break: break-word;
}
.tca-dash__sidebar-email a {
    color: inherit;
    text-decoration: none;
}
.tca-dash__sidebar-email a:hover {
    text-decoration: underline;
}

.tca-dash__nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 32px;
    border-top: 1px solid #e3e3e3;
    padding-top: 8px;
}
.tca-dash__nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0 10px 12px;
    border-left: 2px solid transparent;
    margin-left: -14px;
    padding-left: 12px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    color: #555;
    text-decoration: none;
    transition: color .15s ease, border-color .15s ease;
}
.tca-dash__nav-item:hover {
    color: #000;
}
.tca-dash__nav-item.is-active {
    color: #000;
    border-left-color: #000;
    font-weight: 700;
}
.tca-dash__nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: inherit;
}
.tca-dash__nav-icon svg,
.tca-dash__nav-icon i {
    width: 18px;
    height: 18px;
    font-size: 16px;
}

.tca-dash__logout-wrap {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #e3e3e3;
}
.tca-dash__logout,
.tca-dash__logout--btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    color: #000;
    background: #fff;
    border: 1px solid #000;
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease, opacity .15s ease;
}
.tca-dash__logout--btn:hover,
.tca-dash__logout:hover {
    background: #000;
    color: #fff;
    opacity: 1;
}
.tca-dash__logout:focus,
.tca-dash__logout:focus-visible,
.tca-dash__logout--btn:focus,
.tca-dash__logout--btn:focus-visible {
    outline: none;
    box-shadow: none;
}

/* ── Main column ───────────────────────────────────────────────── */
.tca-dash__main {
    min-width: 0;
}
.tca-dash__heading {
    margin: 0 0 24px;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.1;
    color: #000;
}
.tca-dash__subheading {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #000;
}

/* Stats cards */
.tca-dash__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}
.tca-dash__stat {
    padding: 24px 20px;
    background: #fff;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    text-align: center;
}
.tca-dash__stat-value {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
    color: #000;
}
.tca-dash__stat-label {
    margin-top: 6px;
    font-size: 13px;
    color: #666;
    line-height: 1.3;
}

/* Incoming delivery card */
.tca-dash__delivery {
    display: grid;
    grid-template-columns: minmax(160px, auto) 1fr auto;
    align-items: center;
    gap: 24px;
    padding: 20px 24px;
    background: #fff;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    margin-bottom: 32px;
}
.tca-dash__delivery-info {
    min-width: 0;
}
.tca-dash__delivery-title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    color: #000;
}
.tca-dash__delivery-meta {
    margin-top: 4px;
    font-size: 12px;
    color: #666;
}
.tca-dash__delivery-meta strong {
    margin-left: 4px;
    color: #000;
    font-weight: 600;
}

.tca-dash__steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: start;
    position: relative;
}
.tca-dash__steps::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 0;
    right: 0;
    height: 1px;
    background: #d0d0d0;
    z-index: 0;
}
.tca-dash__step {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 0 8px;
    color: #999;
    font-size: 11px;
    line-height: 1.3;
}
.tca-dash__step-dot {
    display: block;
    width: 11px;
    height: 11px;
    margin: 0 auto 8px;
    border-radius: 50%;
    background: #d0d0d0;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #d0d0d0;
}
.tca-dash__step.is-done .tca-dash__step-dot,
.tca-dash__step.is-current .tca-dash__step-dot {
    background: #000;
    box-shadow: 0 0 0 1px #000;
}
.tca-dash__step.is-done,
.tca-dash__step.is-current {
    color: #000;
    font-weight: 500;
}
.tca-dash__step.is-current .tca-dash__step-dot {
    width: 13px;
    height: 13px;
    margin-top: -1px;
}
.tca-dash__delivery-track {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #000;
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
}
.tca-dash__delivery-track:hover { opacity: .7; }

/* Rentals list */
.tca-dash__rentals-header {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 0 0 16px;
}
.tca-dash__rentals-count {
    font-size: 13px;
    color: #888;
}

.tca-dash__empty {
    padding: 24px;
    background: #fafafa;
    border: 1px dashed #d0d0d0;
    color: #666;
    text-align: center;
    border-radius: 4px;
}

.tca-dash__order {
    background: #fff;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    margin-bottom: 24px;
}
.tca-dash__order.is-urgent {
    border-color: #f0a020;
}
.tca-dash__order-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 20px;
    border-bottom: 1px solid #f0f0f0;
}
.tca-dash__return-label-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 10px 20px 12px;
    font-size: 12px;
    line-height: 1.45;
    color: #555;
    background: #f7f8fa;
    border-bottom: 1px solid #f0f0f0;
}
.tca-dash__return-label-notice .tca-dash__return-label-notice-icon,
.tca-dash__return-label-notice .tca-icon {
    flex-shrink: 0;
    margin-top: 1px;
    color: #5c6670;
}
.tca-dash__order-meta { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tca-dash__order-actions {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.tca-dash__order-id {
    font-size: 14px;
    font-weight: 700;
    color: #000;
}
.tca-dash__order-title-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
}
.tca-dash__order-placed-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    color: #666;
    line-height: 1.35;
}
.tca-dash__order-placed-inline .tca-icon,
.tca-dash__order-placed-inline svg {
    flex-shrink: 0;
    opacity: 0.85;
}
.tca-dash__order-range {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 10px;
    font-size: 12px;
    color: #666;
}
.tca-dash__order-range-dates {
    font-weight: 600;
    color: #444;
}
.tca-dash__order-range-prefix {
    font-weight: 600;
    color: #888;
    margin-right: 2px;
}

/* Status pill that lives in the order header (top right).
 * Default radius is subtle; processing uses a calm neutral tint. */
.tca-dash__status {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border: 1px solid #e5e5e5;
    border-radius: 3px;
    background: #f4f4f4;
    color: #444;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .02em;
    text-transform: uppercase;
    white-space: nowrap;
}
.tca-dash__status--completed {
    background: #f4f6f4;
    color: #3d523d;
    border-color: #d8e0d8;
}
.tca-dash__status--processing {
    background: #f7f7f5;
    color: #5a564c;
    border-color: #e3e1da;
}
.tca-dash__status--on-hold,
.tca-dash__status--pending {
    background: #fff3e0;
    color: #8a5a00;
    border-color: #f0d8a8;
}
.tca-dash__status--failed,
.tca-dash__status--cancelled {
    background: #fbecec;
    color: #8a1f1f;
    border-color: #f0caca;
}
.tca-dash__status--refunded {
    background: #eef2fb;
    color: #2a4480;
    border-color: #d3dbef;
}

/* Chevron toggle for the details dropdown. */
.tca-dash__order-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    color: #000;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, transform .2s ease;
}
.tca-dash__order-toggle:hover {
    background-color: #f4f4f4;
}
.tca-dash__order-toggle:focus,
.tca-dash__order-toggle:focus-visible,
.tca-dash__order-toggle:active {
    outline: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
}
.tca-dash__order-toggle svg {
    width: 16px;
    height: 16px;
    transition: transform .2s ease;
}
.tca-dash__order.is-open .tca-dash__order-toggle svg {
    transform: rotate(180deg);
}

/* Order details panel (revealed by the chevron toggle). */
.tca-dash__order-details.is-collapsed {
    display: none !important;
}
.tca-dash__order-details {
    border-top: 1px solid #f0f0f0;
    padding: 16px 20px 20px;
    background: #fafafa;
}
.tca-dash__order-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px 24px;
    margin: 0;
}
.tca-dash__order-details-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.tca-dash__order-details-row dt {
    font-size: 11px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0;
}
.tca-dash__order-details-row dd {
    font-size: 14px;
    font-weight: 500;
    color: #000;
    margin: 0;
}
.tca-dash__order-details-row--total dd {
    font-weight: 700;
}
/* Order summary (dropdown) — clean rows, no table chrome */
.tca-dash__order-receipt {
    margin-top: 20px;
}
.tca-dash__order-receipt-title {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #9a9a9a;
    margin: 0 0 10px;
}
.tca-dash__order-receipt-lines {
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    padding: 4px 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.tca-dash__order-receipt-line {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px 20px;
    align-items: baseline;
    padding: 11px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.tca-dash__order-receipt-line:last-child {
    border-bottom: none;
}
.tca-dash__order-receipt-line-left {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.tca-dash__order-receipt-line-label {
    font-size: 13px;
    font-weight: 500;
    color: #333;
    line-height: 1.35;
}
.tca-dash__order-receipt-line-label .woocommerce-Price-amount,
.tca-dash__order-receipt-line-value .woocommerce-Price-amount {
    font-variant-numeric: tabular-nums;
}
.tca-dash__order-receipt-line-value {
    font-size: 13px;
    font-weight: 600;
    color: #111;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    line-height: 1.35;
}
.tca-dash__order-receipt-line:has(+ .is-total) {
    border-bottom: none;
}
.tca-dash__order-receipt-line.is-total {
    margin-top: 2px;
    padding-top: 14px;
    border-top: 1px solid #dedede;
    border-bottom: none;
}
.tca-dash__order-receipt-line.is-total .tca-dash__order-receipt-line-label,
.tca-dash__order-receipt-line.is-total .tca-dash__order-receipt-line-value {
    font-size: 14px;
    font-weight: 700;
    color: #000;
}
.tca-dash__order-receipt-line.is-deposit .tca-dash__order-receipt-line-label {
    color: #4a4840;
}
.tca-dash__order-receipt-note {
    display: block;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.4;
    color: #777;
}
.tca-dash__order-receipt-pay {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    margin-top: 16px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 6px;
}
.tca-dash__order-receipt-pay-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #888;
}
.tca-dash__order-receipt-pay-value {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #000;
}
.tca-dash__order-receipt-pay-value .tca-settings__payment-logo {
    min-width: 52px;
    height: 24px;
}
.tca-dash__order-receipt-pay-value .tca-settings__payment-logo img { max-height: 18px; }
.tca-dash__order-details-payment {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.tca-dash__order-details-payment .tca-settings__payment-logo {
    min-width: 52px;
    height: 24px;
}
.tca-dash__order-details-payment .tca-settings__payment-logo img { max-height: 18px; }
.tca-dash__order-details-actions {
    margin-top: 16px;
    display: flex;
    justify-content: flex-end;
}
.tca-dash__pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid transparent;
    background: rgba(240, 160, 32, .12);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    border-radius: 4px;
}
.tca-dash__pill--urgent {
    color: #b46a00;
    border-color: rgba(240, 160, 32, .35);
}

/* Items inside an order */
.tca-dash__items {
    list-style: none;
    margin: 0;
    padding: 0;
}
.tca-dash__item {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: 20px;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0;
}
.tca-dash__item:last-child { border-bottom: 0; }

.tca-dash__item-image {
    display: block;
    width: 80px;
    height: 80px;
    background: #f3f3f3;
    overflow: hidden;
}
.tca-dash__item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.tca-dash__item-image-fallback {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #efefef 25%, #e7e7e7 25%, #e7e7e7 50%, #efefef 50%, #efefef 75%, #e7e7e7 75%);
    background-size: 14px 14px;
}

.tca-dash__item-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.tca-dash__item-brand {
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.tca-dash__item-name {
    font-size: 15px;
    font-weight: 700;
    color: #000;
    text-decoration: none;
}
.tca-dash__item-name:hover { text-decoration: underline; }
.tca-dash__item-size {
    font-size: 13px;
    color: #555;
}
.tca-dash__item-return {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 4px 8px;
    background: rgba(240, 160, 32, .1);
    border: 1px solid rgba(240, 160, 32, .25);
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    color: #b46a00;
    align-self: flex-start;
}
.tca-dash__item-return-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 0;
}
.tca-dash__item-return:not(.is-urgent) {
    background: #f3f3f3;
    border-color: #dedede;
    color: #555;
}
.tca-dash__item-return:not(.is-urgent) .tca-dash__item-return-icon {
    color: #888;
}

.tca-dash__item-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tca-dash__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    border-radius: 4px;
    border: 1px solid transparent;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
    white-space: nowrap;
}
.tca-dash__btn--primary {
    background: #000;
    color: #fff;
    border-color: #000;
}
.tca-dash__btn--primary:hover { background: #1f1f1f; border-color: #1f1f1f; color: #fff; }
.tca-dash__btn--ghost {
    background: transparent;
    color: #000;
    border-color: transparent;
    text-decoration: underline;
    text-underline-offset: 3px;
    padding-left: 4px;
    padding-right: 4px;
}
.tca-dash__btn--ghost:hover { opacity: .7; }

/* Responsive — eerste breakpoint = tablet (Elementor 50/50-kolommen vallen nog steeds dubbel naast elkaar) */
@media (max-width: 1024px) {
    .tca-dash {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .tca-dash__sidebar {
        border-right: 0;
        padding-right: 0;
        padding-bottom: 12px;
        margin-bottom: 4px;
        min-height: 0;
        border-bottom: 1px solid #e3e3e3;
    }
    .tca-dash__delivery {
        grid-template-columns: 1fr;
        gap: 16px;
        align-items: stretch;
    }
    .tca-dash__delivery-info {
        order: 0;
    }
    .tca-dash__steps {
        order: 1;
        min-width: 0;
    }
    .tca-dash__delivery-track {
        order: 2;
        justify-self: stretch;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 12px 14px;
        border: 1px solid #e3e3e3;
        border-radius: 4px;
        text-align: center;
        white-space: normal;
    }
    .tca-dash__stats {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* Make sure cart-with-calendar icon line is vertically aligned. */
.tca-dash__order-range {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Tabs (My Rentals: Active / History) — matches the design: no group
 * pill background; only the active button has a black fill. */
.tca-dash__tabs {
    display: inline-flex;
    gap: 8px;
    padding: 0;
    margin: 0 0 24px;
    background: transparent;
    border: 0;
    border-radius: 0;
}
.tca-dash__tab {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid transparent;
    background: transparent;
    background-image: none;
    padding: 8px 22px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #666;
    cursor: pointer;
    border-radius: 4px;
    box-shadow: none;
    text-shadow: none;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.tca-dash__tab:hover { color: #000; }
.tca-dash__tab.is-active {
    background-color: #000;
    color: #fff;
    border-color: #000;
}
.tca-dash__tab:focus,
.tca-dash__tab:focus-visible,
.tca-dash__tab:active { outline: none; box-shadow: none; }

.tca-dash__panel { display: none; }
.tca-dash__panel.is-active { display: block; }

/* Hub-level panels (Overview / Rentals / Purchases / Settings) */
.tca-hub__panel { display: none; }
.tca-hub__panel.is-active { display: block; }

/* Icon variant for primary buttons (Download invoice) */
.tca-dash__btn--icon {
    gap: 8px;
}
.tca-dash__btn--icon svg {
    width: 14px;
    height: 14px;
}
.tca-dash__btn--sm {
    padding: 6px 12px;
    font-size: 11px;
    gap: 6px;
}
.tca-dash__btn--sm svg {
    width: 12px;
    height: 12px;
}
.tca-dash__item-qty {
    font-size: 12px;
    color: #888;
}


/* =====================================================================
 * Account Settings widget
 * ===================================================================== */

.tca-settings { color: #000; }

.tca-settings__section {
    margin: 0 0 24px;
    background: #fff;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    overflow: hidden;
}
.tca-settings__summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    cursor: pointer;
    background: #fff;
}
.tca-settings__summary--static { cursor: default; }
.tca-settings__summary::-webkit-details-marker { display: none; }
.tca-settings__chevron {
    display: inline-flex;
    transition: transform .15s ease;
}
.tca-settings__section[open] .tca-settings__chevron { transform: rotate(180deg); }

.tca-settings__body {
    padding: 0 20px 20px;
}

.tca-settings__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 16px;
}
.tca-settings__row--2col { grid-template-columns: 1fr 1fr; }

.tca-settings__field { display: flex; flex-direction: column; gap: 6px; }

.tca-settings__label {
    color: #000;
}

.tca-settings__input {
    width: 100%;
    padding: 12px 14px;
    background: #fff;
    color: #000;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    font-family: inherit;
    line-height: 1.4;
    transition: border-color .15s ease;
    appearance: none;
    -webkit-appearance: none;
}
.tca-settings__input:focus { outline: none; border-color: #000; }
.tca-settings__input[aria-invalid="true"] { border-color: #d44; }

.tca-settings__status { margin: 0 0 12px; }
.tca-settings__status:empty { display: none; }

.tca-settings__submit {
    margin-top: 4px;
    padding: 12px 22px;
    width: auto;
}

.tca-settings__list {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    font-size: 14px;
    color: #333;
}
.tca-settings__list li { padding: 4px 0; }
.tca-settings__list strong { color: #000; font-weight: 600; }

.tca-settings__note {
    margin: 0 0 12px;
    color: #666;
}

/* Membership / payment-method "summary cards" inside the settings */
.tca-settings__card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
    background: #fafafa;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
}
.tca-settings__card-price { color: #000; margin-top: 2px; }
.tca-settings__card-meta { color: #666; margin-top: 4px; }
.tca-settings__card-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.tca-settings__payment {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
    background: #fafafa;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    margin-bottom: 16px;
}
.tca-settings__payment-method {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.tca-settings__payment-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 28px;
    padding: 2px 6px;
    background: #fff;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
}
.tca-settings__payment-logo img {
    max-height: 22px;
    width: auto;
    display: block;
}
.tca-settings__payment-logo--text {
    font-size: 11px;
    font-weight: 700;
    color: #000;
    letter-spacing: .03em;
}

.tca-settings__invoices {
    width: 100%;
    border-collapse: collapse;
}
.tca-settings__invoices thead th {
    padding: 8px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #888;
    text-align: left;
    vertical-align: bottom;
    border-bottom: 1px solid #e3e3e3;
}
.tca-settings__invoices thead th.tca-settings__invoice-amount { text-align: right; }
.tca-settings__invoices tr { border-bottom: 1px solid #f0f0f0; }
.tca-settings__invoices tr:last-child { border-bottom: 0; }
.tca-settings__invoices td {
    padding: 10px 8px;
    font-size: 13px;
    color: #333;
    vertical-align: middle;
}
.tca-settings__invoice-order   { font-weight: 600; color: #000; white-space: nowrap; }
.tca-settings__invoice-date    { color: #666; white-space: nowrap; }
.tca-settings__invoice-desc    { color: #000; font-weight: 500; }
.tca-settings__invoice-method  { width: 1%; white-space: nowrap; }
.tca-settings__invoice-method .tca-settings__payment-logo {
    margin: 0;
    min-width: 56px;
    height: 24px;
}
.tca-settings__invoice-method .tca-settings__payment-logo img { max-height: 18px; }
.tca-settings__invoice-amount  { color: #000; font-weight: 600; white-space: nowrap; }
.tca-settings__invoice-status  { color: #666; }
.tca-settings__invoice-action  { text-align: right; white-space: nowrap; }
.tca-dash .tca-settings__invoice-action .tca-dash__btn--primary,
.tca-dash a.tca-settings__invoice-action .tca-dash__btn--primary {
    color: #fff !important;
    background-color: #000 !important;
    border-color: #000 !important;
    -webkit-text-fill-color: #fff;
}
.tca-dash .tca-settings__invoice-action .tca-dash__btn--primary .tca-icon,
.tca-dash .tca-settings__invoice-action .tca-dash__btn--primary svg {
    color: #fff;
    stroke: #fff;
    fill: none;
}
.tca-settings__invoice-action .tca-dash__btn--sm {
    padding: 6px 12px;
    font-size: 11px;
    gap: 6px;
}

@media (max-width: 640px) {
    .tca-settings__row--2col { grid-template-columns: 1fr; }
    .tca-settings__card,
    .tca-settings__payment {
        flex-direction: column;
        align-items: flex-start;
    }
    .tca-settings__invoices td { padding: 8px 4px; font-size: 12px; }
}

/* ── Status notices inside settings forms ─────────────────────── */
.tca-settings__status { margin: 0 0 12px; }
.tca-settings__status:empty { display: none; margin: 0; }
.tca-settings__status .tca-settings__notice {
    padding: 12px 14px;
    font-size: 13px;
    line-height: 1.4;
    border-radius: 4px;
    border: 1px solid transparent;
}
.tca-settings__notice--error {
    background: #fbecec;
    color: #8a1f1f;
    border-color: #f4cccc;
}
.tca-settings__notice--success {
    background: #ecf6ec;
    color: #1f5a1f;
    border-color: #ccebcc;
}

/* =====================================================================
 * FINAL HARD OVERRIDES — keep theme / Elementor accent colors out
 *
 * Themes routinely retarget `button[type=submit]`, `.elementor-button`,
 * `input:focus` and `<table>` with their brand accent (often pink/teal
 * in WP-default and TwentyTwenty themes). The selectors below combine
 * the widget root with each interactive element so every property wins
 * on specificity without resorting to `!important` everywhere.
 * ===================================================================== */
.tca-dash a.tca-dash__btn,
.tca-dash button.tca-dash__btn {
    appearance: none;
    -webkit-appearance: none;
    font-family: inherit;
    text-decoration: none;
    box-shadow: none;
    text-shadow: none;
    background-image: none;
}
.tca-dash a.tca-dash__btn--primary,
.tca-dash button.tca-dash__btn--primary {
    background-color: #000;
    color: #fff !important;
    border: 1px solid #000;
    -webkit-text-fill-color: #fff;
}
.tca-dash a.tca-dash__btn--primary:hover,
.tca-dash button.tca-dash__btn--primary:hover,
.tca-dash a.tca-dash__btn--primary:focus,
.tca-dash button.tca-dash__btn--primary:focus,
.tca-dash a.tca-dash__btn--primary:active,
.tca-dash button.tca-dash__btn--primary:active {
    background-color: #1f1f1f;
    color: #fff;
    border-color: #1f1f1f;
}
.tca-dash a.tca-dash__btn--ghost,
.tca-dash button.tca-dash__btn--ghost {
    background-color: transparent;
    color: #000;
    border-color: transparent;
}

/* Membership plan cards: outline + muted CTAs (not “ghost” underline). */
.tca-dash a.tca-mplan__cta--outline,
.tca-dash button.tca-mplan__cta--outline {
    background-color: #fff;
    color: #000 !important;
    border: 1px solid #000 !important;
    -webkit-text-fill-color: #000;
    text-decoration: none !important;
}
.tca-dash a.tca-mplan__cta--outline:hover,
.tca-dash a.tca-mplan__cta--outline:focus {
    background-color: #f5f5f5;
    color: #000 !important;
    border-color: #000 !important;
}
/* Zelfde outline-stijl als downgrade-CTA, wel duidelijk niet klikbaar. */
.tca-dash button.tca-mplan__cta--outline.tca-mplan__cta--scheduled:disabled,
.tca-dash button.tca-mplan__cta--outline.tca-mplan__cta--scheduled[disabled] {
    background-color: #fff;
    color: #666 !important;
    border: 1px solid #000 !important;
    -webkit-text-fill-color: #666;
    opacity: 1;
    cursor: not-allowed;
    text-decoration: none !important;
}
.tca-dash button.tca-mplan__cta--muted:disabled,
.tca-dash button.tca-mplan__cta--muted[disabled] {
    background-color: #f3f3f3 !important;
    color: #999 !important;
    border: 1px solid #e8e8e8 !important;
    -webkit-text-fill-color: #999;
    opacity: 1;
    cursor: not-allowed;
    text-decoration: none !important;
}

/* Inputs: kill any theme background image / unusual border on focus.   */
.tca-dash .tca-settings__input,
.tca-dash input.tca-settings__input {
    appearance: none;
    -webkit-appearance: none;
    font-family: inherit;
    background-color: #fff;
    color: #000;
    box-shadow: none;
    background-image: none;
    border: 1px solid #e3e3e3;
}
.tca-dash .tca-settings__input:focus,
.tca-dash input.tca-settings__input:focus,
.tca-dash .tca-settings__input:focus-visible {
    outline: none;
    box-shadow: none;
    border-color: #000;
}

/* Invoice table: hard reset — themes love to repaint <table> rows. */
.tca-dash .tca-settings__invoices,
.tca-dash table.tca-settings__invoices {
    background: transparent;
    border: 0;
    border-collapse: collapse;
    width: 100%;
}
.tca-dash .tca-settings__invoices tr,
.tca-dash .tca-settings__invoices tbody tr,
.tca-dash .tca-settings__invoices tbody tr:nth-child(odd),
.tca-dash .tca-settings__invoices tbody tr:nth-child(even),
.tca-dash .tca-settings__invoices tbody tr:hover {
    background: transparent;
    box-shadow: none;
}
.tca-dash .tca-settings__invoices th,
.tca-dash .tca-settings__invoices td {
    background: transparent;
    border: 0;
}

.tca-dash .tca-settings__invoices-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 16px;
    font-size: 13px;
}
.tca-dash .tca-settings__invoices-pager-info {
    color: #555;
}
.tca-dash .tca-settings__invoices-pager-edge {
    color: #bbb;
    pointer-events: none;
    font-size: 12px;
}

/* Tabs: prevent default browser button-focus border / accent leak. */
.tca-dash .tca-dash__tabs,
.tca-dash div.tca-dash__tabs {
    background-color: transparent;
    background-image: none;
    border: 0;
    box-shadow: none;
}
.tca-dash .tca-dash__tab,
.tca-dash button.tca-dash__tab {
    appearance: none;
    -webkit-appearance: none;
    background-color: transparent;
    background-image: none;
    border: 1px solid transparent;
    box-shadow: none;
    text-shadow: none;
    color: #666;
}
.tca-dash .tca-dash__tab:hover,
.tca-dash button.tca-dash__tab:hover {
    background-color: transparent;
    color: #000;
    border-color: transparent;
}
.tca-dash .tca-dash__tab:focus,
.tca-dash .tca-dash__tab:focus-visible,
.tca-dash .tca-dash__tab:active,
.tca-dash button.tca-dash__tab:focus,
.tca-dash button.tca-dash__tab:focus-visible,
.tca-dash button.tca-dash__tab:active {
    outline: none;
    box-shadow: none;
    border-color: transparent;
}
.tca-dash .tca-dash__tab.is-active,
.tca-dash button.tca-dash__tab.is-active {
    background-color: #000;
    color: #fff;
    border-color: #000;
}
.tca-dash .tca-dash__tab.is-active:hover,
.tca-dash button.tca-dash__tab.is-active:hover {
    background-color: #1f1f1f;
    color: #fff;
    border-color: #1f1f1f;
}

/* Order-details chevron: block theme `button { border-color: accent; }`. */
.tca-dash button.tca-dash__order-toggle {
    background-color: transparent !important;
    background-image: none !important;
    color: #000 !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
}
.tca-dash button.tca-dash__order-toggle:focus,
.tca-dash button.tca-dash__order-toggle:focus-visible,
.tca-dash button.tca-dash__order-toggle:active {
    outline: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

/* Nav items: kill theme link colour. */
.tca-dash a.tca-dash__nav-item {
    color: #555;
}
.tca-dash a.tca-dash__nav-item:hover {
    color: #000;
}
.tca-dash a.tca-dash__nav-item.is-active {
    color: #000;
    border-left-color: #000;
}

/* Membership "Cancel" — donker rood + underline op alle viewports. */
.tca-settings__card-actions .tca-dash__btn--ghost.tca-mcancel-open,
.tca-dash button.tca-dash__btn--ghost.tca-mcancel-open,
.tca-dash .tca-mcancel-open {
    padding: 0;
    margin: 0;
    background: transparent !important;
    color: #991b1b !important;
    border: 0 !important;
    border-radius: 0;
    font-size: 13px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    min-height: auto;
    line-height: 1.4;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}
.tca-settings__card-actions .tca-dash__btn--ghost.tca-mcancel-open:hover,
.tca-dash button.tca-dash__btn--ghost.tca-mcancel-open:hover,
.tca-dash .tca-mcancel-open:hover,
.tca-settings__card-actions .tca-dash__btn--ghost.tca-mcancel-open:focus,
.tca-dash button.tca-dash__btn--ghost.tca-mcancel-open:focus {
    background: transparent !important;
    color: #7f1d1d !important;
    border: 0 !important;
    outline: none;
    text-decoration: underline;
}

/* ── Membership cancel modals ───────────────────────────────────── */
.tca-mcancel-root { position: relative; z-index: 100000; }
.tca-mcancel[hidden],
.tca-mcancel-root[hidden] { display: none !important; }

.tca-mcancel {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    box-sizing: border-box;
}
.tca-mcancel__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}
.tca-mcancel__panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 440px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e3e3e3;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    padding: 28px;
    box-sizing: border-box;
}
.tca-mcancel__panel--done { text-align: center; }
.tca-mcancel__x {
    position: absolute;
    top: 12px;
    right: 12px;
    border: 0;
    background: transparent;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
    color: #000;
}
.tca-mcancel__title {
    margin: 0 0 12px;
    font-size: 22px;
    font-weight: 700;
    color: #000;
    padding-right: 32px;
}
.tca-mcancel__title--center {
    padding-right: 0;
    text-align: center;
}
.tca-mcancel__intro {
    margin: 0 0 20px;
    font-size: 15px;
    line-height: 1.5;
    color: #666;
}
.tca-mcancel__option {
    border: 1px solid #e3e3e3;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
    background: #fafafa;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.tca-mcancel__option-title {
    font-size: 15px;
    font-weight: 700;
    color: #000;
}
.tca-mcancel__option-desc {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    color: #666;
}
.tca-mcancel__btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 12px 16px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    box-sizing: border-box;
    border: 1px solid #000;
    transition: opacity 0.15s ease, background 0.15s ease;
}
.tca-mcancel__btn:disabled { opacity: 0.55; cursor: default; }
.tca-mcancel__btn--outline {
    background: #fff;
    color: #000;
    border-color: #000;
}
.tca-mcancel__btn--destructive {
    margin-top: 8px;
    background: #fdecec;
    color: #8b1c1c;
    border-color: #8b1c1c;
}
.tca-mcancel__fine {
    margin: 16px 0 0;
    font-size: 12px;
    line-height: 1.45;
    color: #888;
}
.tca-mcancel__ok-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    background: #556b2f;
    color: #fff;
}
.tca-mcancel__body {
    margin: 0 0 16px;
    font-size: 15px;
    line-height: 1.55;
    color: #444;
}
.tca-mcancel__body--center { text-align: center; }
.tca-mcancel__email-note {
    margin: 0;
    font-size: 13px;
    color: #999;
}

/* ── Membership modal: theme / Elementor overrides (accent color, widths) ── */
html body .tca-dash .tca-mcancel__option {
    align-items: stretch;
}
html body .tca-dash .tca-mcancel__panel .tca-mcancel__btn,
html body .tca-dash .tca-mcancel__panel a.tca-mcancel__btn,
html body .tca-dash .tca-mcancel__panel button.tca-mcancel__btn {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    align-self: stretch !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: center !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
    font-family: inherit !important;
}
html body .tca-dash .tca-mcancel__panel .tca-mcancel__btn--outline,
html body .tca-dash .tca-mcancel__panel a.tca-mcancel__btn--outline,
html body .tca-dash .tca-mcancel__panel button.tca-mcancel__btn--outline {
    background-color: #fff !important;
    color: #000 !important;
    border: 1px solid #000 !important;
    -webkit-text-fill-color: #000 !important;
}
html body .tca-dash .tca-mcancel__panel .tca-mcancel__btn--outline:hover,
html body .tca-dash .tca-mcancel__panel a.tca-mcancel__btn--outline:hover,
html body .tca-dash .tca-mcancel__panel button.tca-mcancel__btn--outline:hover {
    background-color: #fff !important;
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
    opacity: 0.92;
}
html body .tca-dash .tca-mcancel__panel .tca-mcancel__btn--destructive,
html body .tca-dash .tca-mcancel__panel button.tca-mcancel__btn--destructive {
    background-color: #fdecec !important;
    color: #8b1c1c !important;
    border: 1px solid #8b1c1c !important;
    -webkit-text-fill-color: #8b1c1c !important;
}
html body .tca-dash .tca-mcancel__panel .tca-mcancel__btn--destructive:hover,
html body .tca-dash .tca-mcancel__panel button.tca-mcancel__btn--destructive:hover {
    background-color: #fdecec !important;
    color: #8b1c1c !important;
    -webkit-text-fill-color: #8b1c1c !important;
    opacity: 0.95;
}
html body .tca-dash .tca-mcancel__panel > button.tca-mcancel__x,
html body .tca-dash .tca-mcancel__panel button.tca-mcancel__x {
    color: #000 !important;
    background-color: transparent !important;
    background-image: none !important;
    -webkit-text-fill-color: #000 !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 4px 8px !important;
    width: auto !important;
    min-width: 2em !important;
}
html body .tca-dash .tca-mcancel__panel button.tca-mcancel__x:hover,
html body .tca-dash .tca-mcancel__panel button.tca-mcancel__x:focus,
html body .tca-dash .tca-mcancel__panel button.tca-mcancel__x:focus-visible {
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
    background-color: transparent !important;
    opacity: 0.65;
    outline: none !important;
}

/* ── Membership plan change (in-account) ─────────────────────────── */
.tca-mplan {
    max-width: 1100px;
}
.tca-mplan__back {
    display: inline-block;
    margin-bottom: 16px;
    color: inherit;
    text-decoration: underline;
    font-size: 14px;
}
.tca-mplan__title {
    margin: 0 0 12px;
}
.tca-mplan__intro,
.tca-mplan__sub {
    margin: 0 0 24px;
    font-size: 15px;
    line-height: 1.5;
    max-width: 52rem;
}
.tca-mplan__sub {
    font-family: Georgia, 'Times New Roman', serif;
}
.tca-mplan__notice {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    margin-bottom: 28px;
    border: 1px solid rgba(37, 99, 235, 0.25);
}
.tca-mplan__notice-icon {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    font-style: normal;
    line-height: 1;
}
.tca-mplan__notice-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
}
.tca-mplan__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}
/* Plan cards: zelfde basis als .tca-settings__card (rand, radius, padding). */
.tca-mplan__card {
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 16px;
    background: #fafafa;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
}
.tca-mplan__card--current {
    background: #fff;
    border-width: 2px;
    border-color: #000;
    padding-top: 22px;
}
.tca-mplan__ribbon {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border: 1px solid #000;
    padding: 4px 10px;
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1.2;
}
.tca-mplan__card-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.tca-mplan__name {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.25;
    color: #000;
}
.tca-mplan__price {
    margin: 0;
    color: #000;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
}
.tca-mplan__suffix {
    margin: 4px 0 0;
    font-size: 12px;
    line-height: 1.35;
    color: #666;
}
.tca-mplan__desc {
    margin: 12px 0 0;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 14px;
    line-height: 1.5;
    color: #555;
}
.tca-mplan__divider {
    height: 0;
    margin: 16px 0 14px;
    border: 0;
    border-top: 1px solid #e3e3e3;
    flex-shrink: 0;
}
.tca-mplan__features {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 14px;
    line-height: 1.45;
    color: #333;
}
.tca-mplan__feature {
    position: relative;
    padding-left: 22px;
    margin: 0 0 8px;
}
.tca-mplan__feature:last-child {
    margin-bottom: 0;
}
.tca-mplan__feature::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 0.32em;
    width: 5px;
    height: 9px;
    border: solid #000;
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
}
.tca-mplan__feature--new .tca-mplan__badge {
    margin-left: 8px;
}
.tca-mplan__badge {
    display: inline-block;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    vertical-align: middle;
    color: #fff;
    background: #000;
}
.tca-mplan__actions {
    margin-top: 20px;
    flex-shrink: 0;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.tca-mplan__cta {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none !important;
    text-transform: uppercase;
    letter-spacing: 0.045em;
    font-size: 11px;
    font-weight: 600;
    padding: 12px 16px;
    line-height: 1.2;
    border-radius: 4px;
}
/* Themes/Elementor: <button> krijgt andere font/size dan <a> — gelijk aan mplan-CTA’s. */
.tca-dash .tca-mplan__actions a.tca-mplan__cta.tca-dash__btn,
.tca-dash .tca-mplan__actions button.tca-mplan__cta.tca-dash__btn {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
    font-family: inherit !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.045em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    padding: 12px 16px !important;
    border-radius: 4px !important;
    white-space: nowrap;
}
.tca-mplan__fine {
    margin: 12px 0 0;
    font-size: 12px;
    line-height: 1.4;
    color: #888;
    text-align: center;
}
.tca-mplan__compare {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 16px;
    align-items: stretch;
    margin-bottom: 32px;
}
@media (max-width: 700px) {
    .tca-mplan__compare {
        grid-template-columns: 1fr;
    }
    .tca-mplan__arrow {
        text-align: center;
        transform: rotate(90deg);
    }
}
.tca-mplan__compare-card {
    box-sizing: border-box;
    background: #fafafa;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    padding: 16px;
}
.tca-mplan__compare-card--new {
    background: #fff;
    border: 2px solid #000;
}
.tca-mplan__compare-card .tca-mplan__tab {
    margin-bottom: 10px;
}
.tca-mplan__compare-card .tca-mplan__name {
    margin-top: 0;
}
.tca-mplan__tab {
    display: inline-block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 1px solid #ccc;
    padding: 4px 10px;
    margin-bottom: 12px;
}
.tca-mplan__compare-card--new .tca-mplan__tab {
    border-color: #111;
}
.tca-mplan__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #999;
}
.tca-mplan__confirm-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}
.tca-mplan__confirm {
    min-width: 220px;
}

/* In-account plan switch: payment + summary (compact) */
.tca-mplan__pay-root {
    width: 100%;
}
.tca-mplan__pay-root .tca-checkout__layout {
    grid-template-columns: minmax(0, 1fr) minmax(180px, 220px);
    gap: 24px;
}
.tca-mplan__pay-root .tca-checkout__back {
    margin-bottom: 12px;
    font-size: 13px;
}
.tca-mplan__pay-root .tca-checkout__title {
    font-size: 20px;
    margin: 0 0 18px;
}
.tca-mplan__pay-root .tca-checkout__section {
    margin-bottom: 22px;
}
.tca-mplan__pay-root .tca-checkout__section-title {
    font-size: 14px;
}
.tca-mplan__pay-layout.tca-checkout__layout {
    align-items: flex-start;
}
.tca-mplan__pay-main {
    min-width: 0;
}
.tca-mplan__pay-aside {
    min-width: 0;
}
.tca-mplan__sidebar-pay {
    height: auto;
    padding: 14px 14px 16px;
}
.tca-mplan__sidebar-pay .tca-sidebar__heading {
    font-size: 10px;
    letter-spacing: 0.07em;
}
.tca-mplan__sidebar-pay .tca-sidebar__name {
    font-size: 0.95rem;
    margin: 0.2em 0 0.1em;
}
.tca-mplan__sidebar-pay .tca-sidebar__price {
    font-size: 0.9rem;
}
.tca-mplan__sidebar-pay .tca-sidebar__amount {
    font-size: 1rem;
}
.tca-mplan__sidebar-pay .tca-sidebar__billing {
    font-size: 11px;
    margin: 0.35em 0 0;
}
.tca-mplan__sidebar-old {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.tca-mplan__strike-name,
.tca-mplan__strike-price {
    text-decoration: line-through;
    opacity: 0.72;
    display: block;
    font-size: 0.82rem;
}
.tca-mplan__strike-price {
    font-size: 0.88rem;
    font-weight: 600;
}
.tca-mplan__sidebar-divider {
    height: 1px;
    background: rgba(0, 0, 0, 0.08);
    margin: 10px 0;
}
.tca-mplan__sidebar-new-label {
    display: block;
    font-size: 9px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #666;
    margin-bottom: 2px;
}
.tca-mplan__sidebar-copy {
    margin: 10px 0 0;
    font-size: 11px;
    line-height: 1.4;
    color: #555;
}
.tca-mplan__sidebar-due {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.tca-mplan__sidebar-due-label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #666;
}
.tca-mplan__sidebar-due-amount {
    font-size: 1.05rem;
    font-weight: 700;
}
.tca-mplan__sidebar-due-vat {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.35;
    font-weight: 500;
    color: #6b7280;
}
.tca-mplan--paid-success {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}
.tca-mplan__success-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    background: #4a5d23;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tca-mplan--plan-confirmed {
    text-align: center;
}
.tca-mplan--plan-confirmed .tca-mplan__title,
.tca-mplan--plan-confirmed .tca-mplan__sub,
.tca-mplan--plan-confirmed .tca-mplan__success-email {
    text-align: center;
}
.tca-mplan__success-actions {
    text-align: center;
    margin-top: 1.5rem;
}
@media (max-width: 1024px) {
    .tca-mplan__pay-root .tca-checkout__layout {
        grid-template-columns: 1fr;
    }
}

.tca-settings__invoice-action .tca-settings__invoice-action-secondary {
    margin-top: 8px;
}
@media (min-width: 600px) {
    .tca-settings__invoice-action .tca-dash__btn + .tca-dash__btn {
        margin-top: 0;
        margin-left: 8px;
    }
}

/* =====================================================================
 * TCA Account — MOBIELE LAYOUT
 *
 * Doel: één kolom op mobiel/tablet, zonder fancy randjes of pill-bg op
 * de nav. Bovenaan komt de gebruikersheader (badge + naam + contact),
 * daaronder een sliding tab-bar (zoals het category-filter op de shop),
 * daaronder de volledige body, en helemaal onderaan de logout-knop.
 * Specificiteit hoog gehouden zodat Elementor/theme niets meer kapot
 * trekt — typografie/kleuren raken we niet aan.
 * ===================================================================== */

/* Hub mag nooit horizontaal pagina-scrollen */
html body .tca-dash,
html body .tca-dash.tca-hub {
    max-width: 100%;
    min-width: 0;
}

html body .tca-dash__main {
    max-width: 100%;
    min-width: 0;
}

/* ── Elementor: tca_account_hub krijgt 100% kolombreedte op tablet/mobiel ── */
@media (max-width: 1024px) {
    html body .elementor-widget-tca_account_hub,
    html body .elementor-widget-tca_login_register {
        width: 100% !important;
        max-width: 100% !important;
    }

    html body .elementor-widget-tca_account_hub > .elementor-widget-container,
    html body .elementor-widget-tca_login_register > .elementor-widget-container {
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: clip;
    }

    html body .elementor-column:has(.elementor-widget-tca_account_hub),
    html body .elementor-column:has(.elementor-widget-tca_login_register) {
        width: 100% !important;
        max-width: 100% !important;
        flex-basis: 100% !important;
    }

    html body .e-con .e-child:has(.elementor-widget-tca_account_hub),
    html body .e-con .e-child:has(.elementor-widget-tca_login_register) {
        flex-basis: 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* ── HOOFDLAYOUT: één kolom, sidebar promoted naar pagina-flow ── */
@media (max-width: 1024px) {
    /* Eén bron voor de horizontale gutter — alle blokken erven dit */
    html body .tca-dash,
    html body .tca-dash.tca-hub {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        padding: 0 !important;
    }

    /* Sidebar zelf is geen container meer: kinderen worden direct geplaatst */
    html body .tca-dash__sidebar {
        display: contents !important;
        border: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        min-height: 0 !important;
    }

    /* Volgorde van blokken */
    html body .tca-dash__sidebar-header { order: 0; }
    html body .tca-dash__nav-scroller   { order: 1; }
    html body .tca-dash__main           { order: 2; }
    html body .tca-dash__logout-wrap    { order: 3; }

    /* Header: badge / naam / contact — geen extra gutter, container regelt dat */
    html body .tca-dash__sidebar-header {
        width: 100%;
        margin: 0 0 12px;
        padding: 0;
        box-sizing: border-box;
    }

    /* Pagina-content — geen extra gutter, container regelt dat */
    html body .tca-dash__main {
        width: 100%;
        padding: 0 0 24px;
        box-sizing: border-box;
    }

    html body .tca-dash__logout-wrap {
        width: 100%;
        margin: 8px 0 0;
        padding: 16px 0 0;
        border-top: 1px solid #e5e5e5;
        box-sizing: border-box;
    }
}

/* ── SLIDING NAV BAR (geen gutter, in lijn met de rest) ── */
@media (max-width: 1024px) {
    html body .tca-dash__nav-scroller {
        position: static;
        z-index: auto;
        width: 100%;
        margin: 0 0 16px;
        padding: 0;
        background: transparent;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        border: 0;
        border-bottom: 1px solid #e5e5e5;
        border-radius: 0;
        box-shadow: none;
        box-sizing: border-box;
    }

    html body .tca-dash__nav-scroller .tca-dash__nav {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 24px;
        margin: 0;
        padding: 0;
        border-top: 0;
        border-bottom: 0;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
    }

    html body .tca-dash__nav-scroller .tca-dash__nav::-webkit-scrollbar {
        display: none;
    }

    html body .tca-dash a.tca-dash__nav-item,
    html body .tca-dash button.tca-dash__nav-item {
        flex: 0 0 auto;
        scroll-snap-align: start;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin: 0;
        padding: 10px 0;
        border: 0;
        border-bottom: 2px solid transparent;
        background: transparent;
        border-radius: 0;
        min-height: 44px;
        line-height: 1.2;
        white-space: nowrap;
    }

    html body .tca-dash a.tca-dash__nav-item:hover {
        background: transparent;
    }

    html body .tca-dash a.tca-dash__nav-item.is-active,
    html body .tca-dash a.tca-dash__nav-item.is-active:hover {
        border-left: 0;
        border-bottom-color: #000;
        background: transparent;
    }

    html body .tca-dash__nav-icon {
        width: 16px;
        height: 16px;
    }

    html body .tca-dash__nav-icon svg,
    html body .tca-dash__nav-icon i {
        width: 16px;
        height: 16px;
        font-size: 14px;
    }
}

/* ── COMPACT (≤ 768): orderkaarten, tabs, factuur, productregels ── */
@media (max-width: 768px) {
    html body .tca-dash__heading {
        line-height: 1.15;
        word-wrap: break-word;
    }

    html body .tca-dash__order {
        border-radius: 6px;
        overflow: hidden;
    }

    /* Order-header: meta + actions onder elkaar, chevron absoluut rechts-midden. */
    html body .tca-dash__order-header {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 12px 52px 12px 14px;
    }

    html body .tca-dash__order-meta {
        order: 0;
        min-width: 0;
    }

    html body .tca-dash__order-actions {
        order: 1;
        display: inline-flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        gap: 6px 8px;
        width: 100%;
    }

    html body .tca-dash__status {
        align-self: center;
        white-space: nowrap;
    }

    /* Chevron uit de flex-flow halen — zit nu mooi rechts in t midden. */
    html body .tca-dash__order-toggle,
    html body .tca-dash button.tca-dash__order-toggle {
        position: absolute;
        top: 50%;
        right: 8px;
        transform: translateY(-50%);
        margin: 0;
        min-width: 36px;
        min-height: 36px;
    }

    html body .tca-dash__tabs {
        display: flex;
        width: 100%;
        max-width: 100%;
        gap: 6px;
        flex-wrap: nowrap;
    }

    html body .tca-dash__tab,
    html body .tca-dash button.tca-dash__tab {
        flex: 1 1 0;
        min-width: 0;
        padding: 10px 12px;
        text-align: center;
    }

    html body .tca-dash__order-details {
        padding: 12px 14px 16px;
    }

    html body .tca-dash__order-details-grid {
        grid-template-columns: 1fr;
    }

    html body .tca-dash__order-receipt-line {
        grid-template-columns: 1fr;
        gap: 6px;
        align-items: flex-start;
    }

    html body .tca-dash__order-receipt-line-value {
        white-space: normal;
        text-align: left;
        word-break: break-word;
    }

    html body .tca-dash__order-receipt-pay {
        flex-direction: column;
        align-items: stretch;
    }

    html body .tca-dash__order-receipt-pay-value {
        justify-content: flex-start;
    }

    html body .tca-settings__summary {
        flex-wrap: wrap;
        padding: 14px 16px;
        gap: 12px;
    }

    html body .tca-dash__delivery {
        padding: 14px 16px;
        border-radius: 6px;
    }

    /* ── Productregels: image links · info rechts · knop FULL-WIDTH eronder ── */
    html body .tca-dash__item {
        display: grid;
        grid-template-columns: 72px 1fr;
        grid-template-rows: auto auto;
        gap: 10px 14px;
        align-items: start;
        padding: 14px;
    }

    html body .tca-dash__item-image {
        width: 72px;
        height: 72px;
        grid-column: 1;
        grid-row: 1;
        margin: 0;
        align-self: start;
    }

    html body .tca-dash__item-info {
        grid-column: 2;
        grid-row: 1;
        text-align: left;
        align-self: start;
        min-width: 0;
    }

    html body .tca-dash__item-return {
        align-self: flex-start;
    }

    html body .tca-dash__item-actions {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        justify-content: stretch;
        gap: 8px;
    }

    html body .tca-dash__item-actions .tca-dash__btn {
        flex: 1 1 auto;
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    html body .tca-mplan__grid {
        grid-template-columns: 1fr;
    }

    html body .tca-mplan__confirm-actions {
        align-items: stretch;
    }

    html body .tca-mplan__confirm {
        min-width: 0;
        width: 100%;
    }

    /* ── Membership-card: stacked, beide knoppen FULL-WIDTH op mobiel ─── */
    html body .tca-settings__card,
    html body .tca-settings__payment {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }

    html body .tca-settings__card-info {
        width: 100% !important;
        max-width: 100% !important;
    }

    html body .tca-settings__card-actions {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 14px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    html body .tca-settings__card-actions .tca-dash__btn,
    html body .tca-settings__card-actions a.tca-dash__btn,
    html body .tca-settings__card-actions button.tca-dash__btn,
    html body .tca-dash .tca-settings__card-actions .tca-dash__btn--primary,
    html body .tca-dash a.tca-dash__btn--primary,
    html body .tca-dash button.tca-dash__btn--primary {
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;
        align-self: stretch !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    /* Cancel: ook full-width, gecentreerde rode underline-tekst */
    html body .tca-settings__card-actions .tca-mcancel-open,
    html body .tca-dash .tca-mcancel-open,
    html body .tca-dash button.tca-mcancel-open {
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;
        align-self: stretch !important;
        justify-content: center !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }
}

/* ── BILLING & PAYMENTS: blijft een tabel, alleen compact gemaakt ── */
@media (max-width: 768px) {
    /* .tca-settings__body houdt zijn interne padding (binnenkant van de cards),
       dat is NIET de buitenste widget-padding. */

    html body .tca-settings__payment {
        padding: 12px 14px;
        gap: 10px;
    }

    /* Tabel volledig binnen de breedte — laat lange tekst wrappen */
    html body .tca-settings__invoices,
    html body .tca-dash .tca-settings__invoices,
    html body .tca-dash table.tca-settings__invoices {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        table-layout: fixed;
        border-collapse: collapse;
    }

    html body .tca-settings__invoices thead th,
    html body .tca-settings__invoices tbody td,
    html body .tca-dash .tca-settings__invoices th,
    html body .tca-dash .tca-settings__invoices td {
        padding: 8px 6px;
        font-size: 12px;
        line-height: 1.35;
        vertical-align: top;
    }

    html body .tca-settings__invoices thead th {
        font-size: 10px;
    }

    /* Lange omschrijvingen moeten kunnen breken in plaats van pagina-scroll te forceren */
    html body .tca-settings__invoice-desc {
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    html body .tca-settings__invoice-order,
    html body .tca-settings__invoice-date,
    html body .tca-settings__invoice-amount,
    html body .tca-settings__invoice-status {
        white-space: nowrap;
    }

    /* Minder belangrijke kolommen op tablet/phone verbergen zodat de tabel past */
    html body .tca-settings__invoices thead th.tca-settings__invoice-method,
    html body .tca-settings__invoices tbody td.tca-settings__invoice-method,
    html body .tca-settings__invoices thead th.tca-settings__invoice-status,
    html body .tca-settings__invoices tbody td.tca-settings__invoice-status {
        display: none;
    }

    /* Action-knoppen netjes onder elkaar in de actie-cel */
    html body .tca-settings__invoice-action {
        white-space: normal;
    }

    html body .tca-settings__invoice-action .tca-dash__btn {
        display: inline-flex;
        width: 100%;
        justify-content: center;
        align-items: center;
        padding: 8px 6px;
        font-size: 11px;
        line-height: 1.2;
        margin: 0;
        white-space: nowrap;
        text-align: center;
        gap: 0;
        min-height: 36px;
    }

    html body .tca-settings__invoice-action .tca-dash__btn .tca-icon,
    html body .tca-settings__invoice-action .tca-dash__btn svg {
        flex-shrink: 0;
        width: 16px;
        height: 16px;
    }

    /* Verberg het tekstlabel ALLEEN op de PDF-knop — Pay (zonder icoon)
       houdt zijn label, Download PDF wordt icon-only. */
    html body .tca-settings__invoice-action .tca-settings__invoice-pdf .tca-dash__btn-label,
    html body .tca-dash .tca-settings__invoice-pdf .tca-dash__btn-label {
        display: none !important;
    }

    html body .tca-settings__invoice-action .tca-settings__invoice-pdf {
        gap: 0 !important;
        padding: 8px 6px !important;
    }

    html body .tca-settings__invoice-action .tca-dash__btn + .tca-dash__btn {
        margin-top: 6px;
        margin-left: 0;
    }
}

/* Kleinste viewports: alleen de meest essentiële kolommen */
@media (max-width: 480px) {
    html body .tca-settings__invoices thead th.tca-settings__invoice-date,
    html body .tca-settings__invoices tbody td.tca-settings__invoice-date {
        display: none;
    }

    html body .tca-settings__invoices thead th,
    html body .tca-settings__invoices tbody td,
    html body .tca-dash .tca-settings__invoices th,
    html body .tca-dash .tca-settings__invoices td {
        padding: 8px 4px;
        font-size: 11px;
    }

    html body .tca-settings__invoice-action .tca-dash__btn {
        font-size: 10px;
        padding: 6px 6px;
    }
}

/* ── Telefoon (≤ 480): grote tikdoelen, item-layout BLIJFT image-links ── */
@media (max-width: 480px) {
    html body .tca-auth {
        width: 100%;
        max-width: 100%;
        padding: 20px 16px;
    }

    html body .tca-dash__stat {
        padding: 18px 14px;
    }

    html body .tca-dash__rentals-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    /* Productregels behouden image-left layout (zoals desktop), niet centeren */
    html body .tca-dash__item {
        display: grid;
        grid-template-columns: 64px 1fr;
        grid-template-rows: auto auto;
        gap: 10px 12px;
        align-items: start;
        padding: 12px;
    }

    html body .tca-dash__item-image {
        width: 64px;
        height: 64px;
        max-width: 64px;
        aspect-ratio: 1;
        margin: 0;
        grid-column: 1;
        grid-row: 1;
        align-self: start;
    }

    html body .tca-dash__item-info {
        grid-column: 2;
        grid-row: 1;
        text-align: left;
        min-width: 0;
    }

    html body .tca-dash__item-return {
        align-self: flex-start;
    }

    html body .tca-dash__item-actions {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
    }

    html body .tca-dash__item-actions .tca-dash__btn {
        width: 100%;
        justify-content: center;
    }

    html body .tca-dash__btn,
    html body .tca-dash a.tca-dash__btn {
        min-height: 44px;
        padding-left: 14px;
        padding-right: 14px;
    }

    html body .tca-settings__submit {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    html body .tca-dash .tca-settings__invoices-pager {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        width: 100%;
    }

    html body .tca-dash .tca-settings__invoices-pager .tca-dash__btn {
        width: 100%;
        justify-content: center;
    }
}