/*!

Theme Name: Alphavima

Theme URI: http://alphavima.com/

Author: Alphavima.com

Author URI: http://alphavima.com/

Description: Description

Version: 1.0.1

Tested up to: 6.0

Requires PHP: 5.6

License: GNU General Public License v2 or later

License URI: LICENSE

Text Domain: alphavima

Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready



This theme, like WordPress, is licensed under the GPL.

Use it to make something cool, have fun, and share what you've learned.



Alphavima is based on Underscores https://alphavima.com/, (C) 2012-2020 Automattic, Inc.

Underscores is distributed under the terms of the GNU GPL v2 or later.



Normalizing styles have been helped along thanks to the fine work of

Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/

*/



/*--------------------------------------------------------------

>>> TABLE OF CONTENTS:

----------------------------------------------------------------

# Generic

	- Normalize

	- Box sizing

# Base

	- Typography

	- Elements

	- Links

	- Forms

## Layouts

# Components

	- Navigation

	- Posts and pages

	- Comments

	- Widgets

	- Media

	- Captions

	- Galleries

# plugins

	- Jetpack infinite scroll

# Utilities

	- Accessibility

	- Alignments



--------------------------------------------------------------*/



/*--------------------------------------------------------------

# Generic

--------------------------------------------------------------*/



/* Normalize

--------------------------------------------- */



/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */



/* Compiled Less CSS File *//* Generated from "style.css" */

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,pre,a,abbr,acronym,address,big,cite,code,del,dfn,img,ins,kbd,q,s,samp,strike,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}

/*! normalize.css v3.0.0 | MIT License | git.io/normalize */

html {-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;}

article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary {display: block;}

audio,canvas,progress,video {display: inline-block;vertical-align: baseline;}

audio:not([controls]) {display: none;height: 0;}

[hidden],template {display: none;}

a {background: transparent;}

a:active,a:hover {outline: 0;}

abbr[title] {border-bottom: 1px dotted;}

b,strong {font-weight: bold;}

dfn {font-style: italic;}

mark {background: #ff0;color: #000;}

small {font-size: 80%;}

sub,sup {font-size: 75%;line-height: 0;position: relative;vertical-align: baseline;}

sup {top: -0.5em;}

sub {bottom: -0.25em;}

img {border: 0;max-width: 100%;height: auto;}

svg:not(:root) {overflow: hidden;}

hr {-moz-box-sizing: content-box;box-sizing: content-box;height: 0;}

pre {overflow: auto;}

code,kbd,pre,samp {font-family: monospace, monospace;font-size: 1em;}

button,input,optgroup,select,textarea {color: inherit;font: inherit;margin: 0;}

button {overflow: visible;}

button,select {text-transform: none;}

button,html input[type="button"],input[type="reset"],input[type="submit"] {-webkit-appearance: button;cursor: pointer;}

button[disabled],html input[disabled] {cursor: default;}

button::-moz-focus-inner,input::-moz-focus-inner {border: 0;padding: 0;}

input {line-height: normal;}

input[type="checkbox"],input[type="radio"] {box-sizing: border-box;padding: 0;}

input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button {height: auto;}

input[type="search"] {-webkit-appearance: textfield;-moz-box-sizing: content-box;-webkit-box-sizing: content-box;box-sizing: content-box;}

input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration {-webkit-appearance: none;}

fieldset {border: 1px solid #c0c0c0;margin: 0 2px;padding: 0.35em 0.625em 0.75em;}

legend {border: 0;padding: 0;}

textarea {overflow: auto;}

optgroup {font-weight: bold;}

table {border-collapse: collapse;border-spacing: 0;}

td,th {padding: 0;}

* {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;font-smooth: always;-webkit-text-size-adjust: 100%;}

*:before,*:after {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}

input,button,select,textarea {font-family: inherit;font-size: inherit;line-height: inherit;}

/* =Default Tag & General Classes

========================================================================================*/

html,body {min-width: 320px;  }

body {margin: 0;padding: 0;font: 16px/25px 'Poppins', serif;  color: #707070; background:#EEEEEE ; font-weight: 400; background: 
        url('img/back-pattern-03.jpg') 
        repeat 
        center center #ffffff;
    background-size: 200px 200px;}

img {max-width: 100%;-ms-interpolation-mode: bicubic;vertical-align: middle;}

a,input[type="button"],input[type="submit"],button {outline: 0 none;-moz-transition: background-color 0.2s ease-in, color 0.2s ease-in;-webkit-transition: background-color 0.2s ease-in, color 0.2s ease-in;-o-transition: background-color 0.2s ease-in, color 0.2s ease-in;-ms-transition: background-color 0.2s ease-in, color 0.2s ease-in;transition: background-color 0.2s ease-in, color 0.2s ease-in;}

a {color: #0047BA;outline: 0 none;-moz-transition: background-color 0.2s ease-in, color 0.2s ease-in;-webkit-transition: background-color 0.2s ease-in, color 0.2s ease-in;-o-transition: background-color 0.2s ease-in, color 0.2s ease-in;-ms-transition: background-color 0.2s ease-in, color 0.2s ease-in;transition: background-color 0.2s ease-in, color 0.2s ease-in;}

a:hover {color: #141414;text-decoration: none;outline: 0 none;}

a:active {outline: 0;}

@media screen and (-ms-high-contrast: active),(-ms-high-contrast: none) {a:active {    background-color: transparent;}

}

p {margin: 0 0 15px 0; }

h1,h2,h3,h4,h5 {font-weight: 700;}

h1,h2,h3,h4,h5,h6 {line-height: 100%;margin-bottom: 15px;color: #3f3f3f;font-family: 'Poppins', serif;font-weight: 600;}

.lightBg h1, .lightBg h2,.lightBg h3,.lightBg h4,.lightBg h5,.lightBg h6{color: #1E1E1E;}

h1 {font-size:60px;line-height:1.3;text-transform: none;color: #ffffff;position: relative;font-weight: 600; }

h2 {font-size: 48px;line-height:1.3;text-transform: none; color: #3f3f3f; }

h3 {font-size: 24px;line-height: 1.3; text-transform: none;}

h4 {font-size: 20px;line-height: 1.3;text-transform: none;}

h5 {font-size: 18px;line-height: 1.3;text-transform: none;}

h6 {font-size: 16px;line-height: 1.3;text-transform: none;}

h2.white-color{color:#fff; text-shadow: none; font-size: 52px;  line-height: 150%;}

.mobile-show{display: none;}

.hidden{display: none !important;}

/* =Typography

========================================================================================*/

#wrapper {width: 100%;min-width: 100%;overflow: hidden;}

.container {max-width: 1470px !important;width: 100%;padding: 0 15px;}



/****************header**********************/

.headerBg {position: absolute;left: 0; top: 0; width: 100%; z-index: 111; border-bottom: 1px solid rgba(47,192,232,0.5); padding:12px 0; }

.headerBg .container{max-width: 1470px;}

#topbar{font-size:14px;transition:all .5s;z-index:999; position:relative; padding:8px 0;}

#topbar .social-links{justify-content: flex-end;}

#topbar .social-link a{color:#192c88; transition:.3s;margin-left:15px}

#topbar .social-link a:hover{color:#192c88;}

#topbar .social-links .signin ul li a{text-decoration:none; color:#fff;}

#topbar .social-links .signin ul li ul li a{color:#333;text-decoration:none} 

#topbar .signin ul li{padding-left:10px;}

.header{padding: 0; margin: 0;}

.header-wrap{justify-content: space-between; display: flex; align-items: center;}

.signin ul{ margin:0px; padding-left: 0;}

.fixed{position:fixed;top:0;left:0;width:100%; transition:all .1s; min-height:70px; background:#fff;}

.fixed #header{transition:all .5s;z-index:97;padding:1px 20px 0;margin-top:0;min-height:60px;transition:all .1s}

#header{padding: 0; border-bottom: 0 none;}

.nav-menu ul{margin:0;padding:0;list-style:none;}

.nav-menu>ul{display:flex;padding-top:0px}

.nav-menu>ul>li{position:relative;white-space:nowrap;display:block}

.nav-menu a{display:block;position:relative;color:#254A5C;transition:.3s;font-family:"Poppins",sans-serif;font-size:15px;font-weight:500;line-height:28px;margin:0;padding:8px 20px;text-decoration:none}

.nav-menu li a i{font-size:8px;vertical-align:middle;font-weight:normal;margin-top:-3px}

.nav-menu>ul>li.main-logo-desk>a:before{display:none}

.nav-menu a:hover:before,.nav-menu li:hover>a:before,.nav-menu .active>a:before{visibility:visible;width:100%}

.nav-menu a:hover,.nav-menu .active>a,.nav-menu li:hover>a{color:#192c88;}

.nav-menu .dropdown ul{box-shadow:0 3px 12px 0 rgb(0 0 0 / 5%); display:block;position:absolute;left:14px;top:59px;z-index:99;opacity:0;visibility:hidden;padding:5px 0;border:solid 1px #f1f1f1;background-color:#ffffff;transition:.3s;border-radius:5px}

.nav-menu .dropdown ul.dropArrow{margin-left:-50%}

.nav-menu .dropdown ul.dropArrow::before{width:12px;height:9px;content:'';position:absolute;top:0;top:-9px;left:50%;margin-left:-6px}

.nav-menu .dropdown:hover>ul{opacity:1;top:100%;visibility:visible}

.nav-menu .dropdown li{ position:relative; }

.nav-menu .dropdown ul a{padding:10px 20px;font-size:14px;font-weight:400;text-transform:none;color:#444;margin:0;line-height:18px}

.nav-menu .dropdown ul a i{position:absolute;right:10px;top:14px}

.nav-menu .dropdown ul a:hover,.nav-menu .dropdown ul .active>a,.nav-menu .dropdown ul li:hover>a{background:#F9F9F9;color:#444}

.nav-menu .dropArrow .dropdown>a:after{content:"";padding-left:5px;font-size:1.2rem;width:9px;height:10px;display:inline-block;margin-left:5px;position:relative;position:absolute;right:15px;top:14px}

.nav-menu .dropdown .dropdown ul{top:0;left:calc(100% - 30px)}

.nav-menu .dropdown .dropdown:hover>ul{opacity:1;top:0;left:100%}

.nav-menu .dropdown .dropdown>a{padding-right:35px}

.nav-menu>ul>li a i.fa-home{font-size:16px}

 .dropdown-menu{ border-radius:5px;}

.nav-menu ul li:last-child{background:var(--main-color); padding: 0px 10px !important;border-radius:4px;color:#fff;transition:none;font-size:14px;font-weight:600;transition:.3s}

.nav-menu ul li ul li:last-child{background:none; border:none; margin-left: 0px !important; padding: 0px !important; }

@media (max-width: 1366px) {

.nav-menu .dropdown .dropdown ul{right:-90%}

.nav-menu .dropdown .dropdown:hover>ul{right:-100%}

.nav-menu a{padding:8px 10px}

}

.mobile-nav-toggle{position:absolute;border:0;right:10px; transition:all .4s;outline:none!important;line-height:1;cursor:pointer;background:none;margin:15px 5px 0 15px;padding:0;float:left;display:none}

.mobile-nav-toggle i{color:#fff;font-size:20px}

.mobile-nav{position:fixed;top:0;bottom:0;left:auto;z-index:9999;overflow-y:auto;background:#fff;transition:ease-in-out .2s;opacity:0;visibility:hidden;border-radius:0;padding:5px 0;margin-left:-5px;width:300px;box-shadow:0 4px 125px 0 rgba(0,0,0,0.1);margin:0;padding:0;list-style:none}

.mobile-nav a{display:block;position:relative;text-transform:uppercase;font-weight:600;font-size:13px;color:#2d2a2a;border-bottom:1px solid rgba(129,129,129,.2);padding:11px 20px;outline:none}

.mobile-nav .active>a{background:#fff;opacity:1;color:#333;text-decoration:none;font-weight:bold}

.mobile-nav li.dropdown i{float:right;border-left:1px solid rgba(129,129,129,.2);padding:15px;margin-top:-12px}

.mobile-nav .dropdown>a{padding-right:5px;background:#fff;opacity:1;color:#333;border-bottom:1px solid rgba(129,129,129,.2)}

.mobile-nav .dropdown ul{display:none;background:#fff}

.mobile-nav .dropdown ul li a{color:#777;opacity:1;font-size:14px;font-weight:600;border-bottom:1px solid rgba(129,129,129,.2)}

.mobile-nav-overly{width:100%;height:100%;z-index:9997;top:0;left:0;position:fixed;background:rgba(0,0,0,0.7);overflow:hidden;display:none;transition:ease-in-out .2s}

.mobile-nav-active{overflow:hidden}

.mobile-nav-active .mobile-nav{opacity:1;visibility:visible}

.mobile-nav-active .mobile-nav-toggle i{color:#000}

.mobile-nav .dropdown ul li.dropdown.active a{color:#333;font-weight:500}

.mobile-nav .dropdown ul li.dropdown ul li a{color:#777!important;font-weight:600!important}

.mobile-nav .dropdown ul li.dropdown>a:after{top:20px;content:" ";width:14px;height:8px;padding-left:10px;position:absolute;right:15px}

.mobile-nav .dropdown ul li.dropdown.active>a:after{top:20px;content:" ";width:14px;height:8px}

@media (max-width:1023px) {

.nav-menu{display:none}

}

@media (max-width: 991px) {

.mobile-nav-toggle{display:block}

.navbar ul{display:none}

}

@media (max-width:768px) {



#header .logo img{margin-top:10px;margin-left:0;height:45px}

.fixed #header .logo img{margin-top:8px;height:45px}

.donate-btn{width:100px;margin-top:10px}

a.donate-btn{color:#fff}

.fixed #header{padding:0px; }

}

.signin{display: flex; gap: 0 10px;}

.signin ul{margin: 0; padding: 0; list-style: none;}

.signin a{color: #254A5C; font-weight: 600; text-decoration: none;}

.signin a:hover{color: #0047BA;}

/************************Hero*****************/

#hero{background: #F5FAFE;

background: radial-gradient(circle,rgba(245, 250, 254, 1) 0%, rgba(227, 239, 255, 1) 50%, rgba(227, 239, 255, 1) 100%); position: relative; padding: 200px 0 150px; overflow: hidden;}

#hero:after{ content: "";

  position: absolute;

  top: -50px;

  left: 0;

  width: 100%;

  height: 150%;

  background: #3498db; /* your color */

  transform: skewY(-5deg);

  z-index: -1;}

#hero::before{position: absolute; width:50%; height: 200vh; border-radius: 50% 0 0 50%; position: absolute; right: -10%; top: 0; content: ""; background: rgba(52,202,253,0.15); }

#hero .banner-img{margin-bottom: -20px; position:relative; z-index: 11;}

#hero h1{font-size: 56px; font-weight: 700; color: #283947;}

#hero h2 {font-size: 40px; color: #2fc0eb; font-weight: 700;}

#hero h5{font-size: 20px; color: #777777;}

.banner-btn-wrap{margin-top: 25px;}

.header .signin .dropdown-menu{right: 0 !important; left: auto !important; top: calc(100% + 14px) !important; transform: none !important; position: relative;}

.header .signin .dropdown-menu:before{border-right:7px solid transparent; border-left:7px solid transparent; border-bottom:10px solid #ccc; content: ""; position: absolute; right:20px; top: -11px;}

.header .signin .dropdown-menu li{padding: 10px 10px; border-bottom: 1px solid #ccc; font-size: 14px;}

.header .signin .dropdown-menu li#signout-url{border: 0 none;}

.header .signin .dropdown-menu li.divider{display: none !important;}

.header .signin a{display: block;}

/**************************content Part*********************/

.site-main .entry-content{padding: 0 0;}

aside.widget-area{display: none; }

.center-title h2{position: relative; font-weight: 700; padding-bottom: 18px;}

.center-title h2:after{background: #c60000; width:100px; height:4px; content: ""; left: 50%; bottom: 0; transform: translateX(-50%); position: absolute;}

/**************************Membership Page list*********************/

.navinner ul{border-bottom: 2px solid #ccc; display: flex; background: #f6f6f6; margin: 0; padding: 0; border-radius: 15px 15px 0 0; overflow: hidden; display: none;} 

.navinner ul li a{padding: 15px 35px;  display: block; color:#454545; text-decoration: none; font-size: 18px; line-height: 24px; font-weight: 600;} 

.navinner ul li.active a, .navinner ul li a:hover{background: #254A5C; color: #fff;}

.navinner {margin-bottom: 40px;}

  /*************************common-section*************/

  .common-section{padding: 90px 0;}

  .client-logo{position: relative; padding: 50px 20px 40px; overflow: hidden; background: #fff; border-bottom: 1px solid #ccc;}

  .client-logo h2{text-align: center; font-size: 44px; font-weight: 700; margin-bottom: 40px; color: #283947;}

   .client-logo .logoslider{z-index: 11;}

.client-logo:after{background: #F5FAFE; background: linear-gradient(180deg,rgba(245, 250, 254, 0) 0%, rgba(255, 255, 255, 1) 76%); position: absolute; left: 0; bottom: 0; content: ""; height: 70px; width: 100%;}

.logoslider .swiper-pagination{display: none !important;}

.logoslider .client-inner{text-align: center;}

.page > .entry-content{padding: 120px 0;}

.home .page > .entry-content{padding: 0 0;}

.subtitle{font-weight: 600; color:#2fc0eb; text-transform: uppercase;}  

/***************************blog section Home page**************/

.content.common-section h2{ text-align: center; margin-bottom: 30px; font-weight: 700; font-size: 40px; font-size: 40px;}

.programs-txt{ box-shadow: 0px 0px 12px #00000063;}

.programs-txt .programs-img{position: relative; padding-top: 56.25%; overflow: hidden; margin-bottom: 0;}

.programs-txt .programs-img img{object-fit: cover; position: absolute; min-height: 100%; min-width: 100%; object-position: center; top: 0; left: 0;}

.programs-txt .program-desc{padding: 20px; margin-bottom: 24px;}

.common-section .subtitle{margin-bottom: 10px;}

.programs-txt .program-desc p{margin-bottom: 24px;}

.common-section p a.showmore{color:#23455C;}

.about-us-section h2{padding-left:24px; position: relative; font-size: 40px; font-weight: 700; margin-bottom: 24px;}

.about-us-section h2:before{background: rgb(180, 0, 0); width: 5px; height: 100%; content: ""; position: absolute; left: 0; top: 0;}

.about-us-section p{font-size: 20px; margin-bottom: 30px;}

/********************Ferature*********************/

.homefeatures{background: #f2f2f2; border-radius: 0 250px 0; padding: 70px 0 120px;}

.homefeatures  h2{text-align: center; margin-bottom: 40px;}

.prodcutslider .productTxt{padding: 30px; text-align: center; position: relative;}

.prodcutslider .productTxt img {margin-bottom: 20px;}

.prodcutslider .productTxt h5{font-size:28px; margin-bottom: 16px; font-weight: 700;}

.prodcutslider .productTxt:before{background: #F5FAFE;background: linear-gradient(180deg,rgba(245, 250, 254, 0) 0%, rgba(204, 204, 204, 1) 50%, rgba(255, 255, 255, 0) 99%); position: absolute; right: -30px; top: 0; width: 3px; height: 100%; content: "";}

.homefeatures h2{font-size: 40px;}

.prodcutslider .productTxt h5 + p{margin-bottom: 30px;}

.about-page-content{padding: 0;}

.about-page-content h2{font-size: 40px; margin-bottom: 24px; font-weight: 700;} 

.about-page-content .center-content{margin: 40px auto 0; max-width: 700px; text-align: center; background: #f2f2f2; padding: 30px;  border-radius: 30px;}

.center-content .img-center{margin-bottom: 20px;}

.page-heading h1{font-size: 40px; margin-bottom: 24px; font-weight: 700;} 

.supportersmain ul{margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 30px;}

.supportersmain ul li{flex: 0 0 calc(25% - 30px); max-width: calc(25% - 30px);}

.support-content{text-align: center;}

.work-content .work-img{position: relative; padding-top: 56.25%; overflow: hidden; margin-bottom: 20px;}

.work-content .work-img img{object-fit: cover; position: absolute; min-height: 100%; min-width: 100%; object-position: center; top: 0; left: 0;}

.work-content .work-txt{padding:0 30px 30px;}

.work-content .work-txt p:last-child{margin-bottom: 0;}

.newsTxt{margin-bottom: 30px;}

.newsTxt .news-img{position: relative; padding-top: 56.25%; overflow: hidden; margin-bottom: 20px;}

.newsTxt .news-img img{object-fit: cover; position: absolute; min-height: 100%; min-width: 100%; object-position: center; top: 0; left: 0;}

.newsTxt .news-desc{padding:0 30px 30px;}

.newsTxt .news-desc p:last-child{margin-bottom: 0;}

/***************************membership box************/

.membership-box{position: relative; box-shadow: 0px 0px 12px #00000063; overflow: hidden; margin-bottom: 30px; height:calc(100% - 30px);}

.membership-img{position: relative; padding-top: 56.25%; overflow: hidden; margin-bottom: 20px;}

.membership-img img{object-fit: cover; position: absolute; min-height: 100%; min-width: 100%; object-position: center; top: 0; left: 0;}

.membership-offers{background: rgb(180, 0, 0); position: absolute; left: 0; z-index: 11; padding: 8px 19px; border-radius: 0 8px 8px 0; color: #fff; font-size: 20px; font-weight: 700; top: 10px;}

.membership-offers p{margin-bottom: 0;}

.membership-offers sup{font-size: 14px; font-weight:600;}

.memership-plan{position: absolute;  bottom: 0; left: 0; padding:10px 16px; color: #fff; background: rgba(0, 0, 0, 0.5); width: 100%;}

.memership-plan .planname-txt{font-size: 14px; margin-bottom: 0;}

.membership-details-wrap{padding: 0 20px 20px;}

.memership-plan .price-div{font-size: 24px; font-weight: 700;}

.membership-benefits{background: #f6f6f6;}

.membership-benefits h3{font-size:18px; cursor: pointer; font-weight: 600; border-bottom: 2px solid #ccc; background: #f6f6f6; padding: 10px; position: relative;}

.membership-benefits h3:after{content: "+"; color: #454545; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-weight: 600; font-size: 24px;}

.membership-benefits h3.active:after{content:"-";}

.membership-benefits ul{margin: 0; display: none; padding: 0; list-style: disc outside; padding: 0 10px 10px 10px; margin-left: 15px;}

.membership-benefits ul li{list-style: disc outside; margin-bottom: 5px;} 

.box-btn-wrap{margin-top: 20px; display: flex; gap:0 10px; align-items: center;}

.box-btn-wrap .btn, .box-btn-wrap .plans-btn{flex: 1; text-align: center;}

.box-btn-wrap .btn{background-color: #EC6880; font-family: "Poppins", Sans-serif; font-size: 14px; font-weight: 600; line-height: 18px; color: #FFFFFF;

  border-style: solid; border-width: 1px 1px 1px 1px; border-color: #EC6880; border-radius: 8px; padding: 12px 15px 12px 15px;}

.box-btn-wrap .btn:hover{color: #EC6880; background: #fff0; border-color:#EC6880 ;}  

.plans-btn{background-color: #254A5C; text-decoration: none; font-family: "Poppins", Sans-serif; font-size: 14px; font-weight: 600; line-height: 18px; color: #FFFFFF;

  border-style: solid; border-width: 1px 1px 1px 1px; border-color: #254A5C; border-radius: 8px; padding: 12px 15px 12px 15px;}

  .box-btn-wrap .plans-btn:hover{color: #254A5C; background: #fff; border-color:#254A5C ;} 

  .adult-txt{overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4;  -webkit-box-orient: vertical; min-height: 100px;}

  .membership-list h2{margin-bottom: 40px;}

.plan-title-offer-wrap{position: relative; padding-right:80px; margin-bottom: 15px;}  

.plan-title-offer-wrap .offer-details{position: absolute; padding: 10px 5px; display: flex; align-items: center; justify-content: center; right: 0; flex-wrap: wrap; top: -20px; background: url(img/offer-bg.svg) center no-repeat; width:76px; height: 105px; background-size: contain;}

.plan-title-offer-wrap .offer-details span{ display: block; font-size: 20px; line-height: 30px; font-weight: 400; text-transform: uppercase; width: 100%;}

.plan-title-offer-wrap .offer-details p{margin-bottom: 0; text-align: center; font-size: 30px; line-height: 1; color: #fff; font-weight: 700;}

/* .plan-title-offer-wrap .plan-title{max-width:275px;} */
.plan-title-offer-wrap .plan-title{max-width:100%;}

.plan-title-offer-wrap .plan-title h3{font-size:22px; color:#57819B; line-height: 33px; font-weight: 600; padding-bottom:8px; margin-bottom:0; border-bottom: 1px solid #57819B;}

.plan-title-offer-wrap .plan-title .price-div{color: #254A5C; font-size: 42px; font-weight: 700; line-height: 63px;  display: block; }

.plan-title-offer-wrap .plan-title .price-div sup{font-size: 26px; line-height: 39px; font-weight: 500; color:#254A5C; margin-right: 5px;}

.benefits-popup-btn{margin:20px 0 30px;}

.benefits-popup-btn a, .benefit-btn {background: #186598; background: linear-gradient(0deg,rgba(24, 101, 152, 1) 0%, rgba(20, 71, 130, 1) 100%);border:0 none; border-radius: 5px; color: #fff !important; font-size: 16px; line-height: 30px; text-decoration: none; display: inline-block; color: #254960; padding: 9px 63px 9px 17px; font-weight: 600; position: relative;}

.benefits-popup-btn a span{position: absolute; right: 0; top: 0; height: 100%; width:45px; border-left: 0 none; justify-content: center; align-items: center; background: #F6FAFF; display: flex;}

.btn {background:#23455C  !important; color: #fff !important; font-size: 22px; line-height: 33px; border-radius: 5px !important; padding: 14px 25px !important; border: 1px solid #23455C !important; color:#FFFFFF;}

.btn:hover{background: #fff !important; border: 1px solid #23455C !important; color:#23455C !important;} 

.btn.secondary-btn{/*color: #222222 !important; background: #F6FAFF !important; border:1px solid #8EB9D5 !important;*/ background: #186598 !important; background: linear-gradient(0deg,rgba(24, 101, 152, 1) 0%, rgba(20, 71, 130, 1) 100%) !important;border:0 none; border-radius: 5px !important; color: #fff !important; font-size: 16px; line-height: 30px; text-decoration: none; display: inline-block; color: #254960; padding: 9px 17px 9px 17px  !important; font-weight: 600; position: relative;}

.btn.secondary-btn:hover{background: #186598 !important; background: linear-gradient(0deg,rgba(24, 101, 152, 1) 0%, rgba(20, 71, 130, 1) 100%)  !important;}

.benefits-list .modal-content{padding: 0px 20px;}

.benefits-list .modal-header{border-bottom: 0 none !important; padding-bottom: 0;}

.benefits-list .modal-header .close{background: #CF1A3A !important; font-size: 42px; line-height: 42px; width: 50px; height: 50px; border: 1px solid #CF1A3A !important; color: #fff !important; position: absolute; right: 0; top: 0;}

.benefits-list .modal-header h5{font-size: 32px; line-height: 52px; color: #1E2D5F; font-weight: 600; position: relative;}

.benefits-list .modal-header h5:before{background:#CF1A3B; height: 6px; width: 100px; position: absolute; bottom: 0; left: 0; content: "";}

.benefits-list{margin: 0; padding: 0; list-style: none;}

.benefits-list li{font-size: 18px; line-height: 24px; margin-bottom: 8px; color:#424242; position: relative; padding-left: 20px;}

.benefits-list li:before{background: #6F6F6F; width: 10px; height: 10px; border-radius: 50%; position: absolute; left: 0; top: 8px; content: "";}

.work-content{box-shadow: 0px 0px 12px #00000036; margin-bottom: 30px;}

/**********************footer*******************/

#footer{padding:0;font-size:14px;margin-top:0; border-radius: 150px 150px 0 0; background: radial-gradient(circle,rgba(245, 250, 254, 1) 0%, rgba(227, 239, 255, 1) 50%, rgba(227, 239, 255, 1) 100%);}

#footer .footer-top{padding:60px 0 30px;}

.logo-wrap-footer{margin-bottom: 30px;}

.contact-list{margin: 0; padding: 0; list-style: none;}

.contact-list .iconTxt{display: flex; gap: 0 15px;}

.contact-list .icontxtin h5{font-size: 16px; line-height: 1; margin-bottom: 0;}

.contact-list .icontxtin p{font-size: 16px;}

#footer a{color: #23455C; text-decoration: none;}

.contact-list li{margin-bottom: 16px;}

#footer h3{font-size: 20px; margin-bottom: 16px; font-weight: 700;}

#footer .footer-top ul{margin: 0; padding: 0; list-style: none;}

#footer .footer-top li{list-style: none; margin-bottom: 5px; font-size: 16px;}

.bottom-footer{padding: 20px 0; border-top: 1px solid rgba(47,192,232,0.5);}

.bottom-footer p{margin-bottom: 0;}

#footer .social-icon{display:inline-block;}

#footer .social-icon ul{margin: 0; list-style: none; padding: 0; display: flex; gap: 0 10px;}

#footer .social-icon ul li{font-size: 18px;}

/***********************contact Us*************/

.contactus_main h2{font-weight: 700; margin-bottom: 30px; font-size: 40px;}

.form-group input[type="text"], .form-group input[type="tel"], .form-group input[type="email"], .form-group input[type="number"],  .form-group input[type="date"],  .form-group input[type="search"],  .form-group input[type="file"], .form-group input[type="text"], .form-group input[type="url"], .form-group select, .form-group textarea{border: 1px solid #ccc; height: 48px; padding: 10px 15px; border-radius:0; width: 100%;}

.form-group input[type="text"]:focus, .form-group input[type="tel"]:focus, .form-group input[type="email"]:focus, .form-group input[type="date"]:focus, .form-group input[type="search"]:focus, .form-group input[type="file"]:focus, .form-group input[type="number"]:focus, .form-group input[type="text"]:focus, .form-group input[type="url"]:focus, .form-group select:focus, .form-group textarea:focus{box-shadow:none; outline: 0 none;}

.form-group{margin-bottom: 20px;}

.form-group label{display: block; margin-bottom:8px; font-size: 15px; color: #555;}

.form-group textarea{height: 85px;}

.contactusright {padding: 30px; background: #23455C ; border-radius: 30px;}

.contactusright .icontxtin h5{font-weight: 700; color: #fff;}

.contactusright .icontxtin h5 i{margin-right: 10px;}

.contactusright .iconTxt {margin-bottom: 20px; display:flex;}

.contactusright .icontxtin a{color: #fff;}

.contactusright .icontxtin a:hover{color:#fff;}

.contactusright .icontxtin p{color: #fff;}

.contactusright .iconTxt .icon{margin-right: 16px;}

/*************Membership Register****************/

.card-register{background:#f2f2f2; padding: 30px 30px; max-width: 550px; border-radius: 30px 0 30px 0; margin: 0 auto; position: relative; margin-top: 30px;}

.card-register:before{background: rgba(47,192,232,0.7); position: absolute; left: 15px; top: -15px; content: ""; width: 100%; height: 100%; z-index: -1; border-radius: 30px 0 30px 0;}

.card-register h2{font-size: 30px; margin-bottom: 30px; font-weight: 700; padding-bottom:15px; border-bottom:1px solid #ccc; position: relative;}

.card-register h2:before{background: #192c88; width: 150px; height: 3px; content:""; bottom: -2px; left: 0; position: absolute;}

.error-message, .help-block.help-block-error{color:#c60000; font-size: 14px;}

.btn-acount-link-wrap{position: relative;}

.btn-acount-link-wrap .account{ margin-top: 20px;}
 
.account a{color: #23455C;}

/*****************Buy Membership Page**************/

.innerheading h2{font-weight: 40px; font-weight: 700;}

.form-section-wrap{padding-left: 50px; margin-bottom:20px; padding-bottom:20px; padding-right: 30px; position: relative;}

.form-sections-main-wrap{position: relative; margin-top: 24px;}

.form-sections-main-wrap:before{background: #ccc; position: absolute; left: 15px; top: 0; content:""; width: 1px; height: 100%;}

.form-section-wrap h3{font-size: 24px; font-weight: 700; margin-bottom: 30px; position: relative;}

.membership-plan-sidebar{position: sticky; top: 120px; left: 0; background: #e4e9f0; border-radius: 24px; padding: 30px; }

.membership-plan-sidebar:before{background: rgba(255,255,255,0.03); position: absolute; border-radius: 50%; right: -30%; top: -50%; width: 100%; height: 150%; content: "";}

.membership-plan-sidebar h3{color: #fff; text-align: left; margin-bottom: 24px; }

.form-section-wrap h3:before{width: 30px; height: 30px; left: -50px; top: 0; border-radius: 50%; background: #0047BA; content: ""; position: absolute;}

.form-section-wrap h3:after{left: -55px; top: -5px; border: 1px solid #0047BA; width: 40px; height: 40px; border-radius: 50%; position: absolute; content:""; }

.membership-plans-details{margin: 0; padding: 0; list-style: none;}

.membership-plans-details li{border-bottom: 1px dashed rgba(255, 255, 255, 0.2); padding: 8px 0; color: #fff; display: flex;}

.membership-plans-details li .list-label{flex: 0 0 100px; max-width: 100px;}

.membership-plans-details li .list-value{font-weight:700; color: #fff; position: relative; padding-left: 10px;}

.membership-plans-details li .list-value:before{content: ":"; position: absolute; left: 0; top: 0;}

.form-inner-wrap{background: #f2f2f2; padding: 30px; border-radius: 24px;}

.alert {display: none;}

.datepicker{position:relative; padding:0 !important;min-height: 48px;}

.datepicker .input-group-prepend{position: absolute; right: 0; top: 0; height: 100%; z-index: 11;}

.datepicker .input-group-prepend .input-group-text{height:48px; border-radius: 0;}

.btn i{margin-right: 8px;}

.headtitle h2{font-size: 32px; font-weight: 700; margin-bottom: 40px;}

.form-single-section h3{margin-bottom: 20px; font-weight: 700; font-size: 24px;}

.form-single-section{margin-bottom: 30px;}

.btn.back-btn{border-radius: 16px !important;}

/************************Inquiry Middle*****************/

.inquiry-modal .modal-content{padding: 0px 20px;}

.inquiry-modal .modal-header{border-bottom: 0 none !important; padding-bottom: 0;}

.inquiry-modal .modal-header{border-bottom: 0 none !important; padding-bottom: 0;}

.inquiry-modal  .modal-header .close{background: #CF1A3A !important; font-size: 42px; line-height: 42px; width: 50px; height: 50px; border: 1px solid #CF1A3A !important; color: #fff !important; position: absolute; right: 0; top: 0;}

.inquiry-modal .modal-header h5{font-size: 32px; line-height: 52px; color: #1E2D5F; font-weight: 600; position: relative;}

.inquiry-modalt .modal-header h5:before{background:#CF1A3B; height: 6px; width: 100px; position: absolute; bottom: 0; left: 0; content: "";}

/***************My Account*********************/

.box-heading-wrap .headtitle{background: #f2f2f2; padding: 20px; border-radius: 20px; margin-bottom: 20px;}

.box-heading-wrap .headtitle h2{margin-bottom: 0;}

.box-heading-wrap .profile-text{border: 1px solid #ccc; border-radius: 30px; padding: 30px;}

.box-heading-wrap .headtitle .activeBtn{background:green; color: #fff; font-size: 14px; line-height: 1; padding: 11px 15px; border-radius: 15px; margin-left: 10px;}

.box-heading-wrap .headtitle .editBtn{border-radius: 30px !important;  padding: 8px 17px !important;}

.box-heading-wrap .headtitle .editBtn i{margin-right: 4px !important;}

.box-heading-wrap .profile-text h3{font-size: 24px; font-weight: 700; padding-bottom: 10px; margin-bottom: 20px; border-bottom: 1px solid #ccc;}

.martop-seprator{margin-top: 50px !important;}

.label-info-val{margin-bottom: 20px !important;}

.label-info-val p{margin-bottom: 4px;}

.label-info-val h5{font-size: 18px; margin-bottom: 0;}

.profile-sidebar{background:#f2f2f2; position:sticky; top:120px; left: 0; border-radius: 20px; padding: 0 0 20px; overflow: hidden;}

.profile-sidebar h3{background:#23455C; text-align: center; color: #fff; padding:10px 20px;}

.profile-sidebar .listBox {padding: 20px; margin-bottom: 20px; background: rgba(255,255,255,0.75); border-radius: 15px;}

.profile-sidebar #data-container{padding: 15px 20px; box-shadow: 0 0 10px rgba(0,0,0,0); transition: all 0.3s ease-out;}

.profile-sidebar #data-container .row >div:last-child .listBox{margin-bottom: 0;}

.profile-sidebar .listBox h4{color: #254A5C; margin-bottom: 4px;}

.profile-sidebar .listBox p{color: #23455C; margin-bottom: 0;}

.profile-sidebar a{text-decoration: none;}

.profile-sidebar .active{background:green; color: #fff; font-size: 14px; line-height: 1; padding: 4px 8px; border-radius: 15px; margin-right: 10px;}

.profile-sidebar .listBox:hover{box-shadow: 0 0 10px rgba(0,0,0,0.15);}

.btn-submit.arrow-btn { background-color: #F84977; padding:9px 35px 9px 35px;color:#fff;border-radius: 5px;text-decoration: none; line-height: 30px; font-weight: 600;flex:1;text-align: center;}

.benefit-btn { padding:9px 35px; flex:1;text-align: center; }

.btn.btn-loader i, .btn.btn-primary span, .btnSubmit span, .btnSubmit.btn-loader i { display: block;}

.btn.btn-loader span, .btn-primary i, .btnSubmit i,.btnSubmit.btn-loader span{ display: none;}



span.original_amount { text-decoration: line-through;}

.thank-you-wrap img{margin-bottom:25px;}

.price-div .original_amount{color:#999; margin-right:10px;}

.box-btn-wrap > a{transition:all 0.3s ease-out;}

.box-btn-wrap > a:hover{box-shadow:0 0 20px rgba(0,0,0,0.2); transform:translatey(-2px);}

.step-form-btn-wrap{padding-left: 50px; margin-bottom: 0; padding-bottom: 0;  padding-right: 30px;  position: relative;}

.form-inner-wrap{position:relative; overflow:hidden;}

.form-inner-wrap .mem-icons{position:absolute; right:0; top:0;}

.form-inner-wrap .mem-icons .remove-member{background: #f00; color: #fff; padding: 9px 15px 10px 15px;  line-height: 1;}

.form-inner-wrap .mem-icons .remove-member:hover{background:#c10000;}



.table-condensed>tbody>tr>td, .table-condensed>thead>tr>th {

    padding: 7px;

}



.datepicker table tr td.active.active, .datepicker table tr td.active.disabled.active, .datepicker table tr td.active.disabled:active, .datepicker table tr td.active.disabled:hover.active, .datepicker table tr td.active.disabled:hover:active, .datepicker table tr td.active:active, .datepicker table tr td.active:hover.active, .datepicker table tr td.active:hover:active {

    background-color: #04c;

}



.datepicker {

    color: #74788d;

}





.custom-login-container {

    background-color: #f4f7f9;

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 60px 20px;

    min-height: 70vh;

}



.login-card {

    background: #ffffff;

    padding: 40px;

    border-top: 5px solid #0056b3; /* Professional Blue */

    box-shadow: 0 10px 25px rgba(0,0,0,0.1);

    border-radius: 4px;

    width: 100%;

    max-width: 400px;

}



.login-brand h2 {

    color: #333;

    margin-bottom: 5px;

    text-align: center;

}



.login-brand p {

    color: #666;

    font-size: 0.9rem;

    text-align: center;

    margin-bottom: 30px;

}



/* Styling the WordPress-generated form */

#loginform-custom p {

    margin-bottom: 15px;

}



#loginform-custom input[type="text"],

#loginform-custom input[type="password"] {

    width: 100%;

    padding: 12px;

    border: 1px solid #ddd;

    border-radius: 4px;

    margin-top: 5px;

}



#loginform-custom .login-submit input {

    width: 100%;

    background-color: #0056b3;

    color: white;

    border: none;

    padding: 12px;

    border-radius: 4px;

    font-weight: bold;

    cursor: pointer;

    transition: background 0.3s;

}



#loginform-custom .login-submit input:hover {

    background-color: #003d7a;

}



.login-footer {

    display: flex;

    justify-content: space-between;

    margin-top: 20px;

    font-size: 0.85rem;

}



.login-footer a {

    color: #0056b3;

    text-decoration: none;

}


  /* ── Card wrapper ─────────────────────────────────── */
    .member-card {
        background: #f2f2f2;
        border: 1px solid #e4e9f0;
        border-radius: 12px;
        padding: 20px 24px;
        margin-bottom: 16px;
        position: relative;
        transition: box-shadow 0.2s ease;
    }

    .member-card:hover {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.09);
    }

    /* ── Card header row ──────────────────────────────── */
    .member-card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 18px;
        padding-bottom: 14px;
        border-bottom: 1px solid #f0f3f8;
    }

    .member-card-avatar {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: linear-gradient(135deg, #3b6fd4, #1a4db8);
        color: #fff;
        font-size: 16px;
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        letter-spacing: 0.5px;
    }

    .member-card-title {
        font-size: 15px;
        font-weight: 600;
        color: #1a2433;
        margin-left: 12px;
        flex: 1;
    }

    .member-card-status {
        font-size: 11px;
        font-weight: 600;
        padding: 3px 10px;
        border-radius: 20px;
        background: #e6f4ea;
        color: #1e7e34;
        letter-spacing: 0.04em;
        margin-left: 10px;
    }

    /* ── Action buttons (edit / save / cancel / remove) ── */
    .mem-action-bar {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-left: 8px;
    }

    .mem-icon-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 8px;
        border: 1px solid #dde3ed;
        background: #f7f9fc;
        color: #5a6a85;
        cursor: pointer;
        text-decoration: none;
        transition: all 0.18s ease;
        font-size: 14px;
    }

    .mem-icon-btn:hover {
        background: #eef2fb;
        border-color: #b0bedd;
        color: #1a4db8;
    }

    .mem-icon-btn.save-btn {
        background: #e8f5e9;
        border-color: #a5d6a7;
        color: #2e7d32;
    }

    .mem-icon-btn.save-btn:hover {
        background: #2e7d32;
        color: #fff;
    }

    .mem-icon-btn.cancel-btn {
        background: #fff8e1;
        border-color: #ffe082;
        color: #f57f17;
    }

    .mem-icon-btn.cancel-btn:hover {
        background: #f57f17;
        color: #fff;
    }

    .mem-icon-btn.remove-btn {
        background: #fdecea;
        border-color: #f5a9a3;
        color: #c62828;
    }

    .mem-icon-btn.remove-btn:hover {
        background: #c62828;
        color: #fff;
        border-color: #c62828;
    }

    .hidden {
        display: none !important;
    }

    /* ── Form fields ─────────────────────────────────── */
    .member-card .form-group label {
        font-size: 12px;
        font-weight: 600;
        color: #6b7a99;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        margin-bottom: 5px;
        display: block;
    }

    .member-card .form-control {
        border-radius: 8px;
        border: 1px solid #dde3ed;
        font-size: 13px;
        color: #1a2433;
        background: #f7f9fc;
        padding: 8px 12px;
        height: auto;
        transition: border-color 0.15s, background 0.15s;
    }

    .member-card .form-control:not([disabled]):focus {
        border-color: #3b6fd4;
        background: #fff;
        box-shadow: 0 0 0 3px rgba(59, 111, 212, 0.12);
        outline: none;
    }

    .member-card .form-control[disabled] {
        background: #f7f9fc;
        color: #3a4a65;
        cursor: default;
        border-color: #e8edf5;
    }

    /* ── Divider between cards ───────────────────────── */
    .members-list-divider {
        border: none;
        border-top: 1px dashed #dde3ed;
        margin: 4px 0 20px;
    }

    /* ── Add New button ──────────────────────────────── */
    .btn.add-connection {
        border-radius: 8px;
        font-size: 13px;
        font-weight: 600;
        padding: 10px 20px;
        background: linear-gradient(135deg, #3b6fd4, #1a4db8);
        border: none;
        color: #fff;
        letter-spacing: 0.02em;
        transition: opacity 0.18s;
    }

    .btn.add-connection:hover {
        opacity: 0.88;
    }

    /* ── Section heading ─────────────────────────────── */
    .tabs-heading {
        font-size: 17px;
        font-weight: 700;
        color: #1a2433 !important;
        margin-bottom: 18px;
        padding-bottom: 10px;
        border-bottom: 2px solid #3b6fd4;
        display: inline-block;
    }

    /* ── Sidebar ─────────────────────────────────────── */
   /* .membership-plan-sidebar {
        background: #e4e9f0;
        border: 1px solid #e4e9f0;
        border-radius: 12px;
        padding: 22px 24px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }*/

    .membership-plans-details {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .membership-plans-details li {
        display: flex;
        align-items: center;
        padding: 11px 0;
        border-bottom: 1px solid #f0f3f8;
        font-size: 13px;
    }

    .membership-plans-details li:last-child {
        border-bottom: none;
    }

    .list-label {
        color: #6b7a99;
        font-weight: 600;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .list-value {
        color: #1a2433 !important;
        font-weight: 500;
    }

    /* ── Cancel membership button ────────────────────── */
    .cancel-membership-button {
        background: #c62828;
        border: none;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 600;
        padding: 9px 20px;
        color: #fff;
        transition: opacity 0.18s;
    }

    .cancel-membership-button:hover {
        opacity: 0.85;
    }

    .cancelled-membership-button {
        background: #9e9e9e;
        border: none;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 600;
        padding: 9px 20px;
        color: #fff;
        cursor: not-allowed;
    }

    /* ── Remove confirm overlay ──────────────────────── */
    .remove-confirm-overlay {
        display: none;
        position: absolute;
        inset: 0;
        background: rgba(255, 255, 255, 0.95);
        border-radius: 12px;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 14px;
        z-index: 10;
        text-align: center;
        padding: 20px;
    }

    .remove-confirm-overlay.active {
        display: flex;
    }

    .remove-confirm-overlay p {
        font-size: 14px;
        font-weight: 600;
        color: #c62828;
        margin: 0;
    }

    .remove-confirm-overlay small {
        font-size: 12px;
        color: #6b7a99;
        display: block;
        margin-top: -8px;
    }

    .confirm-remove-yes {
        background: #c62828;
        color: #fff;
        border: none;
        border-radius: 8px;
        padding: 8px 22px;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        transition: opacity 0.18s;
    }

    .confirm-remove-yes:hover {
        opacity: 0.85;
    }

    .confirm-remove-no {
        background: #f0f3f8;
        color: #3a4a65;
        border: none;
        border-radius: 8px;
        padding: 8px 22px;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        transition: background 0.18s;
    }

    .confirm-remove-no:hover {
        background: #dde3ed;
    }

    .confirm-btns {
        display: flex;
        gap: 10px;
    }
 
.pause-membership-button {
    background: #3b6fd4;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    padding: 9px 20px;
    color: #fff;
    transition: opacity 0.18s;
}
.ganeral-text.membershiptxt { position:relative; }
.benefits-popup-btn{min-height:48px;}
.div_plan_details{padding-bottom:40px; margin-bottom:40px; border-bottom:1px solid #ccc;}
.div_plan_details .banner_image{border-radius:24px; margin-bottom:40px; overflow:hidden; padding-top:30%; position:relative;}
.div_plan_details .banner_image img{object-fit:cover; position:absolute; left:0; top:0; object-position:center; width:100%;}
.div_plan_details .sidebar_image{padding-left:25px;}
.div_plan_details .sidebar_image img{width:100%; border-radius:16px;}

  /* ═══════════════════════════════════════════════════════════
   My Account — Combined Page Styles
   ═══════════════════════════════════════════════════════════ */

    /* ── Page wrapper ───────────────────────────────────────── */
    .account-page {
        padding: 32px 0 60px;
        background: #f4f6fb;
        min-height: 100vh;
    }

    /* ── Left sidebar nav ───────────────────────────────────── */
    .account-sidebar {
        background: #fff;
        border: 1px solid #e4e9f0;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        position: sticky;
        top: 24px;
    }

    .account-sidebar-profile {
        padding: 24px 20px 18px;
        background: linear-gradient(135deg, #3b6fd4 0%, #1a4db8 100%);
        text-align: center;
    }

    .account-sidebar-avatar {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.25);
        color: #fff;
        font-size: 24px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 12px;
        letter-spacing: 1px;
        border: 2px solid rgba(255, 255, 255, 0.4);
    }

    .account-sidebar-name {
        font-size: 14px;
        font-weight: 700;
        color: #fff;
        margin-bottom: 3px;
    }

    .account-sidebar-email {
        font-size: 11px;
        color: rgba(255, 255, 255, 0.7);
        word-break: break-all;
    }

    .account-sidebar-status {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 10px;
        font-weight: 700;
        padding: 3px 10px;
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.2);
        color: #fff;
        margin-top: 8px;
        letter-spacing: 0.06em;
    }

    .account-sidebar-status::before {
        content: '';
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #69f0ae;
        display: inline-block;
    }

    /* Tab nav links */
    .account-nav {
        padding: 8px 0;
    }

    .account-nav-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 20px;
        font-size: 13px;
        font-weight: 500;
        color: #5a6a85;
        cursor: pointer;
        border-left: 3px solid transparent;
        transition: all 0.18s;
        text-decoration: none;
        user-select: none;
    }

    .account-nav-item i {
        width: 16px;
        text-align: center;
        font-size: 14px;
    }

    .account-nav-item:hover {
        background: #f4f6fb;
        color: #1a2433;
    }

    .account-nav-item.active {
        background: #eef3fc;
        color: #1a4db8;
        font-weight: 700;
        border-left-color: #3b6fd4;
    }

    .account-nav-divider {
        border: none;
        border-top: 1px solid #f0f3f8;
        margin: 4px 0;
    }

    /* Edit profile link at bottom */
    .account-sidebar-footer {
        padding: 14px 20px;
        border-top: 1px solid #f0f3f8;
    }

    .btn-edit-profile {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        width: 100%;
        padding: 9px;
        border-radius: 8px;
        border: 1px solid #dde3ed;
        background: #f7f9fc;
        color: #5a6a85;
        font-size: 13px;
        font-weight: 600;
        text-decoration: none;
        transition: all 0.18s;
    }

    .btn-edit-profile:hover {
        border-color: #3b6fd4;
        color: #1a4db8;
        background: #eef3fc;
    }

    /* ── Tab content panels ─────────────────────────────────── */
    .account-tab-panel {
        display: none;
    }

    .account-tab-panel.active {
        display: block;
    }

    /* ── My Info — info display card ───────────────────────── */
    .info-display-card {
        background: #fff;
        border: 1px solid #e4e9f0;
        border-radius: 12px;
        margin-bottom: 20px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    .info-display-card-header {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 15px 22px;
        background: #f7f9fc;
        border-bottom: 1px solid #edf0f7;
        border-top: 3px solid #3b6fd4;
        border-radius: 12px 12px 0 0;
    }

    .info-display-card-header.green {
        border-top-color: #2e7d32;
    }

    .info-display-card-icon {
        width: 34px;
        height: 34px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        flex-shrink: 0;
        background: #e3f0ff;
        color: #1a4db8;
    }

    .info-display-card-header.green .info-display-card-icon {
        background: #e8f5e9;
        color: #2e7d32;
    }

    .info-display-card-title {
        font-size: 14px;
        font-weight: 700;
        color: #1a2433;
    }

    .info-display-card-subtitle {
        font-size: 11px;
        color: #8a99b5;
        margin-top: 1px;
    }

    .info-display-card-body {
        padding: 20px 22px;
    }

    /* Label / value pairs */
    .info-field-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 18px 24px;
    }

    @media (max-width: 768px) {
        .info-field-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 480px) {
        .info-field-grid {
            grid-template-columns: 1fr;
        }
    }

    .info-field {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .info-field-label {
        font-size: 10px;
        font-weight: 700;
        color: #8a99b5;
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }

    .info-field-value {
        font-size: 14px;
        font-weight: 500;
        color: #1a2433;
        word-break: break-word;
    }

    .info-field-value.empty {
        color: #c0ccd8;
        font-style: italic;
        font-size: 13px;
    }

    /* Page heading row */
    .account-page-heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 22px;
        flex-wrap: wrap;
        gap: 10px;
    }

    .account-page-heading h2 {
        font-size: 20px;
        font-weight: 700;
        color: #1a2433;
        margin: 0;
        letter-spacing: -0.02em;
    }

    /* ── Membership Info — existing card styles ─────────────── */
    .member-card {
        background: #ffffff;
        border: 1px solid #e4e9f0;
        border-radius: 12px;
        padding: 20px 24px;
        margin-bottom: 16px;
        position: relative;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        transition: box-shadow 0.2s ease;
    }

    .member-card:hover {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.09);
    }

    .member-card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 18px;
        padding-bottom: 14px;
        border-bottom: 1px solid #f0f3f8;
    }

    .member-card-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: linear-gradient(135deg, #3b6fd4, #1a4db8);
        color: #fff;
        font-size: 15px;
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        letter-spacing: 0.5px;
        box-shadow: 0 2px 8px rgba(59, 111, 212, 0.25);
    }

    .member-card-title {
        font-size: 14px;
        font-weight: 600;
        color: #1a2433;
        margin-left: 12px;
        flex: 1;
    }

    .member-card-status {
        font-size: 10px;
        font-weight: 600;
        padding: 3px 10px;
        border-radius: 20px;
        background: #e6f4ea;
        color: #1e7e34;
        letter-spacing: 0.04em;
        margin-left: 10px;
    }

    .mem-action-bar {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-left: 12px;
        flex-shrink: 0;
    }

    .mem-icon-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: 8px;
        border: 1px solid #dde3ed;
        background: #f7f9fc;
        color: #5a6a85;
        cursor: pointer;
        text-decoration: none;
        transition: all 0.18s;
        font-size: 13px;
    }

    .mem-icon-btn:hover {
        background: #eef2fb;
        border-color: #b0bedd;
        color: #1a4db8;
    }

    .mem-icon-btn.save-btn {
        background: #e8f5e9;
        border-color: #a5d6a7;
        color: #2e7d32;
    }

    .mem-icon-btn.save-btn:hover {
        background: #2e7d32;
        color: #fff;
    }

    .mem-icon-btn.cancel-btn {
        background: #fff8e1;
        border-color: #ffe082;
        color: #f57f17;
    }

    .mem-icon-btn.cancel-btn:hover {
        background: #f57f17;
        color: #fff;
    }

    .mem-icon-btn.remove-btn {
        background: #fdecea;
        border-color: #f5a9a3;
        color: #c62828;
    }

    .mem-icon-btn.remove-btn:hover {
        background: #c62828;
        color: #fff;
        border-color: #c62828;
    }

    .hidden {
        display: none !important;
    }

    /* form fields inside member-card */
    .member-card .form-group label {
        font-size: 11px;
        font-weight: 600;
        color: #6b7a99;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        margin-bottom: 5px;
        display: block;
    }

    .member-card .form-control {
        border-radius: 8px;
        border: 1px solid #dde3ed;
        font-size: 13px;
        color: #1a2433;
        background: #fff;
        padding: 8px 12px;
        height: auto;
        transition: border-color 0.15s, box-shadow 0.15s;
    }

    .member-card .form-control:focus {
        border-color: #3b6fd4;
        box-shadow: 0 0 0 3px rgba(59, 111, 212, 0.12);
        outline: none;
    }

    .member-card .form-control[disabled] {
        background: #f4f6fb;
        color: #3a4a65;
        cursor: default;
        border-color: #e8edf5;
    }

    .member-card .input-group .input-group-text {
        border-radius: 8px 0 0 8px;
        border: 1px solid #dde3ed;
        border-right: none;
        background: #f4f6fb;
    }

    .member-card .input-group .form-control {
        border-radius: 0 8px 8px 0;
    }

    /* Remove confirm overlay */
    .remove-confirm-overlay {
        display: none;
        position: absolute;
        inset: 0;
        background: rgba(255, 255, 255, 0.96);
        border-radius: 12px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 12px;
        z-index: 10;
        text-align: center;
        padding: 20px;
    }

    .remove-confirm-overlay.active {
        display: flex;
    }

    .remove-confirm-overlay p {
        font-size: 14px;
        font-weight: 600;
        color: #c62828;
        margin: 0;
    }

    .remove-confirm-overlay small {
        font-size: 12px;
        color: #6b7a99;
        display: block;
        margin-top: -6px;
    }

    .confirm-btns {
        display: flex;
        gap: 10px;
    }

    .confirm-remove-yes {
        background: #c62828;
        color: #fff;
        border: none;
        border-radius: 8px;
        padding: 8px 22px;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        transition: opacity 0.18s;
    }

    .confirm-remove-yes:hover {
        opacity: 0.85;
    }

    .confirm-remove-no {
        background: #f0f3f8;
        color: #3a4a65;
        border: none;
        border-radius: 8px;
        padding: 8px 22px;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
    }

    .confirm-remove-no:hover {
        background: #dde3ed;
    }

    /* Membership plan sidebar card */
    .plan-sidebar-card {
        background: #fff;
        border: 1px solid #e4e9f0;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        border-top: 3px solid #3b6fd4;
        margin-bottom: 20px;
    }

    .plan-sidebar-header {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 15px 20px;
        background: #f7f9fc;
        border-bottom: 1px solid #edf0f7;
    }

    .plan-sidebar-icon {
        width: 34px;
        height: 34px;
        border-radius: 8px;
        background: #e3f0ff;
        color: #1a4db8;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        flex-shrink: 0;
    }

    .plan-sidebar-heading {
        font-size: 14px;
        font-weight: 700;
        color: #1a2433;
    }

    .plan-sidebar-body {
        padding: 14px 20px;
    }

    .plan-detail-row {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 10px 0;
        border-bottom: 1px solid #f0f3f8;
        gap: 10px;
    }

    .plan-detail-row:last-of-type {
        border-bottom: none;
    }

    .plan-detail-label {
        font-size: 11px;
        font-weight: 700;
        color: #6b7a99;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        flex-shrink: 0;
    }

    .plan-detail-value {
        font-size: 13px;
        font-weight: 500;
        color: #1a2433;
        text-align: right;
    }

    .plan-status-pill {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: 10px;
        font-weight: 600;
        padding: 3px 10px;
        border-radius: 20px;
        letter-spacing: 0.04em;
    }

    .plan-status-pill::before {
        content: '';
        width: 6px;
        height: 6px;
        border-radius: 50%;
        display: inline-block;
    }

    .pill-active {
        background: #e6f4ea;
        color: #1e7e34;
    }

    .pill-active::before {
        background: #1e7e34;
    }

    .pill-draft {
        background: #f3f0ff;
        color: #5c35cc;
    }

    .pill-draft::before {
        background: #5c35cc;
    }

    .pill-pending {
        background: #fff8e1;
        color: #f57f17;
    }

    .pill-pending::before {
        background: #f57f17;
    }

    .pill-terminated {
        background: #fdecea;
        color: #c62828;
    }

    .pill-terminated::before {
        background: #c62828;
    }

    .plan-price-highlight {
        font-size: 18px;
        font-weight: 700;
        color: #1a2433;
        letter-spacing: -0.02em;
    }

    .plan-sidebar-footer {
        padding: 12px 20px;
        background: #f7f9fc;
        border-top: 1px solid #edf0f7;
        display: flex;
        justify-content: space-between;
        gap: 8px;
        flex-wrap: wrap;
    }

    .btn-cancel-plan {
        border: none;
        border-radius: 8px;
        font-size: 12px;
        font-weight: 600;
        padding: 8px 16px;
        background: #fdecea;
        color: #c62828;
        cursor: pointer;
        transition: background 0.18s, color 0.18s;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .btn-cancel-plan:hover {
        background: #c62828;
        color: #fff;
    }

    .btn-pause-plan {
        border: none;
        border-radius: 8px;
        font-size: 12px;
        font-weight: 600;
        padding: 8px 16px;
        background: #fff8e1;
        color: #f57f17;
        cursor: pointer;
        transition: background 0.18s, color 0.18s;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .btn-pause-plan:hover {
        background: #f57f17;
        color: #fff;
    }

    .btn-cancelled-plan,
    .btn-paused-plan {
        border: none;
        border-radius: 8px;
        font-size: 12px;
        font-weight: 600;
        padding: 8px 16px;
        background: #f0f3f8;
        color: #9aabb8;
        cursor: not-allowed;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    /* Add member button */
    .btn-add-member {
        border-radius: 8px;
        font-size: 13px;
        font-weight: 600;
        padding: 10px 20px;
        background: linear-gradient(135deg, #3b6fd4, #1a4db8);
        border: none;
        color: #fff;
        letter-spacing: 0.02em;
        transition: opacity 0.18s;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        box-shadow: 0 2px 8px rgba(59, 111, 212, 0.25);
    }

    .btn-add-member:hover {
        opacity: 0.88;
        color: #fff;
    }

    /* Members section header */
    .members-section-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16px;
        flex-wrap: wrap;
        gap: 10px;
    }

    .members-section-title {
        font-size: 15px;
        font-weight: 700;
        color: #1a2433;
    }

    .members-section-note {
        font-size: 12px;
        color: #8a99b5;
        margin-bottom: 18px;
    }


    /* ── Password info icon ──────────────────────────────────── */
.pwd-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: 6px;
    color: #3b6fd4;
    cursor: pointer;
    font-size: 15px;
    vertical-align: middle;
    position: relative;
    top: -1px;
    transition: color 0.15s;
}
.pwd-info-icon:hover,
.pwd-info-icon:focus { color: #1a4db8; outline: none; }

/* ── Anchor wrapper — popover positions relative to this ─── */
.pwd-field-wrap {
    position: relative;
}

/* ── Password input wrapper (for show/hide toggle) ───────── */
.pwd-input-wrap {
    position: relative;
}
.pwd-input-wrap .form-control {
    padding-right: 42px;
}
.pwd-toggle-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #8a99b5;
    cursor: pointer;
    padding: 4px;
    font-size: 14px;
    line-height: 1;
    transition: color 0.15s;
}
.pwd-toggle-btn:hover { color: #3b6fd4; }

/* ── Rules popover ───────────────────────────────────────── */
.pwd-rules-popover {
    display: none;
    position: absolute;
    top: 100%;        /* drops right below .pwd-field-wrap */
    left: 0;
    z-index: 1050;
    background: #fff;
    border: 1px solid #e4e9f0;
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.13), 0 2px 8px rgba(0,0,0,0.06);
    min-width: 280px;
    max-width: 340px;
    margin-top: 4px;
    overflow: hidden;
    animation: popoverIn 0.18s ease;
}
.pwd-rules-popover.show { display: block; }

@keyframes popoverIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.pwd-rules-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    font-size: 12px;
    font-weight: 700;
    color: #1a2433;
    letter-spacing: 0.04em;
    background: #f0f4fb;
    border-bottom: 1px solid #e4e9f0;
}
.pwd-rules-header i { color: #3b6fd4; font-size: 14px; }

.pwd-rules-list {
    list-style: none;
    margin: 0;
    padding: 10px 16px;
}
.pwd-rule {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: #5a6a85;
    padding: 5px 0;
    transition: color 0.2s;
}
.pwd-rule-icon { width: 16px; flex-shrink: 0; font-size: 8px; color: #c0ccd8; transition: color 0.2s; }
.pwd-rule.rule-pass { color: #1e7e34; }
.pwd-rule.rule-pass .pwd-rule-icon { color: #1e7e34; font-size: 12px; }
.pwd-rule.rule-pass .pwd-rule-icon i::before { content: "\f058"; }
.pwd-rule.rule-fail { color: #c62828; }
.pwd-rule.rule-fail .pwd-rule-icon { color: #c62828; }

/* ── Strength bar ────────────────────────────────────────── */
.pwd-strength-wrap {
    padding: 10px 16px 14px;
    border-top: 1px solid #f0f3f8;
}
.pwd-strength-label {
    font-size: 11px;
    font-weight: 600;
    color: #6b7a99;
    margin-bottom: 6px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.pwd-strength-label span { font-weight: 700; color: #1a2433; }
.pwd-strength-bar {
    height: 5px;
    background: #edf0f7;
    border-radius: 10px;
    overflow: hidden;
}
.pwd-strength-fill {
    height: 100%;
    width: 0%;
    border-radius: 10px;
    transition: width 0.3s ease, background 0.3s ease;
}
.strength-weak    { width: 25%; background: #c62828; }
.strength-fair    { width: 50%; background: #f57f17; }
.strength-good    { width: 75%; background: #1976d2; }
.strength-strong  { width: 100%; background: #1e7e34; }




/* ════════ Membership accordion rows ════════ */
.ms-rows { margin-top: 4px; }

.ms-row {
  border: 1px solid #e7ecf3;
  border-radius: 12px;
  margin-bottom: 14px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(26,36,51,.04);
}

.ms-row-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
}

.ms-toggle { cursor: pointer; color: #8a99b5; width: 16px; text-align: center; flex-shrink: 0; }
.ms-chevron { transition: transform .2s ease; }
.ms-chevron.open { transform: rotate(90deg); }

.ms-row-icon {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  background: #eef3fc; color: #3b6fd4;
  display: flex; align-items: center; justify-content: center; font-size: 17px;
}

.ms-row-main { flex: 1; min-width: 0; }
.ms-row-name { font-weight: 700; font-size: 15px; color: #1a2433; }
.ms-row-meta { font-size: 12px; color: #6b7a99; margin-top: 2px; }

.ms-row-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* ── Status pills (extends your existing plan-status-pill) ── */
.plan-status-pill { font-size: 11px; font-weight: 700; padding: 4px 11px; border-radius: 20px; white-space: nowrap; }
.pill-active     { background: #e6f4ea; color: #1e7e34; }
.pill-terminated { background: #fdecea; color: #c62828; }
.pill-paused     { background: #e7f0ff; color: #1565c0; }
.pill-draft      { background: #eef0f4; color: #5a6478; }
.pill-pending    { background: #fff3cd; color: #856404; }
.pill-hold       { background: #fde7d6; color: #b35309; }

/* ── Header action buttons (reuse your btn-cancel-plan / btn-pause-plan look) ── */
.btn-cancel-plan, .btn-pause-plan, .btn-cancelled-plan, .btn-paused-plan {
  border: none; border-radius: 8px; padding: 8px 14px;
  font-size: 12px; font-weight: 700; cursor: pointer;
}
.btn-cancel-plan   { background: #fdecea; color: #c62828; }
.btn-pause-plan    { background: #e7f0ff; color: #1565c0; }
.btn-cancelled-plan, .btn-paused-plan { background: #eef0f4; color: #8a93a6; cursor: default; }

/* ── Expandable body ── */
.ms-row-body {
  display: none;
  border-top: 1px solid #eef1f6;
  padding: 16px 18px 18px;
  background: #fafbfd;
}

.ms-members-head {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;
}
.ms-members-title { font-size: 12px; font-weight: 700; color: #6b7a99; text-transform: uppercase; letter-spacing: .06em; }

.btn-add-member {
  background: #3b6fd4; color: #fff; border: none; border-radius: 8px;
  padding: 7px 14px; font-size: 12px; font-weight: 700; cursor: pointer;
}

.ms-member {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid #eef1f6; border-radius: 10px;
  padding: 10px 12px; margin-bottom: 8px;
}
.ms-member-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: #1a2433; color: #fff; font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ms-member-info { flex: 1; min-width: 0; }
.ms-member-name { font-weight: 600; font-size: 14px; color: #1a2433; }
.ms-member-sub  { font-size: 12px; color: #6b7a99; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-member-del  {
  background: #fdecea; color: #c62828; border: none;
  width: 34px; height: 34px; border-radius: 8px; cursor: pointer; flex-shrink: 0;
}
.ms-members-empty { font-size: 13px; color: #8a99b5; text-align: center; padding: 14px; }

@media (max-width: 640px) {
  .ms-row-head { flex-wrap: wrap; }
  .ms-row-actions { width: 100%; justify-content: flex-end; }
}



/* ═══════════════════════════════════════════════════════
   Member Card — matches Membership_Info_3.php design
   ═══════════════════════════════════════════════════════ */

    /* ── Card wrapper ─────────────────────────────── */
    .member-card {
        background: #ffffff;
        border: 1px solid #e4e9f0;
        border-radius: 12px;
        padding: 20px 24px;
        margin-bottom: 16px;
        position: relative;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        transition: box-shadow 0.2s ease;
    }

    .member-card:hover {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.09);
    }

    /* ── Card header ──────────────────────────────── */
    .member-card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 18px;
        padding-bottom: 14px;
        border-bottom: 1px solid #f0f3f8;
    }

    .member-card-avatar {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: linear-gradient(135deg, #3b6fd4, #1a4db8);
        color: #fff;
        font-size: 16px;
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        letter-spacing: 0.5px;
        box-shadow: 0 2px 8px rgba(59, 111, 212, 0.25);
    }

    .member-card-avatar.avatar-self {
        background: linear-gradient(135deg, #2e7d32, #1b5e20);
        box-shadow: 0 2px 8px rgba(46, 125, 50, 0.25);
    }

    .member-card-title {
        font-size: 15px;
        font-weight: 600;
        color: #1a2433;
        margin-left: 12px;
        flex: 1;
    }

    .member-card-status {
        font-size: 11px;
        font-weight: 600;
        padding: 3px 10px;
        border-radius: 20px;
        background: #e6f4ea;
        color: #1e7e34;
        letter-spacing: 0.04em;
        margin-left: 10px;
        white-space: nowrap;
    }

    .member-card-status.status-self {
        background: #e3f2fd;
        color: #1565c0;
    }

    .member-card-status.status-new {
        background: #fff8e1;
        color: #f57f17;
    }

    /* ── Action icon buttons ──────────────────────── */
    .mem-action-bar {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-left: 12px;
        flex-shrink: 0;
    }

    .mem-icon-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 8px;
        border: 1px solid #dde3ed;
        background: #f7f9fc;
        color: #5a6a85;
        cursor: pointer;
        text-decoration: none;
        transition: all 0.18s ease;
        font-size: 14px;
    }

    .mem-icon-btn:hover {
        background: #eef2fb;
        border-color: #b0bedd;
        color: #1a4db8;
    }

    .mem-icon-btn.remove-btn {
        background: #fdecea;
        border-color: #f5a9a3;
        color: #c62828;
    }

    .mem-icon-btn.remove-btn:hover {
        background: #c62828;
        color: #fff;
        border-color: #c62828;
    }

    /* ── Form fields inside card ──────────────────── */
    .member-card .form-group label {
        font-size: 12px;
        font-weight: 600;
        color: #6b7a99;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        margin-bottom: 5px;
        display: block;
    }

    .member-card .form-control {
        border-radius: 8px;
        border: 1px solid #dde3ed;
        font-size: 13px;
        color: #1a2433;
        background: #fff;
        padding: 8px 12px;
        height: auto;
        transition: border-color 0.15s, box-shadow 0.15s;
    }

    .member-card .form-control:focus {
        border-color: #3b6fd4;
        box-shadow: 0 0 0 3px rgba(59, 111, 212, 0.12);
        outline: none;
    }

    .member-card .form-control[readonly],
    .member-card .form-control[disabled] {
        background: #f4f6fb;
        color: #3a4a65;
        cursor: default;
        border-color: #e8edf5;
    }

    .member-card .input-group .input-group-text {
        border-radius: 8px 0 0 8px;
        border: 1px solid #dde3ed;
        border-right: none;
        background: #f4f6fb;
    }

    .member-card .input-group .form-control {
        border-radius: 0 8px 8px 0;
    }

    /* ── Info Card (Member Details / Address Details) ─ */
    /* Same card shell as .member-card but header has     */
    /* a section icon + label instead of an avatar        */
    .info-card {
        background: #ffffff;
        border: 1px solid #e4e9f0;
        border-radius: 12px;
        padding: 0;
        margin-bottom: 20px;
        position: relative;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        transition: box-shadow 0.2s ease;
        overflow: hidden;
    }

    .info-card:hover {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.09);
    }

    /* Coloured top-border accent stripe */
    .info-card-member {
        border-top: 3px solid #3b6fd4;
    }

    .info-card-address {
        border-top: 3px solid #2e7d32;
    }

    /* Header bar */
    .info-card-header {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 16px 24px;
        background: #f7f9fc;
        border-bottom: 1px solid #edf0f7;
    }

    .info-card-icon {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 15px;
        flex-shrink: 0;
    }

    .info-card-member .info-card-icon {
        background: #e3f0ff;
        color: #1a4db8;
    }

    .info-card-address .info-card-icon {
        background: #e8f5e9;
        color: #2e7d32;
    }

    .info-card-heading {
        font-size: 14px;
        font-weight: 700;
        color: #1a2433;
        letter-spacing: -0.01em;
        flex: 1;
    }

    .info-card-subheading {
        font-size: 11px;
        color: #8a99b5;
        margin-top: 1px;
    }

    /* Body padding */
    .info-card-body {
        padding: 20px 24px 22px;
    }

    /* Field labels inside info-card */
    .info-card-body .form-group label {
        font-size: 11px;
        font-weight: 600;
        color: #6b7a99;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        margin-bottom: 5px;
        display: block;
    }

    .info-card-body .form-control {
        border-radius: 8px;
        border: 1px solid #dde3ed;
        font-size: 13px;
        color: #1a2433;
        background: #fff;
        padding: 8px 12px;
        height: auto;
        transition: border-color 0.15s, box-shadow 0.15s;
    }

    .info-card-body .form-control:focus {
        border-color: #3b6fd4;
        box-shadow: 0 0 0 3px rgba(59, 111, 212, 0.12);
        outline: none;
    }

    .info-card-body .form-control[readonly],
    .info-card-body .form-control[disabled] {
        background: #f4f6fb;
        color: #3a4a65;
        cursor: default;
        border-color: #e8edf5;
    }

    .info-card-body .input-group .input-group-text {
        border-radius: 8px 0 0 8px;
        border: 1px solid #dde3ed;
        border-right: none;
        background: #f4f6fb;
    }

    .info-card-body .input-group .form-control {
        border-radius: 0 8px 8px 0;
    }

    /* Section divider inside body */
    .info-card-divider {
        border: none;
        border-top: 1px dashed #e4e9f0;
        margin: 16px 0;
    }

    .members-section-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 8px;
        flex-wrap: wrap;
        gap: 10px;
    }

    .members-section-header h3 {
        margin-bottom: 0;
        border-bottom: none;
        padding-bottom: 0;
    }

    .members-section-note {
        font-size: 13px;
        color: #6b7a99;
        margin-bottom: 20px;
    }

    /* ── Add New Member button ────────────────────── */
    .add-new-member {
        border-radius: 8px;
        font-size: 13px;
        font-weight: 600;
        padding: 10px 20px;
        background: linear-gradient(135deg, #3b6fd4, #1a4db8);
        border: none;
        color: #fff;
        letter-spacing: 0.02em;
        transition: opacity 0.18s;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        box-shadow: 0 2px 8px rgba(59, 111, 212, 0.25);
    }

    .add-new-member:hover {
        opacity: 0.88;
        color: #fff;
    }

    .add-new-member:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    /* ── Remove confirm overlay ───────────────────── */
    .remove-confirm-overlay {
        display: none;
        position: absolute;
        inset: 0;
        background: rgba(255, 255, 255, 0.96);
        border-radius: 12px;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 12px;
        z-index: 10;
        text-align: center;
        padding: 20px;
    }

    .remove-confirm-overlay.active {
        display: flex;
    }

    .remove-confirm-overlay p {
        font-size: 14px;
        font-weight: 600;
        color: #c62828;
        margin: 0;
    }

    .remove-confirm-overlay small {
        font-size: 12px;
        color: #6b7a99;
        display: block;
        margin-top: -6px;
    }

    .confirm-btns {
        display: flex;
        gap: 10px;
    }

    .confirm-remove-yes {
        background: #c62828;
        color: #fff;
        border: none;
        border-radius: 8px;
        padding: 8px 22px;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        transition: opacity 0.18s;
    }

    .confirm-remove-yes:hover {
        opacity: 0.85;
    }

    .confirm-remove-no {
        background: #f0f3f8;
        color: #3a4a65;
        border: none;
        border-radius: 8px;
        padding: 8px 22px;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        transition: background 0.18s;
    }

    .confirm-remove-no:hover {
        background: #dde3ed;
    }


#frm_pause_membership .help-block-error {
    display: block;
    width: 100%;
    color: #c62828;
    font-size: 12px;
    margin-top: 4px;
}


.ms-member-continue {
    background: #3b6fd4;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 7px 13px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}
.ms-member-continue:hover { background: #2f5bb0; color: #fff; }


/* ═══════════════════════════════════════════════════════════
   Buy Membership Page — Styles (mirrored from Edit Membership)
   ═══════════════════════════════════════════════════════════ */

.buy-ms-page { background: #f4f6fb; min-height: 100vh; padding: 32px 0 60px; }

/* ── Page header ─────────────────────────────────────────── */
.buy-ms-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
    flex-wrap: wrap;
    gap: 12px;
}
.buy-ms-page-header h1 {
    font-size: 22px;
    font-weight: 700;
    color: #1a2433;
    margin: 0;
    letter-spacing: -0.02em;
}
.buy-ms-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    color: #5a6a85;
    text-decoration: none;
    padding: 8px 16px;
    border: 1px solid #dde3ed;
    border-radius: 8px;
    background: #fff;
    transition: all 0.18s;
}
.buy-ms-back-btn:hover { border-color: #3b6fd4; color: #1a4db8; background: #eef3fc; }

/* ── Plan info banner ────────────────────────────────────── */
.buy-ms-plan-banner {
    background: linear-gradient(135deg, #3b6fd4 0%, #1a4db8 100%);
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    box-shadow: 0 4px 16px rgba(59,111,212,0.25);
}
.buy-ms-plan-info { display: flex; align-items: center; gap: 16px; }
.buy-ms-plan-icon {
    width: 48px; height: 48px;
    border-radius: 12px;
    background: rgba(255,255,255,0.2);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; color: #fff; flex-shrink: 0;
}
.buy-ms-plan-name { font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 3px; }
.buy-ms-plan-meta { font-size: 12px; color: rgba(255,255,255,0.75); }
.buy-ms-plan-stats {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}
.buy-ms-stat {
    text-align: center;
    background: rgba(255,255,255,0.15);
    border-radius: 10px;
    padding: 10px 18px;
    min-width: 80px;
}
.buy-ms-stat-value { font-size: 18px; font-weight: 700; color: #fff; line-height: 1; margin-bottom: 4px; }
.buy-ms-stat-label { font-size: 10px; color: rgba(255,255,255,0.75); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }

/* ── Eligibility info bar ────────────────────────────────── */
.buy-ms-eligibility {
    background: #fff;
    border: 1px solid #e4e9f0;
    border-radius: 10px;
    padding: 14px 20px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.buy-ms-eligibility-title {
    font-size: 12px; font-weight: 700; color: #6b7a99;
    letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
}
.buy-ms-elig-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.buy-ms-elig-tag {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600;
    padding: 4px 12px; border-radius: 20px;
    background: #eef3fc; color: #1a4db8;
    border: 1px solid #c8d9f5;
}
.buy-ms-elig-tag i { font-size: 11px; }

/* ── Section card (used for Member Details, Address, Members) */
.buy-ms-section-card {
    background: #fff;
    border: 1px solid #e4e9f0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    margin-bottom: 24px;
}
.buy-ms-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 22px;
    background: #f7f9fc;
    border-bottom: 1px solid #edf0f7;
    border-top: 3px solid #3b6fd4;
    flex-wrap: wrap;
    gap: 10px;
}
.buy-ms-section-header-left { display: flex; align-items: center; gap: 12px; }
.buy-ms-section-icon {
    width: 36px; height: 36px; border-radius: 8px;
    background: #e3f0ff; color: #1a4db8;
    display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.buy-ms-section-title { font-size: 14px; font-weight: 700; color: #1a2433; }
.buy-ms-section-subtitle { font-size: 11px; color: #8a99b5; margin-top: 1px; }
.buy-ms-section-body { padding: 20px 22px; }

/* ── Form labels & controls ──────────────────────────────── */
.buy-ms-section-body .form-group label,
.buy-ms-section-body label {
    font-size: 11px;
    font-weight: 700;
    color: #6b7a99;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 5px;
    display: block;
}
.buy-ms-section-body .form-control {
    border-radius: 8px;
    border: 1px solid #dde3ed;
    font-size: 13px;
    color: #1a2433;
    background: #fff;
    padding: 8px 12px;
    height: auto;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.buy-ms-section-body .form-control:focus {
    border-color: #3b6fd4;
    box-shadow: 0 0 0 3px rgba(59,111,212,0.12);
    outline: none;
}
.buy-ms-section-body .form-control[readonly] {
    background: #f4f6fb;
    color: #8a99b5;
}
.buy-ms-section-body .input-group .input-group-text {
    border-radius: 8px 0 0 8px;
    border: 1px solid #dde3ed;
    border-right: none;
    background: #f4f6fb;
}
.buy-ms-section-body .input-group .form-control {
    border-radius: 0 8px 8px 0;
}
.buy-ms-section-body .error {
    font-size: 11px;
    color: #c62828;
    display: block;
    margin-top: 3px;
}
.buy-ms-section-body .required::after {
    content: ' *';
    color: #c62828;
}

/* ── Divider inside address card ─────────────────────────── */
.buy-ms-divider {
    border: none;
    border-top: 1px solid #edf0f7;
    margin: 8px 0 16px;
    width: 100%;
}

/* ── Add member button ───────────────────────────────────── */
.btn-add-new-member {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 13px; font-weight: 600; padding: 9px 18px;
    border-radius: 8px; border: none;
    background: linear-gradient(135deg, #3b6fd4, #1a4db8);
    color: #fff; cursor: pointer; transition: opacity 0.18s;
    box-shadow: 0 2px 8px rgba(59,111,212,0.25);
}
.btn-add-new-member:hover { opacity: 0.88; color: #fff; }
.btn-add-new-member:disabled { opacity: 0.45; cursor: not-allowed; }

/* ── Members section note ────────────────────────────────── */
.buy-ms-members-note {
    font-size: 12px;
    color: #8a99b5;
    margin: 0 0 16px;
    padding: 10px 14px;
    background: #f7f9fc;
    border-radius: 8px;
    border-left: 3px solid #3b6fd4;
}

/* ── Existing member card (compact display) ──────────────── */
.em-member-list { display: flex; flex-direction: column; gap: 10px; }
.em-member-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: #f7f9fc;
    border: 1px solid #e4e9f0;
    border-radius: 10px;
    transition: box-shadow 0.18s;
    position: relative;
}
.em-member-row:hover { box-shadow: 0 3px 12px rgba(0,0,0,0.07); }
.em-member-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    background: linear-gradient(135deg, #3b6fd4, #1a4db8);
    color: #fff; font-size: 14px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; box-shadow: 0 2px 6px rgba(59,111,212,0.25);
}
.em-member-details { flex: 1; min-width: 0; }
.em-member-name { font-size: 14px; font-weight: 600; color: #1a2433; margin-bottom: 2px; }
.em-member-meta { font-size: 12px; color: #8a99b5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.em-member-badge {
    font-size: 10px; font-weight: 700; padding: 3px 10px;
    border-radius: 20px; letter-spacing: 0.05em; white-space: nowrap;
    flex-shrink: 0;
}
.badge-active  { background: #e6f4ea; color: #1e7e34; }
.badge-inactive{ background: #fdecea; color: #c62828; }
.em-member-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* Remove confirm overlay inside row */
.em-remove-overlay {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.96);
    border-radius: 10px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    z-index: 5;
    flex-direction: column;
    text-align: center;
    padding: 12px;
}
.em-remove-overlay.active { display: flex; }
.em-remove-overlay p { font-size: 13px; font-weight: 600; color: #c62828; margin: 0; }

/* ── Add member card (dynamically injected) ──────────────── */
.em-add-card {
    background: #ffffff;
    border: 1px dashed #3b6fd4;
    border-radius: 10px;
    padding: 18px 20px;
    margin-top: 12px;
    position: relative;
    animation: slideDown 0.22s ease;
}
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.em-add-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid #edf0f7;
}
.em-add-card-title { font-size: 13px; font-weight: 700; color: #1a4db8; }
.em-add-card-close {
    background: none; border: none; cursor: pointer;
    color: #8a99b5; font-size: 16px; padding: 2px 6px;
    border-radius: 6px; transition: all 0.15s;
}
.em-add-card-close:hover { background: #fdecea; color: #c62828; }

.em-add-card .form-group label {
    font-size: 11px; font-weight: 700; color: #6b7a99;
    letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 5px; display: block;
}
.em-add-card .form-control {
    border-radius: 8px; border: 1px solid #dde3ed;
    font-size: 13px; color: #1a2433; background: #fff;
    padding: 8px 12px; height: auto;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.em-add-card .form-control:focus {
    border-color: #3b6fd4;
    box-shadow: 0 0 0 3px rgba(59,111,212,0.12);
    outline: none;
}
.em-add-card .input-group .input-group-text {
    border-radius: 8px 0 0 8px; border: 1px solid #dde3ed;
    border-right: none; background: #f4f6fb;
}
.em-add-card .input-group .form-control { border-radius: 0 8px 8px 0; }
.em-add-card .error { font-size: 11px; color: #c62828; display: block; margin-top: 3px; }

/* ── Action icon buttons ─────────────────────────────────── */
.mem-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 8px;
    border: 1px solid #dde3ed; background: #f7f9fc; color: #5a6a85;
    cursor: pointer; text-decoration: none; transition: all 0.18s; font-size: 14px;
}
.mem-icon-btn:hover { background: #eef2fb; border-color: #b0bedd; color: #1a4db8; }
.mem-icon-btn.remove-btn { background: #fdecea; border-color: #f5a9a3; color: #c62828; }
.mem-icon-btn.remove-btn:hover { background: #c62828; color: #fff; border-color: #c62828; }
.mem-icon-btn.save-btn { background: #e8f5e9; border-color: #a5d6a7; color: #2e7d32; }
.mem-icon-btn.save-btn:hover { background: #2e7d32; color: #fff; }

.confirm-btns { display: flex; gap: 8px; }
.confirm-remove-yes {
    background: #c62828; color: #fff; border: none; border-radius: 8px;
    padding: 6px 16px; font-size: 12px; font-weight: 600; cursor: pointer; transition: opacity 0.18s;
}
.confirm-remove-yes:hover { opacity: 0.85; }
.confirm-remove-no {
    background: #f0f3f8; color: #3a4a65; border: none; border-radius: 8px;
    padding: 6px 16px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.confirm-remove-no:hover { background: #dde3ed; }

/* ── Sidebar plan card ───────────────────────────────────── */
.plan-sidebar-card {
    background: #fff; border: 1px solid #e4e9f0;
    border-radius: 12px; overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    border-top: 3px solid #3b6fd4; margin-bottom: 20px;
}
.plan-sidebar-header {
    display: flex; align-items: center; gap: 12px;
    padding: 15px 20px; background: #f7f9fc; border-bottom: 1px solid #edf0f7;
}
.plan-sidebar-icon {
    width: 34px; height: 34px; border-radius: 8px;
    background: #e3f0ff; color: #1a4db8;
    display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0;
}
.plan-sidebar-heading { font-size: 14px; font-weight: 700; color: #1a2433; }
.plan-sidebar-body { padding: 14px 20px; }
.plan-detail-row {
    display: flex; justify-content: space-between; align-items: flex-start;
    padding: 9px 0; border-bottom: 1px solid #f0f3f8; gap: 10px;
}
.plan-detail-row:last-of-type { border-bottom: none; }
.plan-detail-label { font-size: 11px; font-weight: 700; color: #6b7a99; letter-spacing: 0.07em; text-transform: uppercase; flex-shrink: 0; }
.plan-detail-value { font-size: 13px; font-weight: 500; color: #1a2433; text-align: right; }
.plan-price-highlight { font-size: 18px; font-weight: 700; color: #1a2433; letter-spacing: -0.02em; }

/* ── Capacity bar ────────────────────────────────────────── */
.capacity-bar-wrap { padding: 14px 20px; border-top: 1px solid #f0f3f8; }
.capacity-bar-label {
    display: flex; justify-content: space-between;
    font-size: 11px; font-weight: 700; color: #6b7a99;
    letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 8px;
}
.capacity-bar-label span { color: #1a2433; }
.capacity-bar-track {
    height: 6px; background: #edf0f7; border-radius: 10px; overflow: hidden;
}
.capacity-bar-fill {
    height: 100%; border-radius: 10px;
    background: linear-gradient(90deg, #3b6fd4, #1a4db8);
    transition: width 0.4s ease;
}
.capacity-bar-fill.full { background: linear-gradient(90deg, #c62828, #e53935); }
.capacity-note { font-size: 11px; color: #8a99b5; margin-top: 6px; }

/* ── Submit button ───────────────────────────────────────── */
.btn-buy-submit {
    width: 100%; padding: 14px;
    background: linear-gradient(135deg, #3b6fd4, #1a4db8);
    color: #fff; border: none; border-radius: 10px;
    font-size: 14px; font-weight: 700; cursor: pointer;
    transition: opacity 0.18s; letter-spacing: 0.01em;
    box-shadow: 0 3px 12px rgba(59,111,212,0.3);
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-top: 4px;
}
.btn-buy-submit:hover { opacity: 0.88; }
.btn-buy-submit .fa-spinner { display: none; }
.btn-buy-submit.loading .fa-spinner { display: inline-block; }
.btn-buy-submit.loading span { display: none; }

/* status pills */
.plan-status-pill {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 10px; font-weight: 700; padding: 3px 10px;
    border-radius: 20px; letter-spacing: 0.05em;
}
.plan-status-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.pill-active { background: #e6f4ea; color: #1e7e34; }
.pill-active::before { background: #1e7e34; }