/**
 * Settings Page Styles
 * Specific styles for usersettings.html
 */

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

/*body.settings-page {
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: 100vh;*/

.settings-main {

  /* ============================================================================
       CONTAINER & HEADER
       ============================================================================ */

  .settings-container {
    .header {      
      text-align: center;

      h1 {
        font-size: 2.5rem;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 0.5rem;
      }

      p {
        color: #666;
        font-size: 1.1rem;
      }
    }

    /* ============================================================================
         CARDS
         ============================================================================ */

    .card {
      background: white;
      border-radius: 12px;
      padding: 2rem;
      margin-bottom: 2rem;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
      transition: box-shadow 0.3s ease;

      &:hover {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
      }

      h2 {
        font-size: 1.5rem;
        color: #1a1a2e;
        margin-bottom: 1.5rem;
        padding-bottom: 1rem;
        border-bottom: 2px solid #f0f0f0;
      }

      &.danger-zone {
        border: 2px solid #ef4444;

        h2 {
          color: #ef4444;
          border-color: #fee2e2;
        }
      }
    }

    /* ============================================================================
         ACCOUNT INFO
         ============================================================================ */

    .info-group {
      margin-bottom: 1.5rem;
    }

    .info-label {
      font-size: 0.9rem;
      font-weight: 600;
      color: #667eea;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 0.5rem;
    }

    .info-value {
      font-size: 1.1rem;
      color: #333;
      padding: 0.75rem 1rem;
      background: #f3f4f6;
      border-radius: 6px;
      border-left: 4px solid #667eea;

      &.unverified-email {
        background: #fef2f2;
        border-left-color: #dc2626;
        color: #991b1b;
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: row;
        align-items: flex-start;

        span {
          opacity: 0.8;
        }

        &>div {
          align-items: center;
        }

        &>div:first-child {
          width: 100%;
          margin-bottom: 0.5rem;
        }

        &>div:nth-child(2) {
          width: 100%;
          font-size: 1rem;
          color: #666;
          display: flex;
          flex-direction: column;
          gap: 0.5rem;
          justify-content: center;
        }

        button {
          padding: 0.4rem 0.8rem;
          font-size: 1rem;
          border: 1px solid gray;
          border-radius: 4px;
          white-space: nowrap;
          margin-bottom: 0px;
        }
      }
    }

    #email-verify-message {
      margin-top: 0.5rem;
      font-size: 0.9rem;
      color: #991b1b;
    }

    #email-sent-message {
      margin-top: 0.5rem;
      font-size: 0.85rem;
      color: #666;
    }

    #alert-title {
      margin-bottom: 1rem;
      color: #1a1a2e;
    }

    #alert-message {
      color: #666;
      margin-bottom: 1.5rem;
    }

    .unverified-email-link {
      color: #0369a1;
      text-decoration: underline;
    }

    #unverified-message {
      margin-top: 1.5rem;
      padding: 1rem;
      background: #fef2f2;
      border-left: 4px solid #dc2626;
      color: #991b1b;
      border-radius: 4px;
    }

    /* ============================================================================
         PLAN DISPLAY
         ============================================================================ */

    .plan-display {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      padding: 2rem;
      border-radius: 12px;
      margin-bottom: 1.5rem;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
      align-items: center;

      .plan-info h3 {
        font-size: 0.9rem;
        opacity: 0.8;
        margin-bottom: 0.5rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }

      .plan-name {
        font-size: 2.5rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
      }

      .plan-limit {
        font-size: 0.95rem;
        opacity: 0.9;
      }

      .keywords-used {
        text-align: right;
        font-size: 0.95rem;

        .keywords-used-value {
          font-size: 1.8rem;
          font-weight: 700;
        }
      }
    }

    .upgrade-cta {
      text-align: center;
      margin-top: 2rem;
      background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
      border: 1px solid rgba(102, 126, 234, 0.2);
      padding: 1.5rem;
      border-radius: 8px;
      margin-top: 1.5rem;

      p {
        color: #666;
        margin-bottom: 1rem;
      }
    }

    /* ============================================================================
         LOADING & MESSAGES
         ============================================================================ */

    #loading-state {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 400px;
    }

    .spinner {
      width: 48px;
      height: 48px;
      border: 4px solid rgba(102, 126, 234, 0.2);
      border-top-color: #667eea;
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }

    .loading-text {
      margin-top: 1rem;
      color: #667eea;
      font-weight: 600;
    }

    #error-message {
      background: #fee2e2;
      border-left: 4px solid #ef4444;
      color: #991b1b;

      a {
        color: blue;
        text-decoration: underline;
      }
    }

    #success-message {
      background: #dcfce7;
      border-left: 4px solid #22c55e;
      color: #166534;
      font-size: 1rem;
      position: relative;

      &.activating {
        animation: none;

        &::before {
          content: '';
          display: inline-block;
          width: 16px;
          height: 16px;
          border: 2px solid #22c55e;
          border-top-color: transparent;
          border-radius: 50%;
          animation: spin 0.8s linear infinite;
          margin-right: 0.5rem;
          vertical-align: middle;
        }
      }
    }

    /* ============================================================================
         SUBSCRIPTION & PLAN STYLES
         ============================================================================ */

    #subscription-info {
      margin-top: 1.5rem;
      padding-top: 1.5rem;
      border-top: 1px solid #e5e7eb;
    }

    #plan-limits-container {
      margin-top: 1.5rem;

      .info-group {
        background: #f3f4f6;
        border-radius: 8px;
        padding: 1rem;
      }
    }

    div:has(>.plan-limits-table) {
      padding: 12px;
      border: 1px solid #666;
      border-radius: 6px;
      width: 50%;
      margin: 0px auto;
      background: #e1e1e1;
    }

    .plan-limits-table {
      width: 100%;
      margin: 0px auto;
      border-collapse: collapse;
      font-size: 0.95rem;

      thead tr {
        border-bottom: 1px solid #c5c5c6;
      }

      th {
        text-align: center;
        padding: 0.5rem;
        font-weight: 600;

        &:first-child {
          padding-left: 0;
        }

        &:nth-child(4) {
          background-color: rgba(255, 255, 255, 0.08);
          color: #667eea;
          font-weight: 700;
        }
      }

      tbody tr {
        border-bottom: 1px solid #c5c5c6;

        &:last-child {
          border-bottom: none;
        }
      }

      td {
        text-align: center;
        padding: 0.5rem;

        &:first-child {
          font-weight: 600;
          text-align: left;
          padding-left: 0;
        }

        &:nth-child(2),
        &:nth-child(3) {
          color: #374151;
        }

        &:nth-child(4) {
          background-color: rgba(255, 255, 255, 0.08);
          color: #667eea;
          font-weight: 700;
        }
      }
    }

    .status-badge {
      display: inline-block;
      background-color: rgba(255, 255, 255, 0.3);
      padding: 4px 12px;
      border-radius: 12px;
      font-size: 1.5rem;
      font-weight: 600;
      color: white;
      width: fit-content;

      /* Status Badge Styles */
      &.status-active {
        background-color: #10b981;
        color: white;
      }

      &.status-past-due {
        background-color: #f59e0b;
        color: white;
      }

      &.status-canceled {
        background-color: #ef4444;
        color: white;
      }

      &.status-trialing {
        background-color: #3b82f6;
        color: white;
      }

      &.status-free {
        background-color: #6b7280;
        color: white;
      }

      &.status-disabled {
        background-color: #9ca3af;
        color: white;
      }
    }

    /* Subscription Status Styles */
    .subscription-expired {
      color: #991b1b !important;
      font-weight: 700 !important;
      background-color: #fee2e2 !important;
      padding: 4px 8px !important;
      border-radius: 4px !important;
    }

    .subscription-warning {
      color: #d97706;
      background-color: #fef3c7;
      border: 1px solid #f59e0b;
      border-radius: 4px;
      padding: 1rem;
      margin-top: 1rem;
    }

    .subscription-infinity {
      font-size: 1.2rem;
    }

    /* Plan Limits Styles */
    .limit-reached {
      color: #ef4444;
      font-weight: 700;
    }

    /* Checkbox Styles */
    .checkbox-label {
      display: flex;
      align-items: center;
      cursor: pointer;
      gap: 0.75rem;
      font-size: 1rem;
      color: #333;

      input[type="checkbox"] {
        width: 18px;
        height: 18px;
        cursor: pointer;
        accent-color: #667eea;

        &:disabled {
          cursor: not-allowed;
          opacity: 0.5;
        }
      }

      &:hover input[type="checkbox"]:not(:disabled) {
        opacity: 0.8;
      }
    }
  }
}
/*}*/

/* ============================================================================
   ALERT MODAL
   ============================================================================ */

#alert-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease;

  &.show {
    display: flex;
  }

  .modal-content {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  }

  .modal-buttons {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;

    button {
      padding: 0.75rem 1.5rem;
      border-radius: 8px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    #alert-cancel-btn {
      background: #f0f0f0;
      color: #333;

      &:hover {
        background: #e0e0e0;
      }
    }

    #alert-confirm-btn {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
      }
    }
  }
}

/* ============================================================================
   KEYFRAME ANIMATIONS
   ============================================================================ */

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================================
   RESPONSIVE DESIGN
   ============================================================================ */

@media (max-width: 768px) {
  .settings-main {
    padding: 1rem;

    .settings-container {
      .card {
        padding: 1.5rem;
      }

      .plan-display {
        grid-template-columns: 1fr;
        gap: 1rem;
      }

      .keywords-used {
        text-align: left;
      }

      .header h1 {
        font-size: 1.8rem;
      }
    }
  }

}

@media (max-width: 480px) {
  /* Add extra specific overrides if needed for settings-main */
  body:has(nav .nav-actions:not([style*="display: none"])) .settings-main {

    .settings-container {
      #settings-email.unverified-email {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;

        span {
          width: 100%;
        }

        button {
          width: 100%;
        }
      }

      div:has(>.plan-limits-table) {
        width: 100%;
        padding: 1rem;
        margin: 0;
      }

      .plan-limits-table {
        font-size: 0.85rem;

        th, td {
          padding: 0.5rem 0.25rem;
        }

        th:first-child {
          padding-left: 0;
        }
      }
    }
  }
}