/**
 * Approval Page Styles with  prefix
 * Theme: Dark Modern
 * Direction: RTL
 */

/* ========================================
   CSS Variables
   ======================================== */



  
  /* ========================================
     Section Wrapper for Centering
     ======================================== */
  #success.section {
    min-height: 70vh;
    display: flex;
    align-items: center;
    padding: 4rem 0;
  }

  #success .container {
    width: 100%;
  }

  #success .row {
    min-height: auto;
  }

  /* ========================================
     Card Container
     ======================================== */
     .cards {
        width: 100%;
        max-width: 520px;
        margin: 0 auto;
        background: #DFFF32;
        border-radius: 20px;
        padding: 36px;
        text-align: center;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
        border: 1px solid rgba(0, 0, 0, 0.08);
      }
  /* ========================================
     Visual Area (SVG Container)
     ======================================== */
  .visual {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    height: 160px;
  }
  
  .visual svg {
    width: 140px;
    height: 140px;
  }
  
  /* ========================================
     SVG Circle Animations
     ======================================== */
  .circle {
    stroke:  rgb(18 15 15 / 92%);
    stroke-width: 8;
    fill: none;
  }
  
  .circle-anim {
    stroke: rgba(34, 197, 94, 0.12);
    stroke-width: 8;
    fill: none;
    stroke-linecap: round;
    stroke-dasharray: 440;
    stroke-dashoffset: 440;
    animation: drawCircle 1s ease-out forwards;
  }
  
  @keyframes drawCircle {
    to {
      stroke-dashoffset: 0;
    }
  }
  
  /* ========================================
     Check Mark Animation
     ======================================== */
  .check {
    stroke: #28c76f;
    stroke-width: 9;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: drawCheck 0.6s ease-out 0.9s forwards;
    filter: drop-shadow(0 6px 18px rgba(34, 197, 94, 0.15));
  }
  
  @keyframes drawCheck {
    to {
      stroke-dashoffset: 0;
    }
  }
  
  /* ========================================
     Badge Animation
     ======================================== */
  .badge {
    transform: scale(0.9);
    opacity: 0;
    animation: pop 0.45s cubic-bezier(0.2, 0.9, 0.28, 1) 1.6s forwards;
  }
  
  @keyframes pop {
    to {
      transform: scale(1);
      opacity: 1;
    }
  }
  
  /* ========================================
     Text Elements
     ======================================== */
  .title {

    transform: translateY(8px);
    animation: fadeUp 0.45s ease-out 1.8s forwards;
    color: var(--text-primary);
  }
  
  .subtitle {
 
    transform: translateY(8px);
    animation: fadeUp 0.45s ease-out 2s forwards;
  }
  
  @keyframes fadeUp {
    to {
      opacity: 1;
      transform: none;
    }
  }