/**
 * JSWS Design System — shared component layer (handle: jsws-ds)
 * ------------------------------------------------------------------
 * Canonical components for every JSWS plugin, built on the host site's :root
 * tokens (Brand + Semantic + Structure + Field). Reference look = Doctor Portal.
 * Recipes verified against the live plugins; do not hardcode brand/semantic
 * values — everything flows from tokens with fallbacks.
 *
 * Namespace: .jds-*  ·  Spec: Starter Branding/DESIGN-SYSTEM.md
 */

/* ============================================================
   FIELDS — input/select/textarea + label + required + hint
   Matches Gravity Forms (labels use --gf-* tokens, fields use --field-*).
============================================================ */
.jds-field { display: flex; flex-direction: column; gap: 7px; }
.jds-field > label,
.jds-label {
	font-family: var(--gf-label-font, var(--title-font, 'Montserrat', sans-serif));
	text-transform: var(--gf-font-transform, none);
	font-size: var(--gf-title-size, 15px);
	font-weight: var(--gf-title-weight, 700);
	letter-spacing: var(--gf-title-spacing, 0);
	line-height: var(--gf-title-height, 1.2);
	/* Labels follow the site's title colour (which each site points at --main or
	   --dark-menus etc.), with a --label-color escape hatch and --main fallback. On
	   sites whose titles ARE --main this is unchanged; where titles are navy, labels
	   follow. */
	color: var(--label-color, var(--title-color, var(--main, #0161c1)));
}
.jds-req { color: var(--error, #c0392b); margin-left: 3px; font-weight: 700; } /* always red */

/* Compact detail label — for dashboard/detail contexts where a card title already
   leads the section. Quieter + smaller than the GF-matched .jds-label so the two
   never compete. (Account Core "grid-key" pattern.) */
.jds-label--key {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .5px;
	text-transform: uppercase;
	color: var(--text-muted, #6c727a);
}

.jds-input,
.jds-field input:not([type="checkbox"]):not([type="radio"]),
.jds-field select,
.jds-field textarea {
	width: 100%; box-sizing: border-box;
	height: var(--field-height, 38px);
	padding: 0 var(--field-padding-x, 12px);
	font-family: var(--field-font, var(--paragraph-font, sans-serif));
	font-size: var(--field-font-size, var(--gf-description-size, 16px));
	color: var(--field-color, var(--body-text, #333));
	background: var(--field-bg, var(--main-transparent, #eef4fb));
	border: var(--field-border, 0.5px solid color-mix(in srgb, var(--main, #0161c1) 20%, transparent));
	border-radius: var(--field-radius, var(--general-border-radius, 5px));
	box-shadow: var(--field-shadow, 0 0 10px 1px rgb(0 0 0 / .04));
}
/* Standalone .jds-input (used outside a .jds-field, e.g. copy rows) must beat the
   theme's generic input[type=text] rule (specificity 0,1,1 — e.g. Divi forces white
   bg / 2px padding / grey border). The doubled class (0,2,0) wins reliably without
   !important; background-color (not the shorthand) keeps any chevron image intact.
   .jds-field inputs are already 0,3,1 and don't need this. */
input.jds-input.jds-input,
select.jds-input.jds-input,
textarea.jds-input.jds-input {
	background-color: var(--field-bg, var(--main-transparent, #eef4fb));
	border: var(--field-border, 0.5px solid color-mix(in srgb, var(--main, #0161c1) 20%, transparent));
	padding: 0 var(--field-padding-x, 12px);
	color: var(--field-color, var(--body-text, #333));
}
.jds-field textarea { height: auto; min-height: 90px; padding: 10px var(--field-padding-x, 12px); line-height: 1.5; resize: vertical; }
/* Custom dropdown chevron (matches the Doctor Portal select) */
.jds-select,
.jds-field select {
	-webkit-appearance: none; -moz-appearance: none; appearance: none;
	padding-right: 34px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23454545' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 13px center;
	background-size: 12px;
}
.jds-input::placeholder,
.jds-field input::placeholder,
.jds-field textarea::placeholder { color: var(--field-placeholder, #808080); }
/* Consistent focus on EVERY control (input/select/textarea): subtle brand ring */
.jds-input:focus,
.jds-field input:focus,
.jds-field select:focus,
.jds-field textarea:focus {
	outline: none;
	border-color: var(--field-focus-border, var(--main, #0161c1));
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--main, #0161c1) 15%, transparent);
}
.jds-field input[readonly] { background: #f3f4f6; }

/* Helper / description text under a field — same everywhere */
.jds-hint {
	margin-top: -3px; /* sits ~4px under the label/control (offsets the .jds-field 7px gap) */
	font-family: var(--paragraph-font, sans-serif);
	font-size: var(--hint-size, 13px); /* dedicated helper size — NOT --gf-description-size (that's the inline-form description, often larger) so hints stay smaller than labels */
	font-weight: var(--gf-description-weight, 400);
	line-height: 1.4;
	color: var(--text-muted, #6c727a);
}

/* Field layouts */
.jds-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.jds-grid .jds-field--full { grid-column: 1 / -1; }
.jds-row--split { display: flex; gap: 18px; }
.jds-row--split > .jds-field { flex: 1; min-width: 0; }

/* Checkbox row (label + box) */
.jds-check { display: flex; align-items: center; gap: 8px; cursor: pointer;
	/* Checkbox label = GF inline-description styling (17px / 600 / body font). */
	font-family: var(--gf-inline-font, var(--paragraph-font, sans-serif));
	font-size: var(--gf-inline-size, 17px);
	font-weight: var(--gf-inline-weight, 600);
	line-height: var(--gf-inline-height, 1.4);
	letter-spacing: var(--gf-inline-spacing, 0);
	text-transform: var(--gf-inline-transform, none);
	color: var(--label-color, var(--title-color, var(--main, #0161c1))); }
.jds-check input { width: 16px; height: 16px; accent-color: var(--main, #0161c1); }

/* ============================================================
   FORM HEADER — a form's title + lead-in, styled as a GF Section
   field (--gf-section-*) with its description (--gf-section-description).
   Centred by default. The title uses the body font because the brand
   title face is often single-weight and can't carry --gf-section-weight.
============================================================ */
.jds-form-head { text-align: center; margin: 0 0 22px; }
.jds-form-head__title {
	margin: 0 0 6px;
	font-family: var(--form-title-font, var(--paragraph-font, sans-serif));
	font-size: var(--gf-section-size, 23px);
	font-weight: var(--gf-section-weight, 800);
	letter-spacing: var(--gf-section-spacing, -1px);
	line-height: var(--gf-section-height, 1.3);
	text-transform: var(--gf-section-transform, none);
	color: var(--title-color, var(--main, #0161c1));
}
.jds-form-head__desc {
	margin: 0;
	font-family: var(--paragraph-font, sans-serif);
	font-size: var(--gf-section-description, 18px);
	font-weight: var(--gf-section-description-weight, 400);
	line-height: 1.5;
	color: var(--text-muted, #6c727a);
}

/* ============================================================
   BUTTONS — role taxonomy (primary / dark / ghost / danger)
============================================================ */
.jds-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 7px;
	cursor: pointer; text-decoration: none;
	font-family: var(--btn-font-family, var(--title-font, 'Montserrat', sans-serif));
	font-size: var(--btn-font-size, 14px);
	font-weight: var(--btn-font-weight, 700);
	letter-spacing: var(--btn-font-spacing, 0);
	line-height: var(--btn-font-height, 1.3em);
	text-transform: var(--btn-transform, uppercase);
	border-radius: var(--btn-radius, 40px);
	border: var(--btn-border-width, 2px) solid transparent;
	padding: var(--btn-padding-vertical, 0.45em) var(--btn-padding-horizontal, 1.5em);
	transition: var(--transition, all .3s ease);
}
.jds-btn--primary { background: var(--main, #0161c1); border-color: var(--main, #0161c1); color: #fff; }
.jds-btn--primary:hover { background: var(--main-dark, #0354a7); border-color: var(--main-dark, #0354a7); color: #fff; }
.jds-btn--dark { background: var(--dark-menus, #002c59); border-color: var(--dark-menus, #002c59); color: #fff; }
.jds-btn--dark:hover { opacity: .92; color: #fff; }
.jds-btn--ghost { background: transparent; border-color: var(--dark-menus, #002c59); color: var(--dark-menus, #002c59); }
.jds-btn--ghost:hover { background: var(--dark-menus, #002c59); color: #fff; }
.jds-btn--danger { background: var(--error, #c0392b); border-color: var(--error, #c0392b); color: #fff; } /* solid red, white text */
.jds-btn--danger:hover { background: color-mix(in srgb, var(--error, #c0392b) 86%, #000); border-color: color-mix(in srgb, var(--error, #c0392b) 86%, #000); color: #fff; }
.jds-btn--danger-soft { background: var(--error-bg, rgba(192,57,43,.10)); border-color: color-mix(in srgb, var(--error, #c0392b) 35%, transparent); color: var(--error, #c0392b); } /* low-emphasis variant */
.jds-btn--sm { font-size: 12px; padding: 0.35em 1em; border-width: 1px; } /* compact: inline actions */
.jds-btn:disabled, .jds-btn.is-disabled { opacity: .5; cursor: not-allowed; }

/* Form buttons — mirror the site's Gravity Forms next/previous/submit:
   Submit (final & single-button forms) = secondary-colour fill;
   Next (multi-step forward) = dark-menus fill;
   Previous (multi-step back) = quiet grey outline. */
.jds-btn--submit { background: var(--btn-bg-secondary, var(--secondary, #36a2c7)); border-color: var(--btn-bg-secondary, var(--secondary, #36a2c7)); color: var(--btn-color, #fff); }
.jds-btn--submit:hover { background: var(--btn-bg-secondary-hover, var(--secondary-dark, #2c7994)); border-color: var(--btn-bg-secondary-hover, var(--secondary-dark, #2c7994)); color: var(--btn-color, #fff); }
.jds-btn--next { background: var(--dark-menus, #002c59); border-color: var(--dark-menus, #002c59); color: #fff; }
.jds-btn--next:hover { background: var(--dark-menus, #002c59); border-color: var(--dark-menus, #002c59); color: #fff; opacity: .92; }
.jds-btn--prev { background: transparent; border-color: var(--btn-prev, #7c7c7c); color: var(--btn-prev, #7c7c7c); }
.jds-btn--prev:hover { background: transparent; border-color: var(--main, #0161c1); color: var(--main, #0161c1); }

/* Form footer — right-aligned on desktop; full-width stacked on mobile with
   Previous dropping below (matches GF .gform_footer / .gform_page_footer). */
.jds-form-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; }
@media (max-width: 767px) {
	.jds-form-foot { flex-direction: column; }
	.jds-form-foot .jds-btn { width: 100%; max-width: 100%; }
	.jds-form-foot .jds-btn--prev { order: 2; margin-top: 7px; }
}

/* Pagination — numbered pages + Prev/Next nav, even gaps */
.jds-pagination { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.jds-page { min-width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; border: 1px solid var(--card-border, rgba(15,23,42,.12)); border-radius: var(--general-border-radius, 5px); background: var(--card-bg, #fff); color: var(--body-text, #333); font-family: var(--paragraph-font, sans-serif); font-size: 14px; font-weight: 600; line-height: 1; cursor: pointer; transition: var(--transition, all .2s ease); }
.jds-page:hover:not(:disabled):not(.is-active) { background: var(--page-bg, #f7f7f8); border-color: color-mix(in srgb, var(--main, #0161c1) 30%, transparent); }
.jds-page.is-active { background: var(--main, #0161c1); border-color: var(--main, #0161c1); color: #fff; cursor: default; }
.jds-page--nav { font-weight: 700; }
.jds-page--gap { border: 0; background: transparent; cursor: default; min-width: 20px; padding: 0; color: var(--text-muted, #6c727a); }
.jds-page:disabled { opacity: .45; cursor: not-allowed; }

/* ============================================================
   NOTICE / (i) CALLOUT — four severities
============================================================ */
.jds-notice { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border: 1px solid transparent; border-radius: var(--general-border-radius, 5px); font-size: 14px; line-height: 1.5; }
.jds-notice__icon { flex-shrink: 0; margin-top: 2px; display: inline-flex; }
.jds-notice__body { flex-grow: 1; min-width: 0; }
.jds-notice--info    { background: var(--info-bg, rgba(34,113,177,.10));  border-color: color-mix(in srgb, var(--info, #2271b1) 25%, transparent);    color: var(--info-text, #1a4a73); }
.jds-notice--warning { background: var(--warning-bg, rgba(201,162,39,.10)); border-color: color-mix(in srgb, var(--warning, #c9a227) 30%, transparent); color: var(--warning-text, #6a4a05); }
.jds-notice--error   { background: var(--error-bg, rgba(192,57,43,.10));  border-color: color-mix(in srgb, var(--error, #c0392b) 25%, transparent);   color: var(--error-text, #87200d); }
.jds-notice--success { background: var(--success-bg, rgba(39,174,96,.10)); border-color: color-mix(in srgb, var(--success, #27ae60) 25%, transparent); color: var(--success-text, #1a6b3a); }
.jds-notice--info .jds-notice__icon    { color: var(--info, #2271b1); }
.jds-notice--warning .jds-notice__icon { color: var(--warning, #c9a227); }
.jds-notice--error .jds-notice__icon   { color: var(--error, #c0392b); }
.jds-notice--success .jds-notice__icon { color: var(--success, #27ae60); }

/* ============================================================
   STATUS PILL — dot + label (also used for table status cells)
============================================================ */
.jds-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: var(--radius-pill, 999px); font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--neutral-bg, rgba(108,114,122,.10)); color: var(--neutral, #6c727a); }
.jds-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.jds-pill--success { background: var(--success-bg, rgba(39,174,96,.10)); color: var(--success, #27ae60); }
.jds-pill--warning { background: var(--warning-bg, rgba(201,162,39,.10)); color: var(--warning, #c9a227); }
.jds-pill--error   { background: var(--error-bg, rgba(192,57,43,.10));   color: var(--error, #c0392b); }
.jds-pill--info    { background: var(--info-bg, rgba(34,113,177,.10));   color: var(--info, #2271b1); }
.jds-pill--brand   { background: color-mix(in srgb, var(--main, #0161c1) 12%, #fff); color: var(--main, #0161c1); }
.jds-pill--plain::before { display: none; } /* no dot */

/* ============================================================
   CARD
============================================================ */
.jds-card { background: var(--card-bg, #fff); border: 1px solid var(--card-border, rgba(15,23,42,.08)); border-radius: var(--radius-card, 10px); box-shadow: var(--box-shadow, 0 2px 18px rgba(0,0,0,.07)); padding: var(--space-lg, 22px); }
.jds-card__title { font-family: var(--card-title-font, var(--title-font, sans-serif)); display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 14px; font-weight: var(--card-title-weight, var(--gf-title-weight, 700)); text-transform: uppercase; letter-spacing: .4px; color: var(--main, #0161c1); }

/* ============================================================
   TABLE — one dashboard look (grey muted header, no zebra,
   brand id, scroll-not-shrink, dot-pill status). Ref: wc-orders-core.
============================================================ */
.jds-table-wrap { overflow-x: auto; border: 1px solid var(--card-border, rgba(15,23,42,.08)); border-radius: var(--radius-card, 10px); background: var(--card-bg, #fff); box-shadow: 0 1px 3px rgba(15,23,42,.04); }
.jds-table { width: 100%; border-collapse: collapse; background: var(--card-bg, #fff); }
.jds-table th, .jds-table td { padding: 12px 16px; border-bottom: 1px solid var(--divider, rgba(15,23,42,.06)); text-align: left; vertical-align: middle; font-size: 15px; white-space: nowrap; }
.jds-table tbody tr:last-child td { border-bottom: 0; }
.jds-table th { background: var(--page-bg, #f7f7f8); color: var(--text-muted, #6c727a); text-transform: uppercase; font-size: 12px; font-weight: 700; letter-spacing: .5px; }
.jds-table td.jds-col-id { color: var(--main, #0161c1); font-weight: 700; }
.jds-table tbody tr.is-clickable { cursor: pointer; }
.jds-table tbody tr.is-clickable:hover { background: color-mix(in srgb, var(--main, #0161c1) 6%, #fff); } /* brand tint — distinct from the grey header */
.jds-table .jds-col-wrap { white-space: normal; word-break: break-word; line-height: 1.3; }
.jds-th-check, .jds-td-check { width: 44px; text-align: center; }

/* ============================================================
   MODAL — solid brand header (reference: Doctor Portal popups)
============================================================ */
.jds-modal { position: fixed; inset: 0; z-index: 100000; display: none; }
.jds-modal.is-open { display: block; }
.jds-modal__backdrop { position: absolute; inset: 0; background: rgba(15,23,42,.45); }
.jds-modal__panel { position: relative; max-width: 640px; width: calc(100% - 32px); margin: 48px auto; max-height: calc(100vh - 96px); overflow-y: auto; background: var(--card-bg, #fff); border-radius: var(--radius-card, 10px); box-shadow: 0 18px 50px rgba(15,23,42,.25); }
.jds-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 18px 24px; background: var(--main, #0161c1); border-radius: var(--radius-card, 10px) var(--radius-card, 10px) 0 0; }
.jds-modal__title { margin: 0 !important; padding: 0 !important; font-family: var(--title-font, 'Montserrat', sans-serif); font-size: 15px; line-height: 1 !important; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: #fff; }
.jds-modal__sub { margin: 4px 0 0 !important; font-size: 13px; line-height: 1.3; color: rgba(255,255,255,.82); }
.jds-modal__sub:empty { display: none; } /* no empty gap when there's no subtitle */
.jds-modal__close { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; background: none; font-size: 24px; line-height: 1; color: #fff; cursor: pointer; flex: none; }
.jds-modal__body { padding: 24px; font-size: 14px; }
.jds-modal__foot { display: flex; justify-content: flex-end; gap: 10px; padding: 0 24px 20px; }

@media (max-width: 640px) {
	.jds-grid { grid-template-columns: 1fr; }
	.jds-row--split { flex-direction: column; }
	.jds-modal__panel { margin: 0; width: 100vw; max-height: 100vh; min-height: 100vh; border-radius: 0; }
	.jds-modal__head { border-radius: 0; }
}

/* ============================================================
   SPINNER — main-color arc over faint ring; toggle [hidden]
============================================================ */
.jds-spinner { display: inline-block; width: var(--jds-spinner-size, 26px); height: var(--jds-spinner-size, 26px); border: 3px solid color-mix(in srgb, var(--main, #0161c1) 20%, #fff); border-top-color: var(--main, #0161c1); border-radius: 50%; animation: jds-spin .7s linear infinite; }
.jds-spinner[hidden] { display: none; }
@keyframes jds-spin { to { transform: rotate(360deg); } }