/*
Theme Name: Hfzk Platform
Theme URI: https://QeemaTech.net/
Author: Qeema Tech Team. Ali Alanzan
Author URI: https://QeemaTech.net/
Description: A custom developed theme built to by Qeema Tech Team - Ali Alanzan
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hfzk
*/

/* Reset styles */
.btn-light, .btn-primary {
    --bs-btn-color: #0D727C;
    --bs-btn-bg: #EFF7F6;
    --bs-btn-active-color: #0D727C;
    --bs-btn-active-bg: #EFF7F6;
    --bs-btn-border-color: #0D727C;
}

.rounded-circle {
    border-radius: 50%;
}


.site-footer p {
    direction: ltr;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6; 
    color: #333;
    background-color: #FDFEFF;
}

/* Header Styles */
header {
    background: #222;
    color: #fff;
    padding: 20px 0;
    text-align: center;
}

/* Navigation Styles */
nav {
    background: #333;
    padding: 10px 0;
}
nav ul {
    list-style: none;
    text-align: center;
}
nav ul li {
    display: inline;
    margin: 0 15px;
}
nav ul li a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
}

/* Main Content */
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 0;
}

/* Footer */
footer {
    background: #222;
    color: #fff;
    text-align: center;
    padding: 10px 0;
    margin-top: 20px;
}










/* Student plan page */

.header {
    text-align: center;
    margin-bottom: 30px;
}
.header h1 {
    color: #2c3e50;
    font-weight: 700;
    margin-bottom: 5px;
}
.header h2 {
    color: #34495e;
    font-weight: 600;
    margin-bottom: 5px;
}
.header h3 {
    color: #7f8c8d;
    font-weight: 500;
}
.divider {
    border-top: 2px solid #ddd;
    margin: 25px 0;
}
.section-title {
    background-color: #EFF7F6;
    padding: 10px 15px;
    border-radius: 5px;
    margin-bottom: 20px;
    color: #2980b9;
    font-weight: 600;
}
.info-card {
    background-color: #f9f9f9;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
    border-left: 4px solid #3498db;
}
.info-card h5 {
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 10px;
}
.info-card p {
    margin-bottom: 5px;
    font-size: 15px;
}
.table-custom {
    width: 100%;
    margin-bottom: 25px;
    border: 1px solid #dee2e6;
}
.table-custom th {
    background-color: #f8f9fa;
    text-align: center;
    padding: 12px;
    border: 1px solid #dee2e6;
    font-weight: 600;
}
.table-custom td {
    text-align: center;
    padding: 10px;
    border: 1px solid #dee2e6;
}
.highlight {
    background-color: #f0f7fd;
}








.navbar {
    background-color: #EFF7F6;
}


.navbar span {
    color: #0D727C;
}

.navbar a {
    color: #0D727C;
    border-color: #0D727C;
}




nav .logo {
    max-width:200px;
}




/*New home page */
    .hero {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    color: white;
      padding: 100px 0;
      text-align: center;
    }
    .section-title {
      font-weight: bold;
      margin-bottom: 40px;
      color: #0d6efd;
    }
    .feature-icon {
      font-size: 80px;
      color: #0d6efd;
      margin-bottom: 15px;
    }
    .card img {
      max-height: 200px;
      object-fit: cover;
    }
    footer {
      background: #0D727C;
      color: white;
      padding: 20px 0;
      margin-top:0;
    }
    
    
    
    
    
    
    
    
    
    
    
    
    
    /* teacher dashboard */
    
    

    .status-badge {
      border-radius: 50px;
      padding: 5px 12px;
      margin: 3px;
      font-size: 14px;
      font-weight: bold;
      color: #fff;
    }

    .status-hadir { background-color: #7cbf7b; }   /* حاضر */
    .status-ghaib { background-color: #e7a6a6; }   /* غائب */
    .status-mustathan { background-color: #ffd966; color: #333; } /* مستأذن */
    .status-mutaakhir { background-color: #bfbfbf; } /* متأخر */
    .status-ijaza { background-color: #a3c2f2; } /* إجازة */

    .student-card {
      border: 1px solid #ccc;
      border-radius: 10px;
      position: relative;
      padding: 15px;
      text-align: center;
      margin-bottom: 20px;
      background: #fff;
      transition: 0.3s;
    }

    .student-card:hover {
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      transform: translateY(-2px);
    }

    .student-name {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 10px;
      color: #333;
    }

    .circle-status {
      cursor: pointer;
      display: inline-block;
      width: 35px;
      height: 35px;
      line-height: 35px;
      text-align: center;
      border: 1px solid #ccc;
      border-radius: 50%;
      margin: 3px;
      font-weight: bold;
      background: #fafafa;
    }

    .filters {
      margin-bottom: 20px;
    }


    .circle-status-success {
        background-color: green;
        color: #fff;
        border-radius: 10px;
        position: absolute;
        left: 0;
        top: 0;
    }
    
    
    .student-present-plan {
        cursor: pointer;
    }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
.tabs {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 20px;
}
.tabs div {
    padding: 10px 20px;
    cursor: pointer;
    border-bottom: 3px solid transparent;
}
.tabs .active {
    border-color: #ffc107;
    font-weight: bold;
}
.verses {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    position: relative;
}
.verse {
    width: 28px;
    height: 28px;
    font-size: 12px;
    font-weight: bolder;
    border-radius: 50%;
    border: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.verse.completed {
    background-color: green;
    color: #fff;
}
.verse.active {
    background-color: #c6c6c6;
    color: #fff;
}
.verse.special {
    background-color: #6c757d;
    color: #fff;
    font-size: 12px;
    width: max-content;
    border-radius: 10px;
    padding: 0 10px;
    height: 24px;
}
.verses-thfiz .pagination button {
    padding: 0px 10px;
    border-radius: 50%;
}
.verses-thfiz .pagination {
    position: absolute;
    left: 0;
    bottom: -5px;
}
.pagination button {
    padding: 0px 7px;
    border: none;
    background-color: #ffc107;
    color: #fff;
    cursor: pointer;
    border-radius: 5px;
}




.hidden {
    display: none !important;
}

















.verses-styles,
.verses-tthbit {
    justify-content: center;
}

.verses-styles  .verse,
.verses-tthbit .verse {
    background: #fff;
    color: #000;
    border: 1px solid #000;
    position: relative;
    width: 18%;
}

.verses-tthbit .hover-buttons,
.verses-styles .hover-buttons
{position: absolute;width: 100%;}

.verses-tthbit .hover-buttons .left-btn ,
.verses-styles .hover-buttons .left-btn 

{
    left: 10px;
    position: absolute;
}

.right-btn a , 
.left-btn a {
    color: #fff !important ;
}


.hfzk-nav__title {
    overflow: hidden;
    max-width: 180px;
    font-size: 14px !important;
}



.verses-tthbit .hover-buttons .right-btn,
.verses-styles .hover-buttons .right-btn
{
    right: 10px;
    position: absolute;
}

.verses-tthbit .hover-buttons > span.badge  ,
.verses-styles .hover-buttons > span.badge  
{
    visibility: visible !important;
    background-color: #f00;
    color: #fff;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    padding: 4px 0;
}


.verses-tthbit .hover-buttons > span ,
.verses-styles .hover-buttons > span 
{
     visibility: hidden;
     top: -9px;
     font-size: 10px;
     color: #f00;
}

.verses-tthbit > .verse:hover  .hover-buttons > span ,
.verses-styles > .verse:hover  .hover-buttons > span 

{
     visibility: visible;   
}


.case {
    position: relative;
    margin-bottom: 50px;
}
.remove-case {
    background-color: #f00;
    color: #fff;
    padding: 0 6px;
    border-radius: 5px;
    border: none;
    margin-bottom: 15px;
    position: absolute;
    left: -20px;
    top: -20px;
}

.pagination-verses-styles, 
.pagination-verses-tthbit 
{
    position: absolute;
    bottom: -14px;
}


 


.add-case {
    margin-top: -15px;
    margin-bottom: 25px;
}


.list-group {
    --bs-list-group-active-bg: #0D727C;
    --bs-list-group-active-border-color: #0D727C;
}


















#verses-popup {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.5); /* خلفية غامقة */
  z-index: 9999;
}
#verses-popup .popup-box {
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  max-height: 80vh;
  overflow-y: auto;
  min-width: 280px;
  text-align: center;
}
#verses-numbers button {
  margin: 4px;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 14px;
  border: none;
  cursor: pointer;
}
#verses-numbers button.active {
  background: #2563eb;
  color: #fff;
}
#verses-numbers button[disabled] {
  background: #e5e7eb;
  color: #9ca3af;
  cursor: not-allowed;
}










.verses-styles .verse.active,
.verses-tthbit .verse.active {
    background-color: #29bf40;
    color: #fff;
}




/* General Layout */
.row {
  margin: 0 -10px;
}

.col-md-6 {
  padding: 10px;
}

.card {
  background: #fff;
  border: none;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  padding: 15px 20px;
  transition: all 0.2s ease;
}

.card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.card-content {
  padding: 10px 0;
}

/* Percent Icons (Left Side Numbers) */
.icon-big {
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.icon-primary {
  color: #5a9cae;
}

.icon-warning {
  color: #f7b731;
}

.icon-success {
  color: #56b17e;
}

.icon-danger {
  color: #e05d3c;
}

/* Numbers (Right Side Text) */
.numbers {
  text-align: right;
  font-size: 1.1rem;
  color: #333;
}

.numbers p {
  margin: 0;
  font-size: 0.9rem;
  color: #777;
}

/* === Day Records Section === */
.day-records {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 1px solid #eee;
}

.day-name {
  font-weight: 600;
  color: #444;
}

.day-name a {
  color: #0077b6;
  text-decoration: none;
}

.day-name a:hover {
  text-decoration: underline;
}

/* Status Labels */
.status {
  display: inline-block;
  padding: 4px 10px;
  font-size: 0.8rem;
  border-radius: 12px;
  background-color: #f2f2f2;
  color: #666;
}

.status.attended {
  background-color: #d4f8e8;
  color: #2f9d62;
}

/* Circle Charts / Achievement Cards */
.achievement-card {
  text-align: center;
  width: 25%;
  margin: 0 5px;
}

.achievement-card .card-header {
  border-bottom: none;
  padding-bottom: 5px;
}

.achievement-card-title {
  font-size: 1rem;
  color: #333;
  margin-bottom: 8px;
}

.achievement-card .description {
  font-size: 0.9rem;
  color: #555;
  line-height: 1.5;
}

/* Custom Arabic Font Size Fix */
.custom-font-1 {
  font-family: 'Scheherazade New', 'Amiri', serif;
  font-size: 1.05rem;
}

.navbar-brand span {
    text-wrap: auto;
}


/* Responsive */
@media (max-width: 768px) {
  .achievement-card {
    width: 100%;
    margin-bottom: 15px;
  }
  .numbers {
    text-align: center;
  }
  
  .day-records {
      flex-direction: column;
  }
  
  .verses-styles .verse, .verses-tthbit .verse {
      width: 68%;
  }
}








































#quran-player-bar {
    position: fixed; bottom: 0; left: 0; right: 0;
    background: #1a1a1a; color: white; padding: 15px;
    z-index: 99999; direction: rtl; border-top: 3px solid #00a0d2;
    transition: transform 0.4s ease;
}
.qp-hidden { transform: translateY(100%); }
.qp-container { max-width: 1000px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.qp-info { display: flex; align-items: center; gap: 15px; }
.qp-text { display: flex; flex-direction: column; }
.qp-controls { display: flex; align-items: center; gap: 10px; }
.qp-controls button { background: #00a0d2; border: none; color: white; padding: 10px 20px; border-radius: 5px; cursor: pointer; }
.qp-controls button:hover { background: #0073aa; }
.qp-close { background: none; border: none; color: #ff4d4d; font-size: 30px; cursor: pointer; }
#qp-audio { height: 40px; }



/* Container for the percentage */
.quran-percentage-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9em;
    color: #27ae60; /* Success Green */
    background: #ebf9f1;
    padding: 2px 8px;
    border-radius: 4px;
    margin: 0 5px; /* Space between this and other spans */
    vertical-align: middle;
}

/* Container for the play button */
.quran-play-btn-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    margin-right: 5px;
}

/* Ensure the button itself has no extra margins */
.quran-play-btn-container .quran-play-btn {
    margin: 0;
}

.qrn-divider {
    margin: 10px 0;
}


.container-plan-tobe-downloaded {
  padding-bottom: 60px; /* يمكنك التجربة 40-100px */
  background: white;
}

#downloadPdfBtn {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: white;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    padding: 10px 26px;
    cursor: pointer;
    font-size: 15px;
    transition: all 0.3s ease;
    margin: 0 auto;
    display: table;
    margin-bottom: 20px;
}

#downloadPdfBtn:hover {
  background: linear-gradient(135deg, #15803d, #16a34a);
  box-shadow: 0 4px 10px rgba(22, 163, 74, 0.4);
}


.table-custom td>hr:last-of-type {
    display:none;
}
















#close-popup {
    padding: 5px 10px;
}

#my-popup-overlay {
    z-index: 3;
}

#popup-iframe {
    height: 80vh;
}



.hfzk-plan-progress-selected {
    float: right;
    font-size: 12px;
    width: 100%;
    color: #5a91cc;
    padding: 0px 6px;
    text-decoration: none;
    border-right: 1px solid;
}

        
        
        
        
        
        
        
        
         
        
        
        
.nav-buttons-links-student-plans {
    justify-content: center;
    align-items: center;
    display: flex;
    gap: 10px;  
    margin-top: 100px !important;
}

.nav-buttons-links-student-plans > * {
    color: #fff;
}

.nav-buttons-links-student-plans  > *:hover {
    color: skyblue;
}






.teacher-door {
    margin-top: 75px;
}

.teacher-door > .row {
}    


.teacher-door > .row > div {
}

.teacher-door > .row > div > a {
    
}




.hfzk-nav__menu.open {
    height: max-content;
    left: 60px;
    right: initial;
    top: 85px;
    border: 1px solid #065f46;
    border-radius: 4px;
}


.hfzk-nav__menu.open .hfzk-nav__links {
    display: flex !important;
    justify-content: space-evenly;
    flex-direction: column;
    height: max-content;
}

.hfzk-nav__menu.open .hfzk-nav__links ul li {
    margin: 14px 15px !important;
}