/* CSS Variables System */
:root {
  /* Colors - Primary Palette */
  --primary: #007BFF;
  --primary-dark: #0056b3;
  --secondary: #6C757D;
  --secondary-dark: #555;
  --success: #28A745;
  --success-dark: #218838;
  --danger: #DC3545;
  --danger-dark: #a71d2a;
  --warning: #FBBC05;
  --warning-dark: #F2B101;
  --info: #17a2b8;
  --info-dark: #138496;
  
  /* Colors - Neutrals */
  --light: #f8f9fa;
  --dark: #212529;
  --white: #ffffff;
  --black: #000000;
  --gray-100: #f8f9fa;
  --gray-200: #e9ecef;
  --gray-300: #dee2e6;
  --gray-400: #ced4da;
  --gray-500: #adb5bd;
  --gray-600: #6c757d;
  --gray-700: #495057;
  --gray-800: #343a40;
  --gray-900: #212529;
  
  /* WebNav specific colors */
  --webnav-blue: #397AD3;
  --webnav-dark-blue: #163bbf;
  --webnav-button-blue: #1f4ed8;
  --background-primary: #7499c5;
  
  /* Typography */
  --font: Arial, sans-serif;
  --font-size-sm: 0.875rem;
  --font-size: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --line-height: 1.5;
  
  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  
  /* Borders */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-round: 50%;
  
  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
  
  /* Transitions */
  --transition: 0.2s ease;
  --border-radius-lg: 10px;
}

/* Enhanced ADD TERM text box style */
.textfieldlarge {
  border: 3px solid var(--webnav-blue, #397AD3);
  border-radius: 8px;
  font-size: 30px;
  width: 80%;
  padding: 10px;
  box-shadow: 0 0 5px rgba(57, 122, 211, 0.3);
  transition: all 0.2s ease-in-out;
}

.textfieldlarge:focus {
  outline: none;
  border-color: var(--webnav-blue, #397AD3);
  box-shadow: 0 0 10px rgba(57, 122, 211, 0.5);
}

/* Button System */
.body .main-container .app-content button,
.body .main-container .app-content .btn,
.body .main-container .app-content .button {
  display: inline-block;
  padding: 10px 15px;
  background-color: var(--primary);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: var(--font);
  font-size: var(--font-size);
  text-align: center;
  text-decoration: none;
  transition: var(--transition);
  margin: 5px;
  box-shadow: var(--shadow-sm);
}

.body .main-container .app-content button:hover,
.body .main-container .app-content .btn:hover,
.body .main-container .app-content .button:hover {
  background-color: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Navigation buttons */
.body .main-container .app-content .nav-button,
.body .main-container .app-content .buttonbreadcrumbs {
  background-color: var(--webnav-button-blue);
  color: white;
  font-weight: 500;
  min-width: 120px;
}

.body .main-container .app-content .nav-button:hover,
.body .main-container .app-content .buttonbreadcrumbs:hover {
  background-color: var(--webnav-dark-blue);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Action buttons */
.body .main-container .app-content .action-button,
.body .main-container .app-content .buttonenternextlevel {
  background-color: var(--success);
  color: white;
  font-weight: 500;
  min-width: 120px;
}

.body .main-container .app-content .action-button:hover,
.body .main-container .app-content .buttonenternextlevel:hover {
  background-color: var(--success-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Danger buttons */
.body .main-container .app-content .danger-button,
.body .main-container .app-content .exitdeletebutton {
  background-color: var(--danger);
  color: white;
  font-weight: 500;
  min-width: 120px;
}

.body .main-container .app-content .danger-button:hover,
.body .main-container .app-content .exitdeletebutton:hover {
  background-color: var(--danger-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Base Styles */
body {
  font-family: var(--font);
  background-color: var(--background-primary);
  margin: 0;
  padding: 0;
  line-height: var(--line-height);
  color: var(--dark);
}

/* Main container for the entire app */
.main-container {
  width: 100%;
  max-width: 414px; /* iPhone width */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  height: 896px; /* Fixed height based on iPhone 12/13 Pro Max dimensions */
  background: #fff;
  position: relative;
  overflow: hidden;
  border: 12px solid #111;
  border-radius: 50px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.3), inset 0 0 0 2px #c8cacb;
}


/* iPhone elements container */
.iphone-elements {
  width: 100%;
  height: 60px;
  z-index: 900;
  background: transparent;
  position: relative;
}

/* App content container */
.app-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  overflow: hidden;
  position: relative;
}

/* iPhone Dynamic Island */
.dynamic-island {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 35px;
  background-color: #000;
  border-radius: 20px;
  z-index: 901; /* Below the fixed header */
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none; /* Allow clicks to pass through */
}

/* iPhone notch (alternative to dynamic island for older models) */
.iphone-notch {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 160px;
  height: 30px;
  background-color: #111;
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
  z-index: 901; /* Below the fixed header */
  display: none; /* Hidden by default, use dynamic island instead */
  pointer-events: none; /* Allow clicks to pass through */
}

/* iPhone Home Indicator */
.home-indicator {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 134px;
  height: 5px;
  background-color: #000;
  border-radius: 100px;
  z-index: 901;
  pointer-events: none;
}

.outsidebox {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background-color: #7499c5;
  box-sizing: border-box;
  overflow: hidden;
}

.mockup-phone {
  position: relative;
  width: 100%;
  max-width: 414px; /* iPhone width */
  pointer-events: none; /* Allow clicks to pass through to elements below */
  z-index: 900; /* Below the fixed header */
  overflow: hidden;
  background: #fff;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

/* Media query to remove iPhone mockup on actual mobile devices */
@media (max-width: 767px) {
  .main-container {
    width: 100%;
    border: none;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    padding-top: 0 !important; /* Remove top padding */
  }
  
  .dynamic-island,
  .iphone-notch,
  .home-indicator {
    display: none !important;
  }
  
  .status-bar {
    display: none !important;
  }

  .fixed-header {
    top: 0;
    margin-top: 0 !important;
    padding-top: 5px !important;
  }
  
  .scroll {
    margin-top: 60px !important; /* Adjust based on header height */
    padding-top: 0 !important;
  }
  
  .iphone-elements {
    display: none !important; /* Hide all iPhone mockup elements */
  }
  
  /* Ensure app-content starts immediately */
  .app-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

/* Consolidated styles from step pages */
/* Common table styles */
.full-width-table {
  width: 100%;
  border-collapse: collapse;
}

.center {
  margin-left: auto;
  margin-right: auto;
}

.text-center {
  text-align: center;
}

.full-width {
  width: 100%;
}

.valign-bottom {
  vertical-align: bottom;
}

/* Divider styles */
.blue-divider {
  border: none; 
  height: 3px; 
  background-color: #00C;
}

.section-divider {
  border: none;
  height: 2px;
  background-color: #e0e0e0;
  margin: 15px 0;
}

.hr1 {
  border: none;
  height: 2px;
  width: 100%;
  margin: 10px 0;
}

.dark-divider {
  border: none; 
  height: 3px; 
  background-color: #333;
}

/* Form styles */
.action-form, .navigation-form, .reset-form {
  margin: 0;
  padding: 0;
}

/* Container styles */
.responsive-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

/* Step instruction style */
.step-instruction {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  display: block;
  margin: 10px 0;
}

/* PDF viewer styles */
.pdf-viewer {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
}

.pdf-viewer-large {
  height: 500px;
  max-height: 80vh;
}

/* Pronunciation button styles */
.pronounceBtn {
  background-color: transparent;
  border: none;
  cursor: pointer;
  color: #0066cc;
  padding: 5px;
  display: inline-flex;
  align-items: center;
  font-size: 16px;
}

.pronounceBtn:hover {
  color: #004080;
}

.sub {
  background-color: #fff;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
  position: relative; /* Ensure proper positioning context for children */
}

/* Fixed header positioned below iPhone mockup elements */
.fixed-header {
  position: sticky;
  top: 0; /* Stick to the top of app-content */
  left: 0;
  width: 100%;
  height: 60px;
  background: #fff;
  z-index: 1000;
  border-bottom: 1px solid #eaeaea;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  margin: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/* Adjust header on mobile devices */
@media (max-width: 767px) {
  .fixed-header {
    position: fixed;
    top: 0; /* Reset to top for mobile */
    height: 70px; /* Appropriate height for mobile */
    padding: 0 5px; /* Minimal padding */
    padding-top: 0;
  }
}

/* Ensure scrollable content starts below fixed-header */
.scroll {
  flex: 1;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px 15px;
  box-sizing: border-box;
  padding-top: 20px;
  padding-bottom: 20px;
  margin: 0 auto;
  -webkit-overflow-scrolling: touch;
}

/* Adjust scrollable content on mobile devices */
@media (max-width: 767px) {
  .scroll {
    padding: 5px 8px; /* Minimal padding on all sides */
    padding-top: 80px; /* Adjusted for mobile header */
    padding-bottom: 10px; /* Reduced bottom padding since no home indicator */
  }
}

footer {
  padding: 20px 15px 20px;
  text-align: center;
  font-size: 13px;
  color: #666;
  border-top: 1px solid #eaeaea;
  width: 100%;
  margin: 0 auto;
  position: relative; /* Ensure proper positioning */
  left: 0;
  right: 0;
  bottom: 0;
  
  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-medium: 0.3s ease;
}

/* Navigation bar positioning fix - revised to match screenshot */
.nav-bar {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 15px; /* Padding from screenshot */
    margin-top: 0;
    z-index: 2001; /* Same as fixed header + 1 */
}

/* Adjust nav bar on mobile devices */
@media (max-width: 767px) {
    .nav-bar {
        margin-top: 0;
        padding: 0 10px;
    }
}

/* Hamburger button styling */
.hamburger-btn {
    background: transparent !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 5px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    position: relative !important;
    right: 0 !important;
    top: 0 !important;
    z-index: 2002 !important; /* Same as fixed header + 2 */
    box-shadow: none !important;
}

/* Adjust hamburger button on mobile */
@media (max-width: 767px) {
    .hamburger-btn {
        width: 45px !important;
        height: 45px !important;
        margin-left: 5px !important;
    }
}

/* Make the hamburger icon match screenshot exactly */
.hamburger-icon {
    font-size: 24px !important;
    color: #007BFF !important; /* iOS blue */
    line-height: 1 !important;
    text-shadow: none !important;
}

/* Adjust hamburger icon on mobile */
@media (max-width: 767px) {
    .hamburger-icon {
        font-size: 28px !important;
    }
}

/* Add hover effect for better user feedback */
.hamburger-btn:hover .hamburger-icon {
    transform: scale(1.1) !important;
    display: inline-block !important;
    transition: transform 0.3s ease !important;
}

/* Hidden menu state */
.hidden-menu {
    display: none;
}

/* Visible menu state */
.visible-menu {
    display: block;
    position: absolute;
    top: 70px;
    right: 10px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 15px;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    width: 250px;
    max-width: 90vw;
}

/* Mobile menu specific styles */
#mobile-menu {
    width: 250px;
    max-width: 90vw;
}

/* Translation Button - Consistent Style Across All Step Pages */
.translatebutton {
  display: inline-block;
  background-color: #4285F4; /* Google blue */
  color: white;
  font-family: var(--font-family, Arial, sans-serif);
  font-size: 16px;
  font-weight: 500;
  padding: 8px 16px;
  margin: 5px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  text-align: center;
  min-width: 120px;
  max-width: 300px;
  height: auto;
  white-space: nowrap;
  position: relative;
}

.translatebutton:hover {
  background-color: #3367D6; /* Darker blue on hover */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transform: translateY(-1px);
}

.translatebutton:active {
  background-color: #2A56C6; /* Even darker when clicked */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transform: translateY(1px);
}

.translatebutton::before {
  content: '🌐'; /* Globe emoji */
  margin-right: 6px;
  font-size: 14px;
}

.translation-form {
  text-align: center;
  margin: 5px 0;
  display: block;
}

/* Table Cell Alignment Classes */
.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

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

.valign-bottom {
  vertical-align: bottom;
}

.full-width {
  width: 100%;
}

.formatted-text {
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  font-size: larger;
  line-break: anywhere;
}

.styled-divider {
  border: none;
  height: 3px;
  width: 300px;
  background-color: #00C;
  margin: 0 auto;
}

.reset-form {
  margin: 0;
  padding: 0;
}

.step-instruction {
  color: #024b30;
  font-weight: normal;
}

.dark-divider {
  border: none;
  height: 1px;
  background-color: #000000;
  width: 100%;
  margin: 10px 0;
}

.blue-divider {
  border: none;
  height: 1px;
  background-color: #00C;
  width: 100%;
  margin: 10px 0;
}

.full-width-table {
  width: 100%;
  table-layout: fixed;
}

/* Form Styling */
.standard-form {
  margin: 0;
  padding: 0;
  display: inline-block;
}

.navigation-form {
  margin: 0;
  padding: 0;
  display: inline-block;
}

.action-form {
  margin: 0;
  padding: 5px 0;
  display: inline-block;
}

.green-button {
  background-color: green;
  color: white;
  padding: 20px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
}

.translation-button {
  border: none;
  background: transparent;
  font-size: 15px;
  cursor: pointer;
  color: #4285F4;
}

/* Responsive Design Utilities */
.responsive-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
  box-sizing: border-box;
}

/* Card-based Layout */
.content-card {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  padding: 16px;
  margin-bottom: 16px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.content-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

/* Navigation Improvements */
.breadcrumb-nav {
  display: flex;
  flex-wrap: wrap;
  padding: 12px 0;
  margin-bottom: 16px;
  list-style: none;
  background-color: transparent;
}

.breadcrumb-nav li {
  display: inline-flex;
  align-items: center;
}

.breadcrumb-nav li:not(:last-child):after {
  content: '›';
  margin: 0 8px;
  color: var(--secondary-color);
  font-size: 1.2em;
}

/* Improved Input Fields */
input[type="text"], input[type="search"], textarea, select {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 16px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  margin-bottom: 16px;
  box-sizing: border-box;
}

input[type="text"]:focus, input[type="search"]:focus, textarea:focus, select:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
  outline: none;
}

@media (max-width: 768px) {
  /* General Improvements */
  body {
    font-size: 16px;
    line-height: 1.5;
  }
  
  /* Button Improvements */
  button, .btn, .button {
    padding: 12px 16px;
    font-size: 16px;
    width: 100%;
    margin: 8px 0;
  }
  
  /* Navigation Button Improvements */
  .nav-button, .buttonbreadcrumbs {
    padding: 10px 14px;
    margin: 4px;
    font-size: 14px;
  }
  
  /* Layout Improvements */
  .body .main-container .app-content .full-width-mobile {
    width: 100%;
    display: block;
    margin-left: 0;
    margin-right: 0;
  }
  
  .body .main-container .app-content .content-card {
    padding: 12px;
    margin-bottom: 12px;
  }
  
  /* Spacing Improvements */
  .body .main-container .app-content .responsive-container {
    padding: 0 12px;
  }
  
  /* Table Improvements */
  .body .main-container .app-content table,
  .body .main-container .app-content tr,
  .body .main-container .app-content td {
    display: block;
    width: 100%;
  }
  
  .body .main-container .app-content td {
    margin-bottom: 8px;
    padding: 8px 0;
  }
  
  /* Utility Classes */
  .body .main-container .app-content .hide-on-mobile {
    display: none;
  }
  
  .body .main-container .app-content .text-center-mobile {
    text-align: center;
  }
  
  /* Improved Touch Targets */
  a, button, input[type="submit"], input[type="button"] {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Improved Form Elements */
  input[type="text"], input[type="search"], textarea, select {
    font-size: 16px; /* Prevents iOS zoom on focus */
    padding: 12px;
  }
}

/* Button System - Standardized Button Styles */
button, .btn, .button {
  display: inline-block;
  font-family: var(--font-family, Arial, sans-serif);
  font-size: var(--font-size-medium, 16px);
  padding: var(--spacing-small, 8px) var(--spacing-medium, 16px);
  text-align: center;
  text-decoration: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  margin: 8px 4px;
}

button:hover, .btn:hover, .button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* Navigation Buttons */
.nav-button, .buttonbreadcrumbs {
  background-color: #4285F4;
  color: white;
  font-weight: normal;
  border-color: #2a75f3;
}

.nav-button:hover, .buttonbreadcrumbs:hover {
  background-color: #2a75f3;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Alternative Language Navigation Buttons */
.alt-nav-button, .buttonbreadcrumbsaltlanguage, .buttonenternextlevelaltlanguage {
  background-color: #34A853;
  color: white;
  font-weight: normal;
  border-color: #2d9147;
}

.alt-nav-button:hover, .buttonbreadcrumbsaltlanguage:hover, .buttonenternextlevelaltlanguage:hover {
  background-color: #2d9147;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Action Buttons */
.action-button, .buttonenternextlevel {
  background-color: #4285F4;
  color: white;
  font-weight: bold;
  border-color: #2a75f3;
}

.action-button:hover, .buttonenternextlevel:hover {
  background-color: #2a75f3;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Utility Buttons */
.utility-button, .block, .blocksmall {
  background-color: #FBBC05;
  color: black;
  font-weight: normal;
  border-color: #e6ac04;
}

.utility-button:hover, .block:hover, .blocksmall:hover {
  background-color: #e6ac04;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Edit Buttons */
.edit-button, .button-round-edit {
  background-color: #EA4335;
  color: white;
  font-weight: bold;
  border-radius: 50%;
  width: 2em;
  height: 2em;
  padding: 0;
  line-height: 2em;
  text-align: center;
}

.edit-button:hover, .button-round-edit:hover {
  background-color: #d33426;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Text Wrapping for Buttons */
.wrap-text {
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Responsive Video Container */
.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  max-width: 100%;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  margin: 16px 0;
}

/* Modern Navigation Bar */
.modern-nav.button-row {
  display: flex;
  justify-content: space-around;
  margin: 20px 0;
}

/* Remove borders and boxes from icon buttons */
.icon-button {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 5px;
  margin: 0 8px;
}

/* Remove borders and boxes from custom icon images */
.custom-icon-img {
  max-width: 100%;
  height: auto;
  width: 55px; /* Larger artwork to fill more space */
  height: 55px; /* Larger artwork to fill more space */
  border: none;
  box-shadow: none;
  border-radius: 0;
  z-index: 1000;
  object-fit: cover;
}

/* Style for icon links (emoji icons) */
.icon-link {
  font-size: 55px; /* Larger font size to fill more space */
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Search Bar */
.search-container {
  position: relative;
  margin: 16px 0;
}

.search-container input {
  padding-left: 40px;
  background-color: var(--background-light);
}

.search-container:before {
  content: '🔍';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--secondary-color);
  font-size: 16px;
}

/* Image Grid */
.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
  margin: 20px 0;
}

/* Chat Results Styling */
.chat-item {
  background-color: #f8f9fa;
  border-radius: 12px;
  padding: 16px;
  margin: 12px 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-align: left;
}

.chat-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.chat-item a {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.chat-item a:hover {
  color: var(--primary-color-dark);
  text-decoration: underline;
}

.chat-item p {
  margin: 8px 0;
  line-height: 1.5;
}

.image-grid-item {
  overflow: hidden;
  transition: transform 0.3s ease;
}

.image-grid-item:hover {
  transform: scale(1.05);
}

.image-grid-item img {
  width: 100%;
  height: auto;
  display: block;
}

.video-container video,
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Critical Button Styles */
button, .btn, .button {
  display: inline-block;
  font-family: var(--font-family, Arial, sans-serif);
  font-size: var(--font-size-medium, 16px);
  padding: var(--spacing-small, 8px) var(--spacing-medium, 16px);
  text-align: center;
  text-decoration: none;
  border: none;
  border-radius: var(--border-radius, 4px);
  cursor: pointer;
  transition: background-color var(--transition-medium, 0.3s ease), 
              transform var(--transition-fast, 0.2s ease);
}

/* Round Edit Button Styles */
.button-round-edit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #3D8A44;
  color: white;
  font-weight: bold;
  font-size: 16px;
  text-align: center;
  line-height: 1;
  padding: 0;
  border: 2px solid #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
}

.button-round-edit:hover {
  background-color: #2A6A30;
  transform: scale(1.1);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

/* Bottom Action Buttons Styles */
.inline-form {
  display: inline-block;
  margin: 10px;
  vertical-align: top;
}

.button-add-topic, 
.button-import-lexicon {
  display: inline-block;
  min-width: 180px;
  padding: 15px 20px;
  background-color: #3D8A44;
  color: white;
  font-weight: bold;
  font-size: 16px;
  text-align: center;
  border: none;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
  margin: 5px;
  line-height: 1.4;
}

.button-add-topic:hover, 
.button-import-lexicon:hover {
  background-color: #2A6A30;
  transform: translateY(-2px);
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

.button-add-topic:active, 
.button-import-lexicon:active {
  transform: translateY(1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

button:hover, .btn:hover, .button:hover {
  transform: scale(1.05);
}

/* Return to Library Button */
/* Return to Library Button - Updated with more specific selectors */
a.reset-button, .reset-button {
  background-color: var(--primary-color, #007BFF) !important;
  color: var(--text-light, #fff) !important;
  border: none !important;
  border-radius: var(--border-radius-lg, 10px) !important;
  font-size: var(--font-size-medium, 16px) !important;
  padding: var(--spacing-small, 8px) var(--spacing-medium, 16px) !important;
  margin: 10px auto !important;
  cursor: pointer !important;
  transition: background-color var(--transition-medium, 0.3s ease), transform var(--transition-fast, 0.2s ease) !important;
  display: block !important;
  text-align: center !important;
  text-decoration: none !important;
  width: fit-content !important;
  max-width: 200px !important;
}

a.reset-button:hover, .reset-button:hover {
  background-color: var(--primary-color-dark, #0056b3) !important;
  transform: scale(1.05) !important;
}

/* Navigation Buttons */
.nextbutton, .buttonenternextlevel {
  background-color: #2A547E;
  color: #FFFFFF;
  border-width: 1px;
  border-radius: var(--border-radius-lg, 8px);
  font-size: 24px; /* Increased font size */
  font-weight: 500; /* Added font weight for better visibility */
  height: auto;
  max-width: 550px;
  min-width: 280px;
  padding: 12px 16px; /* Increased padding for taller buttons */
  margin: 10px auto; /* Added margin for better spacing */
  text-align: center;
  white-space: normal;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Added subtle shadow */
}

/* Tag Line Button */
.tag-line {
  background-color: var(--webnav-blue, #397AD3);
  color: white;
  border: none;
  border-radius: var(--border-radius-lg, 10px);
  padding: var(--spacing-small, 10px) var(--spacing-medium, 20px);
  font-size: var(--font-size-medium, 1.25em);
  margin: 10px 0;
  cursor: pointer;
}

/* Button Reset */
.button-reset {
  background-color: var(--danger-color, #DC3545);
  color: white;
  border: none;
  border-radius: var(--border-radius, 5px);
  padding: 8px 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.button-reset:hover {
  background-color: var(--danger-color-dark, #a71d2a);
}

/* Logo Image - Matches about.php styling */
.logo-image {
  width: 120px;
  height: auto;
  border-radius: 10px;
  display: block;
}

/* Header logo styling */
.nav-bar .logo-image {
  width: 120px;
  height: auto;
  border-radius: 10px;
  margin: 0;
  object-fit: contain;
}

/* Adjust logo on mobile devices */
@media (max-width: 767px) {
  .nav-bar .logo-image {
    width: 100px;
    margin-right: 10px;
  }
}

/* Control Button */
.control-button {
  padding: 1rem 1.25rem;
  border-radius: 12px;
  font-weight: bold;
  font-size: 1rem;
  cursor: pointer;
  color: white;
  text-align: center;
  text-decoration: none;
  transition: background 0.3s, transform 0.2s;
}

.logout { 
  background: var(--danger-color, #b22222); 
}

.logout:hover { 
  background: var(--danger-color-dark, #911a1a); 
}

/* Alternative language buttons - visually distinct from primary language */
.buttonbreadcrumbsaltlanguage, .buttonaltlanguage {
  display: block !important;
  width: 100% !important;
  max-width: 550px !important;
  min-width: 280px !important;
  margin: 10px auto !important;
  padding: 10px !important;
  background-color: #E8F4F8 !important; /* Very light blue */
  color: #2A547E !important;
  border: 2px solid #ADD8E6 !important; /* Light blue border */
  border-radius: 8px !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  text-align: center !important;
  white-space: normal !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
  font-style: italic !important; /* Additional visual distinction */
}

.buttonbreadcrumbsaltlanguage:hover, .buttonaltlanguage:hover {
  background-color: #D1E8F0 !important;
  border-color: #7FB2D1 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 3px 6px rgba(0,0,0,0.15) !important;
}

/* RTL language styling with specific selectors */
.body .main-container .app-content [lang="ar"] .buttonenternextlevelaltlanguage,
.body .main-container .app-content .buttonenternextlevelaltlanguage[lang="ar"],
.body .main-container .app-content .buttonenternextlevelaltlanguage[dir="rtl"] {
  direction: rtl;
  font-family: var(--font-family-rtl, 'Arial', sans-serif);
}

/* Persian/Farsi styling with specific selectors */
.body .main-container .app-content [lang="fa"] .buttonenternextlevelaltlanguage,
.body .main-container .app-content .buttonenternextlevelaltlanguage[lang="fa"] {
  direction: rtl;
  font-family: var(--font-family-rtl, 'Arial', sans-serif);
}

/* Remove borders from all image containers (legacy support) */
.body .main-container .app-content img,
.body .main-container .app-content img + div,
.body .main-container .app-content div:has(> img),
.body .main-container .app-content a:has(> img),
.body .main-container .app-content form:has(> img),
.body .main-container .app-content .buttonnodeimage,
.body .main-container .app-content input[type="image"],
.body .main-container .app-content *:has(> img) {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Remove borders from parent containers of images */
.body .main-container .app-content img {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Target specific card containers that might have images */
.body .main-container .app-content .content-card:has(img) {
  border: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
}

/* Image styling with specific selectors instead of !important */
.body .main-container .app-content .buttonnodeimage {
  display: block;
  width: 100%;
  max-width: 500px;
  height: auto;
  margin: 0 auto;
  border-radius: 0;
  border: none;
  box-shadow: none;
  object-fit: contain;
}

@media (max-width: 767px) {
  .body .main-container .app-content .buttonnodeimage {
    width: 95%;
    max-width: 95%;
  }
}

/* Fix for mobile portrait mode image alignment */
.body .main-container .app-content input[type="image"].buttonnodeimage {
  display: block;
  margin: 0 auto;
  padding: 0;
  text-align: center;
  border: none;
  box-shadow: none;
}

@media (max-width: 767px) {
  .body .main-container .app-content input[type="image"].buttonnodeimage {
    width: 95%;
    max-width: 95%;
  }
}

/* Ensure forms containing images are centered on all devices without creating borders */
form:has(input[type="image"]) {
  text-align: center !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: none !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Standardize all table cells for consistent spacing */
.full-width-table td {
  padding: 10px !important;
  vertical-align: middle !important;
  text-align: center !important; /* Force center alignment for all cells */
  width: 100% !important; /* Ensure all cells take full width */
}

/* Additional mobile-specific table cell styling */
@media (max-width: 767px) {
  .full-width-table td {
    text-align: center !important;
    padding: 8px 5px !important;
  }
  
  /* Force center alignment for all content in table cells on mobile */
  .full-width-table td * {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }
}

/* Ensure all forms have consistent display properties */
.full-width-table form {
  display: block !important;
  width: 100% !important;
  max-width: 500px !important; /* Consistent maximum width */
  margin: 0 auto !important;
  text-align: center !important;
  padding: 5px 0 !important; /* Add consistent padding */
}

/* Primary language buttons - used for main navigation */
}

.body .main-container .app-content button:hover,
.body .main-container .app-content .btn:hover,
.body .main-container .app-content .button:hover {
  background-color: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.body .main-container .app-content .nav-button,
.body .main-container .app-content .buttonbreadcrumbs {
  background-color: var(--webnav-button-blue);
  color: white;
}

.body .main-container .app-content .nav-button:hover,
.body .main-container .app-content .buttonbreadcrumbs:hover {
  background-color: var(--webnav-dark-blue);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.body .main-container .app-content .block,
.body .main-container .app-content .buttonselect {
  background-color: var(--primary);
  color: white;
  display: inline-block;
  padding: 10px 15px;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: var(--font);
  font-size: var(--font-size);
  text-align: center;
  transition: var(--transition);
  margin: 5px;
  box-shadow: var(--shadow-sm);
}

.body .main-container .app-content .block:hover,
.body .main-container .app-content .buttonselect:hover {
  background-color: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.body .main-container .app-content .blocksmall {
  background-color: var(--primary);
  color: white;
  min-width: 150px;
  font-size: var(--font-size);
  padding: 8px 12px;
  display: inline-block;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: var(--font);
  text-align: center;
  transition: var(--transition);
  margin: 5px;
  box-shadow: var(--shadow-sm);
}

.body .main-container .app-content .green-button,
.body .main-container .app-content .buttonadd {
  background-color: var(--success);
  color: white;
  display: inline-block;
  padding: 10px 15px;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: var(--font);
  font-size: var(--font-size);
  text-align: center;
  transition: var(--transition);
  margin: 5px;
  box-shadow: var(--shadow-sm);
}

.body .main-container .app-content .green-button:hover,
.body .main-container .app-content .buttonadd:hover {
  background-color: var(--success-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Media elements with specific selectors instead of !important */
.body .main-container .app-content audio,
.body .main-container .app-content video {
  display: block;
  width: 100%;
  max-width: 500px;
  margin: 10px auto;
}

/* Text alignment with specific selectors */
.body .main-container .app-content .text-center * {
  text-align: center;
}

/* Inline breadcrumb styles to fix caching issues */
/* Breadcrumb Navigation - Inline to bypass caching */
/* Base breadcrumb button styling */
.buttonbreadcrumbs,
button[type="submit"].buttonbreadcrumbs,
input[type="submit"].buttonbreadcrumbs {
  /* Size and layout */
  display: inline-block !important;
  width: auto !important;
  min-width: 150px !important;
  max-width: none !important;
  height: auto !important;
  
  /* Typography */
  font-size: 16px !important;
  font-weight: 500 !important;
  text-align: center !important;
  white-space: normal !important;
  
  /* Spacing */
  padding: 10px 16px !important;
  margin: 8px auto !important;
  
  /* Visual styling */
  background-color: #4A8DB0 !important; /* Darker blue for better contrast */
  color: #FFFFFF !important; /* White text */
  border: none !important;
  border-radius: 8px !important;
  
  /* Interactive elements */
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

/* Hover state */
.buttonbreadcrumbs:hover,
button[type="submit"].buttonbreadcrumbs:hover,
input[type="submit"].buttonbreadcrumbs:hover {
  background-color: #3A7A9C !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25) !important;
}

/* Active/pressed state */
.buttonbreadcrumbs:active,
button[type="submit"].buttonbreadcrumbs:active,
input[type="submit"].buttonbreadcrumbs:active {
  transform: translateY(0) !important;
  background-color: #2A6A8C !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

/* Focus state for accessibility */
.buttonbreadcrumbs:focus,
button[type="submit"].buttonbreadcrumbs:focus,
input[type="submit"].buttonbreadcrumbs:focus {
  outline: 2px solid #2A6A8C !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 3px rgba(42, 106, 140, 0.5) !important;
}

/* Alternative language breadcrumb styling */
.buttonbreadcrumbsaltlanguage,
button[type="submit"].buttonbreadcrumbsaltlanguage,
input[type="submit"].buttonbreadcrumbsaltlanguage {
  /* Size and layout */
  display: inline-block !important;
  width: auto !important;
  min-width: 150px !important;
  max-width: none !important;
  height: auto !important;
  
  /* Typography */
  font-size: 16px !important;
  font-weight: 500 !important;
  text-align: center !important;
  white-space: normal !important;
  
  /* Spacing */
  padding: 10px 16px !important;
  margin: 8px auto !important;
  
  /* Visual styling */
  background-color: #5AA0C7 !important; /* Medium blue for alt language with better contrast */
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 8px !important;
  
  /* Interactive elements */
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

/* Hover state for alt language */
.buttonbreadcrumbsaltlanguage:hover,
button[type="submit"].buttonbreadcrumbsaltlanguage:hover,
input[type="submit"].buttonbreadcrumbsaltlanguage:hover {
  background-color: #4A90B7 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25) !important;
}

/* Active/pressed state for alt language */
.buttonbreadcrumbsaltlanguage:active,
button[type="submit"].buttonbreadcrumbsaltlanguage:active,
input[type="submit"].buttonbreadcrumbsaltlanguage:active {
  transform: translateY(0) !important;
  background-color: #3A80A7 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

/* Focus state for accessibility */
.buttonbreadcrumbsaltlanguage:focus,
button[type="submit"].buttonbreadcrumbsaltlanguage:focus,
input[type="submit"].buttonbreadcrumbsaltlanguage:focus {
  outline: 2px solid #3A80A7 !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 3px rgba(58, 128, 167, 0.5) !important;
}

/* Container for breadcrumb navigation */
.breadcrumb-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  margin: 8px auto 4px !important;
  width: 100% !important;
  text-align: center !important;
  gap: 2px !important;
}

/* Base breadcrumb button styles - works in any container */
.buttonbreadcrumbs,
.buttonbreadcrumbsaltlanguage,
button.buttonbreadcrumbs,
button.buttonbreadcrumbsaltlanguage {
  margin: 0 auto 1px !important;      /* Reduced vertical margin */
  display: block !important;
  width: 70% !important;             /* Even narrower width */
  max-width: 250px !important;       /* More compact max-width */
  min-width: 120px !important;       /* Smaller min-width */
  font-size: 12px !important;         /* Slightly smaller font */
  font-weight: 400 !important;       /* Lighter font weight */
  text-align: center !important;
  white-space: nowrap !important;    /* Prevent text wrapping */
  padding: 4px 8px !important;        /* More compact padding */
  color: rgba(255, 255, 255, 0.8) !important;  /* Slightly transparent text */
  border-radius: 4px !important;     /* Smaller border radius */
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05) !important;  /* Subtler shadow */
  line-height: 1.2 !important;       /* Tighter line height */
  overflow: hidden;
  text-overflow: ellipsis;          /* Add ellipsis for long text */
  opacity: 0.9;                     /* Slightly transparent */
}

/* Primary breadcrumb button specific styles */
.buttonbreadcrumbs,
button.buttonbreadcrumbs {
  background-color: #6B8CAF !important;  /* Lighter, desaturated blue */
  border: 1px solid #5A7A9A !important;
  margin-top: 1px !important;            /* Minimal space above */
}

/* Alternative language breadcrumb specific styles */
.buttonbreadcrumbsaltlanguage,
button.buttonbreadcrumbsaltlanguage {
  background-color: #8CAFCF !important;  /* Lighter, desaturated blue */
  border: 1px solid #7A9AB8 !important;
  margin-top: 0 !important;
  margin-bottom: 1px !important;        /* Minimal space below */
}

/* Hover states - subtle effect */
.buttonbreadcrumbs:hover,
button.buttonbreadcrumbs:hover {
  background-color: #5A7A9A !important;
  transform: none !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
  opacity: 1;                          /* Slightly more visible on hover */
}

.buttonbreadcrumbsaltlanguage:hover,
button.buttonbreadcrumbsaltlanguage:hover {
  background-color: #7A9AB8 !important;
  transform: none !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
  opacity: 1;                          /* Slightly more visible on hover */
}

/* Active states */
.buttonbreadcrumbs:active,
button.buttonbreadcrumbs:active,
.buttonbreadcrumbsaltlanguage:active,
button.buttonbreadcrumbsaltlanguage:active {
  transform: none !important;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05) !important;
}

/* Return to Library button - normal size */
a.reset-button, .reset-button {
  margin-top: 15px !important;
  position: relative !important;
  z-index: 10 !important;
  display: inline-block !important;
  padding: 8px 15px !important;
  font-size: 16px !important;
  border-radius: 5px !important;
}

/* Media queries for responsive design */
@media (max-width: 576px) {
  .buttonbreadcrumbs,
  button[type="submit"].buttonbreadcrumbs,
  input[type="submit"].buttonbreadcrumbs,
  .buttonbreadcrumbsaltlanguage,
  button[type="submit"].buttonbreadcrumbsaltlanguage,
  input[type="submit"].buttonbreadcrumbsaltlanguage {
    font-size: 14px !important;
    padding: 5px 10px !important;
    min-width: 180px !important;
  }
  
  /* Ensure images are properly centered on small screens without borders */
  .buttonnodeimage,
  input[type="image"].buttonnodeimage {
    margin: 0 auto !important;
    padding: 0 !important;
    max-width: 95% !important;
    width: 95% !important;
    border: none !important;
    box-shadow: none !important;
  }
  
  /* Fix form alignment on mobile */
  form {
    text-align: center !important;
    width: 100% !important;
  }
}

/* ====================================================================== */
/* NEW DEDICATED CLASSES - ISOLATED FROM ALL OTHER STYLES                  */
/* These classes are completely independent and won't be affected by       */
/* or interfere with any other styles in the application                   */
/* ====================================================================== */

/* Completely standalone image button class */
.newimagebutton {
  /* Essential display properties */
  display: block;
  width: 100%;
  max-width: 500px;
  height: auto;
  
  /* Remove all borders and spacing */
  margin: 0 auto;
  padding: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  outline: none;
  background: transparent;
  
  /* Image display properties */
  object-fit: contain;
}

/* Specific override for input[type="image"] to prevent inheritance */
input[type="image"].newimagebutton {
  /* Ensure form functionality */
  cursor: pointer;
  
  /* Remove unwanted styling but preserve functionality */
  background: transparent;
  border: none;
  padding: 0;
  margin: 0 auto;
  
  /* Essential display properties */
  display: block;
  width: 100%;
  max-width: 500px;
  height: auto;
  object-fit: contain;
}

/* Mobile styles for the new image button class */
@media (max-width: 767px) {
  .newimagebutton {
    width: 95%;
    max-width: 95%;
  }
}

/* Special class for stepthree image buttons */
.stepthree-image {
  display: inline-block;
  max-width: 500px;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border: none;
  box-shadow: none;
  background: transparent;
}