/* Base styles */
body {
   font-family: 'Arial', sans-serif;
   background-color: #f0f4f8;
   color: #2d3748;
   line-height: 1.6;
}

.page-wrapper {
   max-width: 1400px;
   margin: 0 auto;
   padding: 1rem;
}

/* Header */
.header {
   background-color: #fff;
   border-bottom: 1px solid #e2e8f0;
   padding: 1rem;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
   position: sticky;
   top: 0;
   z-index: 1000;
}

.nav-wrapper {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.burger-menu {
   display: none;
   background: none;
   border: none;
   cursor: pointer;
   font-size: 1.5rem;
}

.burger-menu i {
   color: #4a5568;
}

/* Navigation */
.nav {
   display: flex;
   gap: 1rem;
}

.nav-link {
   padding: 0.5rem 1rem;
   border-radius: 0.5rem;
   transition: all 0.2s;
   color: #4a5568;
   text-decoration: none;
}

.nav-link:hover {
   background-color: #f7fafc;
}

.nav-link.active {
   background-color: #ebf8ff;
   color: #4299e1;
}

/* Mobile styles */
@media (max-width: 768px) {
   .burger-menu {
       display: block;
   }

   .nav {
       display: none;
       flex-direction: column;
       background-color: #fff;
       position: absolute;
       top: 100%;
       left: 0;
       width: 100%;
       box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
       z-index: 1000;
   }

   .nav-link {
       padding: 1rem;
   }

   .nav.nav-open {
       display: flex;
   }
}

/* Hero section */
.hero-section {
   position: relative;
   background-image: url('hero.jpg'), linear-gradient(135deg, #4299e1, #667eea);
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
   color: white;
   padding: 1.5rem 1rem;
   text-align: center;
   margin-bottom: 1rem;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   height: 150px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   overflow: hidden;
}

.hero-section::before {
   content: '';
   position: absolute;
   inset: 0;
   background: rgba(0, 0, 0, 0.5);
   z-index: 0;
}

.hero-section h1,
.hero-section p {
   position: relative;
   z-index: 1;
}

.hero-section h1 {
   font-size: 1.75rem;
   margin-bottom: 0.5rem;
   font-weight: 700;
}

.hero-section p {
   font-size: 1rem;
   max-width: 800px;
   margin: 0 auto;
   opacity: 0.9;
}

/* Mobile-specific hero section adjustments */
@media (max-width: 768px) {
   .hero-section {
      padding: 2.5rem 1rem; /* More padding on mobile */
      min-height: 180px; /* Use min-height instead */
      overflow: visible; /* Change from hidden to visible */
   }
   
   .hero-section h1 {
      font-size: 1.5rem; /* Slightly smaller font on mobile */
      line-height: 1.3;
      margin-bottom: 0.75rem;
   }
   
   .hero-section p {
      font-size: 0.9rem;
      line-height: 1.4;
   }
}

/* Steps layout */
.steps-row {
   display: flex;
   align-items: stretch;
   gap: 2rem;
   margin: 1rem 0;
}

.step-container {
   flex: 1;
   min-width: 300px;
   display: flex;
   flex-direction: column;
}

/* Step box styles */
.step-box {
   background: white;
   border-radius: 0.75rem;
   padding: 1.5rem;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
   border: 2px solid #e2e8f0;
   /* The lines below were removed in step3.css so they won't apply to Step 3 */
   height: 550px;
   overflow: auto;
   display: flex;
   flex-direction: column;
}

.step-header {
   display: flex;
   align-items: center;
   margin-bottom: 1rem;
   padding-bottom: 1rem;
   border-bottom: 2px solid #f0f4f8;
}

.step-number-indicator {
   background: #4299e1;
   color: white;
   width: 2rem;
   height: 2rem;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: bold;
   margin-right: 0.75rem;
}

.step-title {
   font-size: 1.25rem;
   font-weight: 600;
   color: #2d3748;
}

.step-icon {
   color: #4299e1;
   margin-right: 0.5rem;
}

/* Step arrow styles */
.step-arrow-container {
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 1rem;
   margin: auto 0;
   color: #4299e1;
   flex: 0 0 auto;
}

.step-arrow {
   font-size: 2rem;
   animation: bounceX 2s infinite;
}

@keyframes bounceX {
   0%, 100% { transform: translateX(-5px); }
   50% { transform: translateX(5px); }
}

/* Form elements */
.input-group {
   margin-bottom: 1rem;
}

.input-label {
   display: block;
   font-size: 1rem;
   font-weight: 500;
   margin-bottom: 0.5rem;
   color: #4a5568;
}

.select-wrapper {
   position: relative;
}

select {
   width: 100%;
   padding: 0.75rem 1rem;
   border: 2px solid #e2e8f0;
   border-radius: 0.5rem;
   font-size: 1rem;
   background: white;
   transition: all 0.2s;
   appearance: none;
}

select:focus {
   border-color: #4299e1;
   outline: none;
   box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.2);
}

/* Word textbox styles */
.word-textbox {
   width: 100%;
   height: 360px;
   padding: 0.75rem;
   border: 2px solid #e2e8f0;
   border-radius: 0.5rem;
   font-size: 0.9rem;
   resize: none;
   white-space: pre;
   overflow-y: auto;
   background: white;
   font-family: monospace;
   line-height: 1.5;
   margin-top: 1rem;
}

.word-textbox:focus {
   border-color: #4299e1;
   outline: none;
   box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.2);
}

/* TLD container styles */
.tld-container {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
   margin-bottom: 1rem;
   padding: 0.75rem;
   background: #f8fafc;
   border-radius: 0.5rem;
   max-height: 250px;
   overflow-y: auto;
   position: relative;
   scrollbar-gutter: stable;
}

.tld-tag {
   display: inline-flex;
   align-items: center;
   background: #ebf5ff;
   color: #2b6cb0;
   padding: 0.5rem 1rem;
   border-radius: 2rem;
   font-size: 0.9rem;
   border: 1px solid #bde0fe;
   cursor: pointer;
   transition: all 0.2s;
}

.tld-tag:hover {
   background: #bde0fe;
   transform: translateY(-1px);
}

.tld-tag.active {
   background: #2b6cb0;
   color: white;
   border-color: #2b6cb0;
}

.tld-search {
   width: 100%;
   padding: 0.75rem;
   border: 2px solid #e2e8f0;
   border-radius: 0.5rem;
   margin-bottom: 1rem;
   font-size: 0.9rem;
}

.tld-search:focus {
   border-color: #4299e1;
   outline: none;
   box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.2);
}

.domain-results-container {
   display: flex;
   flex-direction: column;
   height: calc(100vh - 200px);
   min-height: 400px;
   margin-bottom: 24px;
}

/* Domain results grid */
.domain-results-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
   gap: 1rem;
   padding: 0.5rem;
   padding-bottom: 200px;
}

/* Domain card styles */
.domain-card {
   background: white;
   border: 1px solid #e2e8f0;
   border-radius: 0.5rem;
   padding: 0.75rem 1rem;
   display: flex;
   justify-content: space-between;
   align-items: center;
   transition: all 0.2s;
}

.domain-card:hover {
   transform: translateY(-1px);
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
   border-color: #cbd5e1;
}

.domain-card .domain-name {
   font-size: 1rem;
   font-weight: 500;
   color: #2d3748;
}

.domain-card .domain-actions {
   display: flex;
   gap: 0.5rem;
}

/* Results scroll area */
.results-scroll-area {
   flex: 1;
   overflow-y: scroll;
   padding-right: 16px;
   overscroll-behavior: contain;
   height: 100%;
}

.results-scroll-area::-webkit-scrollbar {
   width: 12px;
}

.results-scroll-area::-webkit-scrollbar-track {
   background: #f1f5f9;
   border-radius: 6px;
}

.results-scroll-area::-webkit-scrollbar-thumb {
   background: #94a3b8;
   border-radius: 6px;
   border: 3px solid #f1f5f9;
   min-height: 100px;
   position: fixed;
}

.results-scroll-area {
   scrollbar-width: thin;
   scrollbar-color: #94a3b8 #f1f5f9;
}

/* Firefox */
.results-scroll-area {
   scrollbar-width: auto;
   scrollbar-color: #94a3b8 #f1f5f9;
}

/* Back button styles */
.back-button {
   font-size: 0.875rem;
   color: #4a5568;
   padding: 0.5rem 0.75rem;
   border-radius: 0.375rem;
   background: transparent;
   border: 1px solid #e2e8f0;
   transition: all 0.2s;
   display: inline-flex;
   align-items: center;
}

.back-button:hover {
   background: #f7fafc;
   color: #2d3748;
   border-color: #cbd5e1;
}

/* Scratchbox styles */
.scratchbox-wrapper {
   position: fixed;
   right: 0;
   top: 50%;
   transform: translateY(-50%);
   width: 350px;
   background: white;
   border-radius: 0.75rem 0 0 0.75rem;
   box-shadow: -2px 0 6px rgba(0, 0, 0, 0.1);
   border: 1px solid #e2e8f0;
   border-right: none;
   transition: all 0.3s ease;
   z-index: 1000;
}

.scratchbox-wrapper.collapsed {
  width: 60px; /* slightly wider than default 50px */
  border-radius: 0.75rem 0 0 0.75rem; /* rounded left corners */
  overflow: hidden;
  cursor: pointer; /* let user know it's clickable anywhere */
  background-color: #2b6cb0;
  border: none;
}

.scratchbox-wrapper.collapsed .scratchbox-content {
   display: none;
}

/* The header in collapsed mode: rotate text vertically and style nicely */
.scratchbox-wrapper.collapsed .scratchbox-header {
  display: flex;
  flex-direction: column;          /* icon above text */
  align-items: center;
  justify-content: center;
  gap: 0.5rem;                     /* spacing between icon and text */
  padding: 1rem 0.25rem;           /* some vertical/horizontal padding */
  background-color: #2b6cb0;       /* or your preferred color */
  color: #fff;
  writing-mode: vertical-rl;       /* vertical text flow */
  transform: rotate(180deg);       /* so text reads top-to-bottom */
  border-radius: 0.75rem 0 0 0.75rem;
  border-bottom: none;
  text-align: center;
}

/* Tweak icon size in collapsed mode if you like */
.scratchbox-wrapper.collapsed .scratchbox-header i {
  font-size: 1.2rem; /* a bit bigger */
}

/* Tweak text style in collapsed mode */
.scratchbox-wrapper.collapsed .scratchbox-header span {
  font-size: 0.875rem;
  font-weight: 600;
}

.scratchbox-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 1rem;
   border-bottom: 1px solid #e2e8f0;
   background: #f8fafc;
   border-radius: 0.75rem 0 0 0;
}

.collapsed .scratchbox-header {
   writing-mode: vertical-rl;
   transform: rotate(180deg);
   text-align: center;
   padding: 1rem 0;
   justify-content: center;
}

.scratchbox-toggle {
   cursor: pointer;
   padding: 0.5rem;
   color: #4a5568;
}

.scratchbox-content {
   padding: 1rem;
   max-height: 60vh;
   overflow-y: auto;
}

/* Empty state styles */
.empty-state {
   text-align: center;
   padding: 2rem 1rem;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   min-height: 200px;
}

/* Domain item styles */
.domain-item {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 0.75rem;
   border-bottom: 1px solid #f0f4f8;
   transition: all 0.2s;
   border-left: 3px solid transparent;
}

.domain-item:hover {
   background: #f7fafc;
}

.domain-info {
   display: flex;
   align-items: center;
   gap: 0.5rem;
}

/* Domain actions container */
.domain-actions {
   display: flex;
   align-items: center;
   gap: 0.5rem;
}

/* Register button styling */
.action-button.register {
   background: #ebf8ff;
   color: #2b6cb0;
   padding: 0.4rem 0.6rem;
   border-radius: 0.25rem;
   transition: all 0.2s;
}

.action-button.register:hover {
   background: #bee3f8;
   transform: translateY(-1px);
}

/* Cart icon styling */
.action-button.register i {
   font-size: 0.9rem;
}

/* Highlight available domains with a green left border */
.domain-item .availability-badge.available {
   background: #c6f6d5;
   color: #2f855a;
   font-weight: 600;
}

/* Add green left border to available domains */
.domain-item:has(.availability-badge.available) {
   border-left: 3px solid #48bb78;
}

.domain-textarea {
   width: 100%;
   height: 100px;
   margin: 1rem 0;
   padding: 0.75rem;
   border: 1px solid #e2e8f0;
   border-radius: 0.375rem;
   font-size: 0.875rem;
   resize: none;
}

.domain-textarea:focus {
   border-color: #4299e1;
   outline: none;
   box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.2);
}

/* Action buttons */
.action-button {
   padding: 0.5rem;
   border-radius: 0.375rem;
   border: none;
   background: transparent;
   color: #4a5568;
   cursor: pointer;
   transition: all 0.2s;
   font-size: 0.875rem;
   display: inline-flex;
   align-items: center;
   gap: 0.25rem;
}

.action-button:hover {
   background: #f7fafc;
   color: #2b6cb0;
}

.action-button.add {
   background: #ebf8ff;
   color: #2b6cb0;
}

.action-button.add:hover {
   background: #bee3f8;
}

.action-button.check {
   background: #f0fff4;
   color: #2f855a;
}

.action-button.check:hover {
   background: #c6f6d5;
}

.action-button.clear {
   background: #fff5f5;
   color: #c53030;
}

.action-button.clear:hover {
   background: #fed7d7;
}

.action-button:disabled {
   opacity: 0.5;
   cursor: not-allowed;
}

/* Availability badge */
.availability-badge {
   font-size: 0.75rem;
   padding: 0.25rem 0.5rem;
   border-radius: 1rem;
   font-weight: 500;
}

.availability-badge.available {
   background: #c6f6d5;
   color: #2f855a;
}

.availability-badge.taken {
   background: #fed7d7;
   color: #c53030;
}

/* Scratchbox actions container */
.scratchbox-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
   margin-top: 1rem;
}

.scratchbox-actions .action-button {
   flex: 1;
   justify-content: center;
   min-width: 100px;
   padding: 0.5rem 1rem;
}

/* Loading state */
.loading-state {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 2rem;
   color: #4a5568;
}

/* Notification styles */
.notification {
   position: fixed;
   bottom: 20px;
   left: 50%;
   transform: translateX(-50%);
   background-color: #4caf50;
   color: white;
   padding: 10px 20px;
   border-radius: 5px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
   z-index: 1001;
   opacity: 1;
   transition: opacity 0.5s ease-out;
}

.notification.fade-out {
   opacity: 0;
}

/* Loading indicator */
.tld-container .sticky {
   position: sticky;
   bottom: 0;
   left: 0;
   right: 0;
   background: linear-gradient(to top, #ffffff 0%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0) 100%);
   padding: 1rem;
   margin: 0;
   z-index: 10;
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
   text-align: center;
}

/* Generate button */
.generate-button {
   width: 100%;
   margin-top: 1rem;
   padding: 0.75rem;
   background: #48bb78;
   color: white;
   border: none;
   border-radius: 0.5rem;
   font-weight: 600;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 0.5rem;
   transition: all 0.2s;
}

.generate-button:hover {
   background: #38a169;
   transform: translateY(-1px);
}

/* Search input */
.search-input {
   width: 100%;
   padding: 0.75rem;
   border: 1px solid #e2e8f0;
   border-radius: 0.5rem;
   font-size: 0.875rem;
   transition: all 0.2s;
}

.search-input:focus {
   border-color: #4299e1;
   outline: none;
   box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.2);
}

/* Utility classes */
.hidden {
   display: none !important;
}

/* Responsive styles */
@media (max-width: 1024px) {
   .steps-row {
       flex-direction: column;
       gap: 0.5rem;
   }

   .step-container {
       width: 100%;
   }
   
   .step-arrow-container {
       transform: rotate(90deg);
       padding: 0.5rem;
       margin: 0.5rem 0;
   }
   
   .step-box {
       height: auto;
       min-height: 400px;
   }

   .domain-results-grid {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
       gap: 1rem;
       padding: 0.5rem 0.5rem 400px 0.5rem;
       margin-bottom: 24px;
   }

   .domain-card {
       margin: 0.5rem 0;
   }
}