/* ===========================================================
   VPS GAMER CONFIGURATOR - Estilos isolados (prefixo vps-cfg-)
   =========================================================== */

.vps-cfg-section {
   --vps-cfg-primary: #0d3b66;
   --vps-cfg-primary-light: #e8f1fb;
   --vps-cfg-border: #e2e8f0;
   --vps-cfg-text-muted: #64748b;
   --vps-cfg-radius: 12px;
}

/* ---------- Hero title moderno ---------- */
.vps-cfg-kicker {
   display: inline-flex !important;
   align-items: center !important;
   gap: 6px !important;
   padding: 6px 14px !important;
   border-radius: 20px !important;
   background: var(--vps-cfg-primary-light) !important;
   color: var(--vps-cfg-primary) !important;
   font-size: 0.8rem !important;
   font-weight: 700 !important;
   letter-spacing: 0.3px !important;
   text-transform: uppercase !important;
   margin-bottom: 1rem !important;
}

.vps-cfg-hero-title {
   font-size: clamp(1.9rem, 4vw, 2.8rem);
   font-weight: 800;
   line-height: 1.2;
   letter-spacing: -0.5px;
   margin-bottom: 1rem;
}

.vps-cfg-hero-highlight {
   background: linear-gradient(135deg, var(--vps-cfg-primary), #3b82f6) !important;
   -webkit-background-clip: text !important;
   background-clip: text !important;
   color: transparent !important;
}

/* ---------- Card wrapper ---------- */
.vps-cfg-card {
   background: #fff;
   border: 1px solid var(--vps-cfg-border);
   border-radius: var(--vps-cfg-radius);
   padding: 1.75rem;
}

.vps-cfg-card-head {
   display: flex;
   align-items: flex-start;
   gap: 14px;
   margin-bottom: 1.5rem;
}

.vps-cfg-card-icon {
   width: 44px;
   height: 44px;
   min-width: 44px;
   border-radius: 10px;
   background: var(--vps-cfg-primary-light);
   color: var(--vps-cfg-primary);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.2rem;
}

.vps-cfg-card-title {
   font-size: 1.1rem;
   font-weight: 700;
   display: block;
}

.vps-cfg-card-subtitle {
   margin: 2px 0 0;
   font-size: 0.9rem;
   color: var(--vps-cfg-text-muted);
}

/* ---------- Datacenter selector ---------- */
.vps-cfg-dc-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
   gap: 12px;
}

.vps-cfg-dc-option {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 14px 16px;
   border: 2px solid var(--vps-cfg-border);
   border-radius: var(--vps-cfg-radius);
   background: #fff;
   cursor: pointer;
   text-align: left;
   transition: border-color .15s ease, background .15s ease;
}

.vps-cfg-dc-option img {
   width: 30px;
   height: 30px;
   border-radius: 6px;
   object-fit: cover;
}

.vps-cfg-dc-option:hover {
   border-color: var(--vps-cfg-primary);
}

.vps-cfg-dc-option.is-active {
   border-color: var(--vps-cfg-primary);
   background: var(--vps-cfg-primary-light);
}

.vps-cfg-dc-info {
   display: flex;
   flex-direction: column;
   line-height: 1.2;
}

.vps-cfg-dc-name {
   font-weight: 700;
   font-size: 0.95rem;
}

.vps-cfg-dc-city {
   font-size: 0.8rem;
   color: var(--vps-cfg-text-muted);
}

/* ---------- Plans list ---------- */
.vps-cfg-plans {
   display: flex;
   flex-direction: column;
   gap: 12px;
}

.vps-cfg-plan {
   position: relative;
   display: flex;
   align-items: center;
   gap: 16px;
   padding: 16px 18px;
   border: 2px solid var(--vps-cfg-border);
   border-radius: var(--vps-cfg-radius);
   cursor: pointer;
   transition: border-color .15s ease, background .15s ease;
}

.vps-cfg-plan:hover {
   border-color: var(--vps-cfg-primary);
}

.vps-cfg-plan.is-active {
   border-color: var(--vps-cfg-primary);
   background: var(--vps-cfg-primary-light);
}

.vps-cfg-plan input[type="radio"] {
   position: absolute;
   opacity: 0;
   pointer-events: none;
}

.vps-cfg-plan-radio {
   width: 20px;
   height: 20px;
   min-width: 20px;
   border-radius: 50%;
   border: 2px solid #cbd5e1;
   position: relative;
   flex: none;
}

.vps-cfg-plan.is-active .vps-cfg-plan-radio {
   border-color: var(--vps-cfg-primary);
}

.vps-cfg-plan.is-active .vps-cfg-plan-radio::after {
   content: "";
   position: absolute;
   inset: 3px;
   border-radius: 50%;
   background: var(--vps-cfg-primary);
}

.vps-cfg-plan-main {
   flex: 1;
   display: flex;
   flex-direction: column;
   gap: 4px;
   min-width: 0;
}

.vps-cfg-plan-name {
   font-weight: 700;
   font-size: 1rem;
}

.vps-cfg-plan-desc {
   font-size: 0.85rem;
   color: var(--vps-cfg-text-muted);
}

.vps-cfg-plan-specs {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   margin-top: 6px;
   font-size: 0.82rem;
   color: var(--vps-cfg-text-muted);
}

.vps-cfg-plan-specs span {
   display: inline-flex;
   align-items: center;
   gap: 5px;
}

.vps-cfg-plan-price {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
   text-align: right;
   flex: none;
   min-width: 130px;
}

.vps-cfg-plan-off-badge {
   font-size: 0.7rem;
   font-weight: 700;
   color: #16a34a;
   background: #dcfce7;
   padding: 2px 8px;
   border-radius: 20px;
   margin-bottom: 4px;
}

.vps-cfg-plan-old {
   font-size: 0.8rem;
   color: var(--vps-cfg-text-muted);
   text-decoration: line-through;
}

.vps-cfg-plan-new {
   font-size: 1.15rem;
   font-weight: 800;
   color: var(--vps-cfg-primary);
}

.vps-cfg-plan-new small {
   font-size: 0.7rem;
   font-weight: 500;
   color: var(--vps-cfg-text-muted);
}

.vps-cfg-empty {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 24px;
   border: 2px dashed var(--vps-cfg-border);
   border-radius: var(--vps-cfg-radius);
   color: var(--vps-cfg-text-muted);
   font-size: 0.95rem;
}

.vps-cfg-empty i {
   font-size: 1.3rem;
   color: var(--vps-cfg-primary);
}

/* ---------- Sidebar Summary ---------- */
.vps-cfg-summary {
   position: sticky;
   top: 20px;
   background: #fff;
   border: 1px solid var(--vps-cfg-border);
   border-radius: var(--vps-cfg-radius);
   padding: 1.75rem;
}

.vps-cfg-summary-title {
   font-size: 1.15rem;
   font-weight: 800;
   display: block;
}

.vps-cfg-summary-subtitle {
   font-size: 0.85rem;
   color: var(--vps-cfg-text-muted);
   margin: 2px 0 1.25rem;
}

.vps-cfg-summary-list {
   list-style: none;
   margin: 0 0 1.25rem;
   padding: 0;
   display: flex;
   flex-direction: column;
   gap: 14px;
}

.vps-cfg-summary-list li {
   display: flex;
   align-items: center;
   gap: 10px;
   font-size: 0.88rem;
}

.vps-cfg-summary-icon {
   width: 30px;
   height: 30px;
   min-width: 30px;
   border-radius: 8px;
   background: var(--vps-cfg-primary-light);
   color: var(--vps-cfg-primary);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 0.85rem;
}

.vps-cfg-summary-label {
   color: var(--vps-cfg-text-muted);
   flex: 1;
}

.vps-cfg-summary-value {
   font-weight: 700;
   text-align: right;
}

.vps-cfg-summary-cost {
   background: var(--vps-cfg-primary-light);
   border-radius: var(--vps-cfg-radius);
   padding: 16px;
   text-align: center;
   margin-bottom: 1rem;
}

.vps-cfg-summary-cost-label {
   display: block;
   font-size: 0.8rem;
   color: var(--vps-cfg-text-muted);
   margin-bottom: 4px;
}

.vps-cfg-summary-cost-value {
   display: block;
   font-size: 1.9rem;
   font-weight: 800;
   color: var(--vps-cfg-primary);
   line-height: 1.2;
}

.vps-cfg-summary-cost-note {
   display: block;
   font-size: 0.78rem;
   color: var(--vps-cfg-text-muted);
   margin-top: 4px;
}

.vps-cfg-summary-btn {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   width: 100%;
   padding: 14px 20px;
   border-radius: 10px;
   border: none;
   background: linear-gradient(135deg, #2196f3, #e8f1fb);
   color: #fff !important;
   font-weight: 700;
   font-size: 1rem;
   text-decoration: none;
   box-shadow: 0 4px 14px rgba(13, 59, 102, 0.35);
   transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.vps-cfg-summary-btn i {
   font-size: 1.1rem;
   transition: transform .15s ease;
}

.vps-cfg-summary-btn:hover {
   color: #fff;
   filter: brightness(1.08);
   transform: translateY(-2px);
   box-shadow: 0 8px 20px rgba(13, 59, 102, 0.45);
}

.vps-cfg-summary-btn:hover i {
   transform: translateX(4px);
}

.vps-cfg-summary-btn:active {
   transform: translateY(0);
}

/* =========================================================
   SEÇÃO: GERENCIAMENTO DA VPS
   ========================================================= */

/* ---------- Info list (estado do servidor) ---------- */
.vps-cfg-info-list {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   flex-direction: column;
   gap: 4px;
}

.vps-cfg-info-list li {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 12px 0;
   border-bottom: 1px solid var(--vps-cfg-border);
   font-size: 0.92rem;
}

.vps-cfg-info-list li:last-child {
   border-bottom: none;
}

.vps-cfg-info-icon {
   width: 34px;
   height: 34px;
   min-width: 34px;
   border-radius: 8px;
   background: var(--vps-cfg-primary-light);
   color: var(--vps-cfg-primary);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 0.95rem;
}

.vps-cfg-info-label {
   flex: 1;
   color: var(--vps-cfg-text-muted);
}

.vps-cfg-info-value {
   font-weight: 700;
}

.vps-cfg-status-on {
   color: #16a34a !important;
}

/* ---------- Ações rápidas ---------- */
.vps-cfg-actions-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 12px;
}

.vps-cfg-action {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 8px;
   padding: 16px 10px;
   border: 1px solid var(--vps-cfg-border);
   border-radius: var(--vps-cfg-radius);
   text-align: center;
   font-size: 0.8rem;
   font-weight: 600;
   color: var(--vps-cfg-primary);
   background: #fff;
   transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

.vps-cfg-action i {
   font-size: 1.3rem;
}

.vps-cfg-action:hover {
   border-color: var(--vps-cfg-primary);
   background: var(--vps-cfg-primary-light);
   transform: translateY(-2px);
}

/* ---------- Monitoramento de uso ---------- */
.vps-cfg-usage {
   display: flex;
   flex-direction: column;
   gap: 6px;
}

.vps-cfg-usage-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   font-size: 0.85rem;
   margin-top: 14px;
}

.vps-cfg-usage-row:first-child {
   margin-top: 0;
}

.vps-cfg-usage-label {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   font-weight: 600;
   color: #1e293b;
}

.vps-cfg-usage-nums {
   color: var(--vps-cfg-text-muted);
   font-size: 0.8rem;
}

.vps-cfg-usage-bar {
   width: 100%;
   height: 8px;
   border-radius: 20px;
   background: #eef2f7;
   overflow: hidden;
}

.vps-cfg-usage-fill {
   height: 100%;
   border-radius: 20px;
}

.vps-cfg-usage-fill--high {
   background: linear-gradient(90deg, #ef4444, #f87171);
}

.vps-cfg-usage-fill--low {
   background: linear-gradient(90deg, #22c55e, #4ade80);
}

.vps-cfg-usage-fill--ok {
   background: linear-gradient(90deg, #0d3b66, #3b82f6);
}

/* ---------- Sidebar de destaques do gerenciamento ---------- */
.vps-cfg-mgmt-highlight {
   background: linear-gradient(160deg, #ffffff, var(--vps-cfg-primary-light));
}

.vps-cfg-highlight-list {
   list-style: none;
   margin: 0 0 1.5rem;
   padding: 0;
   display: flex;
   flex-direction: column;
   gap: 16px;
}

.vps-cfg-highlight-list li {
   display: flex;
   align-items: flex-start;
   gap: 12px;
}

.vps-cfg-highlight-icon {
   width: 38px;
   height: 38px;
   min-width: 38px;
   border-radius: 10px;
   background: #fff;
   color: var(--vps-cfg-primary);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1rem;
   box-shadow: 0 2px 6px rgba(13, 59, 102, 0.12);
}

.vps-cfg-highlight-title {
   display: block;
   font-weight: 700;
   font-size: 0.92rem;
   margin-bottom: 2px;
}

.vps-cfg-highlight-desc {
   display: block;
   font-size: 0.8rem;
   color: var(--vps-cfg-text-muted);
   line-height: 1.4;
}

.vps-cfg-summary-value--stacked {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
   line-height: 1.3;
}
 
.vps-cfg-summary-value--stacked small {
   font-weight: 500;
   font-size: 0.75rem;
   color: var(--vps-cfg-text-muted);
   margin-top: 1px;
}

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
   .vps-cfg-summary {
      position: static;
      margin-top: 1.5rem;
   }
   .vps-cfg-actions-grid {
      grid-template-columns: repeat(3, 1fr);
   }
}

@media (max-width: 576px) {
   .vps-cfg-plan {
      flex-wrap: wrap;
   }
   .vps-cfg-plan-price {
      align-items: flex-start;
      text-align: left;
      min-width: 0;
      width: 100%;
      margin-left: 36px;
   }
   .vps-cfg-actions-grid {
      grid-template-columns: repeat(2, 1fr);
   }
}