/* ============================================================
   DUBUZ UNIFIED BUTTON SYSTEM
   One consistent, modern button language across the whole
   frontend + user dashboard. Loaded AFTER Bootstrap so it
   also normalises Bootstrap .btn-* usage to the Dubuz theme.

   Tokens used (defined in the layouts / account-dashboard.css):
     --primary, --primary-hover, --color-on-primary,
     --bg-page, --bg-card, --text-main, --text-muted, --border,
     --radius-btn, --shadow-sm, --shadow-md, --focus-ring,
     --color-success*, --color-danger*, --color-warning*,
     --color-whatsapp
   Fallbacks are supplied so the file is safe on standalone
   pages (auth) that may not declare every token.
   ============================================================ */

/* ---------- Base ---------- */
.btn,
.dz-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;                       /* consistent icon <-> label spacing */
    vertical-align: middle;
    padding: 10px 18px;
    min-height: 42px;
    border: 1px solid transparent;
    border-radius: var(--radius-btn, 8px);
    background: transparent;
    color: var(--text-main, #333);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .18s ease, border-color .18s ease,
                color .18s ease, box-shadow .18s ease, transform .12s ease;
}
.btn:hover,
.dz-btn:hover { text-decoration: none; }

/* Icon + label alignment: keep glyphs optically centered, no baseline drift */
.btn > i,
.btn > svg,
.btn > .btn-ico,
.dz-btn > i,
.dz-btn > svg {
    flex: 0 0 auto;
    line-height: 1;
    font-size: 1em;
    display: inline-flex;
    align-items: center;
}
.btn > svg,
.dz-btn > svg { width: 1.05em; height: 1.05em; }

/* Neutralise legacy Bootstrap icon spacing utilities inside our flex buttons
   so the flex `gap` is the single source of truth for icon/label spacing. */
.btn > i.me-1, .btn > i.me-2, .btn > i.ms-1, .btn > i.ms-2,
.btn > .me-1, .btn > .me-2, .btn > .ms-1, .btn > .ms-2 {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* States */
.btn:focus,
.dz-btn:focus { outline: none; }
.btn:focus-visible,
.dz-btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring, 0 0 0 3px rgba(198,73,73,.35));
}
.btn:active,
.dz-btn:active { transform: translateY(1px); }
.btn:disabled, .btn.disabled, .btn[disabled],
.btn[aria-disabled="true"],
.dz-btn:disabled, .dz-btn.disabled {
    opacity: .55;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
    transform: none;
}

/* ---------- Variants ---------- */
.btn-primary,
.dz-btn-primary {
    background: var(--primary, #c64949);
    border-color: var(--primary, #c64949);
    color: var(--color-on-primary, #fff);
    box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.btn-primary:hover,
.dz-btn-primary:hover {
    background: var(--primary-hover, #b03c3c);
    border-color: var(--primary-hover, #b03c3c);
    color: var(--color-on-primary, #fff);
    box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,.12));
}

/* Secondary = neutral surface (Cancel / Back) */
.btn-secondary,
.dz-btn-secondary {
    background: var(--bg-page, #f0f2f5);
    border-color: var(--border, #e4e6eb);
    color: var(--text-main, #333);
}
.btn-secondary:hover,
.dz-btn-secondary:hover {
    background: var(--bg-card, #fff);
    border-color: var(--text-muted, #65676b);
    color: var(--text-main, #333);
}

/* Outline = transparent w/ brand accent */
.btn-outline,
.btn-outline-primary,
.dz-btn-outline {
    background: transparent;
    border-color: var(--primary, #c64949);
    color: var(--primary, #c64949);
}
.btn-outline:hover,
.btn-outline-primary:hover,
.dz-btn-outline:hover {
    background: var(--primary, #c64949);
    border-color: var(--primary, #c64949);
    color: var(--color-on-primary, #fff);
}

/* Neutral outline (Bootstrap parity) */
.btn-outline-secondary {
    background: transparent;
    border-color: var(--border, #e4e6eb);
    color: var(--text-main, #333);
}
.btn-outline-secondary:hover {
    background: var(--bg-page, #f0f2f5);
    border-color: var(--text-muted, #65676b);
    color: var(--text-main, #333);
}

/* Ghost = no chrome until hover */
.btn-ghost,
.dz-btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--text-muted, #65676b);
}
.btn-ghost:hover,
.dz-btn-ghost:hover {
    background: var(--primary-light, rgba(198,73,73,.1));
    color: var(--primary, #c64949);
}

/* Light (Bootstrap parity) */
.btn-light {
    background: var(--bg-card, #fff);
    border-color: var(--border, #e4e6eb);
    color: var(--text-main, #333);
}
.btn-light:hover {
    background: var(--bg-page, #f0f2f5);
    border-color: var(--text-muted, #65676b);
    color: var(--text-main, #333);
}

/* Danger */
.btn-danger,
.dz-btn-danger {
    background: var(--color-danger, #ef4444);
    border-color: var(--color-danger, #ef4444);
    color: #fff;
}
.btn-danger:hover,
.dz-btn-danger:hover { filter: brightness(.94); color: #fff; }
.btn-outline-danger {
    background: transparent;
    border-color: var(--color-danger, #ef4444);
    color: var(--color-danger, #ef4444);
}
.btn-outline-danger:hover {
    background: var(--color-danger, #ef4444);
    color: #fff;
}
/* Soft danger (subtle tinted) */
.btn-danger-soft,
.dz-btn-danger-soft {
    background: var(--color-danger-bg, #fef2f2);
    border-color: var(--color-danger-border, #fecaca);
    color: var(--color-danger-text, #dc2626);
}
.btn-danger-soft:hover { background: var(--color-danger, #ef4444); color: #fff; border-color: var(--color-danger, #ef4444); }

/* Success */
.btn-success,
.dz-btn-success {
    background: var(--color-success, #10b981);
    border-color: var(--color-success, #10b981);
    color: #fff;
}
.btn-success:hover,
.dz-btn-success:hover { filter: brightness(.95); color: #fff; }

/* Warning */
.btn-warning,
.dz-btn-warning {
    background: var(--color-warning, #f59e0b);
    border-color: var(--color-warning, #f59e0b);
    color: #fff;
}
.btn-warning:hover { filter: brightness(.95); color: #fff; }

/* Info */
.btn-info {
    background: var(--color-info, #3b82f6);
    border-color: var(--color-info, #3b82f6);
    color: #fff;
}
.btn-info:hover { filter: brightness(.95); color: #fff; }

/* WhatsApp (contact CTA) */
.btn-whatsapp,
.dz-btn-whatsapp {
    background: var(--color-whatsapp, #25D366);
    border-color: var(--color-whatsapp, #25D366);
    color: #fff;
}
.btn-whatsapp:hover { filter: brightness(.95); color: #fff; }

/* ---------- Sizes ---------- */
.btn-sm,
.dz-btn-sm {
    padding: 6px 12px;
    min-height: 34px;
    font-size: 12.5px;
    gap: 6px;
    border-radius: calc(var(--radius-btn, 8px) - 2px);
}
.btn-lg,
.dz-btn-lg {
    padding: 13px 24px;
    min-height: 50px;
    font-size: 15.5px;
    gap: 10px;
    border-radius: calc(var(--radius-btn, 8px) + 2px);
}

/* ---------- Modifiers ---------- */
.btn-block,
.dz-btn-block { display: flex; width: 100%; }

.btn-pill,
.dz-btn-pill { border-radius: var(--radius-full, 9999px); }

/* Icon-only square button */
.btn-icon,
.dz-btn-icon {
    padding: 0;
    width: 42px;
    height: 42px;
    min-height: 42px;
    gap: 0;
    flex: 0 0 auto;
}
.btn-icon.btn-sm { width: 34px; height: 34px; }
.btn-icon.btn-lg { width: 50px; height: 50px; }

/* ---------- Loading state ---------- */
.btn.is-loading,
.dz-btn.is-loading {
    color: transparent !important;
    pointer-events: none;
    position: relative;
}
.btn.is-loading > *,
.dz-btn.is-loading > * { visibility: hidden; }
.btn.is-loading::after,
.dz-btn.is-loading::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 16px; height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    color: #fff;
    animation: dz-btn-spin .6s linear infinite;
    visibility: visible;
}
.btn-secondary.is-loading::after,
.btn-outline.is-loading::after,
.btn-ghost.is-loading::after,
.btn-light.is-loading::after { color: var(--primary, #c64949); }
@keyframes dz-btn-spin { to { transform: rotate(360deg); } }

/* ============================================================
   LEGACY FAMILY NORMALISATION
   Guarantee icon/label alignment + focus ring + comfortable
   tap targets for the pre-existing button families WITHOUT
   rewriting their markup or changing their colors.
   ============================================================ */
.ld-btn-call, .ld-btn-wa, .ld-btn-chat, .ld-btn-phone, .ld-btn-whatsapp,
.ld-back-btn, .ld-topbar-edit,
.dash-btn, .acct-btn,
.mp-sheet-apply, .mp-sheet-clear, .mp-mobile-search-go,
.sng-btn-home, .wow-circle-btn, .wa-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ld-btn-call, .ld-btn-wa, .ld-btn-chat, .ld-btn-phone, .ld-btn-whatsapp {
    gap: 8px;
}
.dash-btn:focus-visible, .acct-btn:focus-visible,
.ld-btn-call:focus-visible, .ld-btn-wa:focus-visible, .ld-btn-chat:focus-visible,
.ld-btn-phone:focus-visible, .ld-btn-whatsapp:focus-visible,
.mp-icon-btn:focus-visible, .mp-sheet-apply:focus-visible,
.mp-sheet-clear:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring, 0 0 0 3px rgba(198,73,73,.35));
}

/* Keep FA icon glyphs vertically centered in legacy families */
.dash-btn > i, .acct-btn > i,
.ld-btn-call > i, .ld-btn-wa > i, .ld-btn-chat > i,
.ld-btn-phone > i, .ld-btn-whatsapp > i,
.ld-back-btn > i {
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

/* ---------- Mobile ergonomics: 44px tap targets ---------- */
@media (max-width: 1023px) {
    .btn, .dz-btn { min-height: 44px; }
    .btn-sm, .dz-btn-sm { min-height: 38px; }
    .btn-icon, .dz-btn-icon { width: 44px; height: 44px; min-height: 44px; }
    .btn-icon.btn-sm { width: 38px; height: 38px; }
    /* Primary contact CTAs already large; nudge legacy families up to spec */
    .ld-contact-buttons-row a,
    .ld-contact-stack a,
    .ld-contact-stack span.ld-btn-disabled { min-height: 46px; }
}