/* ═══════════════════════════════════════════
   MTJ Price Card — Custom Pricing Card Component
   /flatsome-child/assets/css/mtj-price-card.css
   ═══════════════════════════════════════════ */

/* ─── CSS Custom Properties ─── */
:root {
    --mtj-card-bg:             hsl(0, 0%, 100%);
    --mtj-card-fg:             hsl(200, 25%, 15%);
    --mtj-card-border:         hsl(40, 20%, 88%);
    --mtj-card-muted:          hsl(200, 10%, 45%);
    --mtj-card-primary:        hsl(172, 50%, 28%);
    --mtj-card-primary-fg:     hsl(0, 0%, 100%);
    --mtj-card-primary-light:  hsla(172, 50%, 28%, 0.1);
    --mtj-card-secondary-bg:   hsl(35, 30%, 94%);
    --mtj-card-secondary-fg:   hsl(200, 25%, 20%);
    --mtj-card-trust-green:    hsl(158, 65%, 29%);
    --mtj-card-trust-light:    hsl(158, 40%, 95%);
    --mtj-card-shadow:         0 4px 20px -2px hsl(200 25% 15% / 0.08);
    --mtj-card-shadow-hover:   0 12px 40px -4px hsl(200 25% 15% / 0.15);
    --mtj-card-shadow-md:      0 4px 6px -1px hsl(200 25% 15% / 0.08),
                               0 2px 4px -2px hsl(200 25% 15% / 0.05);
    --mtj-card-shadow-lg:      0 10px 25px -3px hsl(200 25% 15% / 0.10),
                               0 4px 6px -4px hsl(200 25% 15% / 0.05);
    --mtj-card-radius:         1rem;
}

/* ─── Card Container ─── */
.mtj-price-card {
    background: var(--mtj-card-bg);
    border-radius: var(--mtj-card-radius);
    padding: 1.5rem;
    border: 1px solid var(--mtj-card-border);
    box-shadow: var(--mtj-card-shadow);
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.mtj-price-card:hover {
    box-shadow: var(--mtj-card-shadow-hover);
    transform: translateY(-2px);
}

/* ─── Header (Icon + Titles) ─── */
.mtj-price-card__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.mtj-price-card__icon {
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem;
    border-radius: 0.75rem;
    background: var(--mtj-card-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mtj-card-primary);
    flex-shrink: 0;
}

.mtj-price-card__icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.mtj-price-card__titles {
    min-width: 0;
}

.mtj-price-card__title {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-weight: 700;
    color: var(--mtj-card-fg);
    font-size: 0.9375rem;
    line-height: 1.3;
    margin: 0 !important;
    padding: 0;
}

.mtj-price-card__subtitle {
    font-size: 0.8125rem;
    color: var(--mtj-card-muted);
    margin: 0.125rem 0 0 !important;
    padding: 0;
    line-height: 1.4;
}

/* ─── Detail List ─── */
.mtj-price-card__details {
    list-style: none !important;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0 0 1.5rem !important;
    padding: 0 !important;
    flex: 1;
}

.mtj-price-card__detail {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--mtj-card-fg);
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.mtj-price-card__detail::before {
    content: none !important;
}

.mtj-price-card__detail svg {
    width: 1rem;
    height: 1rem;
    min-width: 1rem;
    color: var(--mtj-card-primary);
    flex-shrink: 0;
}

.mtj-price-card__detail span {
    line-height: 1.4;
}

/* ─── Footer ─── */
.mtj-price-card__footer {
    padding-top: 1rem;
    border-top: 1px solid var(--mtj-card-border);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Price block */
.mtj-price-card__price-block {
    display: flex;
    flex-direction: column;
}

.mtj-price-card__price-label {
    font-size: 0.75rem;
    color: var(--mtj-card-muted);
    margin: 0 0 0.125rem !important;
    padding: 0;
}

.mtj-price-card__price {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
}

.mtj-price-card__price-amount {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--mtj-card-fg);
    line-height: 1.2;
}

.mtj-price-card__price-unit {
    font-size: 0.875rem;
    color: var(--mtj-card-muted);
}

/* Analyses line */
.mtj-price-card__analyses {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--mtj-card-fg);
}

.mtj-price-card__analyses svg {
    width: 1rem;
    height: 1rem;
    min-width: 1rem;
    color: var(--mtj-card-primary);
    flex-shrink: 0;
}

.mtj-price-card__analyses strong {
    font-weight: 700;
}

/* Note */
.mtj-price-card__note {
    font-size: 0.75rem;
    color: var(--mtj-card-muted);
    margin: 0 !important;
    padding: 0;
    line-height: 1.5;
}

/* ─── Button ─── */
.mtj-price-card__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    white-space: nowrap;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    transition: all 0.2s;
    cursor: pointer;
    border: none;
    text-decoration: none;
    text-align: center;
}

.mtj-price-card__btn:focus-visible {
    outline: 2px solid var(--mtj-card-primary);
    outline-offset: 2px;
}

.mtj-price-card__btn--primary {
    background: var(--mtj-card-primary);
    color: var(--mtj-card-primary-fg);
    box-shadow: var(--mtj-card-shadow-md);
}

.mtj-price-card__btn--primary:hover {
    background: hsl(172, 50%, 24%);
    box-shadow: var(--mtj-card-shadow-lg);
    color: var(--mtj-card-primary-fg);
    text-decoration: none;
}

.mtj-price-card__btn--secondary {
    background: var(--mtj-card-secondary-bg);
    color: var(--mtj-card-secondary-fg);
    border: 1px solid var(--mtj-card-border);
}

.mtj-price-card__btn--secondary:hover {
    background: hsl(35, 30%, 90%);
    text-decoration: none;
}

/* ─── Animations ─── */
@keyframes mtj-fade-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mtj-price-card.mtj-animate {
    animation: mtj-fade-up 0.6s ease-out forwards;
}

/* ─── Responsive ─── */
@media (min-width: 768px) {
    .mtj-price-card {
        padding: 1.75rem;
    }
}

/* ─── UX Builder Preview Adjustments ─── */
.ux-builder-preview .mtj-price-card {
    min-height: 200px;
}

.ux-builder-preview .mtj-price-card__details:empty::after {
    content: "Tilføj prisdetaljer her...";
    font-size: 0.8125rem;
    color: var(--mtj-card-muted);
    font-style: italic;
    padding: 0.5rem 0;
}