.domain-search-container {
   max-width: 900px;
   margin: 0 auto;
   padding: 2rem 1rem;
}
.search-box-wrapper {
   background: #fff;
   border-radius: 12px;
   box-shadow: 0 2px 8px rgba(0,0,0,0.1);
   /*margin-bottom: 2rem;*/
}
.search-header {
   padding: 1rem 1.5rem;
   border-bottom: 1px solid #e8e8e8;
}
.domain-search-form {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   position: relative;
}
.domain-search-form .search-icon {
   color: #888;
   font-size: 1.5rem;
}
.domain-search-form input {
   flex: 1;
   border: none;
   outline: none;
   font-size: 1.1rem;
   padding: 0.5rem;
   color: #333;
}
.domain-search-form .clear-btn {
   background: none;
   border: none;
   color: #888;
   cursor: pointer;
   padding: 0.25rem;
   display: none;
}
.domain-search-form .clear-btn.active {
   display: block;
}
.domain-search-form .search-btn {
   /*background: #4CAF50;*/
   background: transparent;
   color: #888;
   border: none;
   /*padding: 0.75rem 2rem;*/
   padding: 0;
   /*border-radius: 6px;*/
   font-weight: 600;
   cursor: pointer;
   transition: background 0.3s;
}
/*.domain-search-form .search-btn:hover {*/
/*   background: #45a049;*/
/*}*/
.main-result {
   background: #f0f8ff;
   border-radius: 12px;
   padding: 1.5rem;
   margin-bottom: 1.5rem;
   display: flex;
   justify-content: space-between;
   align-items: center;
   border: 2px solid #4CAF50;
}
.main-result.unavailable {
   background: #fff5f5;
   border-color: #ff4444;
}
.main-result .domain-info {
   display: flex;
   align-items: center;
   gap: 1rem;
}
.main-result .status-icon {
   width: 48px;
   height: 48px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.5rem;
}
.main-result .status-icon.available {
   background: #4CAF50;
   color: white;
}
.main-result .status-icon.unavailable {
   background: #ff4444;
   color: white;
}
.main-result .domain-name {
   font-size: 1.5rem;
   font-weight: 600;
   color: #333;
   margin-bottom: 0.25rem;
}
.main-result .status-badge {
   display: inline-block;
   padding: 0.25rem 0.75rem;
   border-radius: 20px;
   font-size: 0.85rem;
   font-weight: 600;
   text-transform: uppercase;
}
.main-result .status-badge.available {
   background: #4CAF50;
   color: white;
}
.main-result .status-badge.unavailable {
   background: #ff4444;
   color: white;
}
.main-result .price-section {
   text-align: right;
}
.main-result .price {
   font-size: 1.75rem;
   font-weight: 700;
   color: #333;
   margin-bottom: 0.25rem;
}
.main-result .price-label {
   font-size: 0.9rem;
   color: #666;
   margin-bottom: 0.75rem;
}
.main-result .add-cart-btn {
   background: #333;
   color: white;
   border: none;
   padding: 0.75rem 2rem;
   border-radius: 6px;
   font-weight: 600;
   cursor: pointer;
   display: flex;
   align-items: center;
   gap: 0.5rem;
   transition: background 0.3s;
}
.main-result .add-cart-btn:hover {
   background: #555;
}
.domain-tabs {
   display: flex;
   gap: 1rem;
   margin-bottom: 1.5rem;
   border-bottom: 2px solid #e8e8e8;
   padding-bottom: 0;
}
.domain-tab {
   padding: 0.75rem 1.5rem;
   background: none;
   border: none;
   border-bottom: 3px solid transparent;
   color: #666;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.3s;
   display: flex;
   align-items: center;
   gap: 0.5rem;
}
.domain-tab:hover {
   color: #333;
}
.domain-tab.active {
   color: #4CAF50;
   border-bottom-color: #4CAF50;
}
.domain-tab .icon {
   font-size: 1.2rem;
}
.suggestions-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 1rem;
}
.suggestions-header h5 {
   font-size: 1.1rem;
   font-weight: 600;
   color: #333;
   margin: 0;
}
.suggestions-header .hide-btn {
   background: none;
   border: none;
   color: #666;
   cursor: pointer;
   font-size: 0.9rem;
   text-decoration: underline;
}
.suggestion-card {
   background: white;
   border: 1px solid #e8e8e8;
   border-radius: 8px;
   padding: 1rem 1.5rem;
   margin-bottom: 0.75rem;
   display: flex;
   justify-content: space-between;
   align-items: center;
   transition: all 0.3s;
}
.suggestion-card:hover {
   box-shadow: 0 2px 8px rgba(0,0,0,0.1);
   border-color: #4CAF50;
}
.suggestion-card:hover.available {
   box-shadow: 0 2px 8px rgba(0,0,0,0.1);
   border-color: #4CAF50;
}
.suggestion-card:hover.unavailable {
   box-shadow: 0 2px 8px rgba(0,0,0,0.1);
   border-color: #ff4444;
}
.suggestion-card .domain-details {
   display: flex;
   align-items: center;
   gap: 1rem;
}
.suggestion-card .tld-icon {
   width: 36px;
   height: 36px;
   border-radius: 6px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 700;
   font-size: 0.9rem;
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   color: white;
}
.suggestion-card .domain-name-wrapper {
   display: flex;
   flex-direction: column;
}
.suggestion-card .domain-name {
   font-size: 1.1rem;
   font-weight: 600;
   color: #333;
}
.suggestion-card .tld-badge {
   display: inline-block;
   padding: 0.2rem 0.5rem;
   background: #e8f5e9;
   color: #4CAF50;
   border-radius: 4px;
   font-size: 0.75rem;
   font-weight: 600;
   margin-top: 0.25rem;
}
.suggestion-card.unavailable .tld-badge {
   background: #ecafaf;
   color: #ff4444;
}
.suggestion-card .price-action {
   display: flex;
   align-items: center;
   gap: 1rem;
}
.suggestion-card .price-info {
   text-align: right;
}
.suggestion-card .price {
   font-size: 1.25rem;
   font-weight: 700;
   color: #333;
}
.suggestion-card .price-label {
   font-size: 0.8rem;
   color: #666;
}
.suggestion-card .add-btn {
   background: white;
   border: 2px solid #333;
   color: #333;
   padding: 0.5rem 1.25rem;
   border-radius: 6px;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.3s;
   display: flex;
   align-items: center;
   gap: 0.5rem;
}
.suggestion-card .add-btn:hover {
   background: #333;
   color: white;
}
.suggestion-card .unavailable-badge {
   color: #999;
   font-weight: 600;
}
.suggestions-loading {
   text-align: center;
   padding: 2rem;
   color: #666;
}
.suggestions-loading .spinner {
   width: 40px;
   height: 40px;
   border: 4px solid #f3f3f3;
   border-top: 4px solid #4CAF50;
   border-radius: 50%;
   animation: spin 1s linear infinite;
   margin: 0 auto 1rem;
}
@keyframes spin {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
}
.empty-state {
   text-align: center;
   padding: 3rem 1rem;
   color: #666;
}
.empty-state .icon {
   font-size: 4rem;
   color: #ccc;
   margin-bottom: 1rem;
}
.empty-state h4 {
   font-size: 1.25rem;
   color: #333;
   margin-bottom: 0.5rem;
}
.empty-state p {
   font-size: 1rem;
   color: #666;
}
@media (max-width: 768px) {
   .main-result {
      flex-direction: column;
      gap: 1rem;
      text-align: center;
   }
   .main-result .price-section {
      text-align: center;
   }
   .suggestion-card {
      flex-direction: column;
      gap: 1rem;
      text-align: center;
   }
   .suggestion-card .price-action {
      flex-direction: column;
      width: 100%;
   }
   .suggestion-card .add-btn {
      width: 100%;
      justify-content: center;
   }
   .domain-tabs {
      overflow-x: auto;
      flex-wrap: nowrap;
   }
}
.cart-indicator {
   position: fixed;
   bottom: 2rem;
   right: 2rem;
   background: #333;
   color: white;
   padding: 1rem 1.5rem;
   border-radius: 50px;
   box-shadow: 0 4px 12px rgba(0,0,0,0.3);
   display: none;
   align-items: center;
   gap: 1rem;
   z-index: 1000;
   cursor: pointer;
   transition: all 0.3s;
}
.cart-indicator.show {
   display: flex;
}
.cart-indicator:hover {
   background: #555;
   transform: translateY(-2px);
}
.cart-indicator .cart-count {
   background: #4CAF50;
   color: white;
   border-radius: 50%;
   width: 24px;
   height: 24px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 700;
   font-size: 0.85rem;
}
.cart-indicator .cart-total {
   font-weight: 700;
   font-size: 1.1rem;
}
.pricing-card {
   border: 2px solid #e5e7eb;
   border-radius: 12px;
   transition: all 0.3s ease;
   height: 100%;
}
.pricing-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 10px 30px rgba(0,0,0,0.15);
   border-color: #3b82f6;
}
.pricing-header {
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   color: white;
   padding: 2rem;
   border-radius: 10px 10px 0 0;
}
.pricing-header.featured {
   background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}
.pricing-price {
   font-size: 2.5rem;
   font-weight: 700;
}
.pricing-currency {
   font-size: 1.5rem;
   vertical-align: super;
}
.pricing-period {
   font-size: 1rem;
   opacity: 0.9;
}
.feature-list {
   list-style: none;
   padding: 0;
}
.feature-list li {
   padding: 0.75rem 0;
   border-bottom: 1px solid #f3f4f6;
}
.feature-list li:last-child {
   border-bottom: none;
}
.feature-list li i {
   color: #10b981;
   margin-right: 0.5rem;
}
.btn-order {
   width: 100%;
   padding: 1rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.5px;
}
.badge-popular {
   position: absolute;
   top: -10px;
   right: 20px;
   background: #f59e0b;
   color: white;
   padding: 0.5rem 1rem;
   border-radius: 20px;
   font-size: 0.875rem;
   font-weight: 600;
}
.config-section {
   background: white;
   border-radius: 8px;
   padding: 2rem;
   margin-bottom: 1.5rem;
   box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.billing-cycle-option {
   border: 2px solid #e5e7eb;
   border-radius: 8px;
   padding: 1rem;
   cursor: pointer;
   transition: all 0.3s ease;
   margin-bottom: 1rem;
}
.billing-cycle-option:hover {
   border-color: #3b82f6;
}
.billing-cycle-option.active {
   border-color: #3b82f6;
   background: #eff6ff;
}
.billing-cycle-option input[type="radio"] {
   margin-right: 0.75rem;
}
.domain-option-card {
   border: 2px solid #e5e7eb;
   border-radius: 8px;
   padding: 1.5rem;
   cursor: pointer;
   transition: all 0.3s ease;
   text-align: center;
}
.domain-option-card:hover {
   border-color: #3b82f6;
   transform: translateY(-2px);
}
.domain-option-card.active {
   border-color: #3b82f6;
   background: #eff6ff;
}
.domain-option-card i {
   font-size: 3rem;
   color: #3b82f6;
   margin-bottom: 1rem;
}
.order-summary {
   background: #f9fafb;
   border-radius: 8px;
   padding: 1.5rem;
   position: sticky;
   top: 100px;
}
.summary-item {
   display: flex;
   justify-content: space-between;
   padding: 0.75rem 0;
   border-bottom: 1px solid #e5e7eb;
}
.summary-total {
   font-size: 1.5rem;
   font-weight: 700;
   color: #1e40af;
}
.checkout-section {
   background: white;
   border-radius: 8px;
   padding: 2rem;
   margin-bottom: 1.5rem;
   box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.payment-method-card {
   border: 2px solid #e5e7eb;
   border-radius: 8px;
   padding: 1.5rem;
   cursor: pointer;
   transition: all 0.3s ease;
   margin-bottom: 1rem;
}
.payment-method-card:hover {
   border-color: #3b82f6;
}
.payment-method-card.active {
   border-color: #3b82f6;
   background: #eff6ff;
}
.payment-method-card img {
   height: 30px;
   object-fit: contain;
}
.order-summary-card {
   background: #f9fafb;
   border-radius: 8px;
   padding: 1.5rem;
   position: sticky;
   top: 100px;
}
.invoice-container {
   background: white;
   border-radius: 8px;
   padding: 3rem;
   box-shadow: 0 2px 8px rgba(0,0,0,0.1);
   max-width: 900px;
   margin: 0 auto;
}
.invoice-header {
   border-bottom: 2px solid #e5e7eb;
   padding-bottom: 2rem;
   margin-bottom: 2rem;
}
.invoice-status {
   padding: 0.5rem 1rem;
   border-radius: 20px;
   font-weight: 600;
   display: inline-block;
}
.status-paid {
   background: #d1fae5;
   color: #065f46;
}
.status-unpaid {
   background: #fef3c7;
   color: #92400e;
}
.status-cancelled {
   background: #fee2e2;
   color: #991b1b;
}
.invoice-table {
   width: 100%;
   margin-bottom: 2rem;
}
.invoice-table th {
   background: #f9fafb;
   padding: 1rem;
   text-align: left;
   font-weight: 600;
}
.invoice-table td {
   padding: 1rem;
   border-bottom: 1px solid #e5e7eb;
}
.invoice-total {
   background: #f9fafb;
   padding: 1.5rem;
   border-radius: 8px;
   margin-bottom: 2rem;
}
.total-row {
   display: flex;
   justify-content: space-between;
   margin-bottom: 0.5rem;
}
.total-row.grand-total {
   font-size: 1.5rem;
   font-weight: 700;
   color: #1e40af;
   border-top: 2px solid #e5e7eb;
   padding-top: 1rem;
   margin-top: 1rem;
}
@media print {
   .no-print {
      display: none !important;
   }
   .invoice-container {
      box-shadow: none;
   }
}