:root {
    --ink: #17231f;
    --muted: #66736e;
    --surface: #ffffff;
    --canvas: #f3f6f4;
    --line: #dfe6e2;
    --brand: #176b4d;
    --brand-dark: #0f4f39;
    --brand-soft: #e8f3ee;
    --warning-soft: #fff4db;
    --danger-soft: #fdecec;
    --shadow: 0 18px 55px rgba(23, 35, 31, .08);
}

* { box-sizing: border-box; }
body {
    min-height: 100vh;
    margin: 0;
    color: var(--ink);
    background:
        radial-gradient(circle at top left, rgba(23, 107, 77, .08), transparent 28rem),
        var(--canvas);
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button, input, textarea, select { font: inherit; }

.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(145deg, var(--brand), var(--brand-dark));
    box-shadow: 0 10px 24px rgba(23, 107, 77, .22);
}

.brand-letter {
    display: block;
    font-size: 1.18rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.08em;
    transform: translateX(-.02em);
}

.login-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
}

.login-card {
    width: min(100%, 440px);
    padding: 34px;
    border: 1px solid rgba(255,255,255,.75);
    border-radius: 28px;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(16px);
    box-shadow: var(--shadow);
}

.login-card h1 { letter-spacing: -.04em; }

.app-shell { min-height: 100vh; }
.app-header {
    position: sticky;
    top: 0;
    z-index: 1020;
    border-bottom: 1px solid rgba(223, 230, 226, .9);
    background: rgba(243, 246, 244, .88);
    backdrop-filter: blur(18px);
}
.header-inner {
    max-width: 1420px;
    margin: 0 auto;
    padding: 15px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}
.header-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.header-brand strong { display: block; font-size: 1.05rem; line-height: 1.1; }
.header-brand small { color: var(--muted); }
.header-actions { display: flex; align-items: center; gap: 9px; }

.app-main {
    max-width: 1420px;
    margin: 0 auto;
    padding: 28px 24px 60px;
}

.page-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
}
.page-heading h1 { margin: 0 0 5px; font-size: clamp(1.7rem, 3vw, 2.35rem); letter-spacing: -.045em; }
.page-heading p { margin: 0; color: var(--muted); }

.nav-pills-soft {
    display: inline-flex;
    gap: 5px;
    padding: 5px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255,255,255,.72);
}
.nav-pills-soft button {
    border: 0;
    border-radius: 10px;
    padding: 8px 14px;
    color: var(--muted);
    background: transparent;
    font-weight: 650;
}
.nav-pills-soft button.active { color: var(--ink); background: #fff; box-shadow: 0 4px 12px rgba(23,35,31,.08); }

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}
.stat-card {
    min-height: 116px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: rgba(255,255,255,.85);
    box-shadow: 0 10px 30px rgba(23,35,31,.035);
}
.stat-card .stat-label { color: var(--muted); font-size: .84rem; font-weight: 650; }
.stat-card .stat-value { margin-top: 10px; font-size: 2rem; line-height: 1; font-weight: 750; letter-spacing: -.05em; }
.stat-card .stat-note { margin-top: 8px; color: var(--muted); font-size: .78rem; }

.surface {
    border: 1px solid var(--line);
    border-radius: 22px;
    background: rgba(255,255,255,.9);
    box-shadow: 0 12px 36px rgba(23,35,31,.045);
    overflow: hidden;
}
.surface-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--line);
}
.toolbar-controls { display: flex; gap: 9px; flex-wrap: wrap; }
.toolbar-controls .form-control,
.toolbar-controls .form-select { min-height: 42px; border-radius: 12px; border-color: var(--line); }
.search-wrap { position: relative; min-width: min(320px, 100%); }
.search-wrap i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: #87938e; }
.search-wrap input { padding-left: 38px; }

.table { --bs-table-bg: transparent; }
.table > :not(caption) > * > * { padding: 15px 18px; border-bottom-color: var(--line); }
.table thead th { color: var(--muted); font-size: .74rem; font-weight: 750; text-transform: uppercase; letter-spacing: .055em; white-space: nowrap; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background .16s ease; }
.table tbody tr:hover { background: rgba(232,243,238,.45); }
.request-title { font-weight: 700; }
.request-meta { margin-top: 3px; color: var(--muted); font-size: .79rem; }

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 750;
    white-space: nowrap;
}
.status-badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .65; }
.status-sent, .status-draft { color: #735c19; background: var(--warning-soft); }
.status-opened, .status-started { color: #345c8a; background: #eaf2fb; }
.status-completed { color: var(--brand); background: var(--brand-soft); }
.status-expired, .status-cancelled { color: #8b4b4b; background: var(--danger-soft); }

.btn { border-radius: 12px; font-weight: 680; }
.btn-brand { color: #fff; background: var(--brand); border-color: var(--brand); }
.btn-brand:hover, .btn-brand:focus { color: #fff; background: var(--brand-dark); border-color: var(--brand-dark); }
.btn-soft { color: var(--brand-dark); background: var(--brand-soft); border-color: transparent; }
.btn-soft:hover { color: var(--brand-dark); background: #d9ece3; }
.btn-icon { width: 38px; height: 38px; padding: 0; display: inline-grid; place-items: center; }

.template-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
}
.template-card {
    display: flex;
    flex-direction: column;
    min-height: 230px;
    padding: 19px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: rgba(255,255,255,.9);
    box-shadow: 0 10px 30px rgba(23,35,31,.04);
}
.template-card.inactive { opacity: .62; }
.template-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: var(--brand-dark);
    background: var(--brand-soft);
    font-size: 1.1rem;
}
.template-card h3 { margin: 15px 0 6px; font-size: 1.02rem; }
.template-card p { color: var(--muted); font-size: .86rem; flex: 1; }
.template-meta { display: flex; gap: 12px; color: var(--muted); font-size: .76rem; }
.template-actions { display: flex; gap: 8px; margin-top: 16px; }

.empty-state { padding: 60px 24px; text-align: center; color: var(--muted); }
.empty-state i { display: block; margin-bottom: 12px; font-size: 2.2rem; color: #9aaaa3; }

.modal-content { border: 0; border-radius: 24px; box-shadow: var(--shadow); overflow: hidden; }
.modal-header, .modal-footer { border-color: var(--line); padding: 18px 22px; }
.modal-body { padding: 22px; }
.form-label { font-size: .82rem; font-weight: 720; color: #405049; }
.form-control, .form-select { border-color: #d7e0dc; border-radius: 12px; min-height: 44px; }
.form-control:focus, .form-select:focus { border-color: rgba(23,107,77,.55); box-shadow: 0 0 0 .22rem rgba(23,107,77,.11); }
textarea.form-control { min-height: 100px; }

.template-preview {
    padding: 14px;
    border: 1px dashed #c9d8d1;
    border-radius: 14px;
    background: #f8faf9;
}
.template-preview-title { font-size: .75rem; font-weight: 750; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.template-preview-fields { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.field-chip { padding: 5px 8px; border-radius: 8px; background: #fff; border: 1px solid var(--line); font-size: .75rem; color: #485650; }

.builder-list { display: grid; gap: 10px; }
.builder-field {
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fafcfb;
}
.builder-main { display: grid; grid-template-columns: minmax(180px, 1fr) 150px auto auto; gap: 9px; align-items: center; }
.builder-extra { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 10px; }
.builder-file-options, .builder-select-options { margin-top: 10px; }
.drag-handle { color: #9aa7a1; cursor: grab; }

.detail-hero {
    margin: -22px -22px 22px;
    padding: 24px 22px;
    background: linear-gradient(135deg, #f1f8f5, #fff);
    border-bottom: 1px solid var(--line);
}
.detail-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, .6fr); gap: 18px; }
.detail-section { padding: 17px; border: 1px solid var(--line); border-radius: 17px; background: #fff; }
.detail-section h3 { margin: 0 0 14px; font-size: .92rem; }
.answer-row { padding: 11px 0; border-bottom: 1px solid #edf1ef; }
.answer-row:last-child { border-bottom: 0; }
.answer-label { color: var(--muted); font-size: .75rem; font-weight: 700; }
.answer-value { margin-top: 4px; white-space: pre-wrap; overflow-wrap: anywhere; }
.meta-list { display: grid; gap: 12px; }
.meta-item span { display: block; color: var(--muted); font-size: .74rem; }
.meta-item strong { display: block; margin-top: 2px; font-size: .87rem; overflow-wrap: anywhere; }
.file-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 11px; }
.file-card { position: relative; min-width: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #f8faf9; }
.file-card img { width: 100%; height: 150px; object-fit: cover; display: block; background: #edf2ef; }
.file-placeholder { height: 120px; display: grid; place-items: center; font-size: 2rem; color: #7d8d86; }
.file-info { padding: 10px; }
.file-name { font-size: .78rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-actions { display: flex; gap: 6px; margin-top: 8px; }

.copy-group { display: flex; gap: 7px; }
.copy-group input { min-width: 0; }

.toast-container { z-index: 2000; }

@media (max-width: 1050px) {
    .template-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .detail-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    .header-inner, .app-main { padding-left: 14px; padding-right: 14px; }
    .header-brand small { display: none; }
    .header-actions .user-label { display: none; }
    .page-heading { align-items: stretch; flex-direction: column; }
    .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stat-card { min-height: 104px; }
    .surface-toolbar { align-items: stretch; flex-direction: column; }
    .toolbar-controls { width: 100%; }
    .toolbar-controls > * { flex: 1 1 160px; }
    .search-wrap { min-width: 100%; }
    .template-grid { grid-template-columns: 1fr; }
    .builder-main { grid-template-columns: 1fr 130px auto; }
    .builder-main .drag-handle { display: none; }
    .builder-extra { grid-template-columns: 1fr; }
    .file-grid { grid-template-columns: 1fr; }
    .table-responsive { overflow: visible; }
    .requests-table thead { display: none; }
    .requests-table, .requests-table tbody, .requests-table tr, .requests-table td { display: block; width: 100%; }
    .requests-table tbody { padding: 8px; display: grid; gap: 8px; }
    .requests-table tr { padding: 14px; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
    .requests-table td { padding: 4px 0 !important; border: 0 !important; }
    .requests-table td[data-label]::before { content: attr(data-label); color: var(--muted); font-size: .7rem; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; display: block; margin-bottom: 2px; }
    .requests-table td:first-child::before, .requests-table td:last-child::before { display: none; }
    .requests-table td:last-child { padding-top: 10px !important; }
}

/* Organization users */
.role-badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 750;
    white-space: nowrap;
}
.role-admin { background: #e9f7f0; color: #126145; }
.role-user { background: #f1f3f5; color: #4d5964; }
.opacity-60 { opacity: .62; }
.users-table td:last-child { min-width: 190px; }

/* Template builder modal: keep header/footer visible and scroll only the content. */
#templateModal .template-modal-dialog {
    --bs-modal-margin: 1.25rem;
}

#templateModal .modal-content {
    min-height: 0;
}

#templateModal .modal-body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

#templateModal .modal-header,
#templateModal .modal-footer {
    flex: 0 0 auto;
    background: #fff;
    position: relative;
    z-index: 2;
}

@media (max-width: 767.98px) {
    #templateModal .modal-content {
        border-radius: 0;
    }

    #templateModal .modal-header,
    #templateModal .modal-footer {
        padding: 14px 16px;
    }

    #templateModal .modal-body {
        padding: 16px;
    }

    #templateModal .modal-footer {
        flex-wrap: nowrap;
    }

    #templateModal .modal-footer .btn {
        flex: 1 1 0;
    }
}

/* Prefilled request information */
.field-chip-sender {
    color: #0f5d43;
    border-color: #b9d9ca;
    background: #edf7f2;
}
.prefill-editor {
    padding: 17px;
    border: 1px solid #cfe0d8;
    border-radius: 17px;
    background: linear-gradient(145deg, #f2f9f6, #fbfdfc);
}
.prefill-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: var(--brand);
    background: #deefe7;
}
.template-meta { flex-wrap: wrap; }
.builder-extra { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(170px, .6fr); align-items: end; }

@media (max-width: 760px) {
    .builder-extra { grid-template-columns: 1fr; }
    .prefill-editor { padding: 14px; }
}

/* Dokflow v8: abonnement og månedsgrense */
.subscription-panel {
    display: grid;
    grid-template-columns: minmax(230px, .85fr) minmax(320px, 1.15fr);
    gap: 28px;
    align-items: center;
    margin-bottom: 18px;
    padding: 20px 22px;
    border: 1px solid #cfe0d8;
    border-radius: 20px;
    background: linear-gradient(135deg, #f8fcfa, #edf6f1);
    box-shadow: 0 10px 32px rgba(23, 107, 77, .05);
}
.subscription-eyebrow {
    margin-bottom: 5px;
    color: var(--brand);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.subscription-title { font-size: 1.18rem; font-weight: 800; color: var(--ink); }
.subscription-summary { margin-top: 3px; color: var(--muted); font-size: .84rem; }
.subscription-progress-head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 8px;
    color: var(--muted);
    font-size: .76rem;
    font-weight: 650;
}
.subscription-panel .progress { height: 10px; border-radius: 999px; background: rgba(23, 107, 77, .12); }
.subscription-panel .progress-bar { border-radius: 999px; background: var(--brand); transition: width .25s ease; }
.subscription-panel.subscription-warning { border-color: #ead49a; background: linear-gradient(135deg, #fffdf7, #fff6df); }
.subscription-panel.subscription-warning .subscription-eyebrow { color: #946814; }
.subscription-panel.subscription-warning .progress { background: rgba(185, 129, 24, .14); }
.subscription-panel.subscription-warning .progress-bar { background: #b98118; }
.subscription-panel.subscription-exhausted { border-color: #efc2c2; background: linear-gradient(135deg, #fffafa, #fdeeee); }
.subscription-panel.subscription-exhausted .subscription-eyebrow { color: #a33d3d; }
.subscription-panel.subscription-exhausted .progress { background: rgba(173, 57, 57, .13); }
.subscription-panel.subscription-exhausted .progress-bar { background: #b44242; }

@media (max-width: 780px) {
    .subscription-panel { grid-template-columns: 1fr; gap: 15px; padding: 17px; }
    .subscription-progress-head { flex-wrap: wrap; }
}

/* Dokflow v9: mobile scrolling for new request and narrower template cards. */
#newRequestModal .request-modal-dialog {
    --bs-modal-margin: 1.25rem;
}

#newRequestModal .modal-content {
    min-height: 0;
}

#newRequestModal .modal-body {
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
}

#newRequestModal .modal-header,
#newRequestModal .modal-footer {
    flex: 0 0 auto;
    position: relative;
    z-index: 2;
    background: #fff;
}

#templatesView,
.template-grid,
.template-card,
.template-card > * {
    min-width: 0;
}

.template-grid {
    width: 100%;
    max-width: 100%;
}

.template-card {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.template-card h3,
.template-card p,
.template-meta span {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.template-actions {
    min-width: 0;
    width: 100%;
}

.template-actions .btn {
    min-width: 0;
}

@media (max-width: 767.98px) {
    #newRequestModal .modal-content {
        height: 100%;
        max-height: 100%;
        border-radius: 0;
    }

    #newRequestModal .modal-header,
    #newRequestModal .modal-footer {
        padding: 14px 16px;
    }

    #newRequestModal .modal-body {
        padding: 16px;
    }

    #newRequestModal .modal-footer {
        flex-wrap: nowrap;
    }

    #newRequestModal .modal-footer .btn {
        flex: 1 1 0;
        min-width: 0;
    }

    .templates-toolbar {
        align-items: stretch !important;
        flex-direction: column;
    }

    .templates-toolbar .btn {
        width: 100%;
    }

    .template-grid {
        gap: 11px;
    }

    .template-card {
        min-height: 0;
        padding: 15px;
        border-radius: 17px;
    }

    .template-card h3 {
        margin-top: 12px;
    }

    .template-meta {
        gap: 7px 10px;
        font-size: .72rem;
    }

    .template-actions {
        gap: 7px;
        margin-top: 13px;
    }

    .template-actions .btn-icon {
        flex: 0 0 40px;
        width: 40px;
    }
}

/* Dokflow v11: offentlig onboarding */
.login-links { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin-top:20px; color:var(--muted); font-size:.78rem; }
.login-links a { color:var(--brand); text-decoration:none; font-weight:680; }
.login-links a:hover { text-decoration:underline; }

/* v12 extra request ordering */
.extra-bundles-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.extra-bundle-choice { position: relative; display: block; cursor: pointer; }
.extra-bundle-choice input { position: absolute; opacity: 0; pointer-events: none; }
.extra-bundle-card { height: 100%; padding: 18px; border: 1px solid var(--border); border-radius: 16px; background: #fff; transition: .18s ease; }
.extra-bundle-choice input:checked + .extra-bundle-card { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(23,107,77,.11); background: #f7fcfa; }
.extra-bundle-card.featured::before { content: 'Best verdi'; display: inline-flex; margin-bottom: 10px; padding: 4px 8px; border-radius: 999px; background: rgba(23,107,77,.1); color: var(--brand); font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.extra-bundle-card h3 { margin: 0 0 5px; font-size: 1rem; font-weight: 800; color: var(--ink); }
.extra-bundle-card p { min-height: 38px; margin: 0 0 12px; color: var(--muted); font-size: .78rem; }
.extra-bundle-price { display: flex; justify-content: space-between; align-items: end; gap: 10px; }
.extra-bundle-price strong { font-size: 1.35rem; color: var(--ink); }
.extra-bundle-price span { color: var(--muted); font-size: .72rem; text-align: right; }
.extra-orders-list { margin-top: 20px; }
.extra-orders-list:empty { display: none; }
.extra-order-history-title { margin: 0 0 9px; font-size: .78rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.extra-order-history-item { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; border-top: 1px solid var(--border); font-size: .78rem; }
.extra-order-history-item strong { display: block; color: var(--ink); }
.extra-order-history-item span { color: var(--muted); }
@media (max-width: 680px) {
    .extra-bundles-grid { grid-template-columns: 1fr; }
    #orderExtraButton { width: 100%; }
}

/* =========================================================
   Dokflow – modal for ekstra forespørsler
   ========================================================= */

#extraRequestsModal .modal-dialog,
#extraRequestModal .modal-dialog,
.extra-requests-modal .modal-dialog {
    width: calc(100% - 2rem);
    max-width: 760px;
    margin: 1rem auto;
}

#extraRequestsModal .modal-content,
#extraRequestModal .modal-content,
.extra-requests-modal .modal-content {
    max-height: calc(100vh - 2rem);
    overflow: hidden;
    border: 0;
    border-radius: 18px;
}

#extraRequestsModal .modal-header,
#extraRequestModal .modal-header,
.extra-requests-modal .modal-header {
    flex: 0 0 auto;
    padding: 1.25rem 1.4rem 1rem;
}

#extraRequestsModal .modal-body,
#extraRequestModal .modal-body,
.extra-requests-modal .modal-body {
    min-width: 0;
    padding: 1.25rem 1.4rem;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

#extraRequestsModal .modal-footer,
#extraRequestModal .modal-footer,
.extra-requests-modal .modal-footer {
    flex: 0 0 auto;
    padding: 1rem 1.4rem;
}

/* Forklaringsteksten øverst */
#extraRequestsModal .modal-body > p,
#extraRequestModal .modal-body > p,
.extra-requests-modal .modal-body > p {
    max-width: 100%;
    margin-bottom: 1.25rem;
    overflow-wrap: anywhere;
    line-height: 1.55;
}

/* Støtter flere mulige navn fra tidligere versjoner */
.extra-request-bundles,
.extra-bundle-grid,
#extraRequestBundles,
#extraRequestsBundles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    width: 100%;
    min-width: 0;
}

/* Selve pakkekortet */
.extra-request-card,
.extra-bundle-card,
[data-bundle-key],
[data-extra-bundle] {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 1.15rem;
    overflow: hidden;

    border: 1px solid #dfe7e3;
    border-radius: 14px;
    background: #fff;
}

/* Hindrer flex-elementer fra å presse kortet bredere */
.extra-request-card *,
.extra-bundle-card *,
[data-bundle-key] *,
[data-extra-bundle] * {
    box-sizing: border-box;
    min-width: 0;
}

/* Overskrift og beskrivelse */
.extra-request-card h3,
.extra-request-card h4,
.extra-request-card h5,
.extra-request-card .title,
.extra-request-card .bundle-title,
.extra-bundle-card h3,
.extra-bundle-card h4,
.extra-bundle-card h5,
.extra-bundle-card .title,
.extra-bundle-card .bundle-title,
[data-bundle-key] h3,
[data-bundle-key] h4,
[data-bundle-key] h5 {
    max-width: 100%;
    margin-top: 0;
    overflow-wrap: anywhere;
    word-break: normal;
    line-height: 1.25;
}

.extra-request-card p,
.extra-request-card .description,
.extra-request-card .bundle-description,
.extra-bundle-card p,
.extra-bundle-card .description,
.extra-bundle-card .bundle-description,
[data-bundle-key] p,
[data-extra-bundle] p {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
    line-height: 1.45;
}

/* Bootstrap flex-rader inne i kortet må kunne brytes */
#extraRequestsModal .extra-request-card .d-flex,
#extraRequestModal .extra-request-card .d-flex,
.extra-requests-modal .extra-request-card .d-flex,
#extraRequestsModal .extra-bundle-card .d-flex,
#extraRequestModal .extra-bundle-card .d-flex {
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
}

/* Prisområdet */
.extra-request-price,
.extra-bundle-price,
.bundle-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.4rem;
    max-width: 100%;
    margin-top: auto;
    padding-top: 1rem;
}

.extra-request-price strong,
.extra-bundle-price strong,
.bundle-price strong {
    white-space: nowrap;
    font-size: 1.35rem;
    line-height: 1.1;
}

.extra-request-price small,
.extra-bundle-price small,
.bundle-price small {
    white-space: normal;
}

/* Valgknapper */
.extra-request-card button,
.extra-request-card .btn,
.extra-bundle-card button,
.extra-bundle-card .btn,
[data-bundle-key] button,
[data-bundle-key] .btn {
    width: 100%;
    max-width: 100%;
    margin-top: 1rem;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Mobil */
@media (max-width: 767.98px) {
    #extraRequestsModal,
    #extraRequestModal,
    .extra-requests-modal {
        padding: 0 !important;
    }

    #extraRequestsModal .modal-dialog,
    #extraRequestModal .modal-dialog,
    .extra-requests-modal .modal-dialog {
        width: 100%;
        max-width: none;
        min-height: 100%;
        margin: 0;
    }

    #extraRequestsModal .modal-content,
    #extraRequestModal .modal-content,
    .extra-requests-modal .modal-content {
        min-height: 100vh;
        min-height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
    }

    #extraRequestsModal .modal-header,
    #extraRequestModal .modal-header,
    .extra-requests-modal .modal-header {
        padding: 1rem;
    }

    #extraRequestsModal .modal-body,
    #extraRequestModal .modal-body,
    .extra-requests-modal .modal-body {
        padding: 1rem;
    }

    #extraRequestsModal .modal-footer,
    #extraRequestModal .modal-footer,
    .extra-requests-modal .modal-footer {
        padding: 0.85rem 1rem;
    }

    .extra-request-bundles,
    .extra-bundle-grid,
    #extraRequestBundles,
    #extraRequestsBundles {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.85rem;
    }

    .extra-request-card,
    .extra-bundle-card,
    [data-bundle-key],
    [data-extra-bundle] {
        padding: 1rem;
    }
}