/* style.css */

    /* General Styles */
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: #181818;
      color: #fff;
      margin: 0;
      /* Enable scrolling on the body */
      overflow: auto;
      display: grid;
      grid-template-rows: 1fr;
      height: 100vh;
    }

    /* Scrollbar Styles */
    ::-webkit-scrollbar {
      width: 12px;
    }

    ::-webkit-scrollbar-track {
      background: #181818;
      border-radius: 6px;
    }

    ::-webkit-scrollbar-thumb {
      background: #333;
      border-radius: 6px;
      border: 3px solid #181818;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: #444;
    }

    * {
      scrollbar-width: thin;
      scrollbar-color: #333 #181818;
    }

    /* Container Styles */
    .container {
      display: grid;
      grid-template-columns: 250px 1fr;
      height: 100%;
    }

    /* Sidebar Styles */
    .sidebar {
      background-color: #222;
      color: #fff;
      padding: 20px;
      box-sizing: border-box;
      overflow-y: auto;
      height: calc(100vh - 40px);
    }

    .sidebar h3 {
      color: #64b5f6;
      margin-bottom: 15px;
      text-align: left;
    }

    .sidebar ul {
      list-style: none;
      padding: 0;
    }

    .sidebar li {
      margin-bottom: 15px;
    }

    .sidebar li strong {
      display: block;
      color: #eee;
      margin-bottom: 8px;
      font-size: 1.1em;
      font-weight: 600;
      padding: 5px 0;
      border-bottom: 1px solid #333;
    }

    .sidebar li ul {
      padding-left: 0;
    }

    .sidebar li li {
      margin-bottom: 8px;
    }

    .task-button {
      display: block;
      width: 100%;
      padding: 10px 12px;
      border: none;
      color: #fff;
      cursor: pointer;
      text-align: center;
      box-sizing: border-box;
      margin-bottom: 8px;
      transition: background-color 0.3s ease, color: 0.3s ease;
      border-radius: 5px;
      font-weight: 500;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .task-button i {
      margin-right: 8px;
    }

    .task-button:hover {
      background-color: #444;
    }

    /* Main Content Styles */
    .main-content {
      display: flex;
      flex-direction: column;
      overflow: auto;
      padding: 20px;
    }

    /* Header Styles */
    .header {
      text-align: left;
      padding: 20px;
      border-bottom: 1px solid #333;
    }

    .header h2 {
      color: #64b5f6;
      margin: 0 0 15px;
      font-size: 2em;
      font-weight: 500;
      letter-spacing: 0.6px;
    }

    .api-code-input {
      display: flex;
      align-items: center;
      gap: 15px;
    }

    .api-code-input .info-group {
      margin-bottom: 0;
    }

    .api-code-input label {
      width: auto;
      color: #ccc;
    }

    .api-code-input input {
      width: 150px;
      padding: 10px;
      border: 1px solid #333;
      background-color: #333;
      color: #fff;
      box-sizing: border-box;
      border-radius: 5px;
    }

    .api-code-input button {
      padding: 10px 20px;
      border: none;
      background-color: #64b5f6;
      color: #fff;
      cursor: pointer;
      border-radius: 5px;
      transition: background-color 0.3s ease, color 0.3s ease;
      display: flex;
      align-items: center;
      font-weight: 500;
    }

    .api-code-input button i {
      margin-right: 8px;
    }

    .api-code-input button:hover {
      background-color: #42a5f5;
    }

    /* Tab Styles */
    .tab-container {
      display: flex;
      border-bottom: 1px solid #333;
    }

    .tab {
      padding: 10px 20px;
      cursor: pointer;
      color: #ccc;
      background-color: #333;
      border: none;
      border-radius: 5px 5px 0 0;
      margin-right: 5px;
      transition: background-color 0.3s ease, color 0.3s ease;
    }

    .tab:hover {
      background-color: #444;
      color: #fff;
    }

    .tab.active {
      color: #fff;
    }

    .tab[data-tab="storeInfo"] {
      background-color: #4CAF50;
      /* Green */
    }

    .tab[data-tab="storeInfo"]:hover {
      background-color: #43A047;
    }

    .tab[data-tab="storeInfo"].active {
      background-color: #43A047;
    }

    .tab[data-tab="gmail"] {
      background-color: #D32F2F;
      /* Red */
    }

    .tab[data-tab="gmail"]:hover {
      background-color: #B71C1C;
    }

    .tab[data-tab="gmail"].active {
      background-color: #B71C1C;
    }

    .tab-content {
      display: none;
      padding: 20px;
      background-color: #222;
      border-radius: 0 0 8px 8px;
    }

    .tab-content.active {
      display: block;
    }

    /* Gmail Subtab Styles */
    .gmail-subtabs {
      display: flex;
      margin-bottom: 10px;
    }

    .gmail-subtab {
      padding: 8px 16px;
      cursor: pointer;
      color: #ccc;
      background-color: #D32F2F;
      /* Red */
      border: none;
      border-radius: 5px 5px 0 0;
      margin-right: 5px;
      transition: background-color 0.3s ease, color 0.3s ease;
      font-weight: 500;
    }

    .gmail-subtab:hover {
      background-color: #B71C1C;
      /* Darker Red */
      color: #fff;
    }

    .gmail-subtab.active {
      background-color: #B71C1C;
      /* Darker Red */
      color: #fff;
    }

    .gmail-subtab-content {
      display: none;
      padding: 20px;
      background-color: #333;
      border-radius: 0 0 5px 5px;
    }

    .gmail-subtab-content.active {
      display: block;
    }

    /* Grid Container Styles */
    .grid-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
      gap: 20px;
      margin-top: 20px;
    }

    /* Card Styles */
    .store-info-card,
    .phone-verification-section {
      background-color: #222;
      padding: 25px;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .store-info-card:hover,
    .phone-verification-section:hover {
      transform: translateY(-5px);
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
    }

    .store-info-card h3,
    .phone-verification-section h3 {
      color: #64b5f6;
      text-align: center;
      margin-bottom: 10px;
      font-size: 1.5em;
    }

    /* Info Group Styles */
    .info-group {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
    }

    .info-group label {
      width: 180px;
      text-align: right;
      margin-right: 15px;
      color: #ccc;
      font-weight: 500;
    }

    .info-group span {
      flex: 1;
      padding: 12px;
      border: 1px solid #333;
      background-color: #333;
      color: #fff;
      box-sizing: border-box;
      cursor: pointer;
      border-radius: 5px;
      transition: background-color 0.3s ease;
    }

    .info-group:hover span {
      background-color: #444;
    }

    .info-group input[type="text"] {
      padding: 12px;
      border: 1px solid #333;
      background-color: #333;
      color: #fff;
      box-sizing: border-box;
      width: 100px;
      border-radius: 5px;
    }

    /* Payment Method Styles */
    .payment-method-buttons {
      display: flex;
      gap: 10px;
    }

    .payment-method-buttons button {
      padding: 10px 20px;
      border: none;
      background-color: #444;
      color: #fff;
      cursor: pointer;
      border-radius: 5px;
      transition: background-color 0.3s ease;
    }

    .payment-method-buttons button:hover {
      background-color: #555;
      color: #fff;
    }

    .payment-method-buttons button.active {
      background-color: #64b5f6;
      color: #fff;
    }

    /* Phone Verification Styles */
    .phone-verification-content {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .verification-actions {
      display: flex;
      gap: 10px;
      margin-top: 10px;
      justify-content: center;
    }

    .verification-actions button {
      padding: 8px;
      border: none;
      color: #fff;
      cursor: pointer;
      display: flex;
      align-items: center;
      border-radius: 5px;
      transition: background-color 0.3s ease;
      font-weight: 500;
      width: auto;
      justify-content: center;
      font-size: 1.2em;
    }

    .verification-actions button i {
      margin-right: 0;
    }

    .start-button {
      background-color: #4CAF50;
    }

    .start-button:hover {
      background-color: #43A047;
    }

    .cancel-button {
      background-color: #f44336;
    }

    .cancel-button:hover {
      background-color: #e53935;
    }

    .refresh-button {
      background-color: #2196F3;
      padding: 8px;
    }

    .refresh-button:hover {
      background-color: #1976D2;
    }

    /* Copy Notification Styles */
    .copy-notification {
      position: fixed;
      top: 20px;
      right: 20px;
      background-color: rgba(100, 181, 246, 0.8);
      color: #fff;
      padding: 10px 20px;
      border-radius: 5px;
      z-index: 1000;
      display: none;
    }

    /* Status Message Styles */
    .status-message {
      padding: 5px;
      text-align: center;
      font-weight: bold;
      margin-bottom: 5px;
    }

    .status-message.waiting {
      color: #42a5f5;
    }

    .status-message.success {
      color: #4CAF50;
    }

    .status-message.error {
      color: #f44336;
    }

    /* Time Remaining Styles */
    .time-remaining {
      text-align: center;
      color: #f44336;
      margin-top: 15px;
    }

    /* Country Code Styles */
    .country-code-buttons {
      display: flex;
      gap: 5px;
      justify-content: center;
      margin-bottom: 10px;
    }

    .country-code-buttons button {
      padding: 5px 10px;
      border: none;
      background-color: #444;
      color: #fff;
      cursor: pointer;
      border-radius: 5px;
      transition: background-color 0.3s ease, color 0.3s ease;
      font-size: 0.9em;
    }

    .country-code-buttons button:hover {
      background-color: #555;
      color: #fff;
    }

    .country-code-buttons button.active {
      background-color: #64b5f6;
      color: #fff;
    }

    /* Reduce margin for phone and OTP info groups */
    #phone.info-group,
    #otp.info-group {
      margin-top: 5px;
    }

    /* Card Header Style */
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
    }

    .card-header h3 {
      margin: 0;
    }

    .card-header .refresh-button {
      background-color: transparent;
      color: #64b5f6;
      border: none;
      padding: 0;
      cursor: pointer;
      font-size: 1.2em;
    }

    .card-header .refresh-button:hover {
      color: #42a5f5;
    }

    /* Login/Signup Styles */
    .login-container,
    .signup-container,
    .loading-container {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, #232526, #414345);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 1000;
      padding: 20px;
      box-sizing: border-box;
    }

    .form-container {
      background-color: rgba(30, 30, 30, 0.85);
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
      width: 400px;
      max-width: 100%;
      padding: 30px;
      text-align: left;
      transition: transform 0.3s ease-in-out;
    }

    .form-container:hover {
      transform: translateY(-3px);
      }

      .form-container h2 {
        color: #fff;
        text-align: center;
        margin-bottom: 25px;
        font-size: 1.8em;
        font-weight: 500;
        letter-spacing: 0.6px;
      }

      .form-group {
        margin-bottom: 20px;
      }

      .form-group label {
        display: block;
        color: #eee;
        margin-bottom: 6px;
        font-size: 1em;
        font-weight: 400;
      }

      .form-group input {
        width: 100%;
        padding: 10px 12px;
        border: 1px solid #555;
        background-color: #333;
        color: #fff;
        border-radius: 4px;
        box-sizing: border-box;
        font-size: 1em;
        transition: border-color 0.3s ease;
      }

      .form-group input:focus {
        border-color: #88bfff;
        outline: none;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
      }

      .form-container button {
        width: 100%;
        padding: 12px;
        background-color: #5c6bc0;
        color: #fff;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 1.1em;
        font-weight: 400;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        transition: background-color 0.3s ease, transform 0.2s ease;
      }

      .form-container button:hover {
        background-color: #455a64;
        transform: translateY(-1px);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
      }

      .form-switch {
        text-align: center;
        margin-top: 20px;
        font-size: 0.95em;
        color: #ccc;
      }

      .form-switch a {
        color: #88bfff;
        text-decoration: none;
        transition: color 0.3s ease;
      }

      .form-switch a:hover {
        color: #fff;
      }

      .error-message {
        color: #f44336;
        text-align: center;
        margin-top: 15px;
        font-size: 0.9em;
      }

      /* Loading Container Styles */
      .loading-container .form-container {
        background-color: rgba(30, 30, 30, 0.95);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.7);
      }

      .loading-container h2 {
        color: #fff;
        font-size: 2em;
        margin-bottom: 20px;
      }

      .loading-container i {
        color: #88bfff;
        font-size: 3em;
        display: block;
        text-align: center;
      }

      /* Quick Login Button */
      .quick-login-button {
        width: 100%;
        padding: 12px;
        background-color: #f44336;
        /* Red color */
        color: #fff;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 1.1em;
        font-weight: 400;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        transition: background-color 0.3s ease, transform 0.2s ease;
        margin-top: 10px;
        /* Add some space above the button */
      }

      .quick-login-button:hover {
        background-color: #e53935;
        /* Darker red on hover */
        transform: translateY(-1px);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
      }

      /* Gmail Subtab Styles */
      .gmail-subtabs {
        display: flex;
        margin-bottom: 10px;
      }

      .gmail-subtab {
        padding: 8px 16px;
        cursor: pointer;
        color: #ccc;
        background-color: #D32F2F;
        /* Red */
        border: none;
        border-radius: 5px 5px 0 0;
        margin-right: 5px;
        transition: background-color 0.3s ease, color 0.3s ease;
        font-weight: 500;
      }

      .gmail-subtab:hover {
        background-color: #B71C1C;
        /* Darker Red */
        color: #fff;
      }

      .gmail-subtab.active {
        background-color: #B71C1C;
        /* Darker Red */
        color: #fff;
      }

      .gmail-subtab-content {
        display: none;
        padding: 20px;
        background-color: #333;
        border-radius: 0 0 5px 5px;
      }

      .gmail-subtab-content.active {
        display: block;
      }

      /* Verification Section Styles */
      #verifyGmail .info-group {
        margin-bottom: 10px;
      }

      #verifyGmail .info-group label {
        width: 150px;
        text-align: right;
        margin-right: 10px;
        color: #ccc;
        font-weight: 500;
      }

      #verifyGmail input[type="text"] {
        padding: 8px;
        border: 1px solid #555;
        background-color: #444;
        color: #fff;
        border-radius: 4px;
        width: 200px;
      }

      #verifyGmail .verification-result {
        margin-top: 10px;
        text-align: center;
        font-weight: bold;
        padding: 8px;
        border-radius: 5px;
      }

      #verifyGmail .verification-result.valid {
        color: #fff;
        background-color: #4CAF50;
      }

      #verifyGmail .verification-result.invalid {
        color: #fff;
        background-color: #f44336;
      }

      #verifyGmail button {
        padding: 10px 15px;
        background-color: #5c6bc0;
        color: #fff;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        transition: background-color 0.3s ease;
        margin-top: 10px;
      }

      #verifyGmail button:hover {
        background-color: #455a64;
      }