/*!
 * Plugin: Selina Members WordPress Membership Plugin
 * Developer: Feras Alnshawy
 * Company: https://dapn.net
 * Country: Sweden
 * UI Refresh (Auth Forms): 2026-02-18
 */

/*
  Bootstrap-like UI (scoped)
  -------------------------
  This file intentionally provides a SMALL, scoped subset of Bootstrap 5 styles
  for SelinaMembers shortcodes only.

  Why scoped?
  - To avoid overriding the active theme styles site-wide.
  - To keep the plugin self-contained without requiring external assets.

  Scope root: .selina-bs
*/

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&family=Inter:wght@400;600;700;800&display=swap');

.selina-sc-root{
  max-width: 100%;
  overflow-wrap: anywhere;
}

.selina-sc-root,
.selina-sc-root *{
  box-sizing: border-box;
}

/* Font + direction are set on the wrapper via PHP: dir/lang attributes. */
.selina-bs{
  font-family: "Inter", "Cairo", "Tajawal", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 400;
  line-height: 1.5;
}

/* Card */
.selina-bs .card{
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
}

.selina-bs .shadow-sm{
  box-shadow: 0 10px 30px rgba(15, 23, 42, .08);
}

.selina-bs .card-header{
  padding: 14px 16px;
  background: #f8fafc;
  border-bottom: 1px solid #e5e7eb;
  color: #0f172a;
  font-size: 15px;
  font-weight: 700;
}

.selina-bs .card-body{
  padding: 16px;
}

/* Context header accents */
.selina-sc-card--login .card-header{ background: #eef2ff; }
.selina-sc-card--profile .card-header{ background: #ecfdf5; }

/* Profile card rounding fix */
.selina-sc-card--profile .card{ overflow: hidden; border-radius: 16px; }
.selina-sc-card--profile .card-header{
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}
.selina-sc-card--subscription .card-header{ background: #eff6ff; }

/* Subscription status badge (active/expired) */
.selina-sc-root--subscription .selina-sc-card-h.selina-sc-sub-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.selina-sc-root--subscription .selina-sc-sub-head-title{
  font-weight: 700;
}
.selina-sc-sub-head-badge{ display: flex; align-items: center; }
.selina-sc-sub-badge{
  position: static;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.1;
  color: #fff;
  white-space: nowrap;
}
.selina-sc-sub-badge--active{ background:#16a34a; }
.selina-sc-sub-badge--expired{ background:#dc2626; }


/* Center the login card */
.selina-sc-root--login{ display: flex; justify-content: center; }
.selina-sc-card--login{ width: 100%; max-width: 560px; }

/* Profile page: keep it tidy and not too wide */
.selina-sc-root--profile{ display: flex; justify-content: center; padding-top: 14px; }
.selina-sc-card--profile{ width: 100%; max-width: 760px; }

/* Alerts */
.selina-bs .alert{
  padding: 10px 12px;
  border-radius: 12px;
  margin: 0 0 12px 0;
  font-size: 13px;
  border: 1px solid transparent;
}
.selina-bs .alert-info{ background:#eff6ff; border-color:#bfdbfe; color:#1e3a8a; }
.selina-bs .alert-success{ background:#ecfdf5; border-color:#a7f3d0; color:#065f46; }
.selina-bs .alert-danger{ background:#fef2f2; border-color:#fecaca; color:#991b1b; }

/* Tabs (nav-tabs) */
.selina-bs .nav{
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  margin: 0 0 12px 0;
  list-style: none;
}
.selina-bs .nav-tabs{
  border-bottom: 1px solid #e5e7eb;
}
.selina-bs .nav-tabs .nav-item{ margin-bottom: -1px; }
.selina-bs .nav-tabs .nav-link{
  display: block;
  padding: 10px 12px;
  text-decoration: none;
  color: #0f172a;
  font-size: 13px;
  border: 1px solid transparent;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
.selina-bs .nav-tabs .nav-link:hover{
  background: #f8fafc;
  border-color: #e5e7eb;
}
.selina-bs .nav-tabs .nav-link.active{
  background: #fff;
  border-color: #e5e7eb #e5e7eb #fff;
  color: #2563eb;
  font-weight: 700;
}
.selina-bs .justify-content-center{ justify-content: center; }
.selina-bs .mb-3{ margin-bottom: 1rem; }

/* Forms */
.selina-bs .form-label{
  display: block;
  margin: 0 0 6px 0;
  font-size: 13px;
  color: #0f172a;
  font-weight: 600;
}

.selina-bs .form-control{
  width: 100%;
  border: 1px solid #cbd5e1;
  background: #fff;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 13px;
  outline: none;
}

.selina-bs .form-control:focus{
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}

.selina-bs .form-check{ display: flex; gap: 8px; align-items: center; }
.selina-bs .form-check-input{ width: 16px; height: 16px; margin: 0; }
.selina-bs .form-check-label{ font-size: 13px; color: #0f172a; }

/* Buttons */
.selina-bs .btn{
  appearance: none;
  border: 1px solid transparent;
  padding: 14px 18px;
  border-radius: 14px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  transition: filter .15s ease, transform .05s ease;
}
.selina-bs .btn:active{ transform: translateY(1px); }
.selina-bs .btn-primary{ background: #2563eb; border-color: #2563eb; color: #fff; }
.selina-bs .btn-primary:hover{ filter: brightness(.96); }
.selina-bs .btn-secondary{ background: #0f172a; border-color: #0f172a; color: #fff; }
.selina-bs .btn-secondary:hover{ filter: brightness(.96); }
.selina-bs .w-100{ width: 100%; }

.selina-bs .text-danger{ color: #dc2626; }

/* Grid (subset) */
.selina-bs .row{ display: flex; flex-wrap: wrap; }
.selina-bs .g-3{ gap: 1rem; }
.selina-bs .col-md-6{ width: 100%; }
@media (min-width: 768px){
  .selina-bs .col-md-6{ width: calc(50% - .5rem); }
}

/* Fine tweaks for RTL/LTR */
.selina-sc-root[dir="rtl"] .selina-bs .nav-tabs .nav-link{
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

/* Keep action area spacing */
.selina-sc-actions{ margin-top: 12px; }

/* Profile/Subscription components from older UI still need basic support */
.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:700; }
.selina-sc-profile-meta{ font-size:12px; color:#64748b; }

/* Avatar uploader (profile) */
.selina-sc-avatar-wrap{ position: relative; display: inline-flex; align-items: center; justify-content: center; }
.selina-sc-avatar-click{ position: relative; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 999px; overflow: hidden; }
.selina-sc-avatar-img{ width: 120px; height: 120px; object-fit: cover; border-radius: 999px; display:block; }
.selina-sc-avatar-click .selina-sc-avatar{ width: 120px; height: 120px; }
.selina-sc-avatar-overlay{
  position: absolute;
  inset: auto 10px 10px 10px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(15,23,42,.78);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}
.selina-sc-avatar-input{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }

/* Slightly tighten form look on profile page */
.selina-sc-root--profile .selina-sc-field{ margin-bottom: 14px; }
.selina-sc-root--profile .card-body{ padding: 18px; }
.selina-sc-root--profile .card-header{ padding: 14px 18px; }

@media (max-width: 480px){
  .selina-sc-profile-top{ flex-direction:column; text-align:center; }
}

/* Table wrappers */
.selina-sc-table-wrap{ overflow:auto; }

/* =========================================================
   Subscription details table styling
   (Used by: [selina_members_subscription])
   ========================================================= */

/* Remove the outer "card" container so only the data container (table) is visible. */
.selina-sc-root--subscription .selina-sc-card--subscription{
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
}

.selina-sc-root--subscription .selina-sc-card--subscription .selina-sc-card-h{
  background: transparent;
  border: none;
  padding: 0 0 10px 0;
}

.selina-sc-root--subscription .selina-sc-card--subscription .selina-sc-card-b{
  padding: 0;
}

.selina-sc-root--subscription .selina-sc-card-b{ padding: 18px; }

.selina-sc-root--subscription .selina-sc-table-wrap{
  /* Keep only scroll behavior here; the table itself is the visual container. */
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  overflow: auto;
  width: 100%;
}

.selina-sc-root--subscription .selina-sc-table{
  width: 100% !important;
  max-width: 100% !important;
  display: table !important;
  margin: 0 !important;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  border: 1px solid rgba(15, 23, 42, .10);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.selina-sc-root--subscription .selina-sc-table th,
.selina-sc-root--subscription .selina-sc-table td{
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.35;
  vertical-align: middle;
  border-right: 1px solid rgba(15, 23, 42, .10);
  border-top: 1px solid rgba(15, 23, 42, .10);
  word-wrap: break-word;
}

.selina-sc-root--subscription .selina-sc-table thead th{
  background: rgba(15, 23, 42, .04);
  font-weight: 800;
  color: #0f172a;
  border-top: none;
}

.selina-sc-root--subscription .selina-sc-table tbody td{
  color: #0f172a;
}

.selina-sc-root--subscription .selina-sc-table tr > *:last-child{ border-right: none; }

.selina-sc-root--subscription .selina-sc-table tbody tr:first-child td{ border-top: none; }

.selina-sc-root--subscription[dir="rtl"] .selina-sc-table th,
.selina-sc-root--subscription[dir="rtl"] .selina-sc-table td{
  border-right: none;
  border-left: 1px solid rgba(15, 23, 42, .10);
  text-align: right;
}

.selina-sc-root--subscription[dir="rtl"] .selina-sc-table tr > *:last-child{ border-left: none; }

@media (max-width: 720px){
  /* Keep the table readable on small screens */
  .selina-sc-root--subscription .selina-sc-table{ min-width: 720px; }
}


/* =========================================================
   MakeCV-like Auth Page Theme (Login / Register / Lost Pass)
   ========================================================= */

.selina-auth-root{ width: 100%; }

.selina-auth-root .selina-auth-bg{
  /* Background removed by request (leave the form on the page background). */
  padding: 0;
  background: none;
}

.selina-auth-root .selina-auth-container{
  /* Keep the auth UI compact and centered. */
  max-width: 520px;
  margin: 0 auto;
  padding: 24px 16px;
}

/* Wider containers for Lost Password + Register (requested) */
.selina-sc-root--lost .selina-auth-container,
.selina-sc-root--register .selina-auth-container{
  max-width: 680px;
}

.selina-auth-shell{
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: start;
}

/* Right column (hero/pills) intentionally not rendered. */

.selina-auth-card{
  background: #fff;
  border: 1px solid rgba(15, 23, 42, .10);
  border-radius: 18px;
  box-shadow: 0 18px 60px rgba(15, 23, 42, .08);
  padding: 22px;
}

.selina-auth-card-top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.selina-auth-title{
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
}

.selina-auth-badge{
  font-size: 12px;
  font-weight: 700;
  color: #1f2937;
  background: rgba(245, 180, 0, .14);
  border: 1px solid rgba(245, 180, 0, .35);
  padding: 6px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Inputs */
.selina-auth-root .form-label{
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
}

.selina-auth-root .form-control{
  background: #fff9dc;
  border-color: rgba(15, 23, 42, .12);
  border-radius: 12px;
  padding: 12px 12px;
  font-size: 14px;
}

.selina-auth-root .form-control:focus{
  border-color: rgba(245, 180, 0, .9);
  box-shadow: 0 0 0 4px rgba(245, 180, 0, .18);
}

.selina-auth-help{
  margin-top: 6px;
  font-size: 12px;
  color: #64748b;
}

.selina-auth-row{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin: 6px 0 14px 0;
}

.selina-auth-check{ display:flex; align-items:center; gap: 10px; }
.selina-auth-check-input{ width: 16px; height: 16px; accent-color: #f5b400; }
.selina-auth-check-label{ font-size: 13px; color: #0f172a; font-weight: 600; }

.selina-auth-link{
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  color: #2563eb;
}
.selina-auth-link:hover{ text-decoration: underline; }

.selina-auth-actions{ margin-top: 12px; display: flex; justify-content: center; width: 100%; }
.selina-auth-actions--secondary{ margin-top: 10px; }
.selina-auth-actions--stack{ flex-direction: column; align-items: center; gap: 10px; }

/* Make all primary/secondary action blocks match the same visual width (as the Sign Up button) */
.selina-auth-actions > .selina-auth-btn{
  width: min(100%, 420px);
  max-width: 420px;
}

.selina-auth-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  border-radius: 14px;
  padding: 14px 18px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  transition: transform .06s ease, filter .15s ease;
}
.selina-auth-btn:active{ transform: translateY(1px); }

.selina-auth-btn--accent{
  background: #f5b400;
  border: 1px solid #f5b400;
  color: #111827;
}
.selina-auth-btn--accent:hover{ filter: brightness(.98); }

.selina-auth-btn--outline{
  background: #fff;
  border: 1px solid rgba(15, 23, 42, .14);
  color: #0f172a;
}
.selina-auth-btn--outline:hover{ filter: brightness(.99); }

.selina-auth-tip{
  margin-top: 12px;
  font-size: 12px;
  color: #64748b;
}

/* Right side */
.selina-auth-hero{
  margin: 0 0 10px 0;
  font-size: 56px;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #0f172a;
  font-weight: 800;
}

.selina-auth-sub{
  margin: 0 0 16px 0;
  font-size: 16px;
  color: #334155;
}

.selina-auth-pills{ display:flex; flex-wrap: wrap; gap: 10px; }
.selina-pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(15, 23, 42, .10);
  color: #0f172a;
  font-size: 13px;
  font-weight: 700;
}

@media (max-width: 992px){
  .selina-auth-hero{ font-size: 40px; }
}

/* RTL tweaks */
.selina-auth-root[dir="rtl"] .selina-auth-hero{ letter-spacing: 0; }

/* Register fields: stacked (one per row) */
.selina-auth-grid{ display:grid; grid-template-columns: 1fr; gap: 12px; }
.selina-auth-col{ width: 100%; }

/* In case the theme injects grid/flex rules, keep it stacked */
@media (min-width: 768px){
  .selina-auth-grid{ grid-template-columns: 1fr !important; gap: 12px; }
}



/* Successful login page (scoped) */
.selina-login-success{
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 32px 0;
}
.selina-login-success__card{
  width: 100%;
  max-width: 1200px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  padding: 26px 22px;
  text-align: center;
}
.selina-login-success__icon{
  width: 64px;
  height: 64px;
  border-radius: 999px;
  margin: 0 auto 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(34,197,94,.12); /* green-500 */
  color: #16a34a;
  border: 1px solid rgba(34,197,94,.25);
}
.selina-login-success__title{
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: -.02em;
}
.selina-login-success__subtitle{
  margin: 0 0 10px;
  font-size: 18px;
  line-height: 1.35;
  color: rgba(0,0,0,.68);
}

/* Status badge under the welcome line */
.selina-login-success__badge-row{
  margin: 10px 0 18px;
  text-align: center;
}
.selina-login-success__badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13.5px;
  line-height: 1;
  font-weight: 800;
  border: 1px solid rgba(0,0,0,.08);
  white-space: nowrap;
}
.selina-login-success__badge--active{ background: rgba(34,197,94,.12); color: #166534; border-color: rgba(34,197,94,.35); }
.selina-login-success__badge--expired{ background: rgba(220,38,38,.10); color: #7f1d1d; border-color: rgba(220,38,38,.25); }
.selina-login-success__section{
  margin-top: 18px;
  text-align: start;
}
/* .selina-login-success__section-title{
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 800;
} */
.selina-login-success__subscription{
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  padding: 14px;
  background: rgba(0,0,0,.02);
}

/* Improve subscription shortcode table inside success page */
.selina-login-success__subscription table{
  width: 100%;
}
.selina-login-success__subscription td,
.selina-login-success__subscription th{
  padding: 10px 12px !important;
}


/* Subscription badge row (no title mode) */
.selina-sc-sub-badge-row{margin:0 0 10px; text-align:start;}