/* style.css */

    /* General Styles */
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: #181818;
      color: #fff;
      margin: 0;
      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;
      display: flex;
      align-items: center;
      font-weight: 500;
    }

    .api-code-input 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 {
      background-color: #64b5f6;
      color: #fff;
    }

    .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;
    }

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

    .application-subtab {
      padding: 8px 16px;
      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;
      font-weight: 500;
    }

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

    .application-subtab.active {
      background-color: #64b5f6;
      color: #fff;
    }

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

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

    /* Grid Container Styles */
    .grid-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
      gap: 30px;
      /* Increased gap */
      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;
      border: 2px solid #87CEEB;
      /* Light Blue Border */
      margin-bottom: 30px;
      /* Increased margin */
    }

    .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;
    }

    /* New Styles for Input Wrapper and Paste Button */
    .input-wrapper {
      display: flex;
      align-items: center;
      flex: 1;
    }

    .input-wrapper input {
      flex: 1;
      margin-right: 5px;
    }

    .paste-button {
      background-color: #4CAF50;
      color: white;
      border: none;
      padding: 8px 10px;
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.3s;
    }

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

    /* 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;
    }

    .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: 15px;
      margin-top: 20px;
      justify-content: center;
    }

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

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

    .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: 10px;
      justify-content: center;
      margin-bottom: 10px;
    }

    .country-code-buttons button {
      padding: 8px 16px;
      border: none;
      background-color: #444;
      color: #fff;
      cursor: pointer;
      border-radius: 5px;
      transition: background-color 0.3s ease;
    }

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

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

    #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 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);
    }

    /* Enhanced Submit Button Style */
    #applicationSubmitButton {
      width: auto;
      padding: 10px 20px;
      border: none;
      background-color: #4CAF50;
      /* Green */
      color: #fff;
      cursor: pointer;
      border-radius: 5px;
      transition: background-color 0.3s ease, transform 0.2s ease;
      font-weight: 500;
      text-transform: none;
      letter-spacing: 0.5px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
      /* Add shadow */
      margin-top: 10px;
      /* Add some space above the button */
    }

    #applicationSubmitButton:hover {
      background-color: #43A047;
      /* Darker Green */
      transform: translateY(-1px);
      box-shadow: 0 3px 7px rgba(0, 0, 0, 0.4);
      /* Enhance shadow on hover */
    }

    .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;
    }

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

    .application-subtab {
      padding: 8px 16px;
      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;
      font-weight: 500;
    }

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

    .application-subtab.active {
      background-color: #64b5f6;
      color: #fff;
    }

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

    .application-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;
    }

    /* Permission Button Styles */
    .permission-buttons {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: center;
    }

    .permission-button {
      padding: 8px 12px;
      border: none;
      color: #fff;
      cursor: pointer;
      border-radius: 5px;
      transition: background-color 0.3s ease;
      font-weight: 500;
      text-align: center;
      min-width: 80px;
    }

    .permission-button[data-permission="policies"] {
      background-color: #26A69A;
    }

    .permission-button[data-permission="policies"]:hover {
      background-color: #2BBBAD;
    }

    .permission-button[data-permission="product"] {
      background-color: #EC407A;
    }

    .permission-button[data-permission="product"]:hover {
      background-color: #F06292;
    }

    .permission-button[data-permission="navigation"] {
      background-color: #673AB7;
    }

    .permission-button[data-permission="navigation"]:hover {
      background-color: #7E57C2;
    }

    .permission-button[data-permission="theme"] {
      background-color: #FF7043;
    }

    .permission-button[data-permission="theme"]:hover {
      background-color: #FF8A65;
    }