/* ==========================================================================
   CoWorkPlus — formularer, bestillingsflow og kundeportal.
   Bygger oven på tokens.css og components.css fra designsystemet.
   ========================================================================== */

/* hidden-attributten skal vinde over komponenternes display: grid/flex. */
[hidden] { display: none !important; }

.cwp-narrow { max-width: 820px; }
.cwp-mt { margin-top: var(--space-md); }
.cwp-muted { color: var(--muted); }
.cwp-muted-small { color: var(--muted); font-size: var(--step--1); }
.cwp-h { font-size: var(--step-2); margin-bottom: var(--space-xs); }
.cwp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.wppaza-pricing-grid + .wppaza-pricetable-wrap { margin-top: var(--space-xl); }
.cwp-pricing-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); max-width: 820px; margin-inline: auto; }
.cwp-nav-login { opacity: .85; }
.cwp-lang { margin-top: var(--space-sm); }
.cwp-lang a { text-decoration: underline; }

/* --- Felter ---------------------------------------------------------------- */
.cwp-form { display: grid; gap: var(--space-md); }
.cwp-field { display: grid; gap: var(--space-2xs); min-width: 0; }
.cwp-field label, .cwp-label { font-weight: 600; font-size: var(--step--1); color: var(--text); }
.cwp-req { color: var(--accent-dark); }
.cwp-field input[type=text], .cwp-field input[type=email], .cwp-field input[type=tel], .cwp-field input[type=date],
.cwp-field input[type=number], .cwp-field input:not([type]), .cwp-field select, .cwp-field textarea,
.cwp-person textarea {
    width: 100%; font: inherit; font-size: 1rem; color: var(--text);
    background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
    padding: .7rem .85rem; transition: border-color var(--transition), box-shadow var(--transition);
}
.cwp-field select[multiple] { padding: .4rem; }
.cwp-field input:focus, .cwp-field select:focus, .cwp-field textarea:focus, .cwp-person textarea:focus {
    outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft);
}
.cwp-field input[type=file] { font-size: var(--step--1); }
.cwp-hint { color: var(--muted); font-size: var(--step--1); margin: 0; }
.cwp-ok { color: var(--primary-dark); }
.cwp-error { color: #B42318; font-size: var(--step--1); margin: 0; }
.has-error input, .has-error select, .has-error textarea { border-color: #B42318; }
.cwp-check { display: flex; gap: .6rem; align-items: flex-start; font-size: var(--step-0); line-height: 1.45; cursor: pointer; }
.cwp-check input { margin-top: .3rem; accent-color: var(--primary); width: 1.05rem; height: 1.05rem; flex: none; }
.cwp-check a { text-decoration: underline; }

.cwp-grid-2, .cwp-grid-3 { display: grid; gap: var(--space-sm) var(--space-md); }
@media (min-width: 640px) {
    .cwp-grid-2 { grid-template-columns: 1fr 1fr; }
    .cwp-grid-3 { grid-template-columns: 1.4fr 1fr 1fr; }
}

.cwp-fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: var(--space-xs); }
.cwp-fieldset legend { font-weight: 700; font-size: var(--step-0); margin-bottom: var(--space-xs); padding: 0; }
.cwp-choices { display: grid; gap: var(--space-xs); }
.cwp-choices.cwp-inline { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.cwp-choice { display: flex; gap: .6rem; align-items: center; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: .65rem .9rem; background: var(--surface); cursor: pointer; }
.cwp-choice:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }
.cwp-choice input { accent-color: var(--primary); }
.cwp-choice small { display: block; color: var(--muted); }

.cwp-form-actions { display: flex; gap: var(--space-sm); justify-content: space-between; flex-wrap: wrap; }
.cwp-link-button { background: none; border: 0; color: var(--muted); text-decoration: underline; cursor: pointer; font: inherit; font-size: var(--step--1); justify-self: start; padding: 0; }

/* --- Beskeder --------------------------------------------------------------- */
.cwp-notice { border-radius: var(--radius-sm); padding: var(--space-sm) var(--space-md); background: var(--accent-soft); border: 1px solid var(--accent); margin-bottom: var(--space-md); }
.cwp-notice ul { margin: 0; padding-left: 1.2rem; }
.cwp-notice-ok { background: var(--primary-soft); border-color: var(--primary); }
.cwp-notice-error { background: #FEF3F2; border-color: #F04438; color: #7A271A; }

/* --- Bestilling --------------------------------------------------------------- */
.cwp-steps { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); padding: 0; margin: var(--space-md) 0 0; font-size: var(--step--1); color: var(--on-dark-muted); }
.cwp-steps li { display: flex; align-items: center; gap: .45rem; }
.cwp-steps span { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 1px solid currentColor; font-weight: 700; }
.cwp-steps .is-current { color: var(--on-dark); font-weight: 600; }
.cwp-steps .is-current span { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.cwp-steps .is-done { color: var(--on-dark); }

.cwp-plans { display: grid; gap: var(--space-sm); }
@media (min-width: 640px) { .cwp-plans { grid-template-columns: 1fr 1fr; } }
.cwp-plan { position: relative; cursor: pointer; }
.cwp-plan input { position: absolute; opacity: 0; }
.cwp-plan-body { display: grid; gap: .3rem; height: 100%; border: 2px solid var(--border); border-radius: var(--radius); padding: var(--space-md); background: var(--surface); transition: border-color var(--transition), box-shadow var(--transition); }
.cwp-plan input:checked + .cwp-plan-body { border-color: var(--primary); box-shadow: var(--shadow); }
.cwp-plan input:focus-visible + .cwp-plan-body { outline: 3px solid var(--primary-soft); }
.cwp-plan-name { font-family: var(--font-display); font-size: var(--step-2); }
.cwp-plan-price { font-size: var(--step-1); font-weight: 700; color: var(--primary-dark); }
.cwp-plan-body small { color: var(--muted); }
.cwp-plan-body ul { margin: var(--space-xs) 0 0; padding-left: 1.1rem; font-size: var(--step--1); }

.cwp-addon { display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); padding: var(--space-xs) 0; border-bottom: 1px solid var(--border); }
.cwp-addon label { font-weight: 600; }
.cwp-addon small { display: block; font-weight: 400; color: var(--muted); }
.cwp-addon select { width: 5rem; font: inherit; padding: .5rem; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); }
.cwp-addon[hidden] { display: none; }

.cwp-cvr-row { display: flex; gap: var(--space-sm); align-items: flex-end; }
.cwp-cvr-row .cwp-field { flex: 1; }

.cwp-person { border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-md); margin: 0 0 var(--space-md); display: grid; gap: var(--space-sm); background: var(--sand); }
.cwp-person legend { font-weight: 700; padding: 0 .4rem; }

.cwp-summary { display: grid; gap: var(--space-sm); }
.cwp-summary-head { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--border); padding-top: var(--space-sm); }
.cwp-summary-head:first-child { border-top: 0; padding-top: 0; }
.cwp-summary-head a { font-size: var(--step--1); text-decoration: underline; }
.cwp-lines { width: 100%; border-collapse: collapse; }
.cwp-lines td { padding: .45rem 0; border-bottom: 1px solid var(--border); }
.cwp-lines .num { text-align: right; white-space: nowrap; }
.cwp-lines .cwp-sub td { color: var(--muted); font-size: var(--step--1); }
.cwp-lines .cwp-total td { font-weight: 700; font-size: var(--step-1); border-bottom: 0; }
.cwp-dl { display: grid; grid-template-columns: max-content 1fr; gap: .4rem var(--space-md); margin: 0; }
.cwp-dl dt { color: var(--muted); }
.cwp-dl dd { margin: 0; }
@media (max-width: 560px) { .cwp-dl { grid-template-columns: 1fr; } .cwp-dl dd { margin-bottom: .5rem; } }
.cwp-people { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-xs); }
.cwp-people small { color: var(--muted); }
.cwp-tag { display: inline-block; font-size: .75rem; font-weight: 700; padding: .1rem .45rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent-dark); margin-left: .4rem; }
.cwp-quote { font-weight: 700; color: var(--primary-dark); min-height: 1.5em; margin: 0; }

/* --- Kundeportal ------------------------------------------------------------- */
.cwp-portal-grid { display: grid; gap: var(--space-md); }
@media (min-width: 860px) { .cwp-portal-grid { grid-template-columns: 1fr 1fr; } }
.cwp-address { font-style: normal; font-size: var(--step-1); line-height: 1.5; padding: var(--space-sm) var(--space-md); border-left: 4px solid var(--accent); background: var(--sand); border-radius: var(--radius-sm); }
.cwp-table-wrap { overflow-x: auto; }
.cwp-table { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.cwp-table th, .cwp-table td { text-align: left; padding: .55rem .5rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.cwp-table th { color: var(--muted); font-weight: 600; }
.cwp-table a { text-decoration: underline; }
.cwp-doclist { padding-left: 1.1rem; font-size: var(--step--1); }
.cwp-invoice { margin: 0 0 .4rem; font-size: var(--step--1); }
.cwp-invoice a { text-decoration: underline; }

/* --- Tekstsider importeret fra WordPress ------------------------------------ */
.wppaza-prose img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.wppaza-prose iframe { max-width: 100%; }

/* --- Bekræftelse af oplysninger (portal) ------------------------------------- */
.cwp-field-narrow { max-width: 18rem; }
.cwp-checklist { margin: 0; padding-left: 1.2rem; display: grid; gap: .35rem; }
.cwp-checklist ul { margin: .3rem 0 0; padding-left: 1.1rem; font-size: var(--step--1); color: var(--muted); }
.cwp-review-banner { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; justify-content: space-between; }
.cwp-review-banner p { margin: 0; flex: 1 1 22rem; }