elements.
Many themes set large margins on generic selectors like ".entry p", which
overrides our base ".selina-sc-field" styles. These selectors intentionally
target ONLY the SelinaMembers login form.
*/
.selina-sc-form#selina_members-loginform p.login-username,
.selina-sc-form#selina_members-loginform p.login-password,
.selina-sc-form#selina_members-loginform p.login-remember,
.selina-sc-form#selina_members-loginform p.login-submit{
margin: 0 0 12px !important;
}
/* Remove extra
inserted by wp_login_form after labels */
.selina-sc-form#selina_members-loginform p.login-username br,
.selina-sc-form#selina_members-loginform p.login-password br{
display:none !important;
}
/* Force label alignment/spacing for RTL */
.selina-sc-form#selina_members-loginform p.login-username label,
.selina-sc-form#selina_members-loginform p.login-password label{
display:block !important;
margin: 0 0 6px 0 !important;
text-align: right;
}
/* Make inputs fill the container regardless of theme styles */
.selina-sc-form#selina_members-loginform input.input{
display:block;
width:100% !important;
box-sizing:border-box;
margin:0 !important;
}
/* Narrow login container and inset fields (login shortcode only) */
.selina-sc-root--login{ display:flex; justify-content:center; }
.selina-sc-card--login{ width:100%; max-width:560px; }
.selina-sc-card--login .selina-sc-form#selina_members-loginform input.input{
width:92% !important;
margin-inline: auto !important;
}
@media (max-width: 480px){
.selina-sc-card--login .selina-sc-form#selina_members-loginform input.input{
width:100% !important;
}
}
.selina-sc-tabs{ display:flex; gap:8px; margin:0 0 12px 0; flex-wrap:wrap; justify-content:center; }
.selina-sc-tabs a{
text-decoration:none;
font-size:13px;
padding:8px 12px;
border:1px solid #e5e7eb;
border-radius:999px;
color:#0f172a;
background:#fff;
}
.selina-sc-tabs a.is-active{ border-color:#2563eb; color:#2563eb; background:#eff6ff; }
@media (max-width: 480px){
.selina-sc-tabs a{ flex:1 1 auto; text-align:center; }
}
.selina-sc-profile-top{ display:flex; gap:12px; align-items:center; margin-bottom:10px; }
.selina-sc-profile-top-center{ justify-content:center; }
.selina-sc-avatar{ border-radius:999px; }
.selina-sc-profile-name{ font-size:14px; color:#0f172a; font-weight:400; }
.selina-sc-profile-meta{ font-size:12px; color:#64748b; }
@media (max-width: 480px){
.selina-sc-profile-top{ flex-direction:column; text-align:center; }
.selina-sc-actions{ text-align:stretch; }
.selina-sc-actions .selina-sc-btn{ width:100%; }
}
.selina-sc-table-wrap{ overflow:auto; }
/* Allow the table to adapt to the container and keep columns even */
.selina-sc-table{ width:100%; border-collapse:separate; border-spacing:0; min-width:0; table-layout:fixed; margin:0 auto; }
.selina-sc-table th, .selina-sc-table td{
padding:10px 12px;
border-bottom:1px solid #e5e7eb;
font-size:13px;
text-align:center !important;
vertical-align:middle;
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
}
.selina-sc-table th{ background:#f8fafc; color:#0f172a; font-weight:400; }
.selina-sc-table tr:last-child td{ border-bottom:none; }
/* Subscription table: force real table semantics even if a theme overrides table elements */
.selina-sc-root--subscription .selina-sc-table{ display:table !important; }
.selina-sc-root--subscription .selina-sc-table thead{ display:table-header-group !important; }
.selina-sc-root--subscription .selina-sc-table tbody{ display:table-row-group !important; }
.selina-sc-root--subscription .selina-sc-table tr{ display:table-row !important; }
.selina-sc-root--subscription .selina-sc-table th,
.selina-sc-root--subscription .selina-sc-table td{ display:table-cell !important; width:auto; }
/* Mobile: stacked (label/value) rows instead of a cramped 4-column table */
@media (max-width: 560px){
.selina-sc-root--subscription .selina-sc-table-wrap{ overflow:visible; }
.selina-sc-root--subscription .selina-sc-table{ display:block !important; table-layout:auto !important; }
.selina-sc-root--subscription .selina-sc-table thead{ display:none !important; }
.selina-sc-root--subscription .selina-sc-table tbody{ display:block !important; }
.selina-sc-root--subscription .selina-sc-table tr{
display:block !important;
border:1px solid #e5e7eb;
border-radius:12px;
overflow:hidden;
margin:0 0 12px 0;
background:#fff;
}
.selina-sc-root--subscription .selina-sc-table td{
display:flex !important;
align-items:center;
justify-content:space-between;
gap:12px;
width:100% !important;
text-align:right !important;
border-bottom:1px solid #e5e7eb;
}
.selina-sc-root--subscription .selina-sc-table td:before{
content: attr(data-label);
font-weight:700;
color:#0f172a;
flex:0 0 auto;
}
.selina-sc-root--subscription .selina-sc-table td:last-child{ border-bottom:none; }
}
/* Avatar upload (click avatar) */
.selina-sc-avatar-wrap{ display:flex; justify-content:center; }
.selina-sc-avatar-click{ position:relative; display:inline-block; cursor:pointer; }
.selina-sc-avatar-click img,
.selina-sc-avatar-click .avatar{ width:120px; height:120px; border-radius:999px; object-fit:cover; display:block; margin:0 auto; }
.selina-sc-avatar-overlay{
position:absolute; left:50%; bottom:-8px; transform:translateX(-50%);
background:rgba(15,23,42,.88); color:#fff; font-size:12px;
padding:6px 10px; border-radius:999px; white-space:nowrap;
opacity:0; transition:opacity .15s ease;
}
.selina-sc-avatar-click:hover .selina-sc-avatar-overlay{ opacity:1; }
.selina-sc-avatar-input{ display:none !important; }
/* === Overrides: Card header colors (header only) === */
.selina-sc-root .selina-sc-card .selina-sc-card-h{
background:#eef6ff !important;
border-bottom:1px solid #e5e7eb;
}
.selina-sc-root .selina-sc-card-profile .selina-sc-card-h,
.selina-sc-root .selina-sc-card--profile .selina-sc-card-h{
background:#ecfdf5 !important;
}
.selina-sc-root .selina-sc-card-subscription .selina-sc-card-h,
.selina-sc-root .selina-sc-card--subscription .selina-sc-card-h{
background:#eff6ff !important;
}
/* Keep card body white */
.selina-sc-root .selina-sc-card .selina-sc-card-b{
background:#fff !important;
}
/* Stronger table centering inside subscription */
.selina-sc-root .selina-sc-card-subscription .selina-sc-table th,
.selina-sc-root .selina-sc-card-subscription .selina-sc-table td,
.selina-sc-root .selina-sc-card--subscription .selina-sc-table th,
.selina-sc-root .selina-sc-card--subscription .selina-sc-table td{
text-align:center !important;
vertical-align:middle;
width:25%;
}
/* === Avatar overlay: always visible === */
.selina-sc-root .selina-sc-avatar-overlay{
opacity:0 !important;
pointer-events:none;
}
.selina-sc-root .selina-sc-avatar-click:hover .selina-sc-avatar-overlay,
.selina-sc-root .selina-sc-avatar-click:focus-within .selina-sc-avatar-overlay{
opacity:1 !important;
}
/* Avatar overlay position */
/* Force center alignment for subscription table regardless of theme */
.selina-sc-table,
.selina-sc-table thead,
.selina-sc-table tbody,
.selina-sc-table tr,
.selina-sc-table th,
.selina-sc-table td{
float:none !important;
}
.selina-sc-table{ width:100% !important; table-layout:fixed; }
.selina-sc-table th,
.selina-sc-table td{
text-align:center !important;
vertical-align:middle !important;
}
/* Pricing templates
Clean, modern, and responsive (RTL/LTR-friendly) */
.selina-pricing-root{
margin: 22px auto;
max-width: 1100px;
padding: 0;
}
.selina-pricing-grid{
display:grid;
grid-template-columns: repeat(var(--selina-cols, 3), minmax(0, 1fr));
gap: 18px;
}
@media (max-width: 1100px){
.selina-pricing-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 700px){
.selina-pricing-grid{ grid-template-columns: 1fr; }
}
/* Defaults (per-card can override via inline CSS vars) */
.selina-pricing-card{
--selina-accent: #2563eb;
--selina-btn-text: #ffffff;
--selina-badge-bg: rgba(255,255,255,.18);
--selina-badge-text: #ffffff;
background:#fff;
border: 1px solid #e5e7eb;
border-radius: 18px;
overflow:hidden;
box-shadow: 0 12px 28px rgba(15,23,42,.08);
display:flex;
flex-direction:column;
position:relative;
transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.selina-pricing-card:hover{
transform: translateY(-2px);
box-shadow: 0 18px 42px rgba(15,23,42,.12);
border-color: rgba(15,23,42,.12);
}
.selina-pricing-card.is-featured{
border-color: rgba(37,99,235,.35);
box-shadow: 0 22px 50px rgba(15,23,42,.16);
}
.selina-pricing-card.is-featured:before{
content:"";
position:absolute;
inset:0;
border: 2px solid var(--selina-accent);
border-radius: 18px;
opacity: .28;
pointer-events:none;
}
/* Header */
.selina-pricing-head{
position:relative;
padding: 18px 18px 16px;
color:#fff;
background-color: var(--selina-accent);
background-image: var(--selina-head-bg, none);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
text-align: center;
}
.selina-pricing-head:after{
content:"";
position:absolute;
inset:0;
background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(0,0,0,.30));
pointer-events:none;
}
.selina-pricing-head > *{
position:relative;
z-index:1;
}
.selina-pricing-badge{
position:absolute;
top: 12px;
inset-inline-end: 12px;
background: var(--selina-badge-bg);
color: var(--selina-badge-text);
font-size: 12px;
font-weight: 800;
padding: 6px 10px;
border-radius: 999px;
backdrop-filter: blur(6px);
box-shadow: 0 10px 18px rgba(0,0,0,.18);
z-index:3;
pointer-events:none;
max-width: 88%;
white-space: nowrap;
text-overflow: ellipsis;
overflow:hidden;
}
.selina-pricing-name{
font-size: 16px;
font-weight: 900;
margin: 8px 0 6px;
line-height: 1.25;
}
.selina-pricing-price{
font-size: 34px;
font-weight: 900;
line-height: 1.05;
margin: 0;
}
.selina-pricing-price *{
color: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
.selina-pricing-sub{
margin-top: 8px;
font-size: 12px;
opacity: .92;
}
/* Body + features */
.selina-pricing-body{
padding: 14px 18px 0;
flex: 1;
}
.selina-pricing-features{
list-style: none;
margin: 0 !important;
padding: 0 !important;
}
.selina-pricing-feature{
display:flex;
align-items:flex-start;
gap: 10px;
padding: 10px 0;
border-top: 1px solid #eef2f7;
color:#334155;
font-size: 14px;
line-height: 1.4;
}
.selina-pricing-feature:first-child{
border-top: 0;
}
.selina-pricing-feature:before{
content: "✓";
width: 22px;
height: 22px;
border-radius: 999px;
background: var(--selina-accent);
color:#fff;
display:flex;
align-items:center;
justify-content:center;
flex: 0 0 22px;
margin-top: 1px;
font-weight: 900;
font-size: 12px;
}
.selina-pricing-feature[data-ok="0"]{
color:#94a3b8;
}
.selina-pricing-feature[data-ok="0"]:before{
content: "×";
background: #cbd5e1;
color:#fff;
}
/* CTA */
.selina-pricing-cta{
padding: 16px 18px 18px;
}
.selina-pricing-cta a{
display:flex;
width: 100%;
align-items:center;
justify-content:center;
text-decoration:none;
padding: 12px 14px;
border-radius: 12px;
background: var(--selina-accent);
color: var(--selina-btn-text, #fff) !important;
font-weight: 900;
font-size: 13px;
letter-spacing: .02em;
box-shadow: 0 14px 28px rgba(15,23,42,.12);
transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.selina-pricing-cta a:hover{
filter: brightness(.96);
transform: translateY(-1px);
box-shadow: 0 18px 36px rgba(15,23,42,.16);
}
/* ===== Template style overrides ===== */
/* Style 1: light / clean */
.selina-pricing--style1 .selina-pricing-card{
background:#fff;
}
/* Style 2: dark / premium */
.selina-pricing--style2 .selina-pricing-card{
background: linear-gradient(180deg, #0b1220 0%, #0f172a 100%);
border-color: rgba(255,255,255,.10);
box-shadow: 0 20px 55px rgba(0,0,0,.35);
}
.selina-pricing--style2 .selina-pricing-card:hover{
border-color: rgba(255,255,255,.16);
box-shadow: 0 26px 70px rgba(0,0,0,.42);
}
.selina-pricing--style2 .selina-pricing-body{ padding-top: 12px; }
.selina-pricing--style2 .selina-pricing-feature{
border-top-color: rgba(255,255,255,.08);
color: rgba(255,255,255,.88);
}
.selina-pricing--style2 .selina-pricing-feature[data-ok="0"]{
color: rgba(255,255,255,.55);
}
.selina-pricing--style2 .selina-pricing-head:after{
background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(0,0,0,.55));
}
.selina-pricing--style2 .selina-pricing-cta a{
background: linear-gradient(135deg, var(--selina-accent-1, var(--selina-accent)), var(--selina-accent-2, var(--selina-accent)));
}
/* Prevent theme spacing around wrapper */
.selina-pricing-root .selina-pricing-grid{ margin: 0 !important; }
/* === Language direction overrides (AR/EN) === */
.selina-sc-root[dir="ltr"], .selina-pricing-root[dir="ltr"]{ direction:ltr !important; }
.selina-sc-root[dir="rtl"], .selina-pricing-root[dir="rtl"]{ direction:rtl !important; }
.selina-pricing-root[dir="ltr"] .selina-pricing-head.selina-has-badge .selina-pricing-badge{ right:auto !important; left: 12px !important; }
.selina-pricing-root[dir="rtl"] .selina-pricing-head.selina-has-badge .selina-pricing-badge{ left:auto !important; right: 12px !important; }
.selina-pricing-root[dir="ltr"].selina-pricing--style2 .selina-pricing-feature{ flex-direction:row !important; }
.selina-pricing-root[dir="rtl"].selina-pricing--style2 .selina-pricing-feature{ flex-direction:row-reverse !important; }