/* ==========================================================
   Shared page content + popups for the modern theme3 pages.
   Loaded from partials/commonhead.html on every page; rules only
   apply under body.res-modern (inner pages) or body.home-modern.
   ========================================================== */

.res-modern,
.home-modern {
	--hm-primary: #b84d08;
	--hm-primary-dark: #8a3a06;
	--hm-primary-deep: #0b2f55;
	--hm-primary-soft: #fff0e2;
	--hm-accent: #f5a524;
	--hm-accent-dark: #c98a04;
	--hm-ink: #1b2536;
	--hm-muted: #5d6475;
	--hm-subtle: #9aa0ad;
	--hm-line: #f0e4d6;
	--hm-bg: #fffaf3;
	--hm-danger: #b42318;
	--hm-success: #067647;
	--hm-warning: #b54708;
	--hm-shadow-sm: 0 1px 2px rgba(27, 37, 54,  0.06), 0 2px 8px rgba(27, 37, 54,  0.04);
	--hm-shadow-lg: 0 24px 48px -16px rgba(138, 58, 6,  0.25), 0 8px 16px -8px rgba(27, 37, 54,  0.08);
	--hm-font: "Plus Jakarta Sans", "Segoe UI", -apple-system, BlinkMacSystemFont, "Inter", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ==========================================================
   Inner pages (profile, bookmarks, documents, share, request,
   feedback, open access)
   ========================================================== */

.pg-modern #content > .container-fluid {
	padding: 24px 24px 160px !important;
}

/* page header: menu button + title + description */
.pg-modern .pager-content {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 14px;
	margin: 0 0 22px;
}

.pg-modern .pager-content > div {
	flex: 0 1 auto;
	max-width: none;
	padding: 0 !important;
}

.pg-modern .pager-content h5 {
	margin: 0;
	font-size: 24px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--hm-ink);
}

.pg-modern .pager-content p {
	margin: 4px 0 0 !important;
	font-size: 14px;
	color: var(--hm-muted);
}

.res-modern #content #sidebarCollapse {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 1px solid var(--hm-line) !important;
	border-radius: 12px;
	background: #fff !important;
	color: var(--hm-ink);
	box-shadow: var(--hm-shadow-sm);
}

.res-modern #content #sidebarCollapse:hover {
	border-color: var(--hm-primary) !important;
	color: var(--hm-primary);
}

/* account sidebar */
.res-modern .pg-side {
	padding-top: 0;
}

.res-modern .pg-side li {
	list-style: none;
}

.res-modern #sidebar .pg-side ul li a {
	justify-content: flex-start;
}

.res-modern #sidebar .pg-side ul li a i {
	width: 18px;
	text-align: center;
	font-size: 14px;
	opacity: 0.85;
}

.res-modern #sidebar .pg-side ul li a.active i {
	opacity: 1;
}

/* search + add toolbar */
.pg-modern .input-group.row.m-0 {
	margin: 0 0 20px !important;
}

.pg-modern .input-group.row.m-0 > .col-12 {
	gap: 10px;
	align-items: center;
}

.pg-modern .input-group.row.m-0 .search-form {
	flex: 1 1 auto;
	height: 46px;
	padding: 0 18px 0 44px;
	border: 1.5px solid var(--hm-line) !important;
	border-radius: 12px !important;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23a8a29e' stroke-width='2' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 16px center;
	font-size: 14px;
	box-shadow: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pg-modern .input-group.row.m-0 .search-form:focus {
	border-color: var(--hm-primary) !important;
	box-shadow: 0 0 0 4px rgba(184, 77, 8,  0.08);
}

/* the separate search button is redundant – the list filters as you type */
.pg-modern .input-group.row.m-0 .search-form + .btn {
	display: none;
}

.pg-add-btn {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	height: 46px;
	padding: 0 20px !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 12px !important;
	background: var(--hm-primary) !important;
	color: #fff !important;
	font-size: 14px;
	font-weight: 600;
	text-transform: none;
	white-space: nowrap;
	box-shadow: 0 8px 20px rgba(184, 77, 8,  0.22) !important;
}

.pg-add-btn:hover {
	background: var(--hm-primary-dark) !important;
}

/* item cards */
.pg-modern .row.ml-2 {
	margin: 0 !important;
}

.pg-modern .pg-grid {
	padding: 0 !important;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 16px;
	width: 100%;
	margin: 0;
}

.pg-modern .pg-grid > div:not(.pg-empty) {
	width: auto;
	max-width: none;
	margin: 0 !important;
	padding: 0;
}

/* the page's search hides the card, not its column – hide the empty cell too */
.pg-modern .pg-grid > div:has(> .card[style*="display: none"]) {
	display: none;
}

.pg-modern .pg-grid .card {
	height: 100%;
	border: 1px solid var(--hm-line) !important;
	border-radius: 16px !important;
	background: #fff;
	box-shadow: var(--hm-shadow-sm) !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.pg-modern .pg-grid .card:hover {
	transform: translateY(-2px);
	border-color: rgba(184, 77, 8,  0.2) !important;
	box-shadow: var(--hm-shadow-lg) !important;
}

.pg-modern .pg-grid .card-body {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 18px !important;
}

.pg-modern .pg-grid .card-title {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	flex: 1 1 100%;
	margin: 0;
	font-size: 15px;
	font-weight: 600 !important;
	line-height: 1.35;
	color: var(--hm-ink);
	word-break: break-word;
}

.pg-modern .pg-grid .card-title > i:first-child {
	flex: 0 0 36px;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: var(--hm-primary-soft);
	color: var(--hm-primary) !important;
	font-size: 15px;
}

.pg-modern .pg-grid .card-text {
	flex: 1 1 100%;
	margin: 0 0 6px 48px;
	font-size: 13px;
	text-transform: capitalize;
	color: var(--hm-muted);
}

.pg-modern .pg-grid .btn-dark.btn-sm {
	display: inline-grid;
	place-items: center;
	grid-auto-flow: column;
	gap: 6px;
	min-width: 36px;
	height: 36px;
	margin: 0 !important;
	padding: 0 10px;
	border: 1px solid var(--hm-line) !important;
	border-radius: 10px;
	background: #fff !important;
	color: var(--hm-muted) !important;
	box-shadow: none !important;
	transition: all 0.15s ease;
}

.pg-modern .pg-grid .btn-dark.btn-sm:first-of-type {
	margin-left: 48px !important;
}

.pg-modern .pg-grid .btn-dark.btn-sm:hover {
	border-color: var(--hm-primary) !important;
	background: var(--hm-primary-soft) !important;
	color: var(--hm-primary) !important;
}

.pg-modern .pg-grid .btn-dark.btn-sm:has(.fa-trash):hover {
	border-color: #fda29b !important;
	background: #fef3f2 !important;
	color: var(--hm-danger) !important;
}

/* empty state */
.pg-empty {
	grid-column: 1 / -1;
	padding: 48px 24px;
	text-align: center;
	border: 1.5px dashed var(--hm-line);
	border-radius: 20px;
	background: #fff;
}

.pg-empty-icon {
	display: inline-grid;
	place-items: center;
	width: 56px;
	height: 56px;
	margin-bottom: 14px;
	border-radius: 16px;
	background: var(--hm-primary-soft);
	color: var(--hm-primary);
	font-size: 22px;
}

.pg-empty h6 {
	margin: 0 0 4px;
	font-size: 16px;
	font-weight: 700;
	color: var(--hm-ink);
}

.pg-empty p {
	max-width: 380px;
	margin: 0 auto;
	font-size: 14px;
	color: var(--hm-muted);
}

/* status pills */
.res-modern .c-pill {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	height: auto !important;
	min-height: 0 !important;
	padding: 3px 10px !important;
	border: 0 !important;
	border-radius: 999px !important;
	font-size: 12px !important;
	font-weight: 600;
	line-height: 1.5 !important;
	position: static !important;
	top: auto !important;
	vertical-align: middle;
}

.res-modern .c-pill::before {
	content: "";
	position: static !important;
	flex: 0 0 6px;
	width: 6px !important;
	height: 6px !important;
	margin: 0 !important;
	border-radius: 50%;
	background: currentColor !important;
	transform: none !important;
}

.res-modern .c-pill--primary {
	padding: 4px 14px !important;
}

.res-modern .c-pill--success {
	background: #ecfdf3 !important;
	color: var(--hm-success) !important;
}

.res-modern .c-pill--warning {
	background: #fffaeb !important;
	color: var(--hm-warning) !important;
}

.res-modern .c-pill--danger {
	background: #fef3f2 !important;
	color: var(--hm-danger) !important;
}

.res-modern .c-pill--primary {
	background: var(--hm-primary) !important;
	color: #fff !important;
	cursor: pointer;
}

.res-modern .c-pill--primary::before {
	display: none;
}

.pg-modern .pg-grid .card-body > .card-text.mr-2 {
	flex: 0 0 auto;
	margin: 0 0 0 48px;
	padding: 0 !important;
}

/* ---------- forms (profile, feedback) ---------- */

.pg-modern .userRegisterForm {
	margin-top: 0 !important;
	padding: 28px;
	border: 1px solid var(--hm-line);
	border-radius: 20px;
	background: #fff;
	box-shadow: var(--hm-shadow-sm);
}

.pg-modern .userRegisterForm fieldset > .row {
	row-gap: 18px;
	margin-bottom: 0;
}

.pg-modern .userRegisterForm fieldset > br {
	display: none;
}

.pg-modern .userRegisterForm fieldset > .row + .row {
	margin-top: 18px;
	padding-top: 22px;
	border-top: 1px solid var(--hm-line);
}

.pg-modern .userRegisterForm .form-control {
	margin-bottom: 0 !important;
}

.pg-modern .userRegisterForm .col-md-2 {
	flex: 0 0 33.333%;
	max-width: 33.333%;
}

.pg-modern .userRegisterForm .col-md-3 {
	flex: 0 0 50%;
	max-width: 50%;
}

.pg-modern .verifybtn,
.pg-modern .userRegisterForm .col_full {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 8px;
	padding-top: 20px;
	border-top: 1px solid var(--hm-line);
}

.pg-modern .userRegisterForm > br,
.pg-modern .userRegisterForm form > br {
	display: none;
}

/* feedback table */
.pg-modern .userRegisterForm .table {
	margin: 0;
}

.pg-modern .userRegisterForm .table th {
	padding: 12px 14px;
	border: 0 !important;
	border-bottom: 1px solid var(--hm-line) !important;
	background: var(--hm-bg);
	font-size: 12px;
	font-weight: 700 !important;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--hm-muted) !important;
}

.pg-modern .userRegisterForm .table th:first-child {
	border-radius: 10px 0 0 10px;
}

.pg-modern .userRegisterForm .table th:last-child {
	border-radius: 0 10px 10px 0;
}

.pg-modern .userRegisterForm .table td {
	padding: 14px;
	border-top: 0;
	border-bottom: 1px solid var(--hm-line);
	vertical-align: middle;
	font-size: 14px;
	color: var(--hm-ink) !important;
}

.pg-modern .userRegisterForm .table tr:last-child td {
	border-bottom: 0;
}

.pg-modern .rating {
	height: 40px !important;
	line-height: 40px !important;
	font-size: 28px !important;
}

.pg-modern .rating label:last-child .icon {
	color: #e2e8f0 !important;
}

.pg-modern .rating:not(:hover) label input:checked ~ .icon,
.pg-modern .rating:hover label:hover input ~ .icon {
	color: var(--hm-accent) !important;
}

/* ---------- Open Access resources ---------- */

.oa-modern #content > .container-fluid > .row.p-1:first-child {
	align-items: center;
	gap: 14px;
	margin: 0 0 18px;
	padding: 0 !important;
}

.oa-modern .custom-menu {
	position: static !important;
	margin: 0 !important;
}

.oa-modern .oa-search {
	position: relative;
	flex: 1;
	padding: 0 !important;
}

.oa-modern .oa-search .input-group {
	flex-wrap: nowrap;
	align-items: center;
	padding: 5px 5px 5px 20px;
	border: 1.5px solid var(--hm-line);
	border-radius: 999px;
	background: #fff;
	box-shadow: var(--hm-shadow-sm);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.oa-modern .oa-search .input-group:focus-within {
	border-color: var(--hm-primary);
	box-shadow: 0 0 0 4px rgba(184, 77, 8,  0.08);
}

.oa-modern .oa-search #searchkey {
	height: 42px;
	border: 0 !important;
	box-shadow: none !important;
	background: transparent;
	font-size: 15px;
}

.oa-modern .oa-search .search-btn {
	width: 42px;
	height: 42px;
	padding: 0;
	border: 0 !important;
	border-radius: 50% !important;
	background: var(--hm-primary) !important;
}

.oa-modern .hidewithoutfilter,
.oa-modern #showOACdata {
	font-size: 14px;
	font-weight: 500;
	color: var(--hm-muted);
}

.oa-modern .cardbody {
	margin: 8px 0 !important;
	border: 1px solid var(--hm-line) !important;
	border-radius: 14px !important;
	box-shadow: var(--hm-shadow-sm) !important;
	overflow: hidden;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.oa-modern .cardbody:hover {
	border-color: rgba(184, 77, 8,  0.2) !important;
	box-shadow: var(--hm-shadow-lg) !important;
}

.oa-modern .cardbody > .d-flex {
	align-items: center;
	padding: 10px;
}

.oa-modern .cardbody img {
	border-radius: 8px;
}

.oa-modern .oatitle {
	font-size: 14px !important;
	font-weight: 600;
	color: var(--hm-ink);
}

/* OA sidebar filters (built by script) */
.oa-modern #sidebar label,
.oa-modern #sidebar .accordion-header,
.oa-modern #sidebar li {
	color: rgba(255, 255, 255, 0.85);
}

.oa-modern #subjectTypeMainDiv,
.oa-modern #contentTypeMainDiv {
	padding: 0 14px;
}

/* ---------- shared buttons / fields on inner pages ---------- */

.pg-modern #content .form-control {
	min-height: 44px;
	border: 1.5px solid var(--hm-line);
	border-radius: 12px;
	font-size: 14px;
	color: var(--hm-ink);
	box-shadow: none;
}

.pg-modern #content .form-control:focus {
	border-color: var(--hm-primary);
	box-shadow: 0 0 0 4px rgba(184, 77, 8,  0.08);
}

.pg-modern #content label {
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--hm-muted);
}

.pg-modern #content .rating label {
	margin: 0;
	font-size: inherit;
	font-weight: 400;
}

.res-modern .btn.btn-primary {
	border: 0 !important;
	border-radius: 12px !important;
	background: var(--hm-primary) !important;
	font-weight: 600;
	text-transform: none !important;
	box-shadow: none;
}

.res-modern .btn.btn-primary:hover {
	background: var(--hm-primary-dark) !important;
}

.res-modern #content .verifybtn .btn {
	height: 44px;
	padding: 0 24px;
}

.res-modern .footerSection .arraowupBtn {
	border-radius: 50% !important;
}

.pg-btn-secondary {
	text-transform: none !important;
	display: inline-flex !important;
	align-items: center;
	height: 44px;
	padding: 0 22px !important;
	border: 1.5px solid var(--hm-line) !important;
	border-radius: 12px !important;
	background: #fff !important;
	color: var(--hm-ink) !important;
	font-weight: 600;
	text-transform: none;
	box-shadow: none !important;
}

.pg-btn-secondary:hover {
	border-color: var(--hm-ink) !important;
}

/* ==========================================================
   Popups (all modals except the home page login card)
   ========================================================== */

.res-modern .modal-backdrop.show,
.home-modern .modal-backdrop.show {
	opacity: 0.55;
	background: #0b2f55;
}

.res-modern .modal:not(#loginModal) .modal-dialog,
.home-modern .modal:not(#loginModal) .modal-dialog {
	padding: 0 12px;
}

.res-modern .modal:not(#loginModal) .modal-content,
.home-modern .modal:not(#loginModal) .modal-content {
	position: relative;
	overflow: hidden;
	border: 0 !important;
	border-radius: 20px !important;
	background: #fff;
	box-shadow: 0 32px 64px -24px rgba(1, 12, 26, 0.45) !important;
	font-family: var(--hm-font);
	color: var(--hm-ink);
}

/* nested "modal-content" forms inside delete popups */
.res-modern .modal:not(#loginModal) .modal-content .modal-content,
.home-modern .modal:not(#loginModal) .modal-content .modal-content {
	border-radius: 0 !important;
	box-shadow: none !important;
}

.res-modern .modal:not(#loginModal) #login-box,
.res-modern .modal:not(#loginModal) #login-box .row,
.home-modern .modal:not(#loginModal) #login-box,
.home-modern .modal:not(#loginModal) #login-box .row {
	margin: 0;
}

.res-modern .modal:not(#loginModal) #login-box [class*="col-"],
.home-modern .modal:not(#loginModal) #login-box [class*="col-"],
.res-modern .modal:not(#loginModal) .modal-content > .col-md-12,
.home-modern .modal:not(#loginModal) .modal-content > .col-md-12 {
	padding: 0;
}

/* contact us tiles */
.res-modern #contactUsModal .modal-body .row,
.home-modern #contactUsModal .modal-body .row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin: 0;
}

.res-modern #contactUsModal .modal-body .container,
.home-modern #contactUsModal .modal-body .container {
	padding: 0;
}

.res-modern #contactUsModal .contact-info,
.home-modern #contactUsModal .contact-info {
	max-width: none;
	margin: 0 !important;
	padding: 18px 16px;
	border-radius: 14px;
	background: var(--hm-bg);
	word-break: break-word;
}

.res-modern #contactUsModal .contact-info.col-md-12,
.home-modern #contactUsModal .contact-info.col-md-12 {
	grid-column: 1 / -1;
}

.res-modern #contactUsModal .contact-info img,
.home-modern #contactUsModal .contact-info img {
	width: 22px !important;
	height: 22px;
	object-fit: contain;
	opacity: 0.6;
}

.res-modern #contactUsModal .contact-info h6,
.home-modern #contactUsModal .contact-info h6 {
	margin: 0 0 4px;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--hm-muted);
}

.res-modern #contactUsModal .contact-info span,
.home-modern #contactUsModal .contact-info span {
	font-size: 14px;
	font-weight: 600;
	color: var(--hm-ink);
}

/* header bar: white, title left, round close button */
.res-modern .modal:not(#loginModal) .modal-header,
.home-modern .modal:not(#loginModal) .modal-header {
	align-items: center;
	justify-content: space-between !important;
	gap: 12px;
	padding: 20px 24px !important;
	border: 0 !important;
	border-bottom: 1px solid var(--hm-line) !important;
	border-radius: 0 !important;
	background: #fff !important;
}

.res-modern .modal:not(#loginModal) .modal-title,
.home-modern .modal:not(#loginModal) .modal-title {
	margin: 0;
	font-family: var(--hm-font);
	font-size: 18px !important;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.01em;
	text-align: left;
	color: var(--hm-ink) !important;
}

/* secondary notes rendered as a second h4 title (search history) */
.res-modern .modal:not(#loginModal) h4.modal-title,
.home-modern .modal:not(#loginModal) h4.modal-title {
	font-size: 13px !important;
	font-weight: 500;
	color: var(--hm-muted) !important;
}

.res-modern .modal:not(#loginModal) .close,
.home-modern .modal:not(#loginModal) .close,
.res-modern .modal .mclose {
	position: static !important;
	display: grid;
	place-items: center;
	flex: 0 0 34px;
	width: 34px;
	height: 34px;
	margin: 0 0 0 auto !important;
	padding: 0 !important;
	border: 0;
	border-radius: 50%;
	background: var(--hm-bg) !important;
	color: var(--hm-muted) !important;
	font-size: 22px;
	font-weight: 400;
	line-height: 1;
	opacity: 1;
	text-shadow: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.res-modern .modal:not(#loginModal) .close:hover,
.home-modern .modal:not(#loginModal) .close:hover {
	background: var(--hm-primary-soft) !important;
	color: var(--hm-primary) !important;
}

/* header that only holds the close button → float it in the corner */
.res-modern .modal:not(#loginModal) .modal-header.p-0,
.home-modern .modal:not(#loginModal) .modal-header.p-0 {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 5;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
}

.res-modern .modal:not(#loginModal) .modal-body,
.home-modern .modal:not(#loginModal) .modal-body {
	padding: 20px 24px 24px !important;
	font-size: 14px;
	color: var(--hm-ink);
}

.res-modern .modal .modal-body > .row,
.home-modern .modal .modal-body > .row {
	margin: 0;
}

.res-modern .modal .modal-body > .row > [class*="col-"],
.home-modern .modal .modal-body > .row > [class*="col-"] {
	padding: 0;
}

/* --- form popups (add / edit bookmark, document, password, share, request) --- */

.res-modern .modal .contact-wrap > .col-md-12,
.home-modern .modal .contact-wrap > .col-md-12 {
	padding: 0;
}

.res-modern .modal .contact-wrap form,
.home-modern .modal .contact-wrap form {
	padding: 28px 28px 24px !important;
}

.res-modern .modal .contact-wrap form > h1,
.home-modern .modal .contact-wrap form > h1 {
	margin: 0 44px 20px 0;
	padding: 0 !important;
	font-family: var(--hm-font);
	font-size: 20px !important;
	font-weight: 800;
	letter-spacing: -0.01em;
	text-align: left !important;
	color: var(--hm-ink);
}

.res-modern .modal fieldset > .row,
.home-modern .modal fieldset > .row {
	row-gap: 14px;
}

.res-modern .modal fieldset .col-md-12,
.home-modern .modal fieldset .col-md-12 {
	width: 100% !important;
	margin-top: 0 !important;
}

.res-modern .modal label,
.home-modern .modal:not(#loginModal) label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--hm-muted);
}

.res-modern .modal .form-control,
.home-modern .modal:not(#loginModal) .form-control {
	min-height: 44px;
	border: 1.5px solid var(--hm-line) !important;
	border-radius: 12px !important;
	background: var(--hm-bg);
	font-size: 14px;
	color: var(--hm-ink);
	box-shadow: none !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.res-modern .modal textarea.form-control,
.home-modern .modal textarea.form-control {
	min-height: 96px;
}

.res-modern .modal .form-control:focus,
.home-modern .modal:not(#loginModal) .form-control:focus {
	border-color: var(--hm-primary) !important;
	background: #fff;
	box-shadow: 0 0 0 4px rgba(184, 77, 8,  0.08) !important;
}

.res-modern .modal .showPasswordIcon {
	position: absolute;
	right: 16px;
	margin-top: 0;
	z-index: 2;
	color: var(--hm-subtle);
	cursor: pointer;
}

.res-modern .modal .showPasswordIcon:hover {
	color: var(--hm-primary);
}

.res-modern .modal form > br,
.home-modern .modal form > br {
	display: none;
}

/* action row */
.res-modern .modal .col_full,
.home-modern .modal .col_full {
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-start;
	gap: 10px;
	margin-top: 24px !important;
	padding: 0;
}

.res-modern .modal .btn,
.home-modern .modal:not(#loginModal) .btn {
	float: none !important;
	height: 44px;
	padding: 0 22px !important;
	border: 0 !important;
	border-radius: 12px !important;
	font-family: var(--hm-font);
	font-size: 14px;
	font-weight: 600;
	text-transform: none;
	box-shadow: none !important;
}

.res-modern .modal .btn-primary,
.home-modern .modal:not(#loginModal) .btn-primary {
	background: var(--hm-primary) !important;
	color: #fff !important;
}

.res-modern .modal .btn-primary:hover,
.home-modern .modal:not(#loginModal) .btn-primary:hover {
	background: var(--hm-primary-dark) !important;
}

/* cancel buttons (class closebtn / id close…) → secondary style */
.res-modern .modal .btn.closebtn,
.home-modern .modal .btn.closebtn,
.res-modern .modal .btn[id^="close"],
.res-modern .modal .btn-secondary {
	border: 1.5px solid var(--hm-line) !important;
	background: #fff !important;
	color: var(--hm-ink) !important;
}

.res-modern .modal .btn.closebtn:hover,
.home-modern .modal .btn.closebtn:hover,
.res-modern .modal .btn[id^="close"]:hover,
.res-modern .modal .btn-secondary:hover {
	border-color: var(--hm-ink) !important;
}

.res-modern .modal .btn-danger {
	background: var(--hm-danger) !important;
	color: #fff !important;
}

.res-modern .modal .btn-sm {
	height: 34px;
	padding: 0 14px !important;
	font-size: 13px;
}

/* --- delete confirmation popups --- */

.res-modern .modal form[id="deleteModal"] .container,
.home-modern .modal form[id="deleteModal"] .container {
	padding: 36px 32px 28px !important;
	text-align: center !important;
}

.res-modern .modal form[id="deleteModal"] .container::before {
	content: "";
	display: block;
	width: 56px;
	height: 56px;
	margin: 0 auto 16px;
	border-radius: 16px;
	background: #fef3f2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23b42318' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6'/%3E%3C/svg%3E") no-repeat center;
}

.res-modern .modal form[id="deleteModal"] h3 {
	margin: 0 0 6px;
	font-size: 20px;
	font-weight: 800;
	color: var(--hm-ink);
}

.res-modern .modal form[id="deleteModal"] p {
	margin: 0;
	font-size: 14px;
	color: var(--hm-muted);
}

.res-modern .modal form[id="deleteModal"] .col_full {
	justify-content: center;
	margin-top: 24px !important;
}

.res-modern .modal form[id="deleteModal"] button[type="submit"] {
	background: var(--hm-danger) !important;
}

/* --- tables inside popups (usage, search history, comments) --- */

.res-modern .modal table,
.home-modern .modal table {
	width: 100%;
	margin: 0;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--hm-line) !important;
	border-radius: 14px;
	overflow: hidden;
	font-size: 14px;
}

.res-modern .modal table th,
.home-modern .modal table th {
	padding: 12px 14px !important;
	border: 0 !important;
	border-bottom: 1px solid var(--hm-line) !important;
	background: var(--hm-bg) !important;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--hm-muted) !important;
}

.res-modern .modal table td,
.home-modern .modal table td {
	padding: 12px 14px !important;
	border: 0 !important;
	border-bottom: 1px solid var(--hm-line) !important;
	background: #fff !important;
	color: var(--hm-ink) !important;
	vertical-align: middle;
}

.res-modern .modal table tr:last-child td,
.home-modern .modal table tr:last-child td {
	border-bottom: 0 !important;
}

.res-modern .usageReportTable td:not(:first-child) {
	font-size: 18px;
	font-weight: 700;
}

.res-modern .modal .abovetable {
	overflow-x: auto;
}

/* red "Note:" labels → quiet helper text */
.res-modern .modal label[style*="red"],
.home-modern .modal label[style*="red"] {
	margin: 14px 0 0 !important;
	font-size: 12px;
	font-weight: 500;
	color: var(--hm-muted) !important;
}

.res-modern .modal label[style*="red"] b {
	color: var(--hm-ink);
}

/* spinners */
.res-modern .modal .spinner-border {
	width: 22px;
	height: 22px;
	border-width: 2px;
	color: var(--hm-primary) !important;
}

/* list-style popups (notifications, shared items) */
.res-modern .modal .shareList {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 24px !important;
	border-bottom: 1px solid var(--hm-line);
	cursor: pointer;
}

.res-modern .modal .shareList:hover {
	background: var(--hm-bg);
}

.res-modern .modal .shareList .c-pill {
	margin-left: auto !important;
}

.res-modern .modal .shareList > i {
	color: var(--hm-primary) !important;
}

/* radios / checkboxes */
.res-modern .modal input[type="radio"],
.res-modern .modal input[type="checkbox"],
.home-modern .modal input[type="radio"],
.home-modern .modal input[type="checkbox"] {
	accent-color: var(--hm-primary);
}

/* comments popups */
.res-modern .modal form#postYourcomments-form,
.home-modern .modal form#postYourcomments-form {
	padding: 0 !important;
}

.res-modern .modal #postYourcomments-form section,
.home-modern .modal #postYourcomments-form section {
	background: transparent !important;
}

.res-modern .modal #postYourcomments-form .container,
.home-modern .modal #postYourcomments-form .container {
	padding: 0 !important;
	max-width: none;
}

.res-modern .modal #postYourcomments-form .card,
.home-modern .modal #postYourcomments-form .card {
	border: 1px solid var(--hm-line) !important;
	border-radius: 14px 14px 0 0 !important;
}

.res-modern .modal #postYourcomments-form .card-footer,
.home-modern .modal #postYourcomments-form .card-footer {
	padding: 12px !important;
	border: 1px solid var(--hm-line) !important;
	border-top: 0 !important;
	border-radius: 0 0 14px 14px;
	background: var(--hm-bg) !important;
}

.res-modern .modal #writecommentId,
.home-modern .modal #writecommentId {
	padding: 12px 14px;
	border: 1.5px solid var(--hm-line);
	border-radius: 12px;
	font-size: 14px;
	resize: vertical;
}

.res-modern .modal #writecommentId:focus,
.home-modern .modal #writecommentId:focus {
	outline: 0;
	border-color: var(--hm-primary);
	box-shadow: 0 0 0 4px rgba(184, 77, 8,  0.08);
}

.res-modern .modal #postYourcomments-form .text-centermt-2,
.home-modern .modal #postYourcomments-form .text-centermt-2 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 14px;
	padding: 0 !important;
}

.res-modern .modal #postYourcomments-form .text-centermt-2 > span,
.home-modern .modal #postYourcomments-form .text-centermt-2 > span {
	font-size: 12px;
	color: var(--hm-muted) !important;
}

.res-modern .modal #postyourcommentsBtn,
.home-modern .modal #postyourcommentsBtn {
	flex: 0 0 auto;
	height: 40px;
}

/* file pickers */
.res-modern .modal input[type="file"],
.home-modern .modal input[type="file"] {
	width: 100%;
	padding: 6px;
	border: 1.5px dashed var(--hm-line) !important;
	border-radius: 12px !important;
	background: var(--hm-bg);
	font-size: 13px;
	color: var(--hm-muted);
}

.res-modern .modal input[type="file"]::file-selector-button,
.home-modern .modal input[type="file"]::file-selector-button {
	margin-right: 12px;
	padding: 8px 14px;
	border: 0;
	border-radius: 9px;
	background: var(--hm-primary);
	color: #fff;
	font-weight: 600;
	cursor: pointer;
}

/* profile photo popup */
.res-modern #uploadprofilepicModal img,
.home-modern #uploadprofilepicModal img {
	border-radius: 50%;
}

/* ---------- Responsive ---------- */

@media (max-width: 991.98px) {
	.pg-modern #content > .container-fluid {
		padding: 16px 16px 200px !important;
	}

	.pg-modern .userRegisterForm .col-md-2,
	.pg-modern .userRegisterForm .col-md-3 {
		flex: 0 0 50%;
		max-width: 50%;
	}
}

@media (max-width: 575.98px) {
	.pg-add-btn span {
		display: none;
	}

	.pg-add-btn {
		width: 46px;
		padding: 0 !important;
		justify-content: center;
	}

	.pg-modern .userRegisterForm {
		padding: 18px;
	}

	.pg-modern .userRegisterForm .col-md-2,
	.pg-modern .userRegisterForm .col-md-3 {
		flex: 0 0 100%;
		max-width: 100%;
	}

	.res-modern .modal .contact-wrap form {
		padding: 22px 20px 20px !important;
	}
}

/* seal brand fallback for pages that use the home header without home-modern.css */
.hm-brand img {
	width: 48px;
	height: 48px;
}