/*================================================================================
	Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
	Version: 2.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */

.package-item {
	border: 1px solid transparent;
	border-radius: 6px;
	transition: all 0.2s ease;
	padding: 8px 12px;
}

	.package-item:hover {
		background-color: rgba(115, 103, 240, 0.04);
		border-color: rgba(115, 103, 240, 0.12);
	}

	.package-item input[type="radio"]:checked + .d-flex {
		background-color: rgba(115, 103, 240, 0.98);
	}

	.package-item input[type="radio"]:checked ~ * {
		color: #7367f0;
	}

.form-check-label.cursor-pointer {
	cursor: pointer;
}

.duration-section {
	position: relative;
}

	.duration-section:not(:last-child)::after {
		content: '';
		position: absolute;
		bottom: -15px;
		left: 0;
		right: 0;
		height: 1px;
		background: linear-gradient(90deg, rgba(115, 103, 240, 0.1) 0%, rgba(115, 103, 240, 0.3) 50%, rgba(115, 103, 240, 0.1) 100%);
	}

/* ============================================================
   PREMIUM NETWORK PAGES – Custom Design System
   Themed around Vuexy's #7367f0 purple palette
   ============================================================ */

/* --- Data-Grid Table ---------------------------------------- */
.nw-table { width:100%; border-collapse:separate; border-spacing:0; font-family:'Montserrat',sans-serif; font-size:0.82rem; }
.nw-table thead th { background:linear-gradient(135deg,#3d2b8e 0%,#7367f0 100%); color:#fff; font-weight:600; font-size:0.72rem; letter-spacing:.07em; text-transform:uppercase; padding:12px 14px; border:none; white-space:nowrap; }
.nw-table thead th:first-child { border-radius:8px 0 0 0; }
.nw-table thead th:last-child  { border-radius:0 8px 0 0; }
.nw-table tbody tr { transition:background .18s ease,transform .12s ease,box-shadow .18s ease; }
.nw-table tbody tr:nth-child(even) { background:rgba(115,103,240,.025); }
.nw-table tbody tr:hover { background:rgba(115,103,240,.07)!important; transform:translateY(-1px); box-shadow:0 4px 18px rgba(115,103,240,.12); position:relative; z-index:1; }
.nw-table tbody td { padding:11px 14px; border-bottom:1px solid rgba(115,103,240,.07); vertical-align:middle; color:#5e5873; }
.nw-table tbody tr:last-child td { border-bottom:none; }

/* --- Glassmorphism Card ------------------------------------- */
.glass-card { background:rgba(255,255,255,.87); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid rgba(115,103,240,.12); border-radius:12px; box-shadow:0 8px 32px rgba(115,103,240,.1); }

/* --- Stat Cards (Router Dashboard) ------------------------- */
.stat-cards-row { display:flex; gap:16px; flex-wrap:wrap; margin-bottom:20px; padding:16px; }
.stat-card { flex:1; min-width:150px; background:rgba(255,255,255,.92); border-radius:12px; padding:16px 18px; border-left:4px solid #7367f0; box-shadow:0 4px 20px rgba(115,103,240,.09); transition:box-shadow .2s,transform .15s; }
.stat-card:hover { box-shadow:0 8px 28px rgba(115,103,240,.18); transform:translateY(-2px); }
.stat-card .stat-label { font-size:.67rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:#b9b3d8; margin-bottom:4px; }
.stat-card .stat-value { font-size:1.4rem; font-weight:700; color:#3d2b8e; line-height:1.2; }
.stat-card .stat-sub { font-size:.72rem; color:#aaa; margin-top:2px; }
.stat-card.stat-green { border-left-color:#28c76f; }
.stat-card.stat-orange { border-left-color:#ff9f43; }
.stat-card.stat-red { border-left-color:#ea5455; }
.stat-card.stat-cyan { border-left-color:#00cfe8; }

/* --- Progress Bar ------------------------------------------ */
.nw-progress { height:6px; border-radius:4px; background:rgba(115,103,240,.1); overflow:hidden; min-width:80px; margin-top:6px; }
.nw-progress-bar { height:100%; border-radius:4px; transition:width .5s ease; }
.nw-progress-bar.ok   { background:linear-gradient(90deg,#28c76f,#48da89); }
.nw-progress-bar.warn { background:linear-gradient(90deg,#ff9f43,#ffc085); }
.nw-progress-bar.crit { background:linear-gradient(90deg,#ea5455,#f98a8a); }

/* --- Circular Health Ring ---------------------------------- */
.health-ring { position:relative; display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; }
.health-ring svg { position:absolute; top:0; left:0; transform:rotate(-90deg); }
.health-ring .ring-bg   { fill:none; stroke:rgba(115,103,240,.1); stroke-width:4; }
.health-ring .ring-fill { fill:none; stroke-width:4; stroke-linecap:round; transition:stroke-dashoffset .6s ease; }
.health-ring .ring-text { font-size:.65rem; font-weight:700; color:#3d2b8e; z-index:1; }

/* --- Gradient Badges --------------------------------------- */
.badge-nw { display:inline-block; padding:3px 10px; border-radius:20px; font-size:.67rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.badge-live    { background:linear-gradient(135deg,#28c76f,#48da89); color:#fff; }
.badge-hidden  { background:linear-gradient(135deg,#a8aaae,#c9cacc); color:#fff; }
.badge-off     { background:linear-gradient(135deg,#ea5455,#f98a8a); color:#fff; }
.badge-hotspot { background:linear-gradient(135deg,#7367f0,#9e95f5); color:#fff; }
.badge-pppoe   { background:linear-gradient(135deg,#00cfe8,#1be7ff); color:#1a2c3d; }
.badge-online  { background:linear-gradient(135deg,#28c76f,#48da89); color:#fff; }
.badge-offline { background:linear-gradient(135deg,#a8aaae,#c9cacc); color:#fff; }

/* --- Section Header ---------------------------------------- */
.nw-page-header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid rgba(115,103,240,.1); }
.nw-page-header h4 { font-size:1rem; font-weight:700; color:#3d2b8e; margin:0; }
.nw-page-header small { color:#a0a0b5; font-size:.75rem; }

/* --- Action Buttons ---------------------------------------- */
.btn-nw-primary { background:linear-gradient(135deg,#7367f0,#9e95f5); color:#fff; border:none; border-radius:8px; padding:7px 18px; font-size:.8rem; font-weight:600; transition:box-shadow .2s,transform .12s; }
.btn-nw-primary:hover { box-shadow:0 4px 18px rgba(115,103,240,.4); transform:translateY(-1px); color:#fff; }
.btn-nw-sm { padding:4px 12px; font-size:.75rem; border-radius:6px; }

/* --- Search / Filter Bar ----------------------------------- */
.nw-search-bar { display:flex; gap:10px; flex-wrap:wrap; align-items:center; padding:12px 18px; background:rgba(115,103,240,.03); border-bottom:1px solid rgba(115,103,240,.07); }
.nw-search-bar .form-control, .nw-search-bar .form-select { border-radius:8px; border:1px solid rgba(115,103,240,.2); font-size:.82rem; padding:6px 12px; transition:border-color .2s,box-shadow .2s; }
.nw-search-bar .form-control:focus, .nw-search-bar .form-select:focus { border-color:#7367f0; box-shadow:0 0 0 3px rgba(115,103,240,.12); outline:none; }

/* --- Empty State ------------------------------------------- */
.nw-empty { text-align:center; padding:40px 20px; color:#b5b5c3; font-size:.85rem; }
.nw-empty i { font-size:2.5rem; margin-bottom:10px; display:block; opacity:.4; }

/* --- Revenue value highlight ------------------------------- */
.revenue-value { font-weight:700; color:#28c76f; }

/* --- Expandable Session Panel ------------------------------ */
.session-detail-panel { background:rgba(115,103,240,.03); border-top:1px solid rgba(115,103,240,.08); padding:14px 20px; }
.session-detail-panel .detail-label { font-size:.67rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:#b9b3d8; }
.session-detail-panel .detail-value { font-size:.82rem; font-weight:600; color:#3d2b8e; }