/* ============================================================
   _components.css
   Canonical UI components — Fase 2 (Sprint 2: buttons + badges).

   Coexiste con Bootstrap (.btn-primary etc. usan guion sencillo;
   nuestros modifiers usan doble guion BEM → no colisionan).

   Loaded AFTER _design_tokens.css and BEFORE _reseller_styles.html
   so reseller branding (via CSS vars) can re-color these components
   without needing to redefine them.

   Cascade order:
     1. _design_tokens.css   (neutral vars)
     2. _components.css      (THIS — .btn / .badge consume vars)
     3. _reseller_styles.html (brand vars override neutrals)
     4. base.html <style>    (fallback brand when no reseller)
     5. Page CSS / page <style>
   ============================================================ */

/* ============================================================
   BUTTON
   Usage:
     <button class="btn btn--primary">…</button>
     <a class="btn btn--ghost btn--sm">…</a>
     <button class="btn btn--icon" aria-label="…"><i>…</i></button>

   Legacy aliases included for back-compat without touching templates:
     .adm-btn-primary  → equivalent to .btn.btn--primary
     .adm-btn-ghost    → .btn.btn--ghost
     .adm-btn-danger   → .btn.btn--danger
     .adm-btn-success  → .btn.btn--success
     .adm-btn-sm       → adds .btn--sm sizing
   ============================================================ */

.btn,
.adm-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 9px var(--sp-4);
    border: none;
    border-radius: var(--btn-radius, var(--radius-md));
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, opacity .15s ease, box-shadow .15s ease, color .15s ease, border-color .15s ease;
    white-space: nowrap;
}

.btn:focus-visible,
.adm-btn:focus-visible {
    outline: 2px solid var(--primary-color, var(--info-color));
    outline-offset: 2px;
}

.btn:disabled,
.adm-btn:disabled,
.btn.is-disabled,
.adm-btn.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ----- Variants (color) ----- */
.btn--primary,
.adm-btn-primary {
    background: var(--primary-color);
    color: var(--text-inverse);
}
.btn--primary:hover,
.adm-btn-primary:hover {
    opacity: 0.88;
    color: var(--text-inverse);
    text-decoration: none;
}

.btn--ghost,
.adm-btn-ghost {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border-color);
    padding: 8px 15px; /* compensate the 1px border */
}
.btn--ghost:hover,
.adm-btn-ghost:hover {
    background: var(--surface-hover);
    color: var(--text-color);
    text-decoration: none;
}

.btn--danger,
.adm-btn-danger {
    background: var(--danger-color);
    color: var(--text-inverse);
}
.btn--danger:hover,
.adm-btn-danger:hover {
    opacity: 0.88;
    color: var(--text-inverse);
    text-decoration: none;
}

.btn--success,
.adm-btn-success {
    background: var(--success-color);
    color: var(--text-inverse);
}
.btn--success:hover,
.adm-btn-success:hover {
    opacity: 0.88;
    color: var(--text-inverse);
    text-decoration: none;
}

/* ----- Sizes ----- */
.btn--sm,
.adm-btn-sm {
    padding: 5px 10px;
    font-size: var(--fs-xs);
}

.btn--lg {
    padding: var(--sp-3) var(--sp-5);
    font-size: var(--fs-base);
}

/* ----- Shape ----- */
.btn--icon {
    width: 36px;
    height: 36px;
    padding: 0;
    justify-content: center;
}


/* ============================================================
   BADGE
   Usage:
     <span class="badge badge--success">Activo</span>
     <span class="badge badge--warning">Pendiente</span>

   Legacy aliases:
     .adm-status-active   → .badge.badge--success
     .adm-status-pending  → .badge.badge--warning
     .adm-status-paused   → .badge.badge--neutral
     .adm-status-archived → .badge.badge--muted

   Brand-flavored badges (.pr-badge-*) remain in _reseller_styles.html
   because they pull from --primary-color / --accent-color and are
   reseller-aware by design.
   ============================================================ */

.badge,
.adm-status-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--sp-1) 10px;
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: 0.3px;
    line-height: 1;
    white-space: nowrap;
}

.badge--success,
.adm-status-active {
    background: var(--success-bg);
    color: var(--success-fg);
}

.badge--warning,
.adm-status-pending {
    background: var(--warning-bg);
    color: var(--warning-fg);
}

.badge--danger {
    background: var(--danger-bg);
    color: var(--danger-fg);
}

.badge--info {
    background: var(--info-bg);
    color: var(--info-fg);
}

.badge--neutral,
.adm-status-paused {
    background: rgba(107, 114, 128, 0.15);
    color: #4b5563;
}

.badge--muted,
.adm-status-archived {
    background: rgba(75, 85, 99, 0.12);
    color: #6b7280;
}


/* ============================================================
   CARD (modern)  — Fase 2 Sprint 3
   Moved from frontend/templates/frontend/components/_card.html
   so it's globally available without needing {% include %}.

   .modern-card is the "vistosa" card (shadow, hover lift) used by
   panels that want emphasis. The sober .adm-card lives in
   components/_admin_styles.html and is intentionally NOT merged
   here — different visual purpose (no shadow, no lift).
   ============================================================ */

.modern-card {
    background: var(--surface-card);
    border-radius: var(--radius-xl);
    box-shadow: var(--card-shadow);
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}

.modern-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.modern-card-header {
    padding: var(--sp-5) var(--sp-6);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
}

.modern-card-header-content {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex: 1;
    min-width: 0;
}

.modern-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--bg-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.modern-card-icon i {
    width: 20px;
    height: 20px;
    color: var(--text-inverse);
}

.modern-card-title {
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    color: var(--text-color);
    margin: 0;
}

.modern-card-subtitle {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    margin-top: 2px;
}

.modern-card-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-shrink: 0;
}

.modern-card-body {
    padding: var(--sp-6);
}

.modern-card-body.no-padding,
.modern-card-body.flush {
    padding: 0;
}

.modern-card-footer {
    padding: var(--sp-4) var(--sp-6);
    border-top: 1px solid var(--border-color);
    background: var(--background-color);
}

.modern-card.card-primary { border-top: 3px solid var(--primary-color); }
.modern-card.card-success { border-top: 3px solid var(--success-color); }
.modern-card.card-warning { border-top: 3px solid var(--warning-color); }
.modern-card.card-danger  { border-top: 3px solid var(--danger-color); }

.modern-card.card-compact .modern-card-header { padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-5); }
.modern-card.card-compact .modern-card-body   { padding: var(--sp-5); }

.modern-card.card-glass {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}


/* ============================================================
   TABLE (modern)  — Fase 2 Sprint 3
   Moved from frontend/templates/frontend/components/_table.html.
   That file now only carries the sortable-column JS; CSS lives here
   so any template can use class="modern-table" without {% include %}.
   ============================================================ */

.modern-table-container {
    overflow-x: auto;
    border-radius: var(--radius-lg);
}

.modern-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.modern-table thead {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
}

.modern-table th {
    background: var(--background-color);
    color: var(--text-muted);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 14px var(--sp-4);
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid var(--border-color);
}

.modern-table th:first-child { border-radius: var(--radius-lg) 0 0 0; }
.modern-table th:last-child  { border-radius: 0 var(--radius-lg) 0 0; }

.modern-table td {
    padding: var(--sp-4);
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
    background: var(--surface-card);
}

.modern-table tbody tr { transition: background-color 0.15s; }
.modern-table tbody tr:hover td { background: var(--background-color); }
.modern-table tbody tr:last-child td { border-bottom: none; }
.modern-table tbody tr:last-child td:first-child { border-radius: 0 0 0 var(--radius-lg); }
.modern-table tbody tr:last-child td:last-child  { border-radius: 0 0 var(--radius-lg) 0; }

/* Table elements */
.table-avatar,
.table-avatar-placeholder {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

.table-avatar-placeholder {
    background: var(--bg-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-inverse);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-sm);
}

.table-user {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

.table-user-info { min-width: 0; }

.table-user-name {
    font-weight: var(--fw-semibold);
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.table-user-email {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Status badges inside tables — semantic, NOT brand. */
.table-status {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: var(--sp-1) var(--sp-3);
    border-radius: var(--radius-pill);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
}
.table-status i { width: 14px; height: 14px; }

.status-active, .status-completed, .status-success {
    background: var(--success-bg);
    color: var(--success-fg);
}
.status-inactive, .status-cancelled, .status-error {
    background: var(--danger-bg);
    color: var(--danger-fg);
}
.status-pending, .status-warning {
    background: var(--warning-bg);
    color: var(--warning-fg);
}
.status-in-progress, .status-processing, .status-info {
    background: var(--info-bg);
    color: var(--info-fg);
}

/* Action buttons inside tables */
.table-actions { display: flex; align-items: center; gap: var(--sp-1); }

.table-action-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
    color: var(--text-muted);
}
.table-action-btn:hover {
    background: var(--background-color);
    color: var(--text-color);
}
.table-action-btn.btn-edit:hover   { background: var(--info-bg);    color: var(--info-fg); }
.table-action-btn.btn-delete:hover { background: var(--danger-bg);  color: var(--danger-fg); }
.table-action-btn.btn-view:hover   { background: var(--success-bg); color: var(--success-fg); }
.table-action-btn i { width: 16px; height: 16px; }

/* Sortable columns */
.modern-table th.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: var(--sp-6);
}
.modern-table th.sortable:hover { color: var(--text-color); }
.modern-table th.sortable::after {
    content: '';
    position: absolute;
    right: var(--sp-2);
    top: 50%;
    transform: translateY(-50%);
    border: 4px solid transparent;
    border-top-color: var(--text-muted);
    opacity: 0.3;
}
.modern-table th.sortable.sort-asc::after {
    border-top-color: transparent;
    border-bottom-color: var(--primary-color);
    transform: translateY(-70%);
    opacity: 1;
}
.modern-table th.sortable.sort-desc::after {
    border-top-color: var(--primary-color);
    border-bottom-color: transparent;
    transform: translateY(-30%);
    opacity: 1;
}

/* Responsive */
@media (max-width: 768px) {
    .modern-table th,
    .modern-table td { padding: var(--sp-3); }
    .modern-table .hide-mobile { display: none; }
    .table-user-email { max-width: 120px; }
    .table-actions { gap: 2px; }
    .table-action-btn { width: 28px; height: 28px; }
}

/* Empty state */
.table-empty {
    text-align: center;
    padding: var(--sp-12) var(--sp-6);
    color: var(--text-muted);
}
.table-empty i {
    width: 48px;
    height: 48px;
    margin-bottom: var(--sp-4);
    opacity: 0.5;
}
.table-empty-title {
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    color: var(--text-color);
    margin-bottom: var(--sp-2);
}
.table-empty-text { font-size: var(--fs-base); }


/* ============================================================
   PAGE HEADER  — Fase 3 Sprint 4
   Moved from frontend/templates/frontend/components/_page_header.html
   so any template can use class="page-header" without {% include %}.
   The component itself keeps the markup (Django conditionals) and
   stays useful when you want title/subtitle/icon/back_url passed as
   parameters.
   ============================================================ */

.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-5);
    margin-bottom: var(--sp-6);
    flex-wrap: wrap;
}

.page-header-content {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    flex: 1;
    min-width: 0;
}

.page-back-btn {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--surface-card);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    text-decoration: none;
    transition: all 0.2s;
    flex-shrink: 0;
}
.page-back-btn:hover {
    background: var(--background-color);
    color: var(--text-color);
    border-color: var(--text-muted);
}
.page-back-btn i { width: 20px; height: 20px; }

.page-header-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    background: var(--bg-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.page-header-icon i { width: 24px; height: 24px; color: var(--text-inverse); }

.page-header-text { min-width: 0; }

.page-title {
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    color: var(--text-color);
    margin: 0;
    line-height: 1.3;
}

.page-subtitle {
    font-size: var(--fs-md);
    color: var(--text-muted);
    margin: 4px 0 0 0;
}

.page-header-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .page-header {
        flex-direction: column;
        align-items: stretch;
    }
    .page-header-actions {
        width: 100%;
        justify-content: flex-start;
    }
    .page-title { font-size: var(--fs-lg); }
}

.page-header.header-compact { margin-bottom: var(--sp-4); }
.page-header.header-compact .page-title { font-size: var(--fs-lg); }
.page-header.header-center {
    text-align: center;
    justify-content: center;
}
.page-header.header-center .page-header-content {
    flex-direction: column;
    text-align: center;
}


/* ============================================================
   BREADCRUMB  — Fase 3 Sprint 4
   Moved from frontend/templates/frontend/components/_breadcrumb.html.
   ============================================================ */

.modern-breadcrumb {
    margin-bottom: var(--sp-5);
}

.breadcrumb-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.breadcrumb-item {
    display: flex;
    align-items: center;
    font-size: var(--fs-base);
    color: var(--text-muted);
}

.breadcrumb-item a {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    color: var(--text-muted);
    text-decoration: none;
    padding: var(--sp-1) 10px;
    border-radius: var(--radius-md);
    transition: all 0.15s;
}
.breadcrumb-item a:hover {
    background: var(--border-color);
    color: var(--text-color);
}
.breadcrumb-item a i { width: 16px; height: 16px; }

.breadcrumb-item:not(:last-child)::after {
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    margin-left: 4px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.breadcrumb-item.active {
    font-weight: var(--fw-semibold);
    color: var(--text-color);
    padding: var(--sp-1) 10px;
}

.modern-breadcrumb.breadcrumb-compact .breadcrumb-item {
    font-size: var(--fs-sm);
}
.modern-breadcrumb.breadcrumb-compact .breadcrumb-item a,
.modern-breadcrumb.breadcrumb-compact .breadcrumb-item.active {
    padding: 4px var(--sp-2);
}

.modern-breadcrumb.breadcrumb-bg {
    background: var(--surface-card);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius-lg);
    box-shadow: var(--card-shadow);
}


/* ============================================================
   PAGE CONTAINER  — Fase 3 Sprint 4 (new)
   Responsive content wrapper. Use as the outer container of admin/
   reseller panels: max-width, centered, responsive lateral padding.

   Usage:
     <main class="page-container">…</main>

   Modifiers:
     .page-container--narrow : 960px max-width (forms, settings)
     .page-container--wide   : full-width fluid (dashboards)
   ============================================================ */

.page-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--sp-6) var(--sp-6);
    box-sizing: border-box;
}

.page-container--narrow { max-width: 960px; }
.page-container--wide   { max-width: none; }

@media (max-width: 768px) {
    .page-container,
    .page-container--narrow {
        padding: var(--sp-4) var(--sp-4);
    }
}


/* ============================================================
   MODAL (modern)  — Fase 5 Sprint 7
   Moved from frontend/templates/frontend/components/_modal.html.

   Composes with Bootstrap modal (.modal, .modal-dialog, .modal-content,
   .modal-header/body/footer). Add .modern-modal to .modal-dialog to
   opt-in to the modern look. Add .modal-icon + variant for the leading
   icon. Use .modal-confirm for centered confirmation dialogs and
   .modal-loading for spinner states.
   ============================================================ */

.modern-modal .modal-content {
    border: none;
    border-radius: var(--radius-2xl);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.modern-modal .modal-header {
    padding: var(--sp-6);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: flex-start;
    gap: var(--sp-4);
}
.modern-modal .modal-header .btn-close {
    margin: 0;
    padding: var(--sp-2);
}

.modal-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.modal-icon i { width: 24px; height: 24px; color: var(--text-inverse); }

.modal-icon-primary { background: var(--bg-gradient); }
.modal-icon-success {
    background: linear-gradient(135deg, var(--success-color) 0%, color-mix(in srgb, var(--success-color) 75%, black) 100%);
}
.modal-icon-warning {
    background: linear-gradient(135deg, var(--warning-color) 0%, color-mix(in srgb, var(--warning-color) 75%, black) 100%);
}
.modal-icon-danger {
    background: linear-gradient(135deg, var(--danger-color) 0%, color-mix(in srgb, var(--danger-color) 75%, black) 100%);
}
.modal-icon-info {
    background: linear-gradient(135deg, var(--info-color) 0%, color-mix(in srgb, var(--info-color) 75%, black) 100%);
}

.modal-header-content { flex: 1; min-width: 0; }

.modern-modal .modal-title {
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    color: var(--text-color);
    margin: 0;
}

.modal-subtitle {
    font-size: var(--fs-base);
    color: var(--text-muted);
    margin-top: 4px;
    margin-bottom: 0;
}

.modern-modal .modal-body { padding: var(--sp-6); }

.modern-modal .modal-footer {
    padding: var(--sp-4) var(--sp-6);
    border-top: 1px solid var(--border-color);
    background: var(--background-color);
    gap: var(--sp-3);
}

/* Sizes (these override Bootstrap's .modal-sm / .modal-lg / .modal-xl
   when used on the dialog with .modern-modal). */
.modern-modal.modal-sm { max-width: 400px; }
.modern-modal.modal-lg { max-width: 700px; }
.modern-modal.modal-xl { max-width: 900px; }

/* Form helpers inside modals */
.modal-form .form-group { margin-bottom: var(--sp-5); }
.modal-form .form-label {
    font-weight: var(--fw-semibold);
    color: var(--text-color);
    margin-bottom: var(--sp-2);
    display: block;
}
.modal-form .form-label-hint {
    font-weight: var(--fw-normal);
    color: var(--text-muted);
    font-size: var(--fs-sm);
}
.modal-form .form-control,
.modal-form .form-select {
    border-radius: 10px;
    border: 2px solid var(--border-color);
    padding: var(--sp-3) var(--sp-4);
    transition: all 0.2s;
}
.modal-form .form-control:focus,
.modal-form .form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-color) 10%, transparent);
}
.modal-form .form-text {
    color: var(--text-muted);
    font-size: var(--fs-sm);
    margin-top: var(--sp-1);
}
.modal-form .input-group {
    border-radius: 10px;
    overflow: hidden;
}
.modal-form .input-group .form-control { border-radius: 0; }
.modal-form .input-group-text {
    background: var(--background-color);
    border: 2px solid var(--border-color);
    color: var(--text-muted);
    padding: var(--sp-3) 14px;
}

/* Confirmation modal */
.modal-confirm .modal-body {
    text-align: center;
    padding: var(--sp-8);
}
.modal-confirm .modal-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    margin: 0 auto var(--sp-5);
}
.modal-confirm .modal-icon i { width: 32px; height: 32px; }
.modal-confirm .modal-title {
    font-size: var(--fs-xl);
    margin-bottom: var(--sp-3);
}
.modal-confirm .modal-text {
    color: var(--text-muted);
    font-size: var(--fs-md);
    line-height: 1.6;
}
.modal-confirm .modal-footer {
    justify-content: center;
    background: var(--surface-card);
    border-top: none;
    padding-top: 0;
}

/* Loading state */
.modal-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--sp-12);
}
.modal-loading .spinner-border {
    width: 48px;
    height: 48px;
    border-width: 4px;
    color: var(--primary-color);
    margin-bottom: var(--sp-4);
}
.modal-loading-text {
    color: var(--text-muted);
    font-size: var(--fs-md);
}

/* Inputs numéricos de precios (tablas de endpoints LLM): sin spinners para
   que el valor completo (p.ej. 0.0028) quepa, alineado a la derecha. */
.ep-num {
    min-width: 6.5rem;
    text-align: right;
}
.ep-num::-webkit-outer-spin-button,
.ep-num::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.ep-num[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}