/*********************************************
BLOCK: PAGE BACKGROUND
************************************************/

body{
    margin:0;
    font-family:'Segoe UI', sans-serif;
    height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    background:
    linear-gradient(135deg,#0f0f0f 25%, transparent 25%) -50px 0,
    linear-gradient(225deg,#0f0f0f 25%, transparent 25%) -50px 0,
    linear-gradient(315deg,#0f0f0f 25%, transparent 25%),
    linear-gradient(45deg,#0f0f0f 25%, transparent 25%);
    background-size:100px 100px;
    background-color:#1b1b1b;
    color:white;
}

/************************************************
BLOCK: MAIN CONTAINER
************************************************/

.container{
    width:400px;
    padding:24px;
    background:rgba(255,255,255,0.97);
    color:#222;
    border-radius:14px;
    box-shadow:
        0 0 18px rgba(60,124,255,0.25),
        0 18px 50px rgba(0,0,0,0.45);
}

/************************************************
BLOCK: STEP SYSTEM
************************************************/

.step{
    display:none;
}

.step.active{
    display:block;
}

/************************************************
BLOCK: TITLES
************************************************/

h2{
    margin:0 0 20px 0;
    font-size:24px;
    font-weight:600;
}

/************************************************
BLOCK: FORM GRID
************************************************/

.row{
    display:flex;
    gap:10px;
}

.row .field{
    flex:1;
}





/************************************************
BLOCK: INPUT FIELDS
************************************************/

.field{
    margin-bottom:7px;
    position:relative;
}

.field label{
    display:block;
    font-size:13px;
    font-weight:600;
    margin-bottom:4px;
    color:#333;
}

input,
select{
    width:100%;
    box-sizing:border-box;
    padding:9px 36px 9px 12px;
    border-radius:7px;
    border:1px solid #ccc;
    font-size:14px;
    transition:0.2s;
    background:#fff;
}

input:focus,
select:focus{
    outline:none;
    border-color:#3c7cff;
    box-shadow:0 0 5px rgba(60,124,255,0.35);
}


/************************************************
BLOCK: PASSWORD UI
************************************************/

.password-wrap{
    position:relative;
}

.password-eye{
    position:absolute;
    right:11px;
    top:50%;
    transform:translateY(-50%);
    cursor:pointer;
    font-size:14px;
    color:#666;
    user-select:none;
}

.password-eye:hover{
    color:#222;
}

.password-match{
    position:absolute;
    right:34px;
    top:50%;
    transform:translateY(-50%);
    font-size:14px;
    color:#24a148;
    display:none;
    font-weight:700;
}

/************************************************
BLOCK: PASSWORD STRENGTH
************************************************/

.strength-wrap{
    margin-top:8px;
}

.strength-bar{
    height:6px;
    width:100%;
    background:#e0e0e0;
    border-radius:999px;
    overflow:hidden;
}

.strength-fill{
    height:100%;
    width:0%;
    transition:0.25s ease;
    background:#ff4d4d;
}

/************************************************
BLOCK: BUTTONS
************************************************/

button{
    width:100%;
    padding:11px;
    margin-top:8px;
    border:none;
    border-radius:8px;
    background:#3c7cff;
    color:white;
    font-size:15px;
    cursor:pointer;
    transition:0.2s;
}

button:hover{
    background:#2c63d6;
    transform:translateY(-1px);
    box-shadow:0 6px 14px rgba(0,0,0,0.22);
}

/************************************************
BLOCK: PRODUCT CARDS
************************************************/

.product{
    border:1px solid #d8d8d8;
    padding:14px;
    margin-bottom:10px;
    border-radius:8px;
    cursor:pointer;
    background:#fafafa;
    transition:all 0.22s ease;
}

.product:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 16px rgba(0,0,0,0.12);
}

.product.selected{
    border:2px solid #3c7cff;
    background:#eef3ff;
    box-shadow:0 0 10px rgba(60,124,255,0.28);
}

/************************************************
BLOCK: PAYMENT PANEL
************************************************/

.payment-box{
    padding:14px;
    border:1px solid #ddd;
    border-radius:8px;
    background:#fafafa;
    font-size:14px;
    line-height:1.5;
}

/************************************************
BLOCK: ERROR TEXT
************************************************/

.error-text{
    font-size:12px;
    color:#d93025;
    margin-top:5px;
    min-height:14px;
}



/************************************************
BLOCK: STRIPE LOADING OVERLAY
************************************************/

#stripe_loading_overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.55);
    display:none;
    justify-content:center;
    align-items:center;
    z-index:9999;
}

.stripe-loading-box{
    background:#ffffff;
    color:#222;
    padding:28px 32px;
    border-radius:16px;
    box-shadow:0 18px 50px rgba(0,0,0,0.35);
    text-align:center;
    min-width:280px;
}

.stripe-spinner{
    width:52px;
    height:52px;
    margin:0 auto 16px auto;
    border:5px solid #d9e4ff;
    border-top:5px solid #3c7cff;
    border-radius:50%;
    animation:stripeSpin 0.8s linear infinite;
}

.stripe-loading-text{
    font-size:15px;
    font-weight:600;
    color:#333;
}

@keyframes stripeSpin{
    0%{ transform:rotate(0deg); }
    100%{ transform:rotate(360deg); }
}


/************************************************
BLOCK: PRODUCT TABS
************************************************/

.product-tabs{
    display:flex;
    gap:8px;
    margin-bottom:16px;
}

.product-tab{
    flex:1;
    padding:10px 12px;
    border:none;
    border-radius:10px;
    background:#e9eefc;
    color:#2a3b66;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    transition:0.2s ease;
    margin-top:0;
}

.product-tab:hover{
    background:#dbe6ff;
    transform:none;
    box-shadow:none;
}

.product-tab.active{
    background:#3c7cff;
    color:#fff;
    box-shadow:0 6px 14px rgba(60,124,255,0.25);
}

.tab-panel{
    display:none;
}

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

/************************************************
BLOCK: SUBSCRIPTION CARDS
************************************************/

.subscription-section{
    margin-top:18px;
}

.subscription-label{
    display:block;
    font-size:13px;
    font-weight:600;
    margin-bottom:8px;
    color:#333;
}

.subscription-options{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.subscription-card{
    border:1px solid #d8d8d8;
    background:#fafafa;
    border-radius:10px;
    padding:12px 14px;
    cursor:pointer;
    transition:all 0.22s ease;
    box-shadow:0 0 0 rgba(60,124,255,0);
}

.subscription-card:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 16px rgba(0,0,0,0.10);
}

.subscription-card.selected{
    border:2px solid #3c7cff;
    background:#eef3ff;
    box-shadow:
        0 0 12px rgba(60,124,255,0.28),
        0 0 24px rgba(60,124,255,0.12);
}

.subscription-title{
    font-size:14px;
    font-weight:700;
    color:#1f2f57;
    margin-bottom:4px;
}

.subscription-price{
    font-size:13px;
    color:#555;
}



/************************************************
BLOCK: AUTH TABS
************************************************/

.auth-tabs{
    display:flex;
    gap:8px;
    margin-bottom:18px;
}

.auth-tab{
    flex:1;
    padding:10px 12px;
    border:none;
    border-radius:10px;
    background:#e9eefc;
    color:#2a3b66;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    transition:0.2s ease;
    margin-top:0;
}

.auth-tab:hover{
    background:#dbe6ff;
    transform:none;
    box-shadow:none;
}

.auth-tab.active{
    background:#3c7cff;
    color:#fff;
    box-shadow:0 6px 14px rgba(60,124,255,0.25);
}

.auth-panel{
    display:none;
}

.auth-panel.active{
    display:block;
}


/************************************************
Forgot password modal
************************************************/

.signin-extra-row{
    display:flex;
    justify-content:flex-end;
    margin-top:2px;
    margin-bottom:10px;
}

.forgot-password-link{
    font-size:13px;
    color:#3c7cff;
    text-decoration:none;
    cursor:pointer;
    font-weight:600;
}

.forgot-password-link:hover{
    text-decoration:underline;
}

.forgot-modal-overlay{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.65);
    z-index:9999;
    justify-content:center;
    align-items:center;
    padding:20px;
    box-sizing:border-box;
}

.forgot-modal-box{
    position:relative;
    width:100%;
    max-width:420px;
    background:#ffffff;
    border-radius:16px;
    padding:28px 24px;
    box-shadow:0 20px 50px rgba(0,0,0,0.35);
    text-align:center;
    color:#222;
}

.forgot-close-btn{
    position:absolute;
    top:12px;
    right:14px;
    background:none;
    border:none;
    color:#444;
    font-size:24px;
    cursor:pointer;
}

.forgot-modal-icon{
    font-size:34px;
    margin-bottom:8px;
}

.forgot-modal-title{
    margin:0 0 10px 0;
    font-size:24px;
    font-weight:600;
}

.forgot-modal-text{
    margin:0 0 18px 0;
    font-size:14px;
    line-height:1.5;
    color:#555;
}

.forgot-modal-message{
    margin-bottom:12px;
    padding:10px 12px;
    border-radius:10px;
    font-size:14px;
    font-weight:600;
}

.forgot-modal-input{
    width:100%;
    padding:12px 14px;
    border-radius:10px;
    border:1px solid #ccc;
    font-size:14px;
    outline:none;
    box-sizing:border-box;
    margin-bottom:18px;
    background:#fff;
    color:#222;
}

.forgot-modal-input:focus{
    border-color:#3c7cff;
    box-shadow:0 0 5px rgba(60,124,255,0.35);
}

.forgot-modal-buttons{
    display:flex;
    gap:12px;
    justify-content:center;
}

.forgot-cancel-btn,
.forgot-send-btn{
    min-width:120px;
    padding:11px 18px;
    border:none;
    border-radius:8px;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
}

.forgot-cancel-btn{
    background:#d9d9d9;
    color:#222;
}

.forgot-send-btn{
    background:#3c7cff;
    color:#fff;
}


/* =========================================================
   BLOCK — PRODUCT LAYOUT
   ========================================================= */
.product-layout{
    display:block;
    width:100%;
}

.product-selection-area,
.product-summary-area{
    width:100%;
}

#step_product{
    max-width:1010px;
    margin:0 auto;
}

/* =========================================================
   BLOCK — HARDWARE SELECTOR
   ========================================================= */
.hardware-selector-box{
    margin-bottom:24px;
}

.hardware-selector-label{
    display:block;
    font-weight:600;
    margin-bottom:8px;
    color:#1b2e62;
}

#hardware_select{
    width:100%;
    max-width:520px;
    padding:12px 14px;
    border-radius:12px;
    border:1px solid #ccd3e0;
    font-size:15px;
    margin-bottom:14px;
    background:#fff;
}


/* =========================================================
   BLOCK — HARDWARE MODAL
   ========================================================= */
.hardware-modal-overlay{
    position:fixed;
    inset:0;
    background:rgba(10, 16, 28, 0.55);
    display:none;
    align-items:center;
    justify-content:center;
    padding:20px;
    z-index:1000;
}

.hardware-modal-overlay.open{
    display:flex;
}

.hardware-modal-card{
    width:100%;
    max-width:520px;
    background:#ffffff;
    border-radius:18px;
    border:1px solid #d7dde8;
    box-shadow:0 20px 50px rgba(0,0,0,0.18);
    padding:20px;
}

.hardware-modal-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-bottom:16px;
}

.hardware-modal-title{
    font-size:22px;
    font-weight:700;
    color:#1c2d56;
}

.hardware-modal-close{
    width:40px;
    height:40px;
    border:none;
    border-radius:10px;
    background:#eef3fb;
    color:#223457;
    cursor:pointer;
    font-size:18px;
    font-weight:700;
}

.hardware-modal-body{
    display:flex;
    gap:16px;
    align-items:flex-start;
    margin-bottom:18px;
}

.hardware-modal-image{
    width:110px;
    height:110px;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:44px;
    background:linear-gradient(180deg, #eef3ff 0%, #dfe8ff 100%);
    border:1px solid #cdd8f7;
    flex:0 0 110px;
}

.hardware-modal-info{
    flex:1;
}

.hardware-modal-name{
    font-size:20px;
    font-weight:700;
    color:#1c2d56;
    margin-bottom:8px;
}

.hardware-modal-price{
    font-size:18px;
    font-weight:700;
    color:#2b61e3;
    margin-bottom:8px;
}

.hardware-modal-desc{
    font-size:14px;
    color:#5e6777;
    line-height:1.5;
}

.hardware-modal-actions{
    display:flex;
    justify-content:flex-end;
    gap:12px;
}

.hardware-modal-btn{
    min-width:110px;
    padding:12px 16px;
    border:none;
    border-radius:12px;
    cursor:pointer;
    font-weight:600;
    font-size:15px;
}

.hardware-modal-btn.secondary{
    background:#eef3fb;
    color:#233559;
}

.hardware-modal-btn.primary{
    background:#2b61e3;
    color:#ffffff;
}

@media (max-width:700px){
    .hardware-modal-body{
        flex-direction:column;
        align-items:center;
        text-align:center;
    }

    .hardware-modal-actions{
        flex-direction:column;
    }

    .hardware-modal-btn{
        width:100%;
    }
}

/* =========================================================
   BLOCK — SUBSCRIPTION SECTION
   ========================================================= */
.subscription-section{
    margin-top:10px;
}

.subscription-label{
    display:block;
    font-weight:600;
    margin-bottom:12px;
    color:#1b2e62;
}

/* No Subscription card */
.subscription-section > .subscription-card{
    max-width:720px;
    margin-bottom:16px;
}


/* =========================================================
   BLOCK — ADD-ON GRID
   ========================================================= */
.addon-grid{
    display:grid;
    gap:14px;
    max-width:720px;
}

/* =========================================================
   BLOCK — INLINE SUMMARY (COMPACT)
   ========================================================= */
.inline-summary{
    max-width:720px;
    margin-top:16px;
    padding:14px 16px;
    border-radius:12px;
    background:#f4f7fd;
    border:1px solid #d7dde8;
}

.inline-summary-row{
    display:flex;
    justify-content:space-between;
    font-size:14px;
    color:#3e4a63;
    margin-bottom:6px;
}

.inline-summary-row strong{
    color:#1f2940;
    font-weight:600;
}

.inline-summary-total{
    display:flex;
    justify-content:space-between;
    margin-top:10px;
    padding-top:10px;
    border-top:1px solid #d7dde8;
    font-size:16px;
    font-weight:700;
    color:#17305e;
}







/* =========================================================
   BLOCK — CONTINUE BUTTON
   ========================================================= */
#step_product > button[onclick="flow_startCheckoutTest()"]{
    width:100%;
    max-width:720px;
    margin-top:18px;
}


/* =========================================================
   BLOCK — RESPONSIVE
   ========================================================= */
@media (max-width:700px){
    .plan-content.active{
        grid-template-columns:1fr;
    }

    #hardware_select,
    .hardware-preview-card,
    .selection-summary-box,
    #step_product > button[onclick="flow_startCheckoutTest()"]{
        max-width:100%;
    }
}



/* =========================================================
   BLOCK — PLAN TABS (HORIZONTAL MENU TABS)
   ========================================================= */
.plan-tabs{
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    gap:10px;
    margin:16px 0;
    max-width:720px;
    width:100%;
}

.plan-tab{
    flex:1 1 0;
    min-width:0;
    padding:10px 12px;
    border-radius:10px;
    border:1px solid #ccd3e0;
    background:#f3f6fb;
    color:#2f3a4a;
    cursor:pointer;
    font-weight:600;
    transition:0.2s;
    text-align:center;
    white-space:nowrap;
}

.plan-tab.active{
    background:#2b61e3;
    color:#fff;
    border-color:#2b61e3;
}

/* =========================================================
   BLOCK — PLAN CONTENT (MONTHLY / YEARLY SIDE BY SIDE)
   ========================================================= */
.plan-content{
    display:none !important;
    grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
    gap:14px;
    width:100%;
    max-width:720px;
    margin-bottom:18px;
    align-items:stretch;
}

.plan-content.active{
    display:grid !important;
}

.plan-content .subscription-card{
    width:100%;
    min-width:0;
    min-height:88px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    box-sizing:border-box;
}

.plan-content > *{
    min-width:0;
}


/* =========================================================
  hardware seelction confirmation
   ========================================================= */
.selection-confirm-msg{
    margin-top:10px;
    font-size:14px;
    font-weight:600;
    color:#1d7a34;
    min-height:20px;
}


.hardware-list{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-top:12px;
}

.hardware-option{
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 16px;
    border:1px solid #d9d9d9;
    border-radius:12px;
    background:#fff;
    cursor:pointer;
}

.hardware-option input[type="checkbox"]{
    width:18px;
    height:18px;
    cursor:pointer;
}

.hardware-option-text{
    display:flex;
    justify-content:space-between;
    align-items:center;
    width:100%;
}

.hardware-option-text strong{
    font-size:15px;
}

.hardware-option-text small{
    font-size:14px;
    color:#555;
}









.hardware-dropdown-wrap{
    position:relative;
    width:100%;
}

.hardware-dropdown-btn{
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 14px;
    border:1px solid #d6dbe3;
    border-radius:12px;
    background:#fff;
    cursor:pointer;
    font-size:15px;
}





#hardwareDropdownBtn{
    color:#222;
}

#hardwareDropdownLabel{
    color:#222;
    opacity:1;
    visibility:visible;
}







.hardware-dropdown-arrow{
    font-size:14px;
}

.hardware-dropdown-menu{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    width:100%;
    margin-top:8px;
    background:#fff;
    border:1px solid #d6dbe3;
    border-radius:12px;
    box-shadow:0 10px 24px rgba(0,0,0,0.08);
    z-index:50;
    padding:8px;
}

.hardware-dropdown-menu.open{
    display:block;
}

.hardware-dropdown-item{
    display:grid;
    grid-template-columns:22px 1fr auto;
    align-items:center;
    gap:10px;
    padding:10px 8px;
    border-radius:10px;
    cursor:pointer;
}

.hardware-dropdown-item:hover{
    background:#f5f8fc;
}

.hardware-dropdown-item input[type="checkbox"]{
    width:16px;
    height:16px;
    cursor:pointer;
}

.hardware-dropdown-item span{
    font-size:14px;
}

.hardware-dropdown-item small{
    font-size:13px;
    color:#666;
}


/* =========================================================
  Add on description window
   ========================================================= */


.addon-scroll-box{
    max-height:220px;
    overflow-y:auto;
    border:1px solid #d6dbe3;
    border-radius:12px;
    background:#fff;
    padding:8px;
}

.addon-row{
    display:grid;
    grid-template-columns:22px 1fr;
    gap:12px;
    align-items:start;
    padding:10px 8px;
    border-radius:10px;
}

.addon-row input[type="checkbox"]{
    width:16px;
    height:16px;
    margin-top:4px;
    cursor:pointer;
}

.addon-row-main{
    display:block;
    padding:2px 0;
}

.addon-row-name{
    display:block;
    font-weight:600;
    font-size:14px;
    line-height:1.3;
    margin-bottom:4px;
    white-space:nowrap;
}

.addon-row-main small{
    display:block;
    font-size:13px;
    line-height:1.4;
    color:#666;
    white-space:normal;
    word-break:normal;
}

.addon-read-link{
    margin-top:6px;
    padding:0;
    border:none;
    background:none;
    color:#6ea8ff;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    text-align:left;
    box-shadow:none;
    outline:none;
}

.addon-read-link:hover,
.addon-read-link:focus,
.addon-read-link:active{
    color:#6ea8ff;
    background:none;
    text-decoration:none;
    box-shadow:none;
    outline:none;
}


.addon-modal-card{
    max-width:540px;
}




/* =========================================================
  Delete iteams in total preview ( on sig up page)
   ========================================================= */


.inline-summary-row{
    display:grid;
    grid-template-columns:110px 1fr 26px;
    align-items:center;
    column-gap:10px;
    padding:6px 0;
}

.inline-summary-row > span:first-child{
    white-space:nowrap;
}

.summary-value-actions{
    min-width:0;
    display:flex;
    justify-content:flex-end;
    align-items:center;
}

.summary-value-actions strong{
    display:block;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    text-align:right;
}

.summary-trash-btn{
    width:26px;
    height:26px;
    border:none;
    background:none;
    cursor:pointer;
    font-size:16px;
    line-height:1;
    padding:0;
    display:none;
    justify-self:end;
    align-self:center;
}

.summary-trash-btn.show{
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.summary-trash-btn{
    border:none;
    background:none;
    cursor:pointer;
    font-size:16px;
    line-height:1;
    padding:0;
    display:none;
}

.summary-trash-btn.show{
    display:inline-block;
}

.remove-items-card{
    max-width:460px;
}

.remove-items-list{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin:14px 0 6px;
}

.remove-item-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:10px 12px;
    border:1px solid #d6dbe3;
    border-radius:10px;
    background:#fff;
}

.remove-item-name{
    font-size:14px;
    font-weight:600;
    color:#23304d;
}

.remove-item-trash{
    border:none;
    background:none;
    cursor:pointer;
    font-size:18px;
    line-height:1;
    padding:0;
}


/* =========================================================
 payment review after Continue to Payment button is pressed
   ========================================================= */

.payment-review-section{
    margin-bottom:18px;
}

.payment-review-title{
    font-size:16px;
    font-weight:700;
    margin-bottom:12px;
    color:#23304d;
}

.payment-review-items{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.payment-review-item{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
    padding:10px 12px;
    border:1px solid #d6dbe3;
    border-radius:10px;
    background:#fff;
}

.payment-review-item-name{
    font-size:14px;
    font-weight:600;
    color:#23304d;
}

.payment-review-item-price{
    font-size:14px;
    font-weight:700;
    color:#23304d;
    white-space:nowrap;
}

.payment-review-total-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding-top:14px;
    margin-top:14px;
    border-top:1px solid #d6dbe3;
    font-size:18px;
    font-weight:700;
    color:#23304d;
}

.payment-actions{
    display:flex;
    gap:12px;
    margin-top:16px;
}

.form-row.two-cols{
    display:flex;
    gap:12px;
    width:100%;
}

.form-row.two-cols .field{
    flex:1;
}

@media (max-width: 640px){
    .form-row.two-cols{
        flex-direction:column;
        gap:0;
    }
}