/* ==========================================================================
   Base Styles & Variables
   ========================================================================== */
/* 1. Import Font */
@import url('../assets/fonts/vazir-fd.css');

   :root {
       --color-brand: #BCCF00;
       --color-dark: #050505;
       --color-gray: #9E9D9D;
       --color-white: #FFFFFF;
       --color-error: #ff4757;
       --color-success: #2ed573;
       
       --shadow-sm: 0 4px 12px rgba(5, 5, 5, 0.05);
       --shadow-md: 0 12px 32px rgba(5, 5, 5, 0.08);
       --shadow-hover: 0 16px 48px rgba(188, 207, 0, 0.15);
       
       --radius-sm: 8px;
       --radius-md: 16px;
       --radius-lg: 24px;
       
       --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
   }
   
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Vazirmatn FD NL', sans-serif;
   }
   
   body {
       background-color: var(--color-white);
       color: var(--color-dark);
       line-height: 1.6;
       min-height: 100vh;
       display: flex;
       align-items: center;
       justify-content: center;
       padding: 20px;
       overflow-x: hidden;
   }
   
   /* ==========================================================================
      Layout & Containers
      ========================================================================== */
   .panel-container {
       width: 100%;
       max-width: 900px;
       margin: 0 auto;
       animation: fadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
   }
   
   .panel-card {
       background: var(--color-white);
       border-radius: var(--radius-lg);
       padding: 40px;
       box-shadow: var(--shadow-md);
       border: 1px solid rgba(158, 157, 157, 0.2);
       position: relative;
       overflow: hidden;
       transition: var(--transition);
   }
   
   .panel-card:hover {
       box-shadow: var(--shadow-hover);
   }
   
   /* ==========================================================================
      Header
      ========================================================================== */
   .panel-header {
       text-align: center;
       margin-bottom: 40px;
       animation: fadeIn 0.8s ease forwards;
   }
   
   .panel-logo {
       display: inline-flex;
       justify-content: center;
       align-items: center;
       margin-bottom: 20px;
       animation: scaleIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
   }
   
   .panel-header h1 {
       font-size: 24px;
       font-weight: 800;
       color: var(--color-dark);
       margin-bottom: 8px;
   }
   
   .panel-subtitle {
       font-size: 14px;
       color: var(--color-gray);
   }
   
   /* ==========================================================================
      Forms & Inputs
      ========================================================================== */
   .form-group {
       margin-bottom: 24px;
       position: relative;
       animation: slideRight 0.5s ease forwards;
       opacity: 0;
       animation-fill-mode: forwards;
   }
   
   .form-group:nth-child(1) { animation-delay: 0.1s; }
   .form-group:nth-child(2) { animation-delay: 0.2s; }
   .form-group:nth-child(3) { animation-delay: 0.3s; }
   .form-group:nth-child(4) { animation-delay: 0.4s; }
   
   .form-group label {
       display: block;
       font-size: 13px;
       font-weight: 600;
       margin-bottom: 8px;
       color: var(--color-dark);
       transition: var(--transition);
   }
   
   .form-group input {
       width: 100%;
       padding: 16px;
       border: 2px solid rgba(158, 157, 157, 0.3);
       border-radius: var(--radius-sm);
       font-size: 15px;
       color: var(--color-dark);
       background: transparent;
       transition: var(--transition);
       outline: none;
   }
   
   .form-group input:focus {
       border-color: var(--color-brand);
       box-shadow: 0 0 0 4px rgba(188, 207, 0, 0.1);
   }
   
   .form-group input::placeholder {
       color: var(--color-gray);
       opacity: 0.6;
   }
   
   .form-hint {
       display: block;
       font-size: 11px;
       color: var(--color-gray);
       margin-top: 6px;
   }
   
   /* ==========================================================================
      Buttons
      ========================================================================== */
   .btn {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       gap: 8px;
       width: 100%;
       padding: 16px 24px;
       font-size: 15px;
       font-weight: 700;
       border-radius: var(--radius-sm);
       cursor: pointer;
       transition: var(--transition);
       border: none;
       outline: none;
       text-decoration: none;
   }
   
   .btn-primary {
       background-color: var(--color-dark);
       color: var(--color-brand);


   }
   
   .btn-primary:hover {
       background-color: var(--color-brand);
       color: var(--color-dark);
       transform: translateY(-2px);
       box-shadow: var(--shadow-md);
   }
   
   .btn-outline {
       background-color: transparent;
       border: 2px solid var(--color-gray);
       color: var(--color-dark);
       margin-top: 16px;
   }
   
   .btn-outline:hover {
       border-color: var(--color-dark);
       background-color: var(--color-dark);
       color: var(--color-white);
   }
   
   /* ==========================================================================
      OTP Section
      ========================================================================== */
   .otp-section {
       text-align: center;
       margin-bottom: 32px;
       animation: fadeIn 0.5s ease forwards;
   }
   
   .otp-icon {
       margin-bottom: 16px;
       animation: pulse 2s infinite;
   }
   
   .otp-label {
       font-size: 15px;
       color: var(--color-dark);
       margin-bottom: 24px;
       font-weight: 600;
   }
   
   .otp-inputs {
       display: flex;
       justify-content: center;
       gap: 16px;
       margin-bottom: 24px;
       direction: ltr;
   }
   
   .otp-digit {
       width: 60px;
       height: 60px;
       font-size: 24px;
       font-weight: 700;
       text-align: center;
       border: 2px solid rgba(158, 157, 157, 0.3);
       border-radius: var(--radius-sm);
       background: var(--color-white);
       color: var(--color-dark);
       transition: var(--transition);
   }
   
   .otp-digit:focus {
       border-color: var(--color-brand);
       box-shadow: 0 0 0 4px rgba(188, 207, 0, 0.1);
       transform: translateY(-2px);
   }
   
   .otp-timer {
       display: inline-flex;
       align-items: center;
       gap: 6px;
       font-size: 14px;
       color: var(--color-gray);
       font-weight: 600;
   }
   
   /* ==========================================================================
      Results & Alerts
      ========================================================================== */
   .alert {
       display: flex;
       align-items: center;
       gap: 12px;
       padding: 16px;
       border-radius: var(--radius-sm);
       font-size: 13px;
       font-weight: 600;
       margin-bottom: 24px;
       animation: slideDown 0.4s ease forwards;
   }
   
   .alert-error {
       background-color: rgba(255, 71, 87, 0.1);
       color: var(--color-error);
       border: 1px solid rgba(255, 71, 87, 0.2);
   }
   
   .alert-success {
       background-color: rgba(46, 213, 115, 0.1);
       color: var(--color-success);
       border: 1px solid rgba(46, 213, 115, 0.2);
   }
   
   .result-section {
       text-align: center;
       animation: scaleIn 0.5s ease forwards;
   }
   
   .result-icon {
       margin-bottom: 24px;
   }
   
   .result-title {
       font-size: 22px;
       font-weight: 800;
       margin-bottom: 24px;
       color: var(--color-dark);
   }
   
   .code-display {
       background: var(--color-dark);
       border-radius: var(--radius-md);
       padding: 24px;
       margin-bottom: 24px;
       border: 2px dashed var(--color-brand);
   }
   
   .code-label {
       display: block;
       color: var(--color-gray);
       font-size: 14px;
       margin-bottom: 8px;
   }
   
   .code-value {
       display: block;
       font-size: 32px;
       font-weight: 900;
       color: var(--color-brand);
       letter-spacing: 4px;
   }
   
   .activation-guide {
       background: rgba(158, 157, 157, 0.05);
       padding: 20px;
       border-radius: var(--radius-sm);
       margin-bottom: 24px;
       font-size: 14px;
   }
   
   .ussd-code {
       display: inline-block;
       font-weight: 800;
       font-size: 18px;
       color: var(--color-dark);
       margin: 8px 0;
       background: var(--color-brand);
       padding: 4px 12px;
       border-radius: 4px;
   }
   
   .hamta-link {
       color: #0056b3;
       font-weight: 700;
       text-decoration: none;
       border-bottom: 1px dashed #0056b3;
   }
   
   .result-details {
       text-align: right;
       background: var(--color-white);
       border: 1px solid rgba(158, 157, 157, 0.2);
       border-radius: var(--radius-sm);
       padding: 16px;
       margin-bottom: 24px;
   }
   
   .detail-row {
       display: flex;
       justify-content: space-between;
       padding: 8px 0;
       border-bottom: 1px solid rgba(158, 157, 157, 0.1);
   }
   
   .detail-row:last-child {
       border-bottom: none;
   }
   
   .detail-label {
       color: var(--color-gray);
       font-size: 13px;
   }
   
   .detail-value {
       font-weight: 700;
       color: var(--color-dark);
       font-size: 13px;
   }
   
   /* ==========================================================================
      Animations
      ========================================================================== */
   @keyframes fadeUp {
       0% { opacity: 0; transform: translateY(30px); }
       100% { opacity: 1; transform: translateY(0); }
   }
   
   @keyframes fadeIn {
       0% { opacity: 0; }
       100% { opacity: 1; }
   }
   
   @keyframes scaleIn {
       0% { opacity: 0; transform: scale(0.9); }
       100% { opacity: 1; transform: scale(1); }
   }
   
   @keyframes slideRight {
       0% { opacity: 0; transform: translateX(20px); }
       100% { opacity: 1; transform: translateX(0); }
   }
   
   @keyframes slideDown {
       0% { opacity: 0; transform: translateY(-20px); }
       100% { opacity: 1; transform: translateY(0); }
   }
   
   @keyframes pulse {
       0% { transform: scale(1); }
       50% { transform: scale(1.05); }
       100% { transform: scale(1); }
   }
   
   /* ==========================================================================
      Responsive Design
      ========================================================================== */
   @media (max-width: 768px) {
       .panel-card {
           padding: 24px;
       }
       .otp-inputs {
           gap: 8px;
       }
       .otp-digit {
           width: 50px;
           height: 50px;
           font-size: 20px;
       }
   }