/* XVISING Secure Contact - Externalized Styles */
/* ==========================================================================
       XVISING SECURE CONTACT TERMINAL (CUSTOM HUD)
       ========================================================================== */
    :root {
      --xvc-gold: #ffd700;
      --xvc-cyan: #00fffc;
      --xvc-dark: rgba(8, 10, 17, 0.85);
      --bg-0: #05060a; 
    }

    .xvising-secure-contact {
      background-color: var(--bg-0);
      margin: 0;
      padding: 32px 16px;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      font-family: 'Poppins', sans-serif;
      overflow: hidden;
      max-width: none !important;
      width: 100%;
      position: relative;
    }

    .space-background {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: radial-gradient(circle at center, #11131d 0%, var(--bg-0) 100%);
      z-index: 0;
    }

    .xvc-console-wrapper {
      position: relative;
      width: 100%;
      max-width: 800px;
      margin: 0 auto;
      padding: 40px;
      color: #fff;
      z-index: 10;
      direction: ltr; 
    }

    /* --- Invisible Panel with Glowing Edges --- */
    .xvc-glass-panel {
      position: absolute;
      inset: 0;
      background: transparent; /* شلنا الخلفية الشفافة */
      backdrop-filter: none; /* شلنا تأثير الـ Blur */
      -webkit-backdrop-filter: none;
      border: 1px solid rgba(100, 245, 255, 0.1);
      clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
      z-index: -1;
      overflow: hidden;
      transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .xvc-console-wrapper:hover .xvc-glass-panel {
      border-color: rgba(255, 215, 0, 0.3);
      box-shadow: inset 0 0 40px rgba(255, 215, 0, 0.05);
    }

    /* --- The Aegis Lockdown Mechanism (HUD Corners) --- */
    .xvc-hud-corner {
      position: absolute;
      width: 40px; height: 40px;
      border: 2px solid var(--xvc-cyan);
      opacity: 0;
      transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
      z-index: 5;
      pointer-events: none;
    }
    
    .xvc-hud-corner.tl { top: -2px; left: -2px; border-right: none; border-bottom: none; transform: translate(-60px, -60px) scale(1.5); }
    .xvc-hud-corner.tr { top: -2px; right: -2px; border-left: none; border-bottom: none; transform: translate(60px, -60px) scale(1.5); }
    .xvc-hud-corner.bl { bottom: -2px; left: -2px; border-right: none; border-top: none; transform: translate(-60px, 60px) scale(1.5); }
    .xvc-hud-corner.br { bottom: -2px; right: -2px; border-left: none; border-top: none; transform: translate(60px, 60px) scale(1.5); }

    .xvc-console-wrapper:hover .xvc-hud-corner {
      opacity: 1;
      transform: translate(0, 0) scale(1);
      border-color: var(--xvc-gold);
      box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
    }

    .xvc-hud-corner::before, .xvc-hud-corner::after {
      content: ''; position: absolute; background: var(--xvc-cyan); transition: 0.6s;
    }
    .xvc-hud-corner::before { width: 15px; height: 3px; }
    .xvc-hud-corner::after { width: 3px; height: 15px; }

    .xvc-hud-corner.tl::before, .xvc-hud-corner.tl::after { top: -2px; left: -2px; }
    .xvc-hud-corner.tr::before, .xvc-hud-corner.tr::after { top: -2px; right: -2px; }
    .xvc-hud-corner.bl::before, .xvc-hud-corner.bl::after { bottom: -2px; left: -2px; }
    .xvc-hud-corner.br::before, .xvc-hud-corner.br::after { bottom: -2px; right: -2px; }

    .xvc-console-wrapper:hover .xvc-hud-corner::before,
    .xvc-console-wrapper:hover .xvc-hud-corner::after { background: #fff; box-shadow: 0 0 8px #fff; }

    /* --- Target Acquired Sweep Lines --- */
    .xvc-lock-lines { position: absolute; inset: 0; pointer-events: none; z-index: 11; }
    .xvc-lock-lines::before, .xvc-lock-lines::after {
      content: ''; position: absolute; background: var(--xvc-gold); opacity: 0; 
    }
    .xvc-lock-lines::before { top: 50%; left: 0; width: 100%; height: 1px; transform: scaleX(0); box-shadow: 0 0 10px var(--xvc-gold); }
    .xvc-lock-lines::after { top: 0; left: 50%; width: 1px; height: 100%; transform: scaleY(0); box-shadow: 0 0 10px var(--xvc-gold); }
    
    .xvc-console-wrapper:hover .xvc-lock-lines::before { animation: xvc-sweepX 1.2s ease-out forwards; }
    .xvc-console-wrapper:hover .xvc-lock-lines::after { animation: xvc-sweepY 1.2s ease-out forwards; }

    @keyframes xvc-sweepX { 0% { transform: scaleX(0); opacity: 0; } 20% { opacity: 0.8; } 50% { transform: scaleX(1); opacity: 0; } 100% { transform: scaleX(1); opacity: 0; } }
    @keyframes xvc-sweepY { 0% { transform: scaleY(0); opacity: 0; } 20% { opacity: 0.8; } 50% { transform: scaleY(1); opacity: 0; } 100% { transform: scaleY(1); opacity: 0; } }

    .xvc-scanline {
      position: absolute;
      top: -10%; left: 0; width: 100%; height: 2px;
      background: linear-gradient(90deg, transparent, rgba(100,245,255,0.5), transparent);
      animation: xvc-scan 4s linear infinite;
      pointer-events: none;
    }
    @keyframes xvc-scan { 0% { top: -10%; opacity: 0; } 10%, 90% { opacity: 1; } 100% { top: 110%; opacity: 0; } }

    /* --- Header --- */
    .xvc-console-header { text-align: center; margin-bottom: 40px; }
    .xvc-title { font-family: 'Orbitron', sans-serif; font-size: 24px; font-weight: 800; color: var(--xvc-gold); margin: 0 0 8px; letter-spacing: 2px; }
    .xvc-subtitle { font-size: 13px; color: #a4adc5; text-transform: uppercase; letter-spacing: 1px; }

    /* --- Form Elements --- */
    .xvc-form { display: flex; flex-direction: column; gap: 30px; position: relative; transition: opacity 0.5s ease; }
    .xvc-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
    @media (max-width: 600px) { .xvc-form-row { grid-template-columns: 1fr; } }

    .xvc-input-group { position: relative; width: 100%; }

    .xvc-input-group input, 
    .xvc-input-group textarea,
    .xvc-input-group select {
      width: 100%;
      background: rgba(0,0,0,0.2) !important;
      border: 1px solid rgba(255,255,255,0.1) !important;
      padding: 16px 20px;
      color: #fff !important;
      font-family: 'Poppins', sans-serif;
      font-size: 15px;
      outline: none !important;
      box-shadow: none !important;
      border-radius: 4px;
      transition: all 0.3s ease;
      box-sizing: border-box;
    }
    .xvc-input-group input:focus, 
    .xvc-input-group textarea:focus,
    .xvc-input-group select:focus {
      background: rgba(0,0,0,0.4) !important;
      border-color: rgba(255,255,255,0.1) !important;
      box-shadow: none !important;
      outline: none !important;
      color: #fff !important;
    }
    .xvc-input-group textarea { resize: vertical; min-height: 120px; }
    .xvc-input-group select {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      cursor: pointer;
      height: 54px;
      min-height: 54px;
      padding: 22px 52px 10px 16px;
      line-height: 1.2 !important;
      font-size: 14px !important;
      font-weight: 500;
      letter-spacing: 0.01em;
      text-indent: 0;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      color: rgba(255,255,255,0.82) !important;
    }
    .xvc-input-group select.is-selected,
    .xvc-input-group select:valid {
      color: #eaf2ff !important;
    }
    .xvc-input-group select option {
      color: #f2f4f8;
      background: #0d111a;
      font-size: 14px;
      line-height: 1.2;
    }
    .xvc-input-group select:invalid,
    .xvc-input-group select:not(.is-selected) {
      color: rgba(255,255,255,0.45) !important;
    }
    .xvc-input-group select::-ms-expand {
      display: none;
    }

    .xvc-input-group label {
      position: absolute;
      top: 18px; left: 20px;
      font-family: 'Orbitron', sans-serif;
      font-size: 12px; color: rgba(255,255,255,0.4);
      letter-spacing: 1px; pointer-events: none;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .xvc-input-group input:focus ~ label,
    .xvc-input-group input:not(:placeholder-shown) ~ label,
    .xvc-input-group select:focus ~ label,
    .xvc-input-group select:valid ~ label,
    .xvc-input-group textarea:focus ~ label,
    .xvc-input-group textarea:not(:placeholder-shown) ~ label {
      top: -10px; left: 10px;
      font-size: 10px; color: var(--xvc-cyan);
      background: #0d111a; padding: 0 8px;
      text-shadow: 0 0 8px rgba(100,245,255,0.5);
    }

    .xvc-focus-border {
      position: absolute; bottom: 0; left: 50%; width: 0; height: 2px;
      background: linear-gradient(90deg, var(--xvc-cyan), var(--xvc-gold));
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      transform: translateX(-50%);
    }
    .xvc-input-group input:focus ~ .xvc-focus-border,
    .xvc-input-group select:focus ~ .xvc-focus-border,
    .xvc-input-group textarea:focus ~ .xvc-focus-border { width: 100%; box-shadow: 0 0 15px rgba(100,245,255,0.4); }

    .xvc-hud-tick { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 4px; height: 4px; background: var(--xvc-gold); opacity: 0; transition: 0.3s; pointer-events: none;}
    .xvc-input-group input:focus ~ .xvc-hud-tick,
    .xvc-input-group select:focus ~ .xvc-hud-tick,
    .xvc-input-group select:valid ~ .xvc-hud-tick { opacity: 1; box-shadow: 0 0 10px var(--xvc-gold); }
    .xvc-input-group input.xvc-input-pulse,
    .xvc-input-group textarea.xvc-input-pulse,
    .xvc-input-group select.xvc-input-pulse { text-shadow: 0 0 5px rgba(100, 245, 255, 0.8); }

    .xvc-select-group .xvc-hud-tick {
      right: 36px;
    }
    .xvc-select-caret {
      position: absolute;
      right: 18px;
      top: 50%;
      width: 10px;
      height: 10px;
      margin-top: -6px;
      border-right: 2px solid rgba(100,245,255,0.9);
      border-bottom: 2px solid rgba(100,245,255,0.9);
      transform: rotate(45deg);
      pointer-events: none;
      transition: transform 0.25s ease, border-color 0.25s ease, filter 0.25s ease;
    }
    .xvc-select-group select:focus ~ .xvc-select-caret,
    .xvc-select-group select:valid ~ .xvc-select-caret {
      transform: rotate(225deg);
      border-color: rgba(255,215,0,0.95);
      filter: drop-shadow(0 0 8px rgba(255,215,0,0.45));
    }
    .xvc-field-hint {
      margin: -18px 0 4px;
      padding: 0 2px;
      color: #7f8aa8;
      font-size: 12px;
      line-height: 1.45;
      letter-spacing: 0.04em;
      transition: color 0.25s ease, text-shadow 0.25s ease;
    }
    .xvc-field-hint.is-active {
      color: #d5e8ff;
      text-shadow: 0 0 8px rgba(100,245,255,0.18);
    }

    .xvc-action-row { display: flex; justify-content: flex-end; margin-top: 10px; }
    .xvc-submit-btn {
      position: relative;
      background: transparent !important;
      color: #fff !important;
      border: 1px solid var(--xvc-cyan) !important;
      padding: 18px 40px;
      font-family: 'Orbitron', sans-serif;
      font-size: 14px; font-weight: 800;
      letter-spacing: 2px; cursor: pointer;
      overflow: hidden;
      box-shadow: inset 0 0 10px rgba(100,245,255,0.1) !important;
      transition: all 0.3s ease;
      clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
      outline: none !important;
    }
    .xvc-btn-bg {
      position: absolute; inset: 0; background: rgba(100,245,255,0.1);
      transform: scaleX(0); transform-origin: right; transition: transform 0.4s ease; z-index: 0;
    }
    .xvc-submit-btn:hover .xvc-btn-bg, .xvc-submit-btn:focus .xvc-btn-bg, .xvc-submit-btn:active .xvc-btn-bg { transform: scaleX(1); transform-origin: left; }
    .xvc-submit-btn:hover, .xvc-submit-btn:focus, .xvc-submit-btn:active { 
      background: transparent !important; 
      border-color: var(--xvc-gold) !important; 
      color: var(--xvc-gold) !important; 
      box-shadow: 0 0 20px rgba(255,215,0,0.2), inset 0 0 20px rgba(255,215,0,0.1) !important; 
      text-shadow: 0 0 8px rgba(255,215,0,0.5) !important; 
      outline: none !important;
    }

    .xvc-btn-text, .xvc-btn-glitch { position: relative; z-index: 1; }
    .xvc-btn-glitch { position: absolute; top: 18px; left: 40px; opacity: 0; color: var(--xvc-cyan); }
    .xvc-submit-btn:active .xvc-btn-text { opacity: 0; }
    .xvc-submit-btn:active .xvc-btn-glitch { opacity: 1; animation: xvc-glitch-anim 0.2s linear infinite; }

    .xvc-loading-ring {
      position: absolute; top: 50%; left: 50%; width: 24px; height: 24px;
      transform: translate(-50%, -50%); opacity: 0; pointer-events: none;
    }
    .xvc-loading-ring circle { stroke: var(--xvc-gold); stroke-dasharray: 125; stroke-dashoffset: 125; animation: xvc-ring-spin 1.5s linear infinite; }

    .xvc-submit-btn.is-loading { pointer-events: none; border-color: var(--xvc-gold); color: transparent; text-shadow: none; }
    .xvc-submit-btn.is-loading .xvc-loading-ring { opacity: 1; }
    .xvc-submit-btn.is-loading .xvc-loading-ring circle { stroke-dashoffset: 0; }

    .xvc-turnstile-wrap {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(1px, 1px, 1px, 1px);
      clip-path: inset(50%);
      white-space: nowrap;
    }

    .xvc-success-state {
      position: absolute; inset: 0; display: flex; flex-direction: column;
      align-items: center; justify-content: center; text-align: center;
      opacity: 0; pointer-events: none; transform: scale(0.9);
      transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .xvc-success-state.is-active { opacity: 1; pointer-events: auto; transform: scale(1); }
    .xvc-success-icon { width: 60px; height: 60px; border-radius: 50%; border: 2px solid var(--xvc-cyan); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; box-shadow: 0 0 30px rgba(100,245,255,0.4); animation: xvc-pulse-icon 2s infinite; }
    .xvc-success-icon svg { width: 30px; height: 30px; fill: var(--xvc-cyan); }
    .xvc-success-state h4 { font-family: 'Orbitron', sans-serif; font-size: 22px; color: var(--xvc-gold); margin: 0 0 10px; letter-spacing: 2px; }
    .xvc-success-state p { color: #a4adc5; }

    @keyframes xvc-pulse-icon { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.8); opacity: 0.5; } }
    @keyframes xvc-ring-spin { 0% { transform: rotate(0deg); stroke-dashoffset: 125; } 50% { stroke-dashoffset: 0; } 100% { transform: rotate(360deg); stroke-dashoffset: -125; } }
    @keyframes xvc-glitch-anim { 0% { transform: translate(0) } 20% { transform: translate(-2px, 2px) } 40% { transform: translate(-2px, -2px) } 60% { transform: translate(2px, 2px) } 80% { transform: translate(2px, -2px) } 100% { transform: translate(0) } }