/* ───────────────────────────────────────────────
   AbogadosWork Marketplace — Swipe Cards
   Basado en MyBoodaa Swipe Cards v1.3.1
   Alta especificidad anti-Elementor
   ─────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
    --mbsc-font: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --mbsc-card-w: 360px;
    --mbsc-card-radius: 22px;
    --mbsc-img-h: 260px;
    --mbsc-text-primary: #1a1a2e;
    --mbsc-text-secondary: #7b8294;
    --mbsc-text-bio: #8e93a4;
    --mbsc-accent: #f5c518;
    --mbsc-card-bg: #ffffff;
    --mbsc-border: #eaedf3;
    --mbsc-btn1-bg: #000000;
    --mbsc-btn1-text: #ffffff;
    --mbsc-btn1-radius: 14px;
    --mbsc-btn2-bg: #f0f1f5;
    --mbsc-btn2-text: #1a1a2e;
    --mbsc-btn2-radius: 14px;
    --mbsc-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.06), 0 20px 48px rgba(0, 0, 0, 0.10);
    --mbsc-swipe-left: #ff4757;
    --mbsc-swipe-right: #2ed573;
}

/* ── WRAPPER ────────────────────────────────────────────────── */
div.mbsc-swipe-wrapper.mbsc-swipe-wrapper {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-height: 720px !important;
    padding: 40px 20px !important;
    font-family: var(--mbsc-font) !important;
    -webkit-font-smoothing: antialiased;
    user-select: none;
    box-sizing: border-box !important;
    background: transparent !important;
    margin: 0 auto !important;
}

/* ── Stack ──────────────────────────────────────────────────── */
div.mbsc-cards-stack.mbsc-cards-stack {
    position: relative !important;
    width: var(--mbsc-card-w) !important;
    max-width: 100% !important;
    height: 720px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ── CARD ───────────────────────────────────────────────────── */
div.mbsc-card.mbsc-card {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: var(--mbsc-card-w) !important;
    max-width: 100% !important;
    background: var(--mbsc-card-bg) !important;
    border-radius: var(--mbsc-card-radius) !important;
    box-shadow: var(--mbsc-card-shadow) !important;
    overflow: hidden !important;
    cursor: grab;
    touch-action: pan-y;
    will-change: transform, opacity;
    transition: box-shadow 0.3s ease;
    transform-origin: center bottom;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

div.mbsc-card.mbsc-card:active { cursor: grabbing; }

div.mbsc-card[data-stack="1"] {
    transform: scale(0.95) translateY(12px) !important;
    opacity: 0.7 !important;
    pointer-events: none !important;
}
div.mbsc-card[data-stack="2"] {
    transform: scale(0.90) translateY(24px) !important;
    opacity: 0.4 !important;
    pointer-events: none !important;
}
div.mbsc-card[data-stack="hidden"] {
    transform: scale(0.85) translateY(36px) !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ── IMAGE ──────────────────────────────────────────────────── */
div.mbsc-card .mbsc-card__image {
    width: 100% !important;
    height: var(--mbsc-img-h) !important;
    overflow: hidden !important;
    background: #d4cfc8 !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    display: block !important;
    position: relative !important;
}

div.mbsc-card .mbsc-card__image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.5s ease;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
}

div.mbsc-card:hover .mbsc-card__image img { transform: scale(1.03); }

div.mbsc-card .mbsc-card__image-placeholder {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

div.mbsc-card .mbsc-card__image-placeholder span {
    font-family: var(--mbsc-font) !important;
    font-size: 72px !important;
    font-weight: 700 !important;
    color: rgba(255, 255, 255, 0.8) !important;
    text-transform: uppercase !important;
}

/* ── BODY ───────────────────────────────────────────────────── */
div.mbsc-card .mbsc-card__body {
    padding: 12px 20px 18px !important;
    margin: 0 !important;
    background: var(--mbsc-card-bg) !important;
}

/* ── NAME ───────────────────────────────────────────────────── */
div.mbsc-card h3.mbsc-card__name,
div.mbsc-card .mbsc-card__name {
    font-family: var(--mbsc-font) !important;
    font-size: 21px !important;
    font-weight: 700 !important;
    color: var(--mbsc-text-primary) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
    margin: 0 0 2px 0 !important;
    padding: 0 !important;
    text-align: center !important;
    text-transform: none !important;
    border: none !important;
    background: none !important;
}

/* ── META ───────────────────────────────────────────────────── */
div.mbsc-card .mbsc-card__meta {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    font-family: var(--mbsc-font) !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: var(--mbsc-text-secondary) !important;
    margin: 0 0 2px 0 !important;
    padding: 0 !important;
}

/* ── BIO ────────────────────────────────────────────────────── */
div.mbsc-card p.mbsc-card__bio,
div.mbsc-card .mbsc-card__bio {
    font-family: var(--mbsc-font) !important;
    font-size: 12px !important;
    color: var(--mbsc-text-secondary) !important;
    line-height: 1.4 !important;
    text-align: center !important;
    font-style: italic !important;
    margin: 0 0 6px 0 !important;
    padding: 0 4px !important;
    border: none !important;
}

/* ── DETAILS GRID ───────────────────────────────────────────── */
div.mbsc-card .mbsc-card__details-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    margin: 0 0 10px 0 !important;
    padding: 8px 0 0 0 !important;
    border-top: 1px solid var(--mbsc-border) !important;
}

div.mbsc-card .mbsc-card__detail-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 12px !important;
    background: #f8f9fc !important;
    border-radius: 8px !important;
    border: 1px solid var(--mbsc-border) !important;
    margin: 0 !important;
    transition: background 0.2s ease;
}

div.mbsc-card .mbsc-card__detail-item:hover { background: #f1f3f9 !important; }

div.mbsc-card .mbsc-card__detail-label {
    font-family: var(--mbsc-font) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--mbsc-text-secondary) !important;
    margin: 0 !important;
    padding: 0 !important;
}

div.mbsc-card .mbsc-card__detail-value {
    font-family: var(--mbsc-font) !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: var(--mbsc-text-primary) !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: right !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

div.mbsc-card .mbsc-card__stars {
    color: #f59e0b !important;
    letter-spacing: 0.05em !important;
    font-size: 14px !important;
}

div.mbsc-card .mbsc-card__star--empty { color: #e2e6ee !important; }

/* ── ACTIONS / BUTTONS ──────────────────────────────────────── */
div.mbsc-card .mbsc-card__actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
}

div.mbsc-card a.mbsc-card__btn,
div.mbsc-card button.mbsc-card__btn,
div.mbsc-card .mbsc-card__btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 48px !important;
    font-family: var(--mbsc-font) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border: none !important;
    cursor: pointer;
    transition: all 0.25s ease;
    letter-spacing: 0.01em !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
    padding: 0 20px !important;
    margin: 0 !important;
}

div.mbsc-card .mbsc-card__btn--primary {
    background: var(--mbsc-btn1-bg) !important;
    color: var(--mbsc-btn1-text) !important;
    border-radius: var(--mbsc-btn1-radius) !important;
}

div.mbsc-card .mbsc-card__btn--primary:hover {
    filter: brightness(1.15);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}

div.mbsc-card .mbsc-card__btn--secondary {
    background: var(--mbsc-btn2-bg) !important;
    color: var(--mbsc-btn2-text) !important;
    border-radius: var(--mbsc-btn2-radius) !important;
}

div.mbsc-card .mbsc-card__btn--secondary:hover {
    filter: brightness(0.95);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

/* ── SWIPE HINTS ────────────────────────────────────────────── */
div.mbsc-card .mbsc-card__swipe-hint {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.15s ease;
    z-index: 10 !important;
}

div.mbsc-card .mbsc-card__swipe-hint--left {
    left: 16px !important;
    background: rgba(255, 71, 87, 0.15) !important;
    color: var(--mbsc-swipe-left) !important;
    border: 2px solid var(--mbsc-swipe-left) !important;
}

div.mbsc-card .mbsc-card__swipe-hint--right {
    right: 16px !important;
    background: rgba(46, 213, 115, 0.15) !important;
    color: var(--mbsc-swipe-right) !important;
    border: 2px solid var(--mbsc-swipe-right) !important;
}

/* ── CONTROLS (Overlay Mode — dentro de la foto, ~60% de la altura) ── */
div.mbsc-swipe-wrapper .mbsc-controls {
    position: absolute !important;
    top: calc(40px + var(--mbsc-img-h) - 130px) !important;
    left: calc(50% - (var(--mbsc-card-w) / 2) + 18px) !important;
    right: calc(50% - (var(--mbsc-card-w) / 2) + 18px) !important;
    display: flex !important;
    justify-content: space-between !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 200 !important;
    pointer-events: none !important;
}

div.mbsc-swipe-wrapper button.mbsc-ctrl {
    pointer-events: auto !important;
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    border: 2px solid var(--mbsc-border) !important;
    background: var(--mbsc-card-bg) !important;
    font-size: 20px !important;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15) !important;
    padding: 0 !important;
    line-height: 1 !important;
    aspect-ratio: 1 / 1 !important;
    flex-shrink: 0 !important;
}

div.mbsc-swipe-wrapper button.mbsc-ctrl svg { display: block; }

div.mbsc-swipe-wrapper button.mbsc-ctrl:hover { transform: scale(1.12); }

div.mbsc-swipe-wrapper button.mbsc-ctrl--reject        { color: var(--mbsc-swipe-left)  !important; }
div.mbsc-swipe-wrapper button.mbsc-ctrl--reject:hover  { border-color: var(--mbsc-swipe-left) !important; }
div.mbsc-swipe-wrapper button.mbsc-ctrl--accept        { color: var(--mbsc-swipe-right) !important; }
div.mbsc-swipe-wrapper button.mbsc-ctrl--accept:hover  { border-color: var(--mbsc-swipe-right) !important; }

/* ── COUNTER ────────────────────────────────────────────────── */
div.mbsc-swipe-wrapper .mbsc-counter {
    margin-top: 16px !important;
    font-family: var(--mbsc-font) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--mbsc-text-secondary) !important;
}

/* ── SWIPE ANIMATIONS ───────────────────────────────────────── */
div.mbsc-card.mbsc-card--swiping-left  { animation: mbscSwipeOutLeft  0.45s ease forwards !important; }
div.mbsc-card.mbsc-card--swiping-right { animation: mbscSwipeOutRight 0.45s ease forwards !important; }

@keyframes mbscSwipeOutLeft {
    0%   { transform: translateX(0)      rotate(0);     opacity: 1; }
    100% { transform: translateX(-150%)  rotate(-18deg); opacity: 0; }
}

@keyframes mbscSwipeOutRight {
    0%   { transform: translateX(0)     rotate(0);     opacity: 1; }
    100% { transform: translateX(150%)  rotate(18deg); opacity: 0; }
}

/* ── FILTER PILLS ───────────────────────────────────────────── */
div.mbsc-swipe-wrapper .mbsc-filters {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
    margin: 0 0 28px 0 !important;
    padding: 0 10px !important;
    max-width: 500px !important;
}

div.mbsc-swipe-wrapper button.mbsc-filter-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 8px 18px !important;
    border-radius: 50px !important;
    border: 1.5px solid var(--mbsc-border) !important;
    background: var(--mbsc-card-bg) !important;
    font-family: var(--mbsc-font) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--mbsc-text-secondary) !important;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
    line-height: 1.4 !important;
    margin: 0 !important;
}

div.mbsc-swipe-wrapper button.mbsc-filter-pill:hover {
    border-color: #c5c9d4 !important;
    color: var(--mbsc-text-primary) !important;
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08) !important;
}

div.mbsc-swipe-wrapper button.mbsc-filter-pill--active {
    background: var(--mbsc-btn1-bg) !important;
    color: var(--mbsc-btn1-text) !important;
    border-color: var(--mbsc-btn1-bg) !important;
    box-shadow: 0 3px 12px rgba(26, 26, 46, 0.2) !important;
}

div.mbsc-swipe-wrapper .mbsc-filter-count {
    font-size: 11px !important;
    font-weight: 600 !important;
    opacity: 0.65;
}

div.mbsc-swipe-wrapper .mbsc-filter-count:empty { display: none !important; }

div.mbsc-cards-stack.mbsc-cards-stack--filtering {
    opacity: 0.4 !important;
    transform: scale(0.97) !important;
    transition: all 0.2s ease;
}

div.mbsc-cards-stack.mbsc-cards-stack--filtered {
    opacity: 1 !important;
    transform: scale(1) !important;
    transition: all 0.3s ease;
}

/* ── EMPTY STATE ────────────────────────────────────────────── */
p.mbsc-empty {
    font-family: var(--mbsc-font) !important;
    text-align: center !important;
    color: var(--mbsc-text-secondary) !important;
    font-size: 15px !important;
    padding: 60px 20px !important;
}

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 400px) {
    div.mbsc-swipe-wrapper.mbsc-swipe-wrapper {
        --mbsc-card-w: calc(100vw - 40px);
    }
    div.mbsc-card .mbsc-card__body { padding: 18px 18px 20px !important; }
    div.mbsc-card h3.mbsc-card__name { font-size: 18px !important; }
}