I’ll build this as a production-style rx-widgets.css for your RX Theme: global widget foundations, WordPress core widgets, sidebar widgets, cards, medical/info widgets, accessibility, responsive rules, dark mode, and print-safe styles.
Dear friend, create this file:
rx-theme/assets/css/rx-widgets.css
Then paste this full advanced widget CSS.
/*!
Theme Name: RX Theme
File: assets/css/rx-widgets.css
Purpose: Advanced widget styling system for RX Theme
Author: RxHarun
*/
/* =========================================================
RX WIDGETS CSS
---------------------------------------------------------
This file controls:
- Sidebar widgets
- Footer widgets
- WordPress default widgets
- Search widget
- Category widget
- Tag cloud widget
- Recent posts widget
- Author box widget
- Medical info widgets
- CTA widgets
- Newsletter widgets
- Table of contents widget
- Related posts widget
- Sticky sidebar widgets
- Dark mode support
- Responsive widget layout
========================================================= */
/* =========================================================
01. ROOT WIDGET VARIABLES
========================================================= */
:root {
--rx-widget-bg: #ffffff;
--rx-widget-bg-soft: #f8fafc;
--rx-widget-bg-muted: #f1f5f9;
--rx-widget-bg-hover: #eef6ff;
--rx-widget-text: #1e293b;
--rx-widget-text-soft: #475569;
--rx-widget-text-muted: #64748b;
--rx-widget-heading: #0f172a;
--rx-widget-primary: #0477bf;
--rx-widget-primary-hover: #035f99;
--rx-widget-primary-soft: #e5f4ff;
--rx-widget-success: #15803d;
--rx-widget-success-soft: #e9f9ef;
--rx-widget-warning: #b45309;
--rx-widget-warning-soft: #fff7ed;
--rx-widget-danger: #b91c1c;
--rx-widget-danger-soft: #fef2f2;
--rx-widget-info: #0369a1;
--rx-widget-info-soft: #e0f2fe;
--rx-widget-border: #e2e8f0;
--rx-widget-border-strong: #cbd5e1;
--rx-widget-radius-xs: 4px;
--rx-widget-radius-sm: 8px;
--rx-widget-radius-md: 12px;
--rx-widget-radius-lg: 18px;
--rx-widget-radius-xl: 24px;
--rx-widget-radius-pill: 999px;
--rx-widget-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
--rx-widget-shadow-sm: 0 4px 12px rgba(15, 23, 42, 0.07);
--rx-widget-shadow-md: 0 10px 25px rgba(15, 23, 42, 0.10);
--rx-widget-shadow-lg: 0 18px 45px rgba(15, 23, 42, 0.14);
--rx-widget-space-2xs: 0.25rem;
--rx-widget-space-xs: 0.5rem;
--rx-widget-space-sm: 0.75rem;
--rx-widget-space-md: 1rem;
--rx-widget-space-lg: 1.5rem;
--rx-widget-space-xl: 2rem;
--rx-widget-space-2xl: 3rem;
--rx-widget-font-size-xs: 0.75rem;
--rx-widget-font-size-sm: 0.875rem;
--rx-widget-font-size-md: 1rem;
--rx-widget-font-size-lg: 1.125rem;
--rx-widget-font-size-xl: 1.25rem;
--rx-widget-line-height: 1.7;
--rx-widget-transition: 180ms ease;
}
/* =========================================================
02. BASE WIDGET RESET
========================================================= */
.widget,
.rx-widget {
position: relative;
width: 100%;
margin: 0 0 var(--rx-widget-space-xl);
padding: var(--rx-widget-space-lg);
background: var(--rx-widget-bg);
color: var(--rx-widget-text);
border: 1px solid var(--rx-widget-border);
border-radius: var(--rx-widget-radius-lg);
box-shadow: var(--rx-widget-shadow-xs);
overflow-wrap: break-word;
word-break: normal;
}
.widget:last-child,
.rx-widget:last-child {
margin-bottom: 0;
}
.widget *,
.rx-widget * {
box-sizing: border-box;
}
.widget :where(p, ul, ol, dl, figure),
.rx-widget :where(p, ul, ol, dl, figure) {
margin-top: 0;
}
.widget :where(p, ul, ol),
.rx-widget :where(p, ul, ol) {
line-height: var(--rx-widget-line-height);
}
.widget a,
.rx-widget a {
color: var(--rx-widget-primary);
text-decoration: none;
transition:
color var(--rx-widget-transition),
background-color var(--rx-widget-transition),
border-color var(--rx-widget-transition),
box-shadow var(--rx-widget-transition);
}
.widget a:hover,
.widget a:focus-visible,
.rx-widget a:hover,
.rx-widget a:focus-visible {
color: var(--rx-widget-primary-hover);
text-decoration: underline;
}
.widget img,
.rx-widget img {
max-width: 100%;
height: auto;
border-radius: var(--rx-widget-radius-md);
}
.widget iframe,
.widget video,
.rx-widget iframe,
.rx-widget video {
max-width: 100%;
border-radius: var(--rx-widget-radius-md);
}
.widget input,
.widget textarea,
.widget select,
.rx-widget input,
.rx-widget textarea,
.rx-widget select {
max-width: 100%;
}
/* =========================================================
03. WIDGET TITLE SYSTEM
========================================================= */
.widget-title,
.widget .widgettitle,
.rx-widget-title,
.rx-widget__title {
position: relative;
margin: 0 0 var(--rx-widget-space-md);
padding-bottom: var(--rx-widget-space-sm);
color: var(--rx-widget-heading);
font-size: var(--rx-widget-font-size-lg);
font-weight: 800;
line-height: 1.35;
letter-spacing: -0.015em;
}
.widget-title::after,
.widget .widgettitle::after,
.rx-widget-title::after,
.rx-widget__title::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 52px;
height: 3px;
background: linear-gradient(90deg, var(--rx-widget-primary), transparent);
border-radius: var(--rx-widget-radius-pill);
}
.rx-widget-title-center {
text-align: center;
}
.rx-widget-title-center::after {
left: 50%;
transform: translateX(-50%);
}
.rx-widget-subtitle,
.rx-widget__subtitle {
margin-top: calc(var(--rx-widget-space-sm) * -1);
margin-bottom: var(--rx-widget-space-md);
color: var(--rx-widget-text-muted);
font-size: var(--rx-widget-font-size-sm);
line-height: 1.6;
}
/* =========================================================
04. WIDGET VARIANTS
========================================================= */
.rx-widget--flat {
box-shadow: none;
}
.rx-widget--soft {
background: var(--rx-widget-bg-soft);
}
.rx-widget--primary {
background: var(--rx-widget-primary-soft);
border-color: rgba(4, 119, 191, 0.22);
}
.rx-widget--success {
background: var(--rx-widget-success-soft);
border-color: rgba(21, 128, 61, 0.22);
}
.rx-widget--warning {
background: var(--rx-widget-warning-soft);
border-color: rgba(180, 83, 9, 0.25);
}
.rx-widget--danger {
background: var(--rx-widget-danger-soft);
border-color: rgba(185, 28, 28, 0.24);
}
.rx-widget--info {
background: var(--rx-widget-info-soft);
border-color: rgba(3, 105, 161, 0.22);
}
.rx-widget--borderless {
border: 0;
}
.rx-widget--shadow {
box-shadow: var(--rx-widget-shadow-md);
}
.rx-widget--compact {
padding: var(--rx-widget-space-md);
}
.rx-widget--large {
padding: var(--rx-widget-space-xl);
}
.rx-widget--rounded {
border-radius: var(--rx-widget-radius-xl);
}
.rx-widget--glass {
background: rgba(255, 255, 255, 0.78);
backdrop-filter: blur(16px);
border-color: rgba(255, 255, 255, 0.35);
}
/* =========================================================
05. SIDEBAR WIDGET AREA
========================================================= */
.rx-sidebar,
.widget-area,
.sidebar {
width: 100%;
}
.rx-sidebar .widget,
.widget-area .widget,
.sidebar .widget {
margin-bottom: var(--rx-widget-space-lg);
}
.rx-sidebar--sticky {
position: sticky;
top: 96px;
align-self: flex-start;
}
.admin-bar .rx-sidebar--sticky {
top: 128px;
}
.rx-sidebar-section {
display: grid;
gap: var(--rx-widget-space-lg);
}
.rx-sidebar-separator {
height: 1px;
margin: var(--rx-widget-space-lg) 0;
background: var(--rx-widget-border);
}
/* =========================================================
06. FOOTER WIDGET AREA
========================================================= */
.rx-footer-widgets {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--rx-widget-space-xl);
}
.rx-footer-widgets .widget,
.rx-footer-widgets .rx-widget {
margin-bottom: 0;
padding: 0;
background: transparent;
border: 0;
box-shadow: none;
color: inherit;
}
.rx-footer-widgets .widget-title,
.rx-footer-widgets .rx-widget-title {
color: inherit;
}
.rx-footer-widgets a {
color: inherit;
opacity: 0.86;
}
.rx-footer-widgets a:hover {
opacity: 1;
}
/* =========================================================
07. WORDPRESS LIST WIDGETS
========================================================= */
.widget ul,
.rx-widget ul {
margin: 0;
padding: 0;
list-style: none;
}
.widget ul li,
.rx-widget ul li {
position: relative;
padding: 0.65rem 0;
border-bottom: 1px solid var(--rx-widget-border);
color: var(--rx-widget-text-soft);
}
.widget ul li:last-child,
.rx-widget ul li:last-child {
border-bottom: 0;
}
.widget ul li a,
.rx-widget ul li a {
display: inline-flex;
align-items: center;
gap: 0.45rem;
color: var(--rx-widget-text);
font-weight: 600;
}
.widget ul li a:hover,
.rx-widget ul li a:hover {
color: var(--rx-widget-primary);
}
.widget ul.children,
.widget ul.sub-menu,
.rx-widget ul.children,
.rx-widget ul.sub-menu {
margin-top: var(--rx-widget-space-xs);
padding-left: var(--rx-widget-space-md);
border-left: 2px solid var(--rx-widget-border);
}
.widget ul.children li,
.widget ul.sub-menu li,
.rx-widget ul.children li,
.rx-widget ul.sub-menu li {
font-size: var(--rx-widget-font-size-sm);
}
/* =========================================================
08. CATEGORY WIDGET
========================================================= */
.widget_categories ul li,
.rx-widget-categories li {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--rx-widget-space-sm);
}
.widget_categories ul li a,
.rx-widget-categories li a {
flex: 1;
}
.widget_categories ul li::before,
.rx-widget-categories li::before {
content: "›";
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.35rem;
height: 1.35rem;
margin-right: 0.35rem;
color: var(--rx-widget-primary);
background: var(--rx-widget-primary-soft);
border-radius: 50%;
font-weight: 800;
}
.widget_categories select {
width: 100%;
}
/* =========================================================
09. ARCHIVE WIDGET
========================================================= */
.widget_archive ul li,
.rx-widget-archive li {
display: flex;
justify-content: space-between;
gap: var(--rx-widget-space-sm);
}
.widget_archive ul li a::before,
.rx-widget-archive li a::before {
content: "📅";
margin-right: 0.45rem;
font-size: 0.9em;
}
/* =========================================================
10. RECENT POSTS WIDGET
========================================================= */
.widget_recent_entries ul li,
.rx-widget-recent-posts li {
padding: var(--rx-widget-space-sm) 0;
}
.widget_recent_entries a,
.rx-recent-post-title {
display: block;
color: var(--rx-widget-heading);
font-weight: 700;
line-height: 1.45;
}
.widget_recent_entries .post-date,
.rx-recent-post-date {
display: block;
margin-top: 0.25rem;
color: var(--rx-widget-text-muted);
font-size: var(--rx-widget-font-size-xs);
}
.rx-widget-recent-posts--card li {
display: grid;
grid-template-columns: 84px minmax(0, 1fr);
gap: var(--rx-widget-space-sm);
padding: var(--rx-widget-space-sm);
background: var(--rx-widget-bg-soft);
border: 1px solid var(--rx-widget-border);
border-radius: var(--rx-widget-radius-md);
margin-bottom: var(--rx-widget-space-sm);
}
.rx-recent-post-thumb {
display: block;
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: var(--rx-widget-radius-sm);
background: var(--rx-widget-bg-muted);
}
.rx-recent-post-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.rx-recent-post-meta {
display: flex;
flex-wrap: wrap;
gap: 0.4rem 0.65rem;
margin-top: 0.35rem;
color: var(--rx-widget-text-muted);
font-size: var(--rx-widget-font-size-xs);
}
/* =========================================================
11. RECENT COMMENTS WIDGET
========================================================= */
.widget_recent_comments li {
color: var(--rx-widget-text-muted);
font-size: var(--rx-widget-font-size-sm);
}
.widget_recent_comments .comment-author-link {
color: var(--rx-widget-heading);
font-weight: 700;
}
.widget_recent_comments a {
font-weight: 700;
}
/* =========================================================
12. SEARCH WIDGET
========================================================= */
.widget_search form,
.search-form,
.rx-widget-search form {
position: relative;
display: flex;
gap: var(--rx-widget-space-xs);
width: 100%;
}
.widget_search label,
.search-form label,
.rx-widget-search label {
flex: 1;
margin: 0;
}
.widget_search .search-field,
.search-form .search-field,
.rx-widget-search input[type="search"] {
width: 100%;
min-height: 46px;
padding: 0.75rem 1rem;
color: var(--rx-widget-text);
background: var(--rx-widget-bg);
border: 1px solid var(--rx-widget-border-strong);
border-radius: var(--rx-widget-radius-md);
outline: none;
transition:
border-color var(--rx-widget-transition),
box-shadow var(--rx-widget-transition);
}
.widget_search .search-field:focus,
.search-form .search-field:focus,
.rx-widget-search input[type="search"]:focus {
border-color: var(--rx-widget-primary);
box-shadow: 0 0 0 4px rgba(4, 119, 191, 0.12);
}
.widget_search .search-submit,
.search-form .search-submit,
.rx-widget-search button {
min-height: 46px;
padding: 0.75rem 1rem;
color: #ffffff;
background: var(--rx-widget-primary);
border: 1px solid var(--rx-widget-primary);
border-radius: var(--rx-widget-radius-md);
font-weight: 800;
cursor: pointer;
transition:
background-color var(--rx-widget-transition),
border-color var(--rx-widget-transition),
transform var(--rx-widget-transition);
}
.widget_search .search-submit:hover,
.search-form .search-submit:hover,
.rx-widget-search button:hover {
background: var(--rx-widget-primary-hover);
border-color: var(--rx-widget-primary-hover);
transform: translateY(-1px);
}
/* =========================================================
13. TAG CLOUD WIDGET
========================================================= */
.tagcloud,
.rx-tag-cloud {
display: flex;
flex-wrap: wrap;
gap: var(--rx-widget-space-xs);
}
.tagcloud a,
.rx-tag-cloud a {
display: inline-flex;
align-items: center;
min-height: 32px;
padding: 0.4rem 0.7rem;
color: var(--rx-widget-text-soft);
background: var(--rx-widget-bg-soft);
border: 1px solid var(--rx-widget-border);
border-radius: var(--rx-widget-radius-pill);
font-size: var(--rx-widget-font-size-sm) !important;
font-weight: 700;
line-height: 1;
}
.tagcloud a:hover,
.tagcloud a:focus-visible,
.rx-tag-cloud a:hover,
.rx-tag-cloud a:focus-visible {
color: #ffffff;
background: var(--rx-widget-primary);
border-color: var(--rx-widget-primary);
text-decoration: none;
}
/* =========================================================
14. CALENDAR WIDGET
========================================================= */
.widget_calendar table,
.wp-calendar-table {
width: 100%;
border-collapse: collapse;
text-align: center;
font-size: var(--rx-widget-font-size-sm);
}
.widget_calendar caption {
margin-bottom: var(--rx-widget-space-sm);
color: var(--rx-widget-heading);
font-weight: 800;
}
.widget_calendar th,
.widget_calendar td,
.wp-calendar-table th,
.wp-calendar-table td {
padding: 0.5rem 0.35rem;
border: 1px solid var(--rx-widget-border);
}
.widget_calendar th,
.wp-calendar-table th {
color: var(--rx-widget-heading);
background: var(--rx-widget-bg-soft);
font-weight: 800;
}
.widget_calendar td a,
.wp-calendar-table td a {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 28px;
min-height: 28px;
color: #ffffff;
background: var(--rx-widget-primary);
border-radius: 50%;
font-weight: 800;
text-decoration: none;
}
.wp-calendar-nav {
display: flex;
justify-content: space-between;
gap: var(--rx-widget-space-sm);
margin-top: var(--rx-widget-space-sm);
font-size: var(--rx-widget-font-size-sm);
font-weight: 700;
}
/* =========================================================
15. RSS WIDGET
========================================================= */
.widget_rss .rsswidget {
color: var(--rx-widget-heading);
font-weight: 800;
}
.widget_rss .rss-date {
display: block;
margin: 0.25rem 0;
color: var(--rx-widget-text-muted);
font-size: var(--rx-widget-font-size-xs);
}
.widget_rss cite {
display: block;
margin-top: var(--rx-widget-space-xs);
color: var(--rx-widget-primary);
font-style: normal;
font-weight: 700;
}
/* =========================================================
16. NAV MENU WIDGET
========================================================= */
.widget_nav_menu ul li a,
.rx-widget-menu a {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.45rem 0;
}
.widget_nav_menu ul li a::after,
.rx-widget-menu a::after {
content: "→";
opacity: 0;
transform: translateX(-4px);
transition:
opacity var(--rx-widget-transition),
transform var(--rx-widget-transition);
}
.widget_nav_menu ul li a:hover::after,
.rx-widget-menu a:hover::after {
opacity: 1;
transform: translateX(0);
}
/* =========================================================
17. TEXT / CUSTOM HTML WIDGET
========================================================= */
.widget_text,
.widget_custom_html {
line-height: var(--rx-widget-line-height);
}
.widget_text p:last-child,
.widget_custom_html p:last-child {
margin-bottom: 0;
}
.textwidget strong,
.custom-html-widget strong {
color: var(--rx-widget-heading);
}
.textwidget blockquote,
.custom-html-widget blockquote {
margin: var(--rx-widget-space-md) 0;
padding: var(--rx-widget-space-md);
background: var(--rx-widget-bg-soft);
border-left: 4px solid var(--rx-widget-primary);
border-radius: var(--rx-widget-radius-md);
}
/* =========================================================
18. IMAGE WIDGET
========================================================= */
.widget_media_image img,
.rx-widget-image img {
display: block;
width: 100%;
border-radius: var(--rx-widget-radius-lg);
}
.rx-widget-image-caption,
.widget_media_image .wp-caption-text {
margin-top: var(--rx-widget-space-xs);
color: var(--rx-widget-text-muted);
font-size: var(--rx-widget-font-size-sm);
text-align: center;
}
/* =========================================================
19. VIDEO / AUDIO WIDGET
========================================================= */
.widget_media_video video,
.widget_media_audio audio {
width: 100%;
}
.widget_media_video .wp-video,
.widget_media_audio .wp-audio-shortcode {
width: 100% !important;
}
/* =========================================================
20. BUTTON SYSTEM FOR WIDGETS
========================================================= */
.rx-widget-btn,
.widget .button,
.widget button,
.rx-widget button,
.rx-widget input[type="submit"] {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
min-height: 42px;
padding: 0.65rem 1rem;
color: #ffffff;
background: var(--rx-widget-primary);
border: 1px solid var(--rx-widget-primary);
border-radius: var(--rx-widget-radius-md);
font-size: var(--rx-widget-font-size-sm);
font-weight: 800;
line-height: 1.2;
text-decoration: none;
cursor: pointer;
transition:
background-color var(--rx-widget-transition),
border-color var(--rx-widget-transition),
color var(--rx-widget-transition),
transform var(--rx-widget-transition),
box-shadow var(--rx-widget-transition);
}
.rx-widget-btn:hover,
.widget .button:hover,
.widget button:hover,
.rx-widget button:hover,
.rx-widget input[type="submit"]:hover {
color: #ffffff;
background: var(--rx-widget-primary-hover);
border-color: var(--rx-widget-primary-hover);
text-decoration: none;
transform: translateY(-1px);
box-shadow: var(--rx-widget-shadow-sm);
}
.rx-widget-btn--outline {
color: var(--rx-widget-primary);
background: transparent;
border-color: var(--rx-widget-primary);
}
.rx-widget-btn--outline:hover {
color: #ffffff;
background: var(--rx-widget-primary);
}
.rx-widget-btn--soft {
color: var(--rx-widget-primary);
background: var(--rx-widget-primary-soft);
border-color: transparent;
}
.rx-widget-btn--block {
width: 100%;
}
.rx-widget-btn--sm {
min-height: 34px;
padding: 0.45rem 0.75rem;
font-size: var(--rx-widget-font-size-xs);
}
.rx-widget-btn--lg {
min-height: 52px;
padding: 0.85rem 1.25rem;
font-size: var(--rx-widget-font-size-md);
}
/* =========================================================
21. FORM WIDGETS
========================================================= */
.rx-widget-form {
display: grid;
gap: var(--rx-widget-space-sm);
}
.rx-widget-form label {
display: block;
margin-bottom: 0.35rem;
color: var(--rx-widget-heading);
font-size: var(--rx-widget-font-size-sm);
font-weight: 700;
}
.rx-widget-form input,
.rx-widget-form textarea,
.rx-widget-form select,
.widget input[type="text"],
.widget input[type="email"],
.widget input[type="url"],
.widget input[type="password"],
.widget input[type="search"],
.widget input[type="number"],
.widget textarea,
.widget select {
width: 100%;
min-height: 44px;
padding: 0.7rem 0.85rem;
color: var(--rx-widget-text);
background: var(--rx-widget-bg);
border: 1px solid var(--rx-widget-border-strong);
border-radius: var(--rx-widget-radius-md);
outline: none;
transition:
border-color var(--rx-widget-transition),
box-shadow var(--rx-widget-transition);
}
.rx-widget-form textarea,
.widget textarea {
min-height: 120px;
resize: vertical;
}
.rx-widget-form input:focus,
.rx-widget-form textarea:focus,
.rx-widget-form select:focus,
.widget input[type="text"]:focus,
.widget input[type="email"]:focus,
.widget input[type="url"]:focus,
.widget input[type="password"]:focus,
.widget input[type="search"]:focus,
.widget input[type="number"]:focus,
.widget textarea:focus,
.widget select:focus {
border-color: var(--rx-widget-primary);
box-shadow: 0 0 0 4px rgba(4, 119, 191, 0.12);
}
.rx-widget-form-help {
margin-top: 0.25rem;
color: var(--rx-widget-text-muted);
font-size: var(--rx-widget-font-size-xs);
}
/* =========================================================
22. NEWSLETTER WIDGET
========================================================= */
.rx-newsletter-widget {
overflow: hidden;
background:
radial-gradient(circle at top right, rgba(4, 119, 191, 0.14), transparent 34%),
var(--rx-widget-bg);
}
.rx-newsletter-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
margin-bottom: var(--rx-widget-space-sm);
color: var(--rx-widget-primary);
background: var(--rx-widget-primary-soft);
border-radius: 50%;
font-size: 1.4rem;
}
.rx-newsletter-form {
display: grid;
gap: var(--rx-widget-space-sm);
margin-top: var(--rx-widget-space-md);
}
.rx-newsletter-form input[type="email"] {
min-height: 48px;
}
.rx-newsletter-note {
margin: var(--rx-widget-space-xs) 0 0;
color: var(--rx-widget-text-muted);
font-size: var(--rx-widget-font-size-xs);
}
/* =========================================================
23. AUTHOR WIDGET
========================================================= */
.rx-author-widget {
text-align: center;
}
.rx-author-avatar {
width: 96px;
height: 96px;
margin: 0 auto var(--rx-widget-space-md);
border-radius: 50%;
overflow: hidden;
border: 4px solid var(--rx-widget-primary-soft);
}
.rx-author-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.rx-author-name {
margin: 0 0 0.25rem;
color: var(--rx-widget-heading);
font-size: var(--rx-widget-font-size-lg);
font-weight: 900;
}
.rx-author-role {
margin: 0 0 var(--rx-widget-space-sm);
color: var(--rx-widget-primary);
font-size: var(--rx-widget-font-size-sm);
font-weight: 800;
}
.rx-author-bio {
margin: 0 0 var(--rx-widget-space-md);
color: var(--rx-widget-text-soft);
font-size: var(--rx-widget-font-size-sm);
line-height: 1.7;
}
.rx-author-social {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--rx-widget-space-xs);
}
.rx-author-social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
color: var(--rx-widget-primary);
background: var(--rx-widget-primary-soft);
border-radius: 50%;
text-decoration: none;
}
.rx-author-social a:hover {
color: #ffffff;
background: var(--rx-widget-primary);
}
/* =========================================================
24. MEDICAL ALERT / HEALTH INFO WIDGET
========================================================= */
.rx-medical-alert {
display: grid;
gap: var(--rx-widget-space-sm);
padding: var(--rx-widget-space-lg);
background: var(--rx-widget-danger-soft);
border: 1px solid rgba(185, 28, 28, 0.25);
border-left: 5px solid var(--rx-widget-danger);
border-radius: var(--rx-widget-radius-lg);
}
.rx-medical-alert__title {
margin: 0;
color: var(--rx-widget-danger);
font-size: var(--rx-widget-font-size-lg);
font-weight: 900;
}
.rx-medical-alert__text {
margin: 0;
color: var(--rx-widget-text);
line-height: 1.7;
}
.rx-medical-alert--warning {
background: var(--rx-widget-warning-soft);
border-color: rgba(180, 83, 9, 0.25);
border-left-color: var(--rx-widget-warning);
}
.rx-medical-alert--warning .rx-medical-alert__title {
color: var(--rx-widget-warning);
}
.rx-medical-alert--info {
background: var(--rx-widget-info-soft);
border-color: rgba(3, 105, 161, 0.22);
border-left-color: var(--rx-widget-info);
}
.rx-medical-alert--info .rx-medical-alert__title {
color: var(--rx-widget-info);
}
.rx-medical-disclaimer {
padding: var(--rx-widget-space-md);
color: var(--rx-widget-text-soft);
background: var(--rx-widget-bg-soft);
border: 1px dashed var(--rx-widget-border-strong);
border-radius: var(--rx-widget-radius-md);
font-size: var(--rx-widget-font-size-sm);
line-height: 1.7;
}
.rx-medical-disclaimer strong {
color: var(--rx-widget-heading);
}
/* =========================================================
25. TABLE OF CONTENTS WIDGET
========================================================= */
.rx-toc-widget {
max-height: calc(100vh - 140px);
overflow: auto;
scrollbar-width: thin;
}
.rx-toc-widget ol,
.rx-toc-widget ul {
counter-reset: rx-toc;
}
.rx-toc-widget li {
border: 0;
padding: 0;
}
.rx-toc-widget a {
display: flex;
gap: 0.55rem;
padding: 0.55rem 0.7rem;
color: var(--rx-widget-text-soft);
border-radius: var(--rx-widget-radius-sm);
font-size: var(--rx-widget-font-size-sm);
font-weight: 700;
line-height: 1.45;
}
.rx-toc-widget a::before {
counter-increment: rx-toc;
content: counter(rx-toc, decimal-leading-zero);
color: var(--rx-widget-primary);
font-size: var(--rx-widget-font-size-xs);
font-weight: 900;
}
.rx-toc-widget a:hover,
.rx-toc-widget a:focus-visible,
.rx-toc-widget a.is-active {
color: var(--rx-widget-primary);
background: var(--rx-widget-primary-soft);
text-decoration: none;
}
/* =========================================================
26. CTA WIDGET
========================================================= */
.rx-cta-widget {
overflow: hidden;
text-align: center;
background:
linear-gradient(135deg, rgba(4, 119, 191, 0.95), rgba(3, 95, 153, 0.96)),
var(--rx-widget-primary);
color: #ffffff;
border: 0;
}
.rx-cta-widget::before {
content: "";
position: absolute;
inset: -35%;
background:
radial-gradient(circle, rgba(255,255,255,0.22), transparent 35%);
pointer-events: none;
}
.rx-cta-widget > * {
position: relative;
z-index: 1;
}
.rx-cta-widget .rx-widget-title,
.rx-cta-title {
color: #ffffff;
}
.rx-cta-widget .rx-widget-title::after,
.rx-cta-title::after {
background: rgba(255,255,255,0.75);
}
.rx-cta-text {
margin-bottom: var(--rx-widget-space-md);
color: rgba(255, 255, 255, 0.88);
}
.rx-cta-widget .rx-widget-btn {
color: var(--rx-widget-primary);
background: #ffffff;
border-color: #ffffff;
}
.rx-cta-widget .rx-widget-btn:hover {
color: #ffffff;
background: transparent;
border-color: rgba(255, 255, 255, 0.75);
}
/* =========================================================
27. STATS WIDGET
========================================================= */
.rx-stats-widget {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--rx-widget-space-sm);
}
.rx-stat-item {
padding: var(--rx-widget-space-md);
text-align: center;
background: var(--rx-widget-bg-soft);
border: 1px solid var(--rx-widget-border);
border-radius: var(--rx-widget-radius-md);
}
.rx-stat-number {
display: block;
color: var(--rx-widget-primary);
font-size: 1.6rem;
font-weight: 900;
line-height: 1.1;
}
.rx-stat-label {
display: block;
margin-top: 0.35rem;
color: var(--rx-widget-text-muted);
font-size: var(--rx-widget-font-size-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* =========================================================
28. CONTACT INFO WIDGET
========================================================= */
.rx-contact-widget {
display: grid;
gap: var(--rx-widget-space-sm);
}
.rx-contact-item {
display: grid;
grid-template-columns: 40px minmax(0, 1fr);
gap: var(--rx-widget-space-sm);
align-items: start;
}
.rx-contact-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
color: var(--rx-widget-primary);
background: var(--rx-widget-primary-soft);
border-radius: 50%;
}
.rx-contact-label {
display: block;
color: var(--rx-widget-heading);
font-weight: 800;
}
.rx-contact-text {
display: block;
color: var(--rx-widget-text-soft);
font-size: var(--rx-widget-font-size-sm);
line-height: 1.6;
}
/* =========================================================
29. OPENING HOURS WIDGET
========================================================= */
.rx-hours-widget {
display: grid;
gap: var(--rx-widget-space-xs);
}
.rx-hours-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--rx-widget-space-md);
padding: 0.65rem 0;
border-bottom: 1px solid var(--rx-widget-border);
}
.rx-hours-row:last-child {
border-bottom: 0;
}
.rx-hours-day {
color: var(--rx-widget-heading);
font-weight: 800;
}
.rx-hours-time {
color: var(--rx-widget-text-soft);
font-size: var(--rx-widget-font-size-sm);
}
.rx-hours-row.is-closed .rx-hours-time {
color: var(--rx-widget-danger);
font-weight: 800;
}
/* =========================================================
30. RELATED POSTS WIDGET
========================================================= */
.rx-related-widget {
display: grid;
gap: var(--rx-widget-space-sm);
}
.rx-related-item {
display: grid;
grid-template-columns: 76px minmax(0, 1fr);
gap: var(--rx-widget-space-sm);
padding-bottom: var(--rx-widget-space-sm);
border-bottom: 1px solid var(--rx-widget-border);
}
.rx-related-item:last-child {
padding-bottom: 0;
border-bottom: 0;
}
.rx-related-thumb {
aspect-ratio: 1 / 1;
overflow: hidden;
background: var(--rx-widget-bg-muted);
border-radius: var(--rx-widget-radius-md);
}
.rx-related-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.rx-related-title {
margin: 0;
font-size: var(--rx-widget-font-size-sm);
font-weight: 800;
line-height: 1.45;
}
.rx-related-title a {
color: var(--rx-widget-heading);
}
.rx-related-title a:hover {
color: var(--rx-widget-primary);
}
.rx-related-meta {
margin-top: 0.35rem;
color: var(--rx-widget-text-muted);
font-size: var(--rx-widget-font-size-xs);
}
/* =========================================================
31. POPULAR POSTS / TRENDING WIDGET
========================================================= */
.rx-popular-list {
counter-reset: rx-popular;
}
.rx-popular-item {
display: grid;
grid-template-columns: 38px minmax(0, 1fr);
gap: var(--rx-widget-space-sm);
align-items: start;
padding: var(--rx-widget-space-sm) 0;
border-bottom: 1px solid var(--rx-widget-border);
}
.rx-popular-item:last-child {
border-bottom: 0;
}
.rx-popular-item::before {
counter-increment: rx-popular;
content: counter(rx-popular);
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
color: #ffffff;
background: var(--rx-widget-primary);
border-radius: 50%;
font-weight: 900;
}
.rx-popular-title {
margin: 0;
color: var(--rx-widget-heading);
font-size: var(--rx-widget-font-size-sm);
font-weight: 800;
line-height: 1.5;
}
/* =========================================================
32. SOCIAL FOLLOW WIDGET
========================================================= */
.rx-social-widget {
display: flex;
flex-wrap: wrap;
gap: var(--rx-widget-space-xs);
}
.rx-social-widget a {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
min-width: 42px;
min-height: 42px;
padding: 0.55rem 0.75rem;
color: var(--rx-widget-text);
background: var(--rx-widget-bg-soft);
border: 1px solid var(--rx-widget-border);
border-radius: var(--rx-widget-radius-md);
font-size: var(--rx-widget-font-size-sm);
font-weight: 800;
text-decoration: none;
}
.rx-social-widget a:hover {
color: #ffffff;
background: var(--rx-widget-primary);
border-color: var(--rx-widget-primary);
}
/* =========================================================
33. BADGES / PILLS
========================================================= */
.rx-widget-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
min-height: 26px;
padding: 0.25rem 0.6rem;
color: var(--rx-widget-primary);
background: var(--rx-widget-primary-soft);
border-radius: var(--rx-widget-radius-pill);
font-size: var(--rx-widget-font-size-xs);
font-weight: 900;
line-height: 1;
}
.rx-widget-badge--success {
color: var(--rx-widget-success);
background: var(--rx-widget-success-soft);
}
.rx-widget-badge--warning {
color: var(--rx-widget-warning);
background: var(--rx-widget-warning-soft);
}
.rx-widget-badge--danger {
color: var(--rx-widget-danger);
background: var(--rx-widget-danger-soft);
}
/* =========================================================
34. PRICE / SERVICE WIDGET
========================================================= */
.rx-service-widget {
display: grid;
gap: var(--rx-widget-space-md);
}
.rx-service-item {
padding: var(--rx-widget-space-md);
background: var(--rx-widget-bg-soft);
border: 1px solid var(--rx-widget-border);
border-radius: var(--rx-widget-radius-md);
}
.rx-service-title {
margin: 0 0 0.35rem;
color: var(--rx-widget-heading);
font-weight: 900;
}
.rx-service-desc {
margin: 0;
color: var(--rx-widget-text-soft);
font-size: var(--rx-widget-font-size-sm);
}
.rx-service-price {
margin-top: var(--rx-widget-space-sm);
color: var(--rx-widget-primary);
font-weight: 900;
}
/* =========================================================
35. DOWNLOAD / RESOURCE WIDGET
========================================================= */
.rx-download-widget {
display: grid;
gap: var(--rx-widget-space-sm);
}
.rx-download-item {
display: grid;
grid-template-columns: 42px minmax(0, 1fr) auto;
gap: var(--rx-widget-space-sm);
align-items: center;
padding: var(--rx-widget-space-sm);
background: var(--rx-widget-bg-soft);
border: 1px solid var(--rx-widget-border);
border-radius: var(--rx-widget-radius-md);
}
.rx-download-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
color: var(--rx-widget-primary);
background: var(--rx-widget-primary-soft);
border-radius: var(--rx-widget-radius-sm);
}
.rx-download-title {
color: var(--rx-widget-heading);
font-weight: 800;
}
.rx-download-meta {
color: var(--rx-widget-text-muted);
font-size: var(--rx-widget-font-size-xs);
}
/* =========================================================
36. FAQ WIDGET
========================================================= */
.rx-faq-widget {
display: grid;
gap: var(--rx-widget-space-sm);
}
.rx-faq-item {
border: 1px solid var(--rx-widget-border);
border-radius: var(--rx-widget-radius-md);
overflow: hidden;
}
.rx-faq-question {
width: 100%;
padding: var(--rx-widget-space-md);
color: var(--rx-widget-heading);
background: var(--rx-widget-bg-soft);
border: 0;
text-align: left;
font-weight: 900;
cursor: pointer;
}
.rx-faq-answer {
padding: var(--rx-widget-space-md);
color: var(--rx-widget-text-soft);
line-height: 1.7;
}
.rx-faq-answer p:last-child {
margin-bottom: 0;
}
/* =========================================================
37. MINI CARD GRID WIDGET
========================================================= */
.rx-widget-card-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--rx-widget-space-sm);
}
.rx-widget-mini-card {
padding: var(--rx-widget-space-md);
background: var(--rx-widget-bg-soft);
border: 1px solid var(--rx-widget-border);
border-radius: var(--rx-widget-radius-md);
transition:
transform var(--rx-widget-transition),
box-shadow var(--rx-widget-transition),
border-color var(--rx-widget-transition);
}
.rx-widget-mini-card:hover {
transform: translateY(-2px);
border-color: rgba(4, 119, 191, 0.35);
box-shadow: var(--rx-widget-shadow-sm);
}
.rx-widget-mini-card__title {
margin: 0 0 0.35rem;
color: var(--rx-widget-heading);
font-size: var(--rx-widget-font-size-sm);
font-weight: 900;
}
.rx-widget-mini-card__text {
margin: 0;
color: var(--rx-widget-text-muted);
font-size: var(--rx-widget-font-size-xs);
line-height: 1.6;
}
/* =========================================================
38. RATING WIDGET
========================================================= */
.rx-rating-widget {
display: grid;
gap: var(--rx-widget-space-sm);
}
.rx-rating-score {
display: flex;
align-items: baseline;
gap: var(--rx-widget-space-xs);
}
.rx-rating-number {
color: var(--rx-widget-heading);
font-size: 2.4rem;
font-weight: 900;
line-height: 1;
}
.rx-rating-outof {
color: var(--rx-widget-text-muted);
font-size: var(--rx-widget-font-size-sm);
}
.rx-rating-stars {
color: #f59e0b;
letter-spacing: 0.08em;
}
.rx-rating-text {
margin: 0;
color: var(--rx-widget-text-soft);
font-size: var(--rx-widget-font-size-sm);
}
/* =========================================================
39. PROGRESS BAR WIDGET
========================================================= */
.rx-progress-widget {
display: grid;
gap: var(--rx-widget-space-md);
}
.rx-progress-item {
display: grid;
gap: var(--rx-widget-space-xs);
}
.rx-progress-label {
display: flex;
justify-content: space-between;
gap: var(--rx-widget-space-sm);
color: var(--rx-widget-heading);
font-size: var(--rx-widget-font-size-sm);
font-weight: 800;
}
.rx-progress-track {
height: 10px;
overflow: hidden;
background: var(--rx-widget-bg-muted);
border-radius: var(--rx-widget-radius-pill);
}
.rx-progress-bar {
display: block;
height: 100%;
background: linear-gradient(90deg, var(--rx-widget-primary), #38bdf8);
border-radius: inherit;
}
/* =========================================================
40. WIDGET TABLE
========================================================= */
.rx-widget table,
.widget table {
width: 100%;
border-collapse: collapse;
font-size: var(--rx-widget-font-size-sm);
}
.rx-widget table th,
.rx-widget table td,
.widget table th,
.widget table td {
padding: 0.75rem;
border: 1px solid var(--rx-widget-border);
text-align: left;
vertical-align: top;
}
.rx-widget table th,
.widget table th {
color: var(--rx-widget-heading);
background: var(--rx-widget-bg-soft);
font-weight: 900;
}
.rx-widget table tr:nth-child(even) td,
.widget table tr:nth-child(even) td {
background: rgba(248, 250, 252, 0.65);
}
/* =========================================================
41. ACCESSIBILITY
========================================================= */
.widget :focus-visible,
.rx-widget :focus-visible {
outline: 3px solid rgba(4, 119, 191, 0.35);
outline-offset: 3px;
}
.rx-widget .screen-reader-text,
.widget .screen-reader-text {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.rx-widget .screen-reader-text:focus,
.widget .screen-reader-text:focus {
z-index: 100000;
width: auto;
height: auto;
padding: 0.75rem 1rem;
clip-path: none;
color: #ffffff;
background: var(--rx-widget-primary);
border-radius: var(--rx-widget-radius-sm);
}
/* =========================================================
42. ANIMATION UTILITIES
========================================================= */
.rx-widget-hover-lift {
transition:
transform var(--rx-widget-transition),
box-shadow var(--rx-widget-transition);
}
.rx-widget-hover-lift:hover {
transform: translateY(-3px);
box-shadow: var(--rx-widget-shadow-md);
}
.rx-widget-fade-in {
animation: rxWidgetFadeIn 320ms ease both;
}
@keyframes rxWidgetFadeIn {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* =========================================================
43. DARK MODE SUPPORT
========================================================= */
@media (prefers-color-scheme: dark) {
:root {
--rx-widget-bg: #0f172a;
--rx-widget-bg-soft: #111c31;
--rx-widget-bg-muted: #1e293b;
--rx-widget-bg-hover: #10243a;
--rx-widget-text: #e2e8f0;
--rx-widget-text-soft: #cbd5e1;
--rx-widget-text-muted: #94a3b8;
--rx-widget-heading: #f8fafc;
--rx-widget-border: #263449;
--rx-widget-border-strong: #334155;
--rx-widget-primary-soft: rgba(56, 189, 248, 0.12);
--rx-widget-success-soft: rgba(34, 197, 94, 0.12);
--rx-widget-warning-soft: rgba(245, 158, 11, 0.13);
--rx-widget-danger-soft: rgba(239, 68, 68, 0.13);
--rx-widget-info-soft: rgba(14, 165, 233, 0.13);
}
.rx-widget--glass {
background: rgba(15, 23, 42, 0.78);
border-color: rgba(148, 163, 184, 0.18);
}
.rx-cta-widget {
background:
linear-gradient(135deg, rgba(3, 105, 161, 0.95), rgba(2, 74, 112, 0.96)),
var(--rx-widget-primary);
}
.rx-widget table tr:nth-child(even) td,
.widget table tr:nth-child(even) td {
background: rgba(30, 41, 59, 0.65);
}
}
/* Manual dark mode class support */
.rx-dark .widget,
.rx-dark .rx-widget {
--rx-widget-bg: #0f172a;
--rx-widget-bg-soft: #111c31;
--rx-widget-bg-muted: #1e293b;
--rx-widget-bg-hover: #10243a;
--rx-widget-text: #e2e8f0;
--rx-widget-text-soft: #cbd5e1;
--rx-widget-text-muted: #94a3b8;
--rx-widget-heading: #f8fafc;
--rx-widget-border: #263449;
--rx-widget-border-strong: #334155;
}
/* =========================================================
44. RESPONSIVE DESIGN
========================================================= */
@media (max-width: 1200px) {
.rx-footer-widgets {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 991px) {
.rx-sidebar--sticky {
position: static;
}
.rx-toc-widget {
max-height: none;
}
}
@media (max-width: 767px) {
.widget,
.rx-widget {
padding: var(--rx-widget-space-md);
border-radius: var(--rx-widget-radius-md);
}
.rx-footer-widgets {
grid-template-columns: 1fr;
gap: var(--rx-widget-space-lg);
}
.widget_search form,
.search-form,
.rx-widget-search form {
flex-direction: column;
}
.widget_search .search-submit,
.search-form .search-submit,
.rx-widget-search button {
width: 100%;
}
.rx-widget-recent-posts--card li,
.rx-related-item {
grid-template-columns: 68px minmax(0, 1fr);
}
.rx-stats-widget,
.rx-widget-card-grid {
grid-template-columns: 1fr;
}
.rx-download-item {
grid-template-columns: 38px minmax(0, 1fr);
}
.rx-download-item .rx-widget-btn {
grid-column: 1 / -1;
width: 100%;
}
}
@media (max-width: 480px) {
.rx-contact-item {
grid-template-columns: 1fr;
}
.rx-contact-icon {
margin-bottom: 0.25rem;
}
.rx-hours-row {
align-items: flex-start;
flex-direction: column;
gap: 0.15rem;
}
.rx-rating-number {
font-size: 2rem;
}
}
/* =========================================================
45. REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.widget *,
.rx-widget *,
.widget,
.rx-widget {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: 0.001ms !important;
}
}
/* =========================================================
46. PRINT SUPPORT
========================================================= */
@media print {
.widget,
.rx-widget {
break-inside: avoid;
box-shadow: none !important;
border-color: #cccccc !important;
background: #ffffff !important;
color: #000000 !important;
}
.rx-widget-btn,
.widget button,
.widget input[type="submit"],
.rx-newsletter-form,
.rx-social-widget {
display: none !important;
}
.widget a,
.rx-widget a {
color: #000000 !important;
text-decoration: underline;
}
}
/* =========================================================
47. WORDPRESS BLOCK WIDGET COMPATIBILITY
========================================================= */
.wp-block-group.rx-widget,
.wp-block-latest-posts,
.wp-block-categories,
.wp-block-archives,
.wp-block-page-list {
box-sizing: border-box;
}
.widget_block .wp-block-heading {
position: relative;
margin: 0 0 var(--rx-widget-space-md);
padding-bottom: var(--rx-widget-space-sm);
color: var(--rx-widget-heading);
font-size: var(--rx-widget-font-size-lg);
font-weight: 800;
}
.widget_block .wp-block-heading::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 52px;
height: 3px;
background: linear-gradient(90deg, var(--rx-widget-primary), transparent);
border-radius: var(--rx-widget-radius-pill);
}
.widget_block .wp-block-latest-posts__post-title {
color: var(--rx-widget-heading);
font-weight: 800;
}
.widget_block .wp-block-latest-posts__post-date,
.widget_block .wp-block-latest-posts__post-author {
color: var(--rx-widget-text-muted);
font-size: var(--rx-widget-font-size-xs);
}
.widget_block .wp-block-search__inside-wrapper {
display: flex;
gap: var(--rx-widget-space-xs);
}
.widget_block .wp-block-search__input {
min-height: 46px;
padding: 0.75rem 1rem;
border: 1px solid var(--rx-widget-border-strong);
border-radius: var(--rx-widget-radius-md);
}
.widget_block .wp-block-search__button {
min-height: 46px;
padding: 0.75rem 1rem;
color: #ffffff;
background: var(--rx-widget-primary);
border: 1px solid var(--rx-widget-primary);
border-radius: var(--rx-widget-radius-md);
font-weight: 800;
}
.widget_block .wp-block-tag-cloud a {
display: inline-flex;
margin: 0.2rem;
padding: 0.4rem 0.7rem;
background: var(--rx-widget-bg-soft);
border: 1px solid var(--rx-widget-border);
border-radius: var(--rx-widget-radius-pill);
font-size: var(--rx-widget-font-size-sm) !important;
font-weight: 700;
}
/* =========================================================
48. WOOCOMMERCE WIDGET BASIC SUPPORT
========================================================= */
.widget_product_categories li,
.widget_layered_nav li,
.widget_rating_filter li {
display: flex;
justify-content: space-between;
gap: var(--rx-widget-space-sm);
}
.widget_price_filter .price_slider_wrapper {
margin-top: var(--rx-widget-space-md);
}
.widget_price_filter .ui-slider {
position: relative;
height: 6px;
background: var(--rx-widget-bg-muted);
border-radius: var(--rx-widget-radius-pill);
}
.widget_price_filter .ui-slider-range {
position: absolute;
height: 6px;
background: var(--rx-widget-primary);
border-radius: var(--rx-widget-radius-pill);
}
.widget_price_filter .ui-slider-handle {
position: absolute;
top: 50%;
width: 18px;
height: 18px;
background: var(--rx-widget-primary);
border-radius: 50%;
transform: translateY(-50%);
}
.widget_price_filter .price_slider_amount {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--rx-widget-space-sm);
margin-top: var(--rx-widget-space-md);
font-size: var(--rx-widget-font-size-sm);
}
/* =========================================================
49. UTILITY CLASSES
========================================================= */
.rx-widget-mt-0 { margin-top: 0 !important; }
.rx-widget-mb-0 { margin-bottom: 0 !important; }
.rx-widget-mb-sm { margin-bottom: var(--rx-widget-space-sm) !important; }
.rx-widget-mb-md { margin-bottom: var(--rx-widget-space-md) !important; }
.rx-widget-mb-lg { margin-bottom: var(--rx-widget-space-lg) !important; }
.rx-widget-p-0 { padding: 0 !important; }
.rx-widget-p-sm { padding: var(--rx-widget-space-sm) !important; }
.rx-widget-p-md { padding: var(--rx-widget-space-md) !important; }
.rx-widget-p-lg { padding: var(--rx-widget-space-lg) !important; }
.rx-widget-text-center { text-align: center !important; }
.rx-widget-text-left { text-align: left !important; }
.rx-widget-text-right { text-align: right !important; }
.rx-widget-hidden { display: none !important; }
.rx-widget-divider {
height: 1px;
margin: var(--rx-widget-space-md) 0;
background: var(--rx-widget-border);
}
/* =========================================================
50. END OF RX WIDGETS CSS
========================================================= */Also enqueue it in your theme.
In functions.php or your enqueue file:
function rx_theme_enqueue_widget_styles() {
wp_enqueue_style(
'rx-widgets',
get_template_directory_uri() . '/assets/css/rx-widgets.css',
array(),
wp_get_theme()->get( 'Version' )
);
}
add_action( 'wp_enqueue_scripts', 'rx_theme_enqueue_widget_styles' );Best folder position:
rx-theme/
└── assets/
└── css/
├── rx-main.css
├── rx-header.css
├── rx-footer.css
├── rx-layout.css
├── rx-content.css
├── rx-widgets.css
└── rx-responsive.cssFor RX Theme, this rx-widgets.css should stay only for widget, sidebar, footer widget, WordPress widget block, medical sidebar card, CTA, author box, recent posts, tag cloud, search, category, archive, and related post widget styling.