/* =====================================================
   FONT
===================================================== */

@font-face{
  font-family:"Diodrum Arabic";
  src:url("../fonts/diodrum-arabic-semibold.ttf") format("truetype");
  font-weight:600;
  font-style:normal;
  font-display:swap;
}


/* =====================================================
   VARIABLES
===================================================== */

.sajf-club-points{

  --orange:#e86236;

  --green:#3e8548;
  --green-2:#5a9d50;

  --white:#ffffff;

  --light:#f4f9f2;
  --light-2:#eef6ec;

  --border:rgba(62,133,72,.25);

  --page-bg:
    url("../images/page-light-bg.webp");

  --hero-bg:
    url("../images/overview-hero.webp");

  --championship-bg:
    url("../images/championship-card.webp");

}


/* =====================================================
   RESET
===================================================== */

.sajf-club-points,
.sajf-club-points *{
  box-sizing:border-box;
}

/* =====================================================
   FORCE FONT
===================================================== */

.sajf-club-points.sajf-page,
.sajf-club-points.sajf-page *,
.sajf-club-points.sajf-page input,
.sajf-club-points.sajf-page select,
.sajf-club-points.sajf-page button,
.sajf-club-points.sajf-page textarea{

  font-family:"Diodrum Arabic",sans-serif !important;
  font-weight:600;

}


/* =====================================================
   PAGE
===================================================== */

.sajf-club-points.sajf-page{

  min-height:100vh;

  width:100%;

  padding:34px 18px 65px;

  color:var(--green);

  background-image:

    linear-gradient(
      rgba(255,255,255,.40),
      rgba(255,255,255,.40)
    ),

    var(--page-bg);

  background-position:center top;

  background-size:cover;

  background-repeat:repeat-y;

}


.sajf-club-points .sajf-container{

  width:min(1080px,100%);

  margin-left:auto;

  margin-right:max(0px,calc((100% - 1160px) / 2));

}


/* =====================================================
   HERO
===================================================== */

.sajf-club-points .sajf-hero{

  min-height:270px;

  padding:40px 48px;

  border-radius:30px;

  overflow:hidden;

  background-image:

    linear-gradient(
      rgba(62,133,72,.06),
      rgba(62,133,72,.06)
    ),

    var(--hero-bg);

  background-position:center;

  background-size:cover;

  background-repeat:no-repeat;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:35px;

}


/* رفع النص للأعلى */

.sajf-club-points .sajf-hero-content{

  flex:1;

  max-width:850px;

  transform:translateY(-18px);

}


/* season */

.sajf-club-points .sajf-season{

  display:inline-flex;

  align-items:center;

  gap:10px;

  padding:8px 16px;

  border-radius:999px;

  border:1px solid rgba(255,255,255,.45);

  background:rgba(255,255,255,.12);

  color:#fff;

  font-size:14px;

}


.sajf-club-points .sajf-season bdi{

  direction:ltr;

}


/* Hero title */

.sajf-club-points .sajf-hero-title{

  margin:18px 0 8px;

  text-align:center;

  color:#ffffff;

  font-size:clamp(34px,4vw,48px);

  line-height:1.25;

  font-weight:600 !important;

}


.sajf-club-points .sajf-hero-subtitle{

  margin:0;

  text-align:center;

  color:#ffffff;

  font-size:17px;

}


/* =====================================================
   HERO ICON
===================================================== */

.sajf-club-points .sajf-hero-icon{

  width:150px;
  height:150px;

  flex:0 0 150px;

  border-radius:50%;

  background:rgba(255,255,255,.94);

  border:1px solid rgba(62,133,72,.30);

  display:flex;

  align-items:center;

  justify-content:center;

}


.sajf-club-points .sajf-hero-icon img{

  width:68px;
  height:68px;

  object-fit:contain;

  filter:
    brightness(0)
    saturate(100%)
    invert(43%)
    sepia(19%)
    saturate(1260%)
    hue-rotate(76deg)
    brightness(91%)
    contrast(88%);

}


/* =====================================================
   SUMMARY
===================================================== */

.sajf-club-points .sajf-summary{

  margin-top:22px;

  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:17px;

}


/* =====================================================
   STAT CARD
===================================================== */

.sajf-club-points .sajf-stat-card{

  min-height:140px;

  padding:22px 25px;

  border:1px solid var(--border);

  border-radius:22px;

  background:
    linear-gradient(
      135deg,
      #ffffff,
      #f6faf4
    );

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:18px;

}


.sajf-club-points .sajf-stat-content{

  display:flex;

  flex-direction:column;

  flex:1;

  align-items:center;

  text-align:center;

  gap:5px;

}


.sajf-club-points .sajf-stat-label{

  color:var(--green-2);

  font-size:21px;

}


.sajf-club-points .sajf-stat-value{

  color:var(--green);

  font-size:27px;

  line-height:1.1;

}


.sajf-club-points .sajf-stat-value bdi{

  direction:ltr;

}


/* =====================================================
   STAT ICON
===================================================== */

.sajf-club-points .sajf-stat-icon{

  width:62px;
  height:62px;

  flex:0 0 62px;

  border-radius:18px;

  background:#eef6ec;

  border:1px solid rgba(62,133,72,.08);

  display:flex;

  align-items:center;

  justify-content:center;

}


.sajf-club-points .sajf-stat-icon img{

  width:31px;
  height:31px;

  object-fit:contain;

  filter:
    brightness(0)
    saturate(100%)
    invert(43%)
    sepia(19%)
    saturate(1260%)
    hue-rotate(76deg)
    brightness(91%)
    contrast(88%);

}


/* =====================================================
   TOOLBAR
===================================================== */

.sajf-club-points .sajf-toolbar{

  margin-top:20px;

  padding:20px;

  border:1px solid var(--border);

  border-radius:22px;

  background:#f9fbf8;

  display:grid;

  grid-template-columns:
    2fr 1fr 1fr;

  gap:20px;

}


/* =====================================================
   FIELD
===================================================== */

.sajf-club-points .sajf-field{

  min-width:0;

}


.sajf-club-points .sajf-field label{

  display:block;

  margin-bottom:8px;

  color:var(--green);

  font-size:16px;

}


.sajf-club-points .sajf-input-wrap{

  position:relative;

}


.sajf-club-points .sajf-field input,
.sajf-club-points .sajf-field select{

  width:100%;

  min-height:54px;

  border:
    1px solid
    rgba(62,133,72,.48);

  border-radius:14px;

  background:#fff;

  color:var(--green);

  font-size:15px;

  outline:none;

}


.sajf-club-points .sajf-field input{

  padding:
    11px
    52px
    11px
    16px;

}


.sajf-club-points .sajf-field select{

  padding:11px 15px;

  cursor:pointer;

}


.sajf-club-points .sajf-field input::placeholder{

  color:#8d9a8f;

}


.sajf-club-points .sajf-field input:focus,
.sajf-club-points .sajf-field select:focus{

  border-color:var(--orange);

  outline:
    2px solid
    rgba(232,98,54,.12);

}


/* =====================================================
   SEARCH ICON
===================================================== */

.sajf-club-points .sajf-search-icon{

  position:absolute;

  right:17px;

  top:50%;

  transform:translateY(-50%);

  width:24px;
  height:24px;

  display:flex;

  align-items:center;

  justify-content:center;

  pointer-events:none;

}


.sajf-club-points .sajf-search-icon img{

  width:22px;
  height:22px;

  object-fit:contain;

  filter:
    brightness(0)
    saturate(100%)
    invert(43%)
    sepia(19%)
    saturate(1260%)
    hue-rotate(76deg)
    brightness(91%)
    contrast(88%);

}


/* =====================================================
   CHAMPIONSHIP
===================================================== */

.sajf-club-points .sajf-championship{

  margin-top:26px;

  padding:28px;

  border-radius:30px;

  border:
    1px solid
    var(--border);

  overflow:hidden;

  background-image:

    linear-gradient(
      rgba(255,255,255,.78),
      rgba(255,255,255,.78)
    ),

    var(--championship-bg);

  background-size:cover;

  background-position:center;

  background-repeat:no-repeat;

}


/* =====================================================
   CHAMPIONSHIP HEADER
===================================================== */

.sajf-club-points .sajf-championship-head{

  min-height:auto;

  padding:28px 32px;

  border-radius:24px;

  border:
    1px solid
    var(--border);

  background:
    rgba(255,255,255,.96);

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:28px;

}


.sajf-club-points .sajf-championship-copy{

  flex:1;

  text-align:center;

}


.sajf-club-points .sajf-championship-title{

  margin:0;

  color:var(--green);

  font-size:27px;

  line-height:1.45;

}


.sajf-club-points .sajf-championship-title .orange{

  color:var(--green);

}


/* =====================================================
   META
===================================================== */

.sajf-club-points .sajf-championship-meta{

  margin-top:25px;

  display:flex;

  flex-wrap:wrap;

  justify-content:center;

  gap:10px;

}


.sajf-club-points .sajf-chip{

  display:inline-flex;

  align-items:center;

  gap:8px;

  min-height:37px;

  padding:7px 15px;

  border-radius:999px;

  color:#fff;

  font-size:13px;

}


.sajf-club-points .sajf-chip-category{

  background:var(--green-2);

}


.sajf-club-points .sajf-chip-date{

  background:var(--green-2);

}


.sajf-club-points .sajf-chip-date bdi{

  direction:ltr;

}


/* =====================================================
   RANKS
===================================================== */

.sajf-club-points .sajf-ranks{

  margin-top:22px;

  display:grid;

  grid-template-columns:
    repeat(8,minmax(0,1fr));

  gap:13px;

  direction:rtl;

}


/* =====================================================
   RANK
===================================================== */

.sajf-club-points .sajf-rank{

  overflow:hidden;

  border-radius:16px;

  border:
    1px solid
    rgba(62,133,72,.40);

  background:#ffffff;

}


.sajf-club-points .sajf-rank-title{

  height:45px;

  background:var(--green);

  color:#ffffff;

  display:flex;

  align-items:center;

  justify-content:center;

  text-align:center;

  padding:5px;

  font-size:14px;

}


.sajf-club-points .sajf-rank-content{

  position:relative;

  height:80px;

  background:#f2f8ef;

  display:flex;

  align-items:center;

  justify-content:center;

  text-align:center;

  padding:8px;

}


.sajf-club-points .sajf-rank-content.is-empty{

  display:grid;

  place-items:center;

}


.sajf-club-points .sajf-rank-number{

  color:var(--green);

  direction:ltr;

  font-size:28px;

}


.sajf-club-points .sajf-rank-empty{

  width:39px;
  height:39px;


  display:block;

  margin:0;

  transform:translateY(-4px);

}


/* =====================================================
   FIRST PLACE
===================================================== */

.sajf-club-points .sajf-rank.first{

  border:
    2px solid
    var(--green);

}


.sajf-club-points .sajf-rank.first .sajf-rank-content{

  background:

    linear-gradient(
      135deg,
      rgba(62,133,72,.12),
      rgba(90,157,80,.05)
    );

}


.sajf-club-points .sajf-crown{

  position:absolute;

  top:-1px;

  color:var(--green);

  font-size:21px;

}


/* =====================================================
   TOTAL
===================================================== */

.sajf-club-points .sajf-total{

  margin-top:22px;

  min-height:105px;

  padding:18px 22px;

  border:
    1px solid
    var(--border);

  border-radius:20px;

  background:#ffffff;

  display:grid;

  grid-template-columns:
    auto
    minmax(0,1fr)
    auto;

  align-items:center;

  gap:22px;

}


/* =====================================================
   TOTAL ICON
===================================================== */

.sajf-club-points .sajf-total-icon{

  width:58px;
  height:58px;

  flex:0 0 58px;

  border-radius:17px;

  background:#eef6ec;

  display:flex;

  align-items:center;

  justify-content:center;

}


.sajf-club-points .sajf-total-icon img{

  width:30px;
  height:30px;

  object-fit:contain;

  filter:
    brightness(0)
    saturate(100%)
    invert(43%)
    sepia(19%)
    saturate(1260%)
    hue-rotate(76deg)
    brightness(91%)
    contrast(88%);

}


/* =====================================================
   TOTAL BAR
===================================================== */

.sajf-club-points .sajf-total-progress{

  width:100%;

  height:13px;

  border-radius:999px;

  background:
    rgba(90,157,80,.25);

  overflow:hidden;

}


.sajf-club-points .sajf-total-progress span{

  display:block;

  width:68%;

  height:100%;

  border-radius:inherit;

  background:var(--green);

}


/* =====================================================
   TOTAL TEXT
===================================================== */

.sajf-club-points .sajf-total-copy{

  min-width:125px;

  display:flex;

  align-items:center;

  justify-content:center;

  text-align:center;

  gap:11px;

}


.sajf-club-points .sajf-total-copy span{

  color:var(--green);

  font-size:15px;

}


.sajf-club-points .sajf-total-copy strong{

  color:var(--green);

  direction:ltr;

  font-size:27px;

  line-height:1;

  transform:translateY(-2px);

}


/* =====================================================
   TABLET
===================================================== */

@media(max-width:1100px){
  .sajf-club-points .sajf-ranks{

    grid-template-columns:
      repeat(4,minmax(0,1fr));

  }

}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:700px){

  .sajf-club-points.sajf-page{

    padding:
      14px
      10px
      40px;

  }


  .sajf-club-points .sajf-hero{

    min-height:215px;

    padding:22px;

    border-radius:22px;

  }


  .sajf-club-points .sajf-hero-content{

    transform:translateY(-8px);

  }


  .sajf-club-points .sajf-hero-icon{

    display:none;

  }


  .sajf-club-points .sajf-hero-title{

    font-size:30px;

  }


  .sajf-club-points .sajf-summary{

    grid-template-columns:1fr;

    gap:10px;

  }


  .sajf-club-points .sajf-stat-card{

    min-height:105px;

    padding:17px;

  }


  .sajf-club-points .sajf-toolbar{

    grid-template-columns:1fr;

    padding:15px;

  }


  .sajf-club-points .sajf-championship{

    padding:13px;

    border-radius:20px;

  }


  .sajf-club-points .sajf-championship-head{

    min-height:auto;

    padding:19px;

  }


  .sajf-club-points .sajf-ranks{

    grid-template-columns:
      repeat(2,minmax(0,1fr));

    gap:9px;

  }


  .sajf-club-points .sajf-rank-title{

    font-size:13px;

  }


  .sajf-club-points .sajf-rank-content{

    height:68px;

  }


  .sajf-club-points .sajf-total{

    grid-template-columns:1fr;

    gap:12px;

  }


  .sajf-club-points .sajf-total-icon{

    display:none;

  }

}

/* Dynamic shortcode integration: hidden states, progress value, and LTR controls. */
.sajf-club-points [hidden]{display:none !important;}
.sajf-club-points .sajf-total-progress span{width:var(--sajf-cp-total-fill);}
.sajf-club-points[dir="ltr"] .sajf-ranks{direction:ltr;}
.sajf-club-points[dir="ltr"] .sajf-search-icon{left:17px;right:auto;}
.sajf-club-points[dir="ltr"] .sajf-field input{padding:11px 16px 11px 52px;}
.sajf-club-points .sajf-no-results{margin-top:20px;padding:20px;border:1px solid var(--border);border-radius:22px;background:#f9fbf8;}