.wbs-box { margin: 15px 0; padding: 15px 18px; border: 1px solid #e0d6f5; border-radius: 8px; background: #faf8ff; max-width: 480px; }
	.wbs-box p { margin: 4px 0; }
	
.wbs-box .wbs-use-credit-btn {
    position: relative;
    overflow: hidden;
    display: inline-block;
    margin-top: 10px;
    padding: 12px 20px;
    border: none;
    border-radius: 10px;

    background: linear-gradient(
        135deg,
        #f2cc6b 0%,
        #ffe8a0 45%,
        #edbd4e 100%
    );

    color: #3b2b08;
    font-weight: 700;
    letter-spacing: 0.3px;

    box-shadow: 0 4px 12px rgba(201, 151, 38, 0.25);

    cursor: pointer;
    transform: scale(1);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        filter 0.3s ease;
}

/* Left-to-right shine effect */
.wbs-box .wbs-use-credit-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 55%;
    height: 100%;

    background: linear-gradient(
        120deg,
        transparent,
        rgba(255, 255, 255, 0.75),
        transparent
    );

    transform: skewX(-20deg);
    animation: wbs-credit-shine 3s ease-in-out infinite;
    pointer-events: none;
}

/* Hover zoom and glow */
.wbs-box .wbs-use-credit-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 7px 20px rgba(201, 151, 38, 0.4);
    filter: brightness(1.05);
}

/* Smooth shine animation */
@keyframes wbs-credit-shine {
    0% {
        left: -100%;
    }

    45%, 100% {
        left: 150%;
    }
}

/* Click effect */
.wbs-box .wbs-use-credit-btn:active {
    transform: scale(0.97);
}

/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce) {
    .wbs-box .wbs-use-credit-btn,
    .wbs-box .wbs-use-credit-btn::before {
        animation: none;
        transition: none;
    }
}
	.wbs-box.wbs-unlocked { background: #e9f9ee; border-color: #b6e6c4; }
	
	.wbs-box.wbs-unlocked a {
    position: relative;
    display: inline-block;
    overflow: hidden;
    color: #087443;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.2px;
    text-decoration: none;
    padding: 10px 18px;
    border: 1px solid #a8d9bd;
    border-radius: 8px;
    background: linear-gradient(135deg, #ffffff 0%, #effaf3 100%);
    box-shadow: 0 3px 8px rgba(8, 116, 67, 0.08);
    transition: all 0.3s ease;
    isolation: isolate;
    margin-top: 10px;
}

/* Premium shine effect */
.wbs-box.wbs-unlocked a::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 70%;
    height: 100%;
    background: linear-gradient(
        110deg,
        transparent,
        rgba(255, 255, 255, 0.75),
        rgba(218, 180, 95, 0.25),
        transparent
    );
    transform: skewX(-20deg);
    transition: left 0.65s ease;
    z-index: -1;
    pointer-events: none;
}

.wbs-box.wbs-unlocked a:hover {
    color: #087443;
    background: linear-gradient(135deg, #e8f8ee, #d2f1df);
    border-color: #c6a45a;
    box-shadow:
        0 5px 14px rgba(8, 116, 67, 0.14),
        0 0 0 1px rgba(198, 164, 90, 0.12);
    transform: translateY(-2px) scale(1.02);
}

.wbs-box.wbs-unlocked a:hover::before {
    left: 150%;
}

.wbs-box.wbs-unlocked a:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 2px 5px rgba(6, 78, 59, 0.18);
}

button.process-btn:disabled {
    background: linear-gradient(135deg, #ffe49a 0%, #f2cc6b 100%) !important;
    color: #252525 !important;
    border: 1px solid #e5bd58 !important;
    border-radius: 8px !important;
    padding: 9px 20px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    letter-spacing: 0.3px;
    margin-bottom: 10px !important;
    opacity: 1 !important;
    cursor: not-allowed !important;
    box-shadow: 0 3px 7px rgba(180, 137, 35, 0.15) !important;
    transform: none !important;
    transition: none !important;
}

button.process-btn:disabled:hover,
button.process-btn:disabled:focus,
button.process-btn:disabled:active {
    background: linear-gradient(135deg, #ffe49a 0%, #f2cc6b 100%) !important;
    color: #252525 !important;
    border-color: #e5bd58 !important;
    box-shadow: 0 3px 7px rgba(180, 137, 35, 0.15) !important;
    transform: none !important;
    outline: none !important;
}

	/* ---------- Modal shell ---------- */
	/* Every rule below is scoped under .wbs-modal-overlay and uses
	   !important on layout-critical properties. This popup was getting
	   its spacing/gaps/backgrounds squashed by the theme/Elementor's own
	   CSS loading after this block — scoping + !important guarantees
	   nothing outside this plugin can override it anymore. */
	.wbs-modal-overlay,
	.wbs-modal-overlay *{
		box-sizing:border-box !important;
	}

	.wbs-modal-overlay{
		position:fixed !important; inset:0 !important;
		background:rgba(15,23,42,.72) !important;
		backdrop-filter:blur(3px);
		display:none;
		align-items:center !important; justify-content:center !important;
		z-index:999999 !important;
		padding:20px !important;
	}
	.wbs-modal-overlay.active{ display:flex !important; }

	.wbs-modal-overlay .wbs-modal-box{
		width:100% !important; max-width:1240px !important;
		max-height:92vh !important; overflow-y:auto !important;
		background:#ffffff !important;
		border-radius:24px !important;
		padding:32px !important;
		position:relative !important;
		box-shadow:0 30px 70px rgba(0,0,0,.35) !important;
		text-align:center !important;
		font-family:'Poppins', sans-serif !important;
	}

	.wbs-modal-overlay .wbs-modal-close{
		position:absolute !important; right:18px !important; top:18px !important;
		width:38px !important; height:38px !important;
		border:none !important; border-radius:50% !important;
		background:#fff !important;
		font-size:22px !important; line-height:1 !important;
		cursor:pointer !important; color:#64748b !important;
		box-shadow:0 4px 14px rgba(0,0,0,.12) !important;
		transition:.2s;
		z-index:2 !important;
	}
	.wbs-modal-overlay .wbs-modal-close:hover{ background:#0f172a !important; color:#fff !important; transform:rotate(90deg); }

	/* ---------- Branding header (matches the reference design) ---------- */
	.wbs-modal-overlay .wbs-modal-logo{
		font-size:42px !important; font-weight:800 !important;
		color:#0c2356 !important; letter-spacing:-0.5px;
		font-family:'Poppins', sans-serif !important;
		line-height:1.2 !important;
	}
	.wbs-modal-overlay .wbs-modal-logo span{ color:#ff5500 !important; }

	.wbs-modal-overlay .wbs-modal-subheading{
		font-size:14px !important; color:#555 !important;
		max-width:720px !important; margin:8px auto 22px !important;
		line-height:1.5 !important; font-weight:500 !important;
	}

	.wbs-modal-overlay .wbs-title-row{
		display:flex !important; align-items:center !important; justify-content:center !important;
		gap:12px !important; margin-bottom:30px !important;
	}
	.wbs-modal-overlay .wbs-title-row .wbs-line-left,
	.wbs-modal-overlay .wbs-title-row .wbs-line-right{ width:60px !important; height:3px !important; border-radius:2px !important; }
	.wbs-modal-overlay .wbs-title-row .wbs-line-left{ background:linear-gradient(90deg, transparent, #009639, #0056b3) !important; }
	.wbs-modal-overlay .wbs-title-row .wbs-line-right{ background:linear-gradient(90deg, #6a0dad, #ff0055, transparent) !important; }
	.wbs-modal-overlay .wbs-title-row .wbs-dot{ width:6px !important; height:6px !important; border-radius:50% !important; }
	.wbs-modal-overlay .wbs-title-row h2{
		font-size:24px !important; font-weight:800 !important; color:#06153b !important;
		text-transform:uppercase !important; letter-spacing:.5px !important;
		margin:0 !important;
	}

	/* ---------- Plan grid ---------- */
	.wbs-modal-overlay .wbs-plan-wrapper{
		display:grid !important;
		grid-template-columns:repeat(5,1fr) !important;
		gap:20px !important;
		margin:0 0 20px !important;
	}

.wbs-modal-overlay .wbs-plan-card{
    background:#fff !important;
    border:1px solid #e2e8f0 !important;
    border-bottom:4px solid var(--plan-color, #0056b3) !important;
    border-radius:24px !important;
    padding:0 0 15px !important;
    margin:0 !important;
    display:flex !important; flex-direction:column !important; align-items:center !important;
    position:relative !important;
    transition:transform .25s ease, border-color .25s ease, border-width .25s ease;
    border-color:color-mix(in srgb, var(--plan-color, #0056b3) 20%, transparent) !important;
    border-bottom-color:var(--plan-color, #0056b3) !important;
}
.wbs-modal-overlay .wbs-plan-card:hover{
    transform:translateY(-4px);
    border-width:4.5px !important;
    border-bottom-width:5px !important;
}

	/* Ribbon header, exactly like the reference image */
	.wbs-modal-overlay .wbs-card-ribbon{
		width:75% !important; height:28px !important;
		border-radius:0 0 10px 10px !important;
		color:#fff !important; font-size:13px !important; font-weight:800 !important;
		display:flex !important; align-items:center !important; justify-content:center !important;
		text-transform:uppercase !important;
		background:var(--plan-color, #0056b3) !important;
		margin:0 !important;
	}

	.wbs-modal-overlay .wbs-card-icon{
		width:48px !important; height:48px !important;
		border-radius:50% !important;
		display:flex !important; align-items:center !important; justify-content:center !important;
		font-size:20px !important; margin:8px 0 0 !important;
		background:color-mix(in srgb, var(--plan-color, #0056b3) 12%, #fff) !important;
		color:var(--plan-color, #0056b3) !important;
	}

	.wbs-modal-overlay .wbs-journey-tag{
		font-size:10px !important; font-weight:500 !important; color:#333 !important;
		/*margin:15px 0 5px !important;*/
	}

	.wbs-modal-overlay .wbs-bike-wrapper{
		width:100% !important; height:110px !important;
		display:flex !important; align-items:center !important; justify-content:center !important;
		margin:0px 0 !important; padding:0 10px !important;
	}
	.wbs-modal-overlay .wbs-bike-wrapper img{ max-width:100% !important; max-height:100% !important; object-fit:contain !important; height: 100px;
    width: 100%; }

	.wbs-modal-overlay .wbs-price-badge{
		width:88% !important; padding:6px 0 !important;
		border-radius:8px !important; color:#fff !important;
		font-size:24px !important; font-weight:700 !important;
		background:var(--plan-color, #0056b3) !important;
		margin:0 !important;
	}

	.wbs-modal-overlay .wbs-gst-text{ font-size:9px !important; color:#777 !important; margin:4px 0 15px !important; }

	.wbs-modal-overlay .wbs-card-features{
		width:100% !important; padding:0 14px !important;
		display:flex !important; flex-direction:column !important; gap:5px !important;
		flex-grow:1 !important;
		margin:0 !important;
		list-style:none !important;
	}
	.wbs-modal-overlay .wbs-feature-item{
		display:flex !important; align-items:center !important; gap:8px !important;
		font-size:11.5px !important; font-weight:500 !important; color:#333 !important;
		text-align:left !important;
		margin:0 !important; padding:0 !important;
		border-bottom: 1px solid #c8c8c882;
	}
	.wbs-modal-overlay .wbs-feature-item i{ font-size:13px !important; width:16px !important; color:var(--plan-color, #0056b3) !important; }

	.wbs-modal-overlay .wbs-buy-btn{
		display:block !important;
		width:88% !important;
		margin:16px auto 0 !important;
		padding:11px !important;
		text-align:center !important;
		color:#fff !important;
		text-decoration:none !important;
		font-weight:700 !important; font-size:13.5px !important;
		border-radius:10px !important;
		background:var(--plan-color, #0056b3) !important;
		transition:.25s;
	}
	.wbs-modal-overlay .wbs-buy-btn:hover{ opacity:.9; transform:translateY(-2px); }

	/* ---------- Trust banner ---------- */
	.wbs-modal-overlay .wbs-bottom-features{
		display:grid !important; grid-template-columns:repeat(4,1fr) !important;
		gap:20px !important; margin-top:25px !important; padding:18px 25px !important;
		border-radius:14px !important; text-align:left !important;
		background:#f8fafc !important; border:1px dashed #e2e8f0 !important;
	}
	.wbs-modal-overlay .wbs-b-feat-item{ display:flex !important; align-items:center !important; gap:12px !important; }
	.wbs-modal-overlay .wbs-b-feat-item i{ font-size:24px !important; }
	.wbs-modal-overlay .wbs-b-feat-item.f1 i{ color:#009639 !important; }
	.wbs-modal-overlay .wbs-b-feat-item.f2 i{ color:#0056b3 !important; }
	.wbs-modal-overlay .wbs-b-feat-item.f3 i{ color:#ff6a00 !important; }
	.wbs-modal-overlay .wbs-b-feat-item.f4 i{ color:#6a0dad !important; }
	.wbs-modal-overlay .wbs-b-feat-text h4{ font-size:13.5px !important; font-weight:700 !important; color:#111 !important; margin:0 !important; }
	.wbs-modal-overlay .wbs-b-feat-text p{ font-size:11px !important; color:#666 !important; margin:0 !important; }

	.wbs-modal-overlay .wbs-footer-note{
		margin-top:22px !important;
		font-size:12px !important; color:#555 !important; font-weight:500 !important;
		text-align: right!important;
	}
	.wbs-modal-overlay .wbs-footer-note span{ color:#ff0055 !important; font-weight:600 !important; }

	.wbs-modal-overlay .wbs-footer-row{
		display:flex !important;
		align-items:center !important;
		justify-content:space-between !important;
		margin-top:22px !important;
		flex-wrap:wrap !important;
		gap:10px !important;
	}
	.wbs-modal-overlay .wbs-footer-row .wbs-footer-note{ margin-top:0 !important; }
	.wbs-modal-overlay .wbs-tnc-toggle{
		display:flex !important; align-items:center !important; gap:7px !important;
		font-size:12px !important; color:#555 !important; font-weight:500 !important;
	}
	.wbs-modal-overlay .wbs-tnc-toggle input[type="checkbox"]{
		width:15px !important; height:15px !important; margin:0 !important; cursor:pointer !important;
	}
	.wbs-modal-overlay .wbs-tnc-toggle a{
		color:#0056b3 !important; font-weight:600 !important; text-decoration:underline !important; cursor:pointer !important;
	}

	/* ---- Terms & Conditions nested modal ---- */
	.wbs-tnc-overlay{
		position:fixed !important; inset:0 !important;
		background:rgba(15,23,42,.75) !important;
		display:none !important;
		align-items:center !important; justify-content:center !important;
		z-index:1000001 !important;
		padding:20px !important;
	}
	.wbs-tnc-overlay.active{ display:flex !important; }
	.wbs-tnc-box{
		position:relative !important;
		width:100% !important; max-width:640px !important;
		max-height:82vh !important; overflow-y:auto !important;
		background:#fff !important; border-radius:16px !important;
		padding:32px 30px !important;
		box-shadow:0 25px 60px rgba(0,0,0,.35) !important;
		text-align:left !important;
		font-family:'Poppins', sans-serif !important;
	}
	.wbs-tnc-box h3{
		margin:0 0 16px !important; font-size:19px !important; font-weight:800 !important; color:#0c2356 !important;
	}
	.wbs-tnc-box ol{
		margin:0 !important; padding-left:20px !important;
	}
	.wbs-tnc-box ol li{
		font-size:13.5px !important; line-height:22px !important; color:#333 !important; margin-bottom:12px !important;
	}
	.wbs-tnc-close{
		position:absolute !important; top:14px !important; right:14px !important;
		width:32px !important; height:32px !important;
		border:none !important; border-radius:50% !important;
		background:#f1f5f9 !important; color:#555 !important;
		font-size:18px !important; line-height:1 !important; cursor:pointer !important;
	}
	.wbs-tnc-close:hover{ background:#e2e8f0 !important; }

	@media(max-width:1024px){
		.wbs-modal-overlay .wbs-plan-wrapper{ grid-template-columns:repeat(3,1fr) !important; }
		.wbs-modal-overlay .wbs-bottom-features{ grid-template-columns:repeat(2,1fr) !important; }
	}
	@media(max-width:768px){
		.wbs-modal-overlay .wbs-plan-wrapper{ grid-template-columns:repeat(2,1fr) !important; }
	}
	@media(max-width:480px){
		.wbs-modal-overlay .wbs-modal-box{ padding:28px 16px !important; border-radius:18px !important; }
		.wbs-modal-overlay .wbs-modal-logo{ font-size:32px !important; }
		.wbs-modal-overlay .wbs-plan-wrapper{ grid-template-columns:1fr !important; }
		.wbs-modal-overlay .wbs-bottom-features{ grid-template-columns:1fr !important; }
	}

	/* ---------- "Get Subscription" trigger button (unchanged logic) ---------- */
	.wbs-no-sub{ position:relative; margin:18px 0; }


	.wbs-open-modal-btn{
		width:100%;
		display:flex; align-items:center; gap:15px;
		padding:16px 20px !important;
		background:linear-gradient(135deg, #f2cc6b, #f2cc6b) !important;
		border:none !important;
		border-radius:14px !important;
		color:#fff !important;
		font-size:18px !important;
		font-weight:700;
		cursor:pointer;
		box-shadow:0 12px 25px rgb(242 204 107);
		transition:.35s;
		animation:wbsPulse 1.5s infinite;
	}
	.wbs-open-modal-btn:hover{
		transform:translateY(-3px);
		box-shadow:0 18px 35px rgba(255,87,34,.45);
	}
	.wbs-btn-icon{ font-size:34px; animation:wbsShake 2s infinite; }
	.wbs-btn-text{ display:flex; flex-direction:column; align-items:flex-start; line-height:1.3; }
	.wbs-btn-text small{ font-size:13px; opacity:.95; font-weight:400; }

.wbs-offer-badge {
    position: absolute;
    top: -55px;
    right: 12px;
    background: #f0c454;
    color: #604646;
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 50px;
    letter-spacing: 1px;
    animation: wbsBlink .9s infinite;
    box-shadow: 0 12px 25px rgb(242 204 107);
}

	@keyframes wbsPulse{ 0%{transform:scale(1)} 50%{transform:scale(1.03)} 100%{transform:scale(1)} }
	@keyframes wbsBlink{ 0%,100%{opacity:1} 50%{opacity:.2} }
	@keyframes wbsShake{ 0%,100%{transform:rotate(0)} 20%{transform:rotate(-10deg)} 40%{transform:rotate(10deg)} 60%{transform:rotate(-10deg)} 80%{transform:rotate(10deg)} }