/*
 * VECTO Membership — public form styles
 * CSS custom properties are set via inline style on .vom-form (from VOM_Helpers::color_vars())
 * Defaults below serve as fallbacks if no settings are saved yet.
 *
 * Token names are kept in sync with VOM_Helpers::color_vars() and mirror the
 * VECTO Donation form's token set, so both forms can be styled identically.
 */

/* ── CSS variable defaults ────────────────────────────────────────────────── */
.vom-form-wrap {
    /* Colors */
    --vom-form-bg:            #ffffff;
    --vom-bg:                 #F7F7F7;
    --vom-text:               #25294C;
    --vom-muted:              #787878;
    --vom-link:               #fc941c;
    --vom-primary:            #FFC400;
    --vom-primary-hover:      #E8B000;
    --vom-button-text:        #25294C;
    --vom-border:             #E6E6E6;
    --vom-field-bg:           #ffffff;
    --vom-option-bg:          #ffffff;
    --vom-option-text:        #25294C;
    --vom-option-active-bg:   #FFC400;
    --vom-option-active-text: #25294C;
    --vom-input-text:         #25294C;
    --vom-input-placeholder:  #9ca3af;
    --vom-field-focus:        #FFC400;
    --vom-error:              #dc2626;

    /* Base / container */
    --vom-font-family:        inherit;
    --vom-form-max-width:     640px;
    --vom-form-padding:       32px;
    --vom-form-padding-mobile:20px;
    --vom-form-radius:        24px;
    --vom-form-section-gap:   24px;
    --vom-form-shadow:        0 4px 32px rgba(0,0,0,.08);
    --vom-form-border-width:  0px;
    --vom-base-font-size:     16px;
    --vom-base-font-weight:   400;
    --vom-base-line-height:   1.5;

    /* Title */
    --vom-title-font-size:    1.4rem;
    --vom-title-font-weight:  800;
    --vom-title-line-height:  1.2;
    --vom-title-letter-spacing:.03em;
    --vom-title-transform:    uppercase;
    --vom-title-margin-bottom:24px;

    /* Labels */
    --vom-label-font-size:    0.875rem;
    --vom-label-font-weight:  700;
    --vom-label-line-height:  1.4;
    --vom-label-margin:       12px;

    /* Currency pills */
    --vom-currency-gap:         8px;
    --vom-currency-padding:     7px 20px;
    --vom-currency-radius:      999px;
    --vom-currency-font-size:   0.875rem;
    --vom-currency-font-weight: 700;
    --vom-currency-border-width:1.5px;
    --vom-currency-bg:          transparent;
    --vom-currency-text:        var(--vom-text);
    --vom-currency-border:      var(--vom-border);
    --vom-currency-hover-border:var(--vom-primary);
    --vom-currency-active-bg:   var(--vom-primary);
    --vom-currency-active-text: var(--vom-option-active-text);

    /* Tier / plan option cards */
    --vom-option-gap:          10px;
    --vom-option-padding:      16px 10px;
    --vom-option-radius:       14px;
    --vom-option-border-width: 2px;
    --vom-option-border:       var(--vom-border);
    --vom-option-hover-border: var(--vom-primary);
    --vom-plan-padding:        14px 18px;

    /* Inputs */
    --vom-input-radius:        12px;
    --vom-input-height:        auto;
    --vom-input-padding:       12px 16px;
    --vom-input-font-size:     0.9rem;
    --vom-input-font-weight:   400;
    --vom-input-line-height:   1.4;
    --vom-input-border-width:  1.5px;
    --vom-input-focus-shadow:  none;
    --vom-field-gap:           6px;
    --vom-grid-gap:            14px;

    /* Pricing summary */
    --vom-pricing-bg:          var(--vom-bg);
    --vom-pricing-radius:      12px;
    --vom-pricing-padding:     14px 18px;

    /* Buttons */
    --vom-button-radius:       999px;
    --vom-button-height:       auto;
    --vom-button-padding:      16px;
    --vom-button-sm-padding:   10px 20px;
    --vom-button-font-size:    1rem;
    --vom-button-font-weight:  800;
    --vom-button-line-height:  1.2;
    --vom-button-letter-spacing:.04em;
    --vom-button-transform:    uppercase;
    --vom-button-border-width: 1.5px;
    --vom-submit-margin-top:   24px;

    /* Checkbox */
    --vom-checkbox-gap:        8px;
    --vom-checkbox-size:       16px;

    font-family:  var(--vom-font-family);
    font-size:    var(--vom-base-font-size);
    font-weight:  var(--vom-base-font-weight);
    line-height:  var(--vom-base-line-height);
    color:        var(--vom-text);
    max-width:    var(--vom-form-max-width);
    margin:       0 auto;
}

/* ── Form card ────────────────────────────────────────────────────────────── */
/* Note: CSS custom properties are set via inline style on .vom-form — they
   cascade to all child elements. .vom-form-wrap above provides fallback defaults. */
.vom-form {
    max-width:     var(--vom-form-max-width);   /* respects saved setting */
    margin:        0 auto;
    background:    var(--vom-form-bg);
    border:        var(--vom-form-border-width) solid var(--vom-border);
    border-radius: var(--vom-form-radius);
    padding:       var(--vom-form-padding);
    box-shadow:    var(--vom-form-shadow);
    font-family:   var(--vom-font-family);
    font-size:     var(--vom-base-font-size);
    font-weight:   var(--vom-base-font-weight);
    line-height:   var(--vom-base-line-height);
    color:         var(--vom-text);
    position:      relative;
}

/* ── Form title ───────────────────────────────────────────────────────────── */
.vom-form__title {
    font-size:      var(--vom-title-font-size);
    font-weight:    var(--vom-title-font-weight);
    line-height:    var(--vom-title-line-height);
    text-transform: var(--vom-title-transform);
    letter-spacing: var(--vom-title-letter-spacing);
    color:          var(--vom-text);
    margin:         0 0 var(--vom-title-margin-bottom);
}

/* ── Currency switcher ────────────────────────────────────────────────────── */
.vom-currency-switcher {
    display:       flex;
    gap:           var(--vom-currency-gap);
    flex-wrap:     wrap;
    margin-bottom: var(--vom-form-section-gap);
}

.vom-form-wrap .vom-currency-btn {
    padding:       var(--vom-currency-padding);
    border:        var(--vom-currency-border-width) solid var(--vom-currency-border);
    border-radius: var(--vom-currency-radius);
    background:    var(--vom-currency-bg);
    color:         var(--vom-currency-text);
    font-size:     var(--vom-currency-font-size);
    font-weight:   var(--vom-currency-font-weight);
    font-family:   var(--vom-font-family);
    cursor:        pointer;
    transition:    background .12s, border-color .12s, color .12s;
    line-height:   1;
}

.vom-form-wrap .vom-currency-btn:hover  { border-color: var(--vom-currency-hover-border); }
.vom-form-wrap .vom-currency-btn.is-active {
    background:   var(--vom-currency-active-bg);
    border-color: var(--vom-currency-active-bg);
    color:        var(--vom-currency-active-text);
}

/* ── Sections ─────────────────────────────────────────────────────────────── */
.vom-section { margin-bottom: var(--vom-form-section-gap); }

.vom-label {
    display:       block;
    font-size:     var(--vom-label-font-size);
    font-weight:   var(--vom-label-font-weight);
    line-height:   var(--vom-label-line-height);
    color:         var(--vom-text);
    margin-bottom: var(--vom-label-margin);
}

/* ── Tier options — styled as clickable cards ─────────────────────────────── */
.vom-tier-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   var(--vom-option-gap);
}

/* The <label> IS the card — radio hidden inside */
label.vom-tier-option {
    position:        relative;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    padding:         var(--vom-option-padding);
    min-height:      58px;
    border:          var(--vom-option-border-width) solid var(--vom-option-border);
    border-radius:   var(--vom-option-radius);
    background:      var(--vom-option-bg);
    text-align:      center;
    cursor:          pointer;
    transition:      border-color .12s, background .12s;
    user-select:     none;
}

label.vom-tier-option input[type="radio"] {
    position: absolute;
    opacity:  0;
    width:    0;
    height:   0;
}

label.vom-tier-option:hover         { border-color: var(--vom-option-hover-border); }
label.vom-tier-option.is-selected   { background: var(--vom-option-active-bg); border-color: var(--vom-option-active-bg); }

.vom-tier-option__name {
    font-size:   0.95rem;
    font-weight: 700;
    color:       var(--vom-option-text);
    line-height: 1.2;
}

label.vom-tier-option.is-selected .vom-tier-option__name { color: var(--vom-option-active-text); }

.vom-tier-option__desc {
    font-size:   0.75rem;
    font-weight: 400;
    color:       var(--vom-muted);
    margin-top:  4px;
}

label.vom-tier-option.is-selected .vom-tier-option__desc { color: var(--vom-option-active-text); opacity: .75; }

/* ── Plan options — styled as selectable rows ─────────────────────────────── */
.vom-plan-list {
    display:        flex;
    flex-direction: column;
    gap:            var(--vom-option-gap);
}

label.vom-plan-option {
    position:        relative;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             10px;
    padding:         var(--vom-plan-padding);
    border:          var(--vom-option-border-width) solid var(--vom-option-border);
    border-radius:   var(--vom-option-radius);
    background:      var(--vom-option-bg);
    cursor:          pointer;
    transition:      border-color .12s, background .12s;
    user-select:     none;
}

label.vom-plan-option input[type="radio"] {
    position: absolute;
    opacity:  0;
    width:    0;
    height:   0;
}

label.vom-plan-option:hover       { border-color: var(--vom-option-hover-border); }
label.vom-plan-option.is-selected { background: var(--vom-option-active-bg); border-color: var(--vom-option-active-bg); }

.vom-plan-option__name {
    font-weight: 700;
    font-size:   0.95rem;
    flex:        1;
    color:       var(--vom-option-text);
}

label.vom-plan-option.is-selected .vom-plan-option__name,
label.vom-plan-option.is-selected .vom-plan-option__price { color: var(--vom-option-active-text); }

.vom-plan-option__price {
    font-weight: 700;
    font-size:   0.95rem;
    color:       var(--vom-option-text);
    white-space: nowrap;
}

.vom-plan-option__duration { font-size: .78rem; color: var(--vom-muted); }

.vom-plan-option__badge {
    font-size:     0.72rem;
    font-weight:   600;
    background:    rgba(0,0,0,.08);
    border-radius: 999px;
    padding:       2px 8px;
    white-space:   nowrap;
}

/* ── Coupon ───────────────────────────────────────────────────────────────── */
.vom-checkbox-label {
    display:     flex;
    align-items: center;
    gap:         var(--vom-checkbox-gap);
    cursor:      pointer;
    font-size:   0.9rem;
    font-weight: 600;
    color:       var(--vom-text);
    user-select: none;
}

.vom-checkbox-label input[type="checkbox"] {
    width:        var(--vom-checkbox-size);
    height:       var(--vom-checkbox-size);
    cursor:       pointer;
    accent-color: var(--vom-primary);
}

/* Checkbox + "Contact us to request discount" link on one line, vertically aligned */
.vom-coupon-head {
    display:     flex;
    align-items: center;
    gap:         12px;
    flex-wrap:   wrap;
}

.vom-coupon-request-link {
    font-size:       .8rem;
    line-height:     1.4;
    color:           var(--vom-link, var(--vom-muted));
    text-decoration: underline;
    cursor:          pointer;
}
.vom-coupon-request-link:hover { opacity: .75; }

/* The `hidden` attribute must always win over any display rule below,
   otherwise JS can never hide the coupon row / discount row. */
.vom-form [hidden] {
    display: none !important;
}

.vom-coupon-row {
    margin-top: 12px;
}

/* Input + button always share one row, together filling 100% of its width */
.vom-coupon-fields {
    display:     flex;
    gap:         8px;
    align-items: center;
    flex-wrap:   nowrap;
    width:       100%;
}
.vom-coupon-fields .vom-input {
    flex:      1 1 auto;
    min-width: 0;   /* lets the input shrink instead of wrapping */
}
.vom-coupon-fields .vom-button {
    flex:        0 0 auto;
    white-space: nowrap;
}

.vom-coupon-feedback {
    display:    block;
    font-size:  .82rem;
    margin-top: 6px;
}
.vom-coupon-feedback--success { color: #16a34a; }
.vom-coupon-feedback--error   { color: var(--vom-error); }

/* ── Pricing summary ──────────────────────────────────────────────────────── */
.vom-pricing {
    background:    var(--vom-pricing-bg);
    border-radius: var(--vom-pricing-radius);
    padding:       var(--vom-pricing-padding);
    margin-bottom: var(--vom-form-section-gap);
}

.vom-pricing__row {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    font-size:       0.9rem;
    padding:         4px 0;
    color:           var(--vom-text);
}

.vom-pricing__discount { color: #16a34a; }

/* Small spinners next to Discount & Total while the coupon is recalculating */
.vom-pricing.is-recalculating #vom-discount::after,
.vom-pricing.is-recalculating #vom-total::after {
    content:       '';
    display:       inline-block;
    width:         0.75em;
    height:        0.75em;
    margin-left:   6px;
    vertical-align: -0.08em;
    border:        2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    opacity:       .55;
    animation:     vom-spin .6s linear infinite;
}

.vom-pricing__total {
    font-weight:   700;
    font-size:     1.05rem;
    border-top:    1px solid var(--vom-border);
    padding-top:   10px;
    margin-top:    6px;
}

/* ── Personal info section ────────────────────────────────────────────────── */
.vom-section-title {
    font-size:    1rem;
    font-weight:  700;
    color:        var(--vom-text);
    margin-bottom: 14px;
}

.vom-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   var(--vom-grid-gap);
}

.vom-field {
    display:        flex;
    flex-direction: column;
    gap:            var(--vom-field-gap);
}

.vom-field--full { grid-column: 1 / -1; }

.vom-field > span,
.vom-field > label {
    font-size:   var(--vom-label-font-size);
    font-weight: var(--vom-label-font-weight);
    line-height: var(--vom-label-line-height);
    color:       var(--vom-text);
}

.vom-form-wrap .vom-input,
.vom-form-wrap textarea.vom-input {
    display:       block;
    width:         100%;
    box-sizing:    border-box;
    padding:       var(--vom-input-padding);
    border:        var(--vom-input-border-width) solid var(--vom-border) !important;
    border-radius: var(--vom-input-radius) !important;
    background:    var(--vom-field-bg);
    color:         var(--vom-input-text);
    font-size:     var(--vom-input-font-size);
    font-weight:   var(--vom-input-font-weight);
    line-height:   var(--vom-input-line-height);
    font-family:   var(--vom-font-family);
    height:        var(--vom-input-height);
    transition:    border-color .12s, box-shadow .12s;
    outline:       none;
    -webkit-appearance: none;
    -moz-appearance:    none;
    appearance:         none;
}

/* Textarea grows with its rows — never clamp it to the single-line input height */
.vom-form-wrap textarea.vom-input { height: auto; }

.vom-form-wrap .vom-input::placeholder,
.vom-form-wrap textarea.vom-input::placeholder { color: var(--vom-input-placeholder); }
.vom-form-wrap .vom-input:focus,
.vom-form-wrap textarea.vom-input:focus        { border-color: var(--vom-field-focus) !important; box-shadow: var(--vom-input-focus-shadow); }
.vom-textarea           { resize: vertical; min-height: 80px; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.vom-form-wrap .vom-button {
    display:      inline-flex;
    align-items:  center;
    justify-content: center;
    gap:          6px;
    padding:      var(--vom-button-sm-padding);
    border-radius: var(--vom-button-radius);
    font-size:    0.875rem;
    font-weight:  700;
    font-family:  var(--vom-font-family);
    line-height:  var(--vom-button-line-height);
    cursor:       pointer;
    border:       var(--vom-button-border-width) solid var(--vom-border);
    background:   var(--vom-field-bg);
    color:        var(--vom-text);
    transition:   all .12s;
    white-space:  nowrap;
}

.vom-form-wrap .vom-button--primary {
    background:   var(--vom-primary);
    border-color: var(--vom-primary);
    color:        var(--vom-button-text) !important;
}
.vom-form-wrap .vom-button--primary:hover { background: var(--vom-primary-hover); border-color: var(--vom-primary-hover); }
.vom-form-wrap .vom-button--secondary:hover { border-color: var(--vom-primary); }

/* ── Submit button ────────────────────────────────────────────────────────── */
/* Scoped under .vom-form-wrap and using !important on color so theme button
   styles (Astra, Elementor, etc.) can't override the chosen text color. */
.vom-form-wrap .vom-submit {
    display:        block;
    width:          100%;
    padding:        var(--vom-button-padding);
    height:         var(--vom-button-height);
    margin-top:     var(--vom-submit-margin-top);
    background:     var(--vom-primary);
    color:          var(--vom-button-text) !important;
    border:         none;
    border-radius:  var(--vom-button-radius);
    font-size:      var(--vom-button-font-size);
    font-weight:    var(--vom-button-font-weight);
    line-height:    var(--vom-button-line-height);
    font-family:    var(--vom-font-family);
    text-transform: var(--vom-button-transform);
    letter-spacing: var(--vom-button-letter-spacing);
    cursor:         pointer;
    transition:     background .12s;
}

.vom-form-wrap .vom-submit:hover    { background: var(--vom-primary-hover); }
.vom-form-wrap .vom-submit:disabled { opacity: .65; cursor: not-allowed; }

/* ── Notices ──────────────────────────────────────────────────────────────── */
.vom-notice--success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; border-radius: 10px; padding: 14px 18px; margin-bottom: 20px; font-size: .9rem; }
.vom-notice--failed  { background: #fef2f2; color: #7f1d1d; border: 1px solid #fecaca; border-radius: 10px; padding: 14px 18px; margin-bottom: 20px; font-size: .9rem; }

/* ── Spinner ──────────────────────────────────────────────────────────────── */
@keyframes vom-spin { to { transform: rotate(360deg); } }
.vom-spinner {
    display:      inline-block;
    width:        16px;
    height:       16px;
    border:       2px solid rgba(0,0,0,.2);
    border-top-color: currentColor;
    border-radius: 50%;
    animation:    vom-spin .6s linear infinite;
    flex-shrink:  0;
    vertical-align: middle;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 540px) {
    .vom-form      { padding: var(--vom-form-padding-mobile); }
    .vom-tier-grid { grid-template-columns: 1fr 1fr; }
    .vom-grid      { grid-template-columns: 1fr; }
    .vom-form__title { font-size: 1.1rem; }
}

/* ── Member dashboard ─────────────────────────────────────────────────────── */
.vom-dashboard { max-width: 760px; margin: 0 auto; font-family: inherit; color: var(--vom-text, #1e293b); }
.vom-dash-card {
    background:    var(--vom-form-bg, #f4f4f5);
    border-radius: 16px;
    padding:       28px;
    margin-bottom: 24px;
}
.vom-dash-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.vom-dash-card__title { margin: 0 0 14px; font-size: 1.15rem; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
.vom-dash-card__head .vom-dash-card__title { margin-bottom: 0; }

.vom-dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; }
.vom-dash-item { display: flex; flex-direction: column; gap: 4px; }
.vom-dash-item__label { font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--vom-muted, #64748b); }
.vom-dash-item__value { font-size: 1rem; font-weight: 700; }

.vom-badge {
    display:       inline-block;
    padding:       3px 10px;
    border-radius: 999px;
    font-size:     .72rem;
    font-weight:   700;
    text-transform: uppercase;
    letter-spacing: .03em;
    vertical-align: middle;
}
.vom-badge--active,
.vom-badge--completed      { background: #dcfce7; color: #166534; }
.vom-badge--pending        { background: #fef9c3; color: #854d0e; }
.vom-badge--expired,
.vom-badge--cancelled      { background: #e2e8f0; color: #475569; }
.vom-badge--failed,
.vom-badge--payment_failed { background: #fee2e2; color: #991b1b; }
.vom-badge--info           { background: #e0e7ff; color: #3730a3; }

.vom-dash-cancel { margin-top: 20px; }

.vom-dash-table-wrap { overflow-x: auto; }
.vom-dash-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.vom-dash-table th {
    text-align:    left;
    padding:       10px 12px;
    font-size:     .75rem;
    font-weight:   700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color:         var(--vom-muted, #64748b);
    border-bottom: 2px solid var(--vom-border, #e2e8f0);
}
.vom-dash-table td { padding: 12px; border-bottom: 1px solid var(--vom-border, #e2e8f0); }
.vom-dash-table tr:last-child td { border-bottom: none; }

.vom-success-actions { margin-top: 16px; }
.vom-success-actions .vom-button { display: inline-block; padding: 12px 24px; border-radius: var(--vom-button-radius, 10px); background: var(--vom-primary, #f59e0b); color: var(--vom-button-text, #fff); text-decoration: none; font-weight: 700; }

@media (max-width: 540px) {
    .vom-dash-card { padding: 20px; }
    .vom-dash-grid { grid-template-columns: 1fr; }
}

/* ── Payment receipt ──────────────────────────────────────────────────────── */
.vom-receipt { max-width: 640px; margin: 0 auto; color: var(--vom-text, #1e293b); }
.vom-receipt__table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.vom-receipt__table th {
    text-align:     left;
    width:          42%;
    padding:        14px 18px;
    font-size:      .78rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color:          var(--vom-muted, #64748b);
    border-bottom:  1px solid var(--vom-border, #e2e8f0);
    vertical-align: top;
}
.vom-receipt__table td {
    padding:        14px 18px;
    border-bottom:  1px solid var(--vom-border, #e2e8f0);
    font-weight:    600;
    word-break:     break-word; /* long emails shouldn't overflow on mobile */
}
.vom-receipt__table tr:last-child th,
.vom-receipt__table tr:last-child td { border-bottom: none; }
/* Themes (e.g. Divi) often add their own borders to th/td — keep cells clean
   inside the receipt card so spacing stays consistent regardless of theme. */
.vom-receipt__card .vom-receipt__table th,
.vom-receipt__card .vom-receipt__table td {
    background: transparent;
}
@media (max-width: 540px) {
    .vom-receipt__table th,
    .vom-receipt__table td { padding: 12px 12px; }
}

/* ── Member dashboard: visual polish ─────────────────────────────────────── */
.vom-dashboard { max-width: 820px; }
.vom-dash-card {
    background:    var(--vom-form-bg, #fff);
    border:        1px solid var(--vom-border, #e2e8f0);
    border-radius: 18px;
    padding:       32px;
    margin-bottom: 28px;
    box-shadow:    0 1px 3px rgba(15, 23, 42, .05), 0 10px 24px -18px rgba(15, 23, 42, .18);
}
.vom-dash-card__head {
    padding-bottom: 16px;
    margin-bottom:  22px;
    border-bottom:  1px solid var(--vom-border, #e2e8f0);
}
.vom-dash-card__title { font-size: 1.05rem; letter-spacing: .04em; }
.vom-dash-card > .vom-dash-card__title {
    padding-bottom: 16px;
    margin-bottom:  18px;
    border-bottom:  1px solid var(--vom-border, #e2e8f0);
}

.vom-dash-grid { gap: 20px 32px; }
.vom-dash-item__label { font-size: .72rem; }
.vom-dash-item__value { font-size: 1.05rem; }
.vom-dash-item__value .vom-badge { margin-left: 6px; }

.vom-badge { line-height: 1.6; }
.vom-badge--active::before,
.vom-badge--completed::before { content: "●"; font-size: .6em; margin-right: 5px; vertical-align: 1px; }

.vom-dash-cancel {
    margin-top:  24px;
    padding-top: 20px;
    border-top:  1px dashed var(--vom-border, #e2e8f0);
}
.vom-dash-cancel .vom-button {
    padding:       10px 20px;
    border-radius: var(--vom-button-radius, 10px);
    font-weight:   700;
    cursor:        pointer;
}

.vom-dash-table th { padding: 10px 14px; background: rgba(148, 163, 184, .08); }
.vom-dash-table th:first-child { border-radius: 8px 0 0 8px; }
.vom-dash-table th:last-child  { border-radius: 0 8px 8px 0; }
.vom-dash-table td { padding: 13px 14px; }
.vom-dash-table tbody tr:hover td { background: rgba(148, 163, 184, .06); }

.vom-receipt__card { padding: 32px; }

@media (max-width: 540px) {
    .vom-dash-card { padding: 22px; border-radius: 14px; }
}