/* ========================================================================
   VIRTUHOST - MAIN STYLESHEET
   Complete CSS extracted from all HTML files and deduplicated
   ======================================================================== */

/* ========================================================================
   CSS VARIABLES & HELPERS
   ======================================================================== */
:root {
  --brand-grad: linear-gradient(135deg, hsl(25 95% 53%) 0%, hsl(35 91% 60%) 100%);
}

/* Brand gradient utilities */
.bg-brand-gradient {
  background: var(--brand-grad);
}

.text-brand-gradient {
  background: var(--brand-grad);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ========================================================================
   SCROLLBAR UTILITIES
   ======================================================================== */

/* Hide scrollbars completely */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* Custom styled scrollbar */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 20px;
}

/* ========================================================================
   ANIMATIONS
   ======================================================================== */

/* Spinner/Loader */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Fade in */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Transition utility classes */
.fade-enter {
  opacity: 0;
  transform: translateY(10px);
}

.fade-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 300ms, transform 300ms;
}

.fade-in {
  animation: fadeIn 0.4s ease-out forwards;
}

/* ========================================================================
   BACKGROUND UTILITIES
   ======================================================================== */

.bg-grid-slate-100 {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='rgb(241 245 249)'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e");
  mask-image: linear-gradient(to bottom, transparent, 10%, black, 90%, transparent);
}

/* ========================================================================
   LOADERS & SPINNERS
   ======================================================================== */

.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid #e2e8f0;
  border-top-color: #0f172a;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.loader {
  border: 2px solid #f3f3f3;
  border-top: 2px solid #cbd5e1;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  animation: spin 1s linear infinite;
}

/* ========================================================================
   TOGGLE SWITCHES
   ======================================================================== */

/* Brand-colored toggle */
.toggle-checkbox:checked {
  right: 0;
  border-color: hsl(25 95% 53%);
}

.toggle-checkbox:checked + .toggle-label {
  background-color: hsl(25 95% 53%);
}

/* Dark toggle variant (for specific pages) */
.toggle-checkbox.dark:checked {
  border-color: #0f172a;
}

.toggle-checkbox.dark:checked + .toggle-label {
  background-color: #0f172a;
}

/* ========================================================================
   MESSAGE BUBBLES
   ======================================================================== */

.msg-bubble-support {
  border-bottom-left-radius: 2px;
}

.msg-bubble-user {
  border-bottom-right-radius: 2px;
}

/* ========================================================================
   CUSTOM CHECKBOXES
   ======================================================================== */

.custom-checkbox {
  appearance: none;
  background-color: #fff;
  margin: 0;
  font: inherit;
  color: currentColor;
  width: 1.15em;
  height: 1.15em;
  border: 1px solid #cbd5e1;
  border-radius: 0.25em;
  display: grid;
  place-content: center;
}

.custom-checkbox::before {
  content: "";
  width: 0.65em;
  height: 0.65em;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em white;
  transform-origin: center;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

.custom-checkbox:checked {
  background-color: #0f172a;
  border-color: #0f172a;
}

.custom-checkbox:checked::before {
  transform: scale(1);
}

/* ========================================================================
   CUSTOM RADIO BUTTONS
   ======================================================================== */

.custom-radio:checked + div {
  border-color: hsl(25 95% 53%);
  background-color: hsl(25 95% 98%);
  box-shadow: 0 0 0 1px hsl(25 95% 53%);
}

.custom-radio:checked + div .radio-indicator {
  border-color: hsl(25 95% 53%);
  background-color: hsl(25 95% 53%);
}

.custom-radio:checked + div .radio-indicator::after {
  opacity: 1;
  transform: scale(1);
}

.radio-indicator::after {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  background: white;
  border-radius: 50%;
  opacity: 0;
  transform: scale(0);
  transition: all 0.2s ease;
}

/* ========================================================================
   ADDON CHECKBOXES
   ======================================================================== */

.addon-checkbox:checked + div {
  border-color: hsl(25 95% 53%);
  background-color: hsl(25 95% 98%);
}

.addon-checkbox:checked + div .check-icon {
  opacity: 1;
  transform: scale(1);
}

/* ========================================================================
   PRICING CARDS
   ======================================================================== */

.popular-card {
  box-shadow: 0 0 0 2px hsl(25 95% 53%), 0 20px 40px -10px rgba(249, 115, 22, 0.15);
}

/* ========================================================================
   CUSTOM SELECT DROPDOWN
   ======================================================================== */

.select-wrapper {
  position: relative;
}

.select-wrapper::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-right: 1.5px solid #64748b;
  border-bottom: 1.5px solid #64748b;
  rotate: 45deg;
  pointer-events: none;
}

/* ========================================================================
   CODE BLOCKS
   ======================================================================== */

.code-block {
  font-family: 'Menlo', 'Monaco', 'Consolas', monospace;
}

/* ========================================================================
   BROWSER FIXES
   ======================================================================== */

/* Input autofill styling */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px white inset !important;
}

/* Submenu Dropdown Styles */
.submenu-dropdown {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease-out, visibility 150ms ease-out;
}
.relative.group:hover .submenu-dropdown,
.submenu-dropdown.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}