/* =========================================================
   KuDor theme for the auth / invoice screens
   (login, registerSalon, waitingApprove, payNow, subscribePackage,
    page, bookingInvoice, salesInvoice, purchasedInvoice)

   public/auth/ ships its own stylesheet with the primary hard-coded as
   #5F63F2 — an indigo/purple — in 78 rules. There are no custom
   properties to retarget, so this layer restates the components those
   screens actually use in the palette the rest of the product uses:

     --color-primary   #4F7949   (from public/profile/css/style.css)
     --color-secondary #6D8D68
     tint              #EEF7ED

   Loaded last in appAuth.blade.php and appInvoice.blade.php.
   ========================================================= */

:root {
    --kda-g900: #2F4A2B;
    --kda-g700: #4F7949;
    --kda-g500: #6D8D68;
    --kda-g300: #94B58F;
    --kda-g050: #EEF7ED;
    --kda-line: #E6ECE5;
    --kda-text: #25364F;
    --kda-muted: #7A8794;
}

/* ---------------------------------------------------------
   1) Utility classes that carried the indigo
   --------------------------------------------------------- */
.color-primary,
.color-third,
.text-primary,
.hover-primary:hover,
.hover-third:hover {
    color: var(--kda-g700) !important;
}

.bg-primary,
.bg-third {
    background-color: var(--kda-g700) !important;
}

.border-primary,
.border-third,
.iborder-primary,
.iborder-third {
    border-color: var(--kda-g700) !important;
}

.circle-primary,
.circle-third {
    background: var(--kda-g700) !important;
}

.outline-primary,
.outline-third,
.outline-lg-primary,
.outline-lg-third {
    border-color: var(--kda-g700) !important;
    color: var(--kda-g700) !important;
}

.active-color-primary label input:checked + span,
.active-color-third label input:checked + span {
    background: var(--kda-g700) !important;
    border-color: var(--kda-g700) !important;
}

/* ---------------------------------------------------------
   2) Links
   --------------------------------------------------------- */
a {
    color: var(--kda-g700);
}

a:hover {
    color: var(--kda-g900);
}

/* ---------------------------------------------------------
   3) Buttons
   --------------------------------------------------------- */
.btn {
    border-radius: 10px;
    font-weight: 600;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.btn-primary,
button.btn-primary,
a.btn-primary,
.btn-primary.btn-default,
.signIn-createBtn {
    background-color: var(--kda-g700) !important;
    border-color: var(--kda-g700) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.signIn-createBtn:hover {
    background-color: var(--kda-g900) !important;
    border-color: var(--kda-g900) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(79, 121, 73, .25);
}

.btn-success {
    background-color: var(--kda-g700) !important;
    border-color: var(--kda-g700) !important;
    color: #fff !important;
}

.btn-success:hover {
    background-color: var(--kda-g900) !important;
    border-color: var(--kda-g900) !important;
}

/* darkened from the stock values so white label text clears 4.5:1 */
.btn-warning {
    background-color: #96650F !important;
    border-color: #96650F !important;
    color: #fff !important;
}

.btn-danger {
    background-color: #B32B2B !important;
    border-color: #B32B2B !important;
    color: #fff !important;
}

.btn-info {
    background-color: #226E85 !important;
    border-color: #226E85 !important;
    color: #fff !important;
}

.btn-light,
.btn-secondary {
    background-color: var(--kda-g050) !important;
    border-color: var(--kda-line) !important;
    color: var(--kda-g900) !important;
}

.btn-light:hover,
.btn-secondary:hover {
    background-color: var(--kda-g300) !important;
    border-color: var(--kda-g300) !important;
    color: #fff !important;
}

/* ---------------------------------------------------------
   4) Form controls
   --------------------------------------------------------- */
/* style.css scopes these as `.edit-profile__body .form-group .form-control`
   (0,3,0), so a bare `.form-control` here would never win — the selectors
   below deliberately match that weight. */
.form-control,
select.form-control,
textarea.form-control,
.edit-profile__body .form-group .form-control,
.signUp-admin-right .form-group .form-control,
.signIn-admin-right .form-group .form-control {
    border: 1px solid var(--kda-line);
    border-radius: 10px;
    padding: 11px 14px;
    height: auto;
    font-size: 14px;
    color: var(--kda-text);
    background-color: #fff;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.form-control:focus,
.edit-profile__body .form-group .form-control:focus,
.signUp-admin-right .form-group .form-control:focus,
.signIn-admin-right .form-group .form-control:focus {
    border-color: var(--kda-g500);
    box-shadow: 0 0 0 3px rgba(109, 141, 104, .18);
    outline: none;
}

.form-control::placeholder {
    color: #AEB7C2;
}

label {
    font-size: 13px;
    font-weight: 600;
    color: var(--kda-text);
    margin-bottom: 7px;
}

/* the auth theme leaves the selected <option> nearly invisible */
select option {
    background: #fff !important;
    color: var(--kda-text) !important;
}

select option:checked,
select option:hover {
    background: var(--kda-g050) !important;
    box-shadow: 0 0 10px 100px var(--kda-g050) inset !important;
    color: var(--kda-g900) !important;
    font-weight: 700;
}

/* checkbox / radio */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--kda-g700);
    width: 18px;
    height: 18px;
    vertical-align: middle;
    cursor: pointer;
}

/* =========================================================
   NEW AUTH SHELL  (login + registerSalon)

   Replaces the old two-column split that put a photograph behind
   half the screen. That layout forced a fixed-height image panel,
   pushed the form into a narrow column, and needed a pile of
   media-query overrides to stay usable on a phone.

   The shell is a centred card on a tinted page instead: one column,
   no background photograph, and it reflows on its own.
   ========================================================= */

.kda-shell {
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 16px 56px;
    background:
        radial-gradient(1100px 460px at 50% -180px, var(--kda-g050) 0%, rgba(238,247,237,0) 70%),
        #F6F8F5;
}

.kda-shell__inner {
    width: 100%;
    max-width: 460px;
}

.kda-shell--wide .kda-shell__inner {
    max-width: 940px;
}

/* brand block above the card */
.kda-brand {
    text-align: center;
    margin-bottom: 22px;
}

.kda-brand img {
    height: 62px;
    width: auto;
    object-fit: contain;
}

.kda-brand__tagline {
    margin: 12px auto 0;
    max-width: 520px;
    font-size: 13.5px;
    line-height: 1.75;
    color: var(--kda-muted);
}

/* the card itself */
.kda-card {
    background: #fff;
    border: 1px solid var(--kda-line);
    border-radius: 18px;
    padding: 32px;
    box-shadow: 0 10px 34px rgba(37, 54, 79, .07);
}

.kda-card__head {
    text-align: center;
    margin-bottom: 26px;
}

.kda-card__head h1 {
    font-size: 23px;
    font-weight: 800;
    color: var(--kda-g900);
    margin: 0 0 7px;
}

.kda-card__head p {
    font-size: 13.5px;
    color: var(--kda-muted);
    margin: 0;
}

/* a labelled group of fields inside the long registration form */
.kda-fieldset {
    border: 1px solid var(--kda-line);
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 18px;
    background: #FCFDFC;
}

.kda-fieldset__legend {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    font-weight: 700;
    color: var(--kda-g900);
    margin-bottom: 16px;
}

.kda-fieldset__legend i {
    color: var(--kda-g700);
    font-size: 17px;
}

/* password field with a reveal toggle */
.kda-pass {
    position: relative;
}

.kda-pass__toggle {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    inset-inline-end: 12px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--kda-muted);
    cursor: pointer;
    padding: 0;
}

.kda-pass__toggle:hover {
    background: var(--kda-g050);
    color: var(--kda-g700);
}

.kda-pass .form-control {
    padding-inline-end: 46px;
}

/* checkbox / radio lists that used to be bare inputs with &nbsp; */
.kda-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.kda-check {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    padding: 10px 14px;
    border: 1px solid var(--kda-line);
    border-radius: 10px;
    background: #fff;
    font-size: 13px;
    font-weight: 500;
    color: var(--kda-text);
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease;
}

.kda-check:hover {
    border-color: var(--kda-g300);
    background: #FAFCF9;
}

.kda-check:has(input:checked) {
    border-color: var(--kda-g700);
    background: var(--kda-g050);
    color: var(--kda-g900);
    font-weight: 600;
}

.kda-check input {
    margin: 0;
}

/* Full-width submit. line-height is pinned because the auth theme gives
   .btn a 42px line-height (the old markup cancelled it with .lh-normal),
   which alone made this button 70px tall. */
.kda-submit {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    padding: 0 20px !important;
    font-size: 14.5px !important;
    line-height: 1 !important;
    border-radius: 10px;
}

/* footer line under the card */
.kda-foot {
    text-align: center;
    margin-top: 20px;
    font-size: 13px;
    color: var(--kda-muted);
}

.kda-foot a {
    font-weight: 700;
}

/* contract agreement row */
.kda-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    border: 1px solid var(--kda-line);
    border-radius: 12px;
    background: var(--kda-g050);
    font-size: 13px;
    color: var(--kda-text);
    line-height: 1.7;
}

.kda-consent input {
    margin-top: 2px;
    flex: 0 0 auto;
}

/* map inside the form */
.kda-map #map_canvas,
.kda-map .map_canvas {
    width: 100%;
    height: 340px;
    border: 1px solid var(--kda-line);
    border-radius: 12px;
    overflow: hidden;
}

.kda-map .errorBorder {
    border: 1px solid #B32B2B !important;
}

/* ---------------------------------------------------------
   Location search row.
   These rules exist in public/profile/css/settings-custom.css for the
   dashboard, but the auth layout never loads that file — so the markup
   arrived here completely unstyled (block layout, a collapsed 5x15px
   search button). Restated for this layer.
   --------------------------------------------------------- */
.kd-map-search {
    display: flex;
    align-items: stretch;
    gap: 8px;
    flex-wrap: nowrap;
    max-width: 520px;
    margin-bottom: 12px;
}

.kda-map #pac-input,
#pac-input {
    box-sizing: border-box;
    flex: 1 1 auto;
    min-width: 0;
    width: auto !important;
    max-width: none !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border: 1px solid var(--kda-line) !important;
    border-radius: 10px !important;
    background: #fff;
    font-size: 13px;
    color: var(--kda-text);
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

#pac-input:focus {
    border-color: var(--kda-g500) !important;
    box-shadow: 0 0 0 3px rgba(109, 141, 104, .18);
}

#pac-search,
#pac-close {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    line-height: 1 !important;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

#pac-search {
    background: var(--kda-g700) !important;
    border-color: var(--kda-g700) !important;
    color: #fff !important;
}

#pac-search:hover {
    background: var(--kda-g900) !important;
    border-color: var(--kda-g900) !important;
}

#pac-search i {
    font-size: 18px;
    line-height: 1;
}

#pac-close {
    background: #F4F6F3 !important;
    border-color: var(--kda-line) !important;
    color: #4A5647 !important;
    font-size: 19px !important;
    font-weight: 400 !important;
}

#pac-close:hover {
    background: #FDECEC !important;
    border-color: #F0C9C9 !important;
    color: #B32B2B !important;
}

/* Google's own map controls are plain <button>s and would otherwise pick
   up whatever the theme paints buttons with. */
.gm-style button,
.gm-style .gm-control-active,
.gm-style .gm-fullscreen-control,
.gm-style .gm-svpc,
.gm-style-mtc button,
.gmnoprint button {
    background-color: #fff !important;
    border-color: transparent !important;
    color: #444 !important;
}

.gm-style .gm-control-active:hover,
.gm-style .gm-fullscreen-control:hover,
.gm-style .gm-svpc:hover,
.gm-style-mtc button:hover,
.gmnoprint button:hover {
    background-color: var(--kda-g050) !important;
    color: var(--kda-g900) !important;
}

.gm-style .gm-fullscreen-control,
.gm-style .gm-svpc,
.gm-style .gm-bundled-control .gmnoprint > div {
    border-radius: 10px !important;
    overflow: hidden;
}

.pac-container {
    border-radius: 10px;
    border: 1px solid var(--kda-line);
    box-shadow: 0 8px 24px rgba(37, 54, 79, .14);
    margin-top: 6px;
    font-family: inherit;
    z-index: 99999;
}

.pac-item {
    padding: 9px 14px;
    font-size: 13px;
    cursor: pointer;
}

.pac-item:hover,
.pac-item-selected {
    background: var(--kda-g050);
}

@media (max-width: 520px) {
    .kd-map-search { max-width: 100%; }
}

@media (max-width: 575px) {
    .kda-shell { padding: 24px 12px 40px; }
    .kda-card { padding: 22px 18px; }
    .kda-fieldset { padding: 16px 14px; }
    .kda-card__head h1 { font-size: 20px; }
}

/* ---------------------------------------------------------
   5) Auth screens: split layout, cards  (legacy shell, still used
      by waitingApprove / payNow / subscribePackage / page)
   --------------------------------------------------------- */
.signUP-admin-left,
.signIn-admin-left {
    background: linear-gradient(150deg, var(--kda-g300) 0%, var(--kda-g500) 55%, var(--kda-g700) 100%);
}

.signUP-admin-left .loginTextOne,
.signUP-admin-left .loginTextTwo,
.signIn-admin-left .loginTextOne,
.signIn-admin-left .loginTextTwo {
    color: #fff;
}

.bottomTextPosLogin .loginTextTwo {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.7;
    max-width: 460px;
    margin: 0 auto;
    opacity: .96;
}

.signUp-admin-right,
.signIn-admin-right {
    background: #fff;
}

.edit-profile .card,
.signUp-admin-right .card {
    border: none;
    box-shadow: none;
    background: transparent;
}

/* style.css sets this via `.signUp-admin-right .card .card-header h6` (0,3,1) */
.edit-profile__title h6,
.signUp-admin-right .card .card-header h6,
.signIn-admin-right .card .card-header h6 {
    font-size: 22px;
    font-weight: 800;
    color: var(--kda-g900);
    margin-bottom: 6px;
}

.edit-profile__title p {
    font-size: 13.5px;
    color: var(--kda-muted);
    margin: 0;
}

/* page loader */
.spin-dot,
.spinner .spin-dot,
.atbd-spin-dots .spin-dot {
    background-color: var(--kda-g700) !important;
}

/* password eye toggle */
.password-toggle-1 {
    color: var(--kda-muted) !important;
}

.password-toggle-1:hover {
    color: var(--kda-g700) !important;
}

/* ---------------------------------------------------------
   6) Alerts / validation
   --------------------------------------------------------- */
.alert {
    border-radius: 10px;
    border: 1px solid transparent;
    font-size: 13.5px;
}

.alert-success {
    background: var(--kda-g050);
    border-color: var(--kda-g300);
    color: var(--kda-g900);
}

.alert-danger {
    background: #FDECEC;
    border-color: #F0C9C9;
    color: #8E1F1F;
}

.alert-info {
    background: #EAF4F8;
    border-color: #BFDCE6;
    color: #1A5768;
}

.text-danger {
    color: #B32B2B !important;
}

.text-success {
    color: var(--kda-g700) !important;
}

/* ---------------------------------------------------------
   7) Invoice screens
   --------------------------------------------------------- */
.invoiceWrapper,
.invoice-area {
    background: #fff;
}

.invoice-area table,
.table {
    border-color: var(--kda-line);
}

.table thead th,
.table thead td {
    background: var(--kda-g050);
    color: var(--kda-g900);
    font-weight: 700;
    border-color: var(--kda-line);
}

.table td,
.table th {
    border-color: var(--kda-line);
    vertical-align: middle;
}

.table-bordered,
.table-bordered td,
.table-bordered th {
    border-color: var(--kda-line) !important;
}

/* the invoice pages use .f20 for headings and totals */
.f20 {
    color: var(--kda-text);
}

.mgl {
    color: var(--kda-g700);
    font-weight: 700;
}

/* print: keep it plain */
@media print {
    .signUP-admin-left,
    .signIn-admin-left { background: none !important; }
    .table thead th { background: #f2f2f2 !important; color: #000 !important; }
}

/* ---------------------------------------------------------
   8) Package / subscription cards
   --------------------------------------------------------- */
.package-card,
.subscribe-card {
    border: 1px solid var(--kda-line);
    border-radius: 14px;
    background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.package-card:hover,
.subscribe-card:hover {
    border-color: var(--kda-g300);
    box-shadow: 0 6px 18px rgba(79, 121, 73, .10);
}

.package-card.active,
.subscribe-card.active,
.package-card.selected {
    border-color: var(--kda-g700);
    background: var(--kda-g050);
}

/* =========================================================
   9) The subscription invoice, the package picker, and the
      content pages.

   These three sat outside the product's design system entirely: the
   invoice carried a #fcf6ff header and a 60%-wide card pinned with
   `right: 20%`, the package picker pushed every card that was not
   order_sort 2 down by a hard-coded 100px, and the content pages
   dropped raw CMS HTML onto the page with no measure on it.

   Everything below is built on the --kda-* tokens declared at the top
   of this file — the same green the rest of the product uses.
   ========================================================= */

/* ---------- shared shell ---------- */

.kdw-wrap {
    max-width: 1120px;
    margin: 0 auto;
    padding: 40px 20px 80px;
}

/* The page title.

   This was a 44px-tall green gradient slab with two decorative discs on it —
   a lot of weight and colour spent before the page said anything. It reads as
   a masthead now: a hairline rule in the brand green, the title in ink, and
   the facts as quiet chips underneath. */

.kdw-hero {
    position: relative;
    padding: 0 0 26px;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--kda-line);
}

.kdw-hero::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    bottom: -1px;
    width: 74px;
    height: 3px;
    border-radius: 999px;
    background: var(--kda-g700);
}

.kdw-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 12px;
    padding: 5px 13px;
    border-radius: 999px;
    background: var(--kda-g050);
    color: var(--kda-g900);
    font-size: 12px;
    font-weight: 700;
}

.kdw-hero__eyebrow i { color: var(--kda-g700); }

.kdw-hero h1 {
    margin: 0 0 8px;
    font-size: 30px;
    font-weight: 800;
    color: var(--kda-text);
    line-height: 1.3;
}

.kdw-hero p { margin: 0; font-size: 14.5px; color: var(--kda-muted); max-width: 62ch; }
.kdw-hero p i { color: var(--kda-g700); }

/* the figures, as chips rather than as headline numbers on a coloured band */
.kdw-hero__facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

.kdw-hero__fact {
    padding: 10px 18px;
    border: 1px solid var(--kda-line);
    border-radius: 14px;
    background: #fff;
}

.kdw-hero__fact b {
    display: block;
    font-size: 18px;
    font-weight: 800;
    color: var(--kda-text);
    font-variant-numeric: tabular-nums;
    line-height: 1.3;
}

.kdw-hero__fact span { font-size: 11.5px; color: var(--kda-muted); font-weight: 600; }
.kdw-card {
    background: #fff;
    border: 1px solid var(--kda-line);
    border-radius: 20px;
    box-shadow: 0 8px 26px rgba(47, 74, 43, .07);
    overflow: hidden;
}

.kdw-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 20px 26px;
    border-bottom: 1px solid var(--kda-line);
}

.kdw-card__head h2 { margin: 0; font-size: 17px; font-weight: 800; color: var(--kda-text); }
.kdw-card__body { padding: 26px; }

.kdw-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 13px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.kdw-pill--ok   { background: var(--kda-g050); color: var(--kda-g900); }
.kdw-pill--warn { background: #F4E7DC; color: #7C5E42; }
.kdw-pill--off  { background: #F3E5E6; color: #7E5F62; }

/* ---------- the invoice ---------- */

.kdw-inv { display: grid; grid-template-columns: 1.6fr 1fr; gap: 26px; align-items: start; }

.kdw-inv__parties { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }

.kdw-party {
    padding: 18px 20px;
    border-radius: 16px;
    background: var(--kda-g050);
}

.kdw-party h3 { margin: 0 0 8px; font-size: 12px; font-weight: 800; color: var(--kda-g700); letter-spacing: .4px; }
.kdw-party strong { display: block; font-size: 15px; color: var(--kda-text); }
.kdw-party span { display: block; font-size: 12.5px; color: var(--kda-muted); margin-top: 3px; }

.kdw-table { width: 100%; border-collapse: collapse; margin-top: 24px; }

.kdw-table th {
    padding: 11px 14px;
    background: var(--kda-g050);
    font-size: 11.5px;
    font-weight: 800;
    color: var(--kda-g900);
    text-align: start;
}

.kdw-table th:first-child { border-start-start-radius: 12px; border-end-start-radius: 12px; }
.kdw-table th:last-child  { border-start-end-radius: 12px; border-end-end-radius: 12px; }

.kdw-table td {
    padding: 15px 14px;
    border-bottom: 1px solid var(--kda-line);
    font-size: 13.5px;
    color: var(--kda-text);
}

.kdw-table tbody tr:last-child td { border-bottom: 0; }
.kdw-num { text-align: end; font-variant-numeric: tabular-nums; font-weight: 700; }

.kdw-sum { padding: 22px 24px; border-radius: 16px; background: var(--kda-g050); }
.kdw-sum__row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 0; font-size: 13.5px; color: var(--kda-text); }
.kdw-sum__row b { font-variant-numeric: tabular-nums; }

.kdw-sum__total {
    margin-top: 10px;
    padding-top: 16px;
    border-top: 2px solid rgba(79, 121, 73, .22);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.kdw-sum__total span { font-size: 14px; font-weight: 800; color: var(--kda-g900); }
.kdw-sum__total b { font-size: 26px; font-weight: 800; color: var(--kda-g700); font-variant-numeric: tabular-nums; }

.kdw-qr { text-align: center; margin-top: 22px; padding-top: 20px; border-top: 1px dashed var(--kda-line); }
.kdw-qr img, .kdw-qr svg { max-width: 132px; height: auto; }
.kdw-qr p { margin: 8px 0 0; font-size: 11.5px; color: var(--kda-muted); }

/* ---------- the package picker ---------- */

.kdw-plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
    gap: 22px;
    align-items: stretch;
}

.kdw-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 30px 26px;
    border: 1px solid var(--kda-line);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 8px 26px rgba(47, 74, 43, .06);
    transition: transform .26s ease, box-shadow .26s ease, border-color .26s ease;
}

.kdw-plan:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(47, 74, 43, .13); border-color: var(--kda-g300); }

/* The recommended plan stands out by design, not by being shoved 100px
   up while every other card is shoved 100px down. */
.kdw-plan--best { border-color: var(--kda-g700); box-shadow: 0 18px 44px rgba(47, 74, 43, .18); }

.kdw-plan__tag {
    position: absolute;
    top: -13px;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    padding: 5px 16px;
    border-radius: 999px;
    background: var(--kda-g700);
    color: #fff;
    font-size: 11.5px;
    font-weight: 800;
    white-space: nowrap;
}

.kdw-plan__name { font-size: 17px; font-weight: 800; color: var(--kda-text); }
.kdw-plan__days { font-size: 12.5px; color: var(--kda-muted); font-weight: 600; }

.kdw-plan__price { margin: 18px 0 4px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.kdw-plan__price b { font-size: 38px; font-weight: 800; color: var(--kda-g700); line-height: 1; font-variant-numeric: tabular-nums; }
.kdw-plan__price small { font-size: 13px; font-weight: 700; color: var(--kda-muted); }
.kdw-plan__was { font-size: 14px; color: var(--kda-muted); text-decoration: line-through; }

.kdw-plan__perday { font-size: 12px; color: var(--kda-muted); font-weight: 600; margin-bottom: 20px; }

/* What the plan saves against its old price. It was a full-width sand block
   the size of a heading; it is a small mark beside the price now. */
.kdw-plan__save {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 7px;
    background: var(--kda-g050);
    color: var(--kda-g900);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.5;
    white-space: nowrap;
    vertical-align: middle;
}

.kdw-plan__save i { font-size: 11px; color: var(--kda-g700); }
.kdw-plan__roles { list-style: none; margin: 0 0 24px; padding: 0; flex: 1 1 auto; }

.kdw-plan__roles li {
    display: flex;
    gap: 9px;
    padding: 7px 0;
    font-size: 13px;
    color: var(--kda-text);
    border-bottom: 1px dashed var(--kda-line);
}

.kdw-plan__roles li:last-child { border-bottom: 0; }
.kdw-plan__roles i { color: var(--kda-g700); flex: 0 0 auto; margin-top: 3px; }

.kdw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px 20px;
    border: 1px solid var(--kda-g700);
    border-radius: 999px;
    background: #fff;
    color: var(--kda-g700);
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition: all .2s ease;
}

.kdw-btn:hover { background: var(--kda-g050); color: var(--kda-g900); }
.kdw-btn--go { background: var(--kda-g700); color: #fff; }
.kdw-btn--go:hover { background: var(--kda-g900); color: #fff; }
.kdw-btn--ghost { border-color: var(--kda-line); color: var(--kda-muted); }

.kdw-trial { display: block; margin-top: 10px; text-align: center; font-size: 12.5px; font-weight: 700; color: var(--kda-g700); text-decoration: none; }
.kdw-trial:hover { color: var(--kda-g900); text-decoration: underline; }

/* ---------- the content pages ---------- */

.kdw-prose { max-width: 74ch; margin: 0 auto; font-size: 15.5px; line-height: 1.9; color: #3F4A48; }
.kdw-prose > *:first-child { margin-top: 0; }
.kdw-prose h1, .kdw-prose h2, .kdw-prose h3, .kdw-prose h4 { margin: 34px 0 12px; color: var(--kda-text); font-weight: 800; line-height: 1.4; }
.kdw-prose h1 { font-size: 25px; } .kdw-prose h2 { font-size: 21px; }
.kdw-prose h3 { font-size: 18px; } .kdw-prose h4 { font-size: 16px; }
.kdw-prose p { margin: 0 0 16px; }
.kdw-prose ul, .kdw-prose ol { margin: 0 0 18px; padding-inline-start: 22px; }
.kdw-prose li { margin-bottom: 8px; }
.kdw-prose a { color: var(--kda-g700); font-weight: 600; }
.kdw-prose img { max-width: 100%; height: auto; border-radius: 14px; margin: 10px 0; }
.kdw-prose table { width: 100%; border-collapse: collapse; margin: 0 0 18px; }
.kdw-prose th, .kdw-prose td { padding: 10px 12px; border: 1px solid var(--kda-line); font-size: 14px; }
.kdw-prose th { background: var(--kda-g050); text-align: start; }

.kdw-prose blockquote {
    margin: 0 0 18px;
    padding: 14px 20px;
    border-inline-start: 4px solid var(--kda-g300);
    background: var(--kda-g050);
    border-radius: 0 14px 14px 0;
}

/* CMS content arrives with its own colours and font sizes baked in; the
   page has to survive that. */
.kdw-prose [style*="color"] { color: inherit !important; }
.kdw-prose [style*="font-family"] { font-family: inherit !important; }
.kdw-prose * { max-width: 100%; }

/* ---------- small screens ---------- */

@media (max-width: 991px) {
    .kdw-inv { grid-template-columns: 1fr; }
}

@media (max-width: 575px) {
    .kdw-wrap { padding: 24px 14px 60px; }
    .kdw-hero { padding-bottom: 20px; margin-bottom: 24px; }
    .kdw-hero h1 { font-size: 23px; }
    .kdw-hero__facts { gap: 8px; }
    .kdw-hero__fact { padding: 8px 14px; }
    .kdw-inv__parties { grid-template-columns: 1fr; }
    .kdw-card__body { padding: 20px 16px; }
}

/* ---------- printing ----------

   The invoice printed through the site's own stylesheets, which lay the page
   out for a screen: the grid stayed two columns wide and ran off the paper,
   the tinted panels dropped out because browsers do not print backgrounds by
   default, and the page furniture came along with it.

   This lays the invoice out for paper on its own terms.
   ------------------------------------------------------ */

@media print {

    @page { size: A4; margin: 14mm 12mm; }

    html, body {
        background: #fff !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 12pt;
    }

    /* Everything that is not the invoice */
    .noPrint,
    header, footer, nav, aside,
    .navbar, .sidebar, .layout-sidebar, .header-top,
    .mobile-search, .mobile-author, .contact-sidebar, .overlay-dark-sidebar,
    .footer-wrapper, .breadcrumb-main, .page-image-top {
        display: none !important;
    }

    .kdw-wrap { max-width: none; padding: 0; margin: 0; }

    /* The tints are what make the invoice readable, so they have to survive
       the browser's default of dropping backgrounds. */
    * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

    .kdw-hero {
        padding: 0 0 12pt;
        margin: 0 0 16pt;
        border-bottom: 1pt solid #C9D2C7;
        break-inside: avoid;
    }

    .kdw-hero::before { background: #4F7949 !important; }
    .kdw-hero h1 { font-size: 20pt; color: #25364F; }
    .kdw-hero p { color: #5A6560; }
    .kdw-hero__eyebrow { background: #EEF7ED !important; color: #2F4A2B !important; }
    .kdw-hero__fact { border: 1pt solid #E6ECE5; }
    .kdw-hero__fact b { color: #25364F; }
    .kdw-hero__fact span { color: #5A6560; }

    /* One column on paper. The screen grid put the summary beside the
       invoice and the second column fell off the sheet. */
    .kdw-inv { display: block; }
    .kdw-inv > .kdw-card + .kdw-card { margin-top: 14pt; }

    .kdw-card {
        border: 1pt solid #E6ECE5;
        border-radius: 10pt;
        box-shadow: none;
        break-inside: avoid;
    }

    .kdw-card__head { padding: 10pt 14pt; border-bottom: 1pt solid #E6ECE5; }
    .kdw-card__head h2 { font-size: 13pt; }
    .kdw-card__body { padding: 14pt; }

    .kdw-party { background: #EEF7ED !important; border-radius: 8pt; break-inside: avoid; }
    .kdw-sum { background: #EEF7ED !important; border-radius: 8pt; break-inside: avoid; }
    .kdw-sum__total b { color: #4F7949 !important; }

    .kdw-pill { border: 1pt solid #C9D2C7; }
    .kdw-pill--ok { background: #EEF7ED !important; color: #2F4A2B !important; }
    .kdw-pill--warn { background: #F4E7DC !important; color: #7C5E42 !important; }

    /* The table has to hold its shape and repeat its heading across pages */
    .kdw-table { width: 100% !important; table-layout: auto; break-inside: auto; }
    .kdw-table thead { display: table-header-group; }
    .kdw-table th { background: #EEF7ED !important; color: #2F4A2B !important; font-size: 10pt; padding: 8pt 10pt; }
    .kdw-table td { font-size: 11pt; padding: 10pt; border-bottom: 1pt solid #E6ECE5; }
    .kdw-table tr { break-inside: avoid; }

    /* The panel's own table styles reach these pages through the shared
       stylesheets and undo the widths above. */
    table { width: 100% !important; border-collapse: collapse !important; }
    td, th { word-break: break-word; }

    a { text-decoration: none; color: inherit; }
    a[href]::after { content: none !important; }

    .kdw-plan { break-inside: avoid; box-shadow: none; border: 1pt solid #E6ECE5; }
    .kdw-prose { max-width: none; font-size: 11pt; }
}