/* =========================
   LAYOUT
========================= */

.cp-home{
    display:flex;
    min-height:100vh;
    background:#f5f9fc;
    font-family:Inter,sans-serif;
}

/* =========================
   SIDEBAR
========================= */

.cp-sidebar{
    width:300px;
    background:#03152E;
    color:#fff;
    padding:24px 12px;
    overflow:auto;
}

.cp-search-wrap{
    position:relative;
    margin-bottom:32px;
	padding: 0 16px;
}

.cp-search-icon{
    position:absolute;
    left:32px;
    top:50%;
    transform:translateY(-50%);
    width:16px;
    height:16px;
    fill:#FFFFFF66;
    pointer-events:none;
}

.cp-country-search{
    width:100%;
    height:48px;
    border-radius:8px;
    border:1px solid #FFFFFF33;
    background:#222d3d;
    color:#fff;
    padding:8px 16px 8px 44px !important;
   	font-family: "Inter", Sans-serif;
    font-size:14px;
    font-weight:400;	
	outline:none;
}

.cp-country-search::placeholder{
    color:#FFFFFF66;
}

.cp-region{
    margin-bottom:32px;
}

.cp-region-title{
   	font-family: "Inter", Sans-serif;
    font-size:12px;
    font-weight:600;
    color:#FFFFFF66;
    margin-bottom:14px;
    text-transform:uppercase;
    padding: 0 16px;
}

.cp-country-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 16px;
    border-radius:12px;
    text-decoration:none;
    color:#fff;
    margin-bottom:8px;
    transition:0.2s;
   	font-family: "Inter", Sans-serif;
    font-size: 14px;
    font-weight: 500;
}

.cp-country-item:hover{
    color:#fff;
    background:#0B2547;
}

.cp-country-item.active{
    background:#073550;
    border-left:2px solid #00AEEF;
}

.cp-dot{
    width:8px;
    height:8px;
    border-radius:50%;
}

.cp-dot.full{
    background:#059669;
}

.cp-dot.partial{
    background:#EAB308;
}

.cp-dot.limited{
    background:#FF5A5F;
}

/* =========================
   CONTENT
========================= */

.cp-content{
    flex:1;
    padding:40px;
}

/* =========================
   COUNTRY HEADER
========================= */

.cp-country-header{
    margin-bottom:32px;
}

.cp-country-header h1{
	font-family: "Poppins", Sans-serif;
    font-size: 36px;
    font-weight: 700;
    margin:0 0 12px;
    color:#0A1628;
    line-height:1;
}

.cp-package-group-title {
	font-family: "Poppins", Sans-serif;
	font-size: 24px;
	margin: 32px 0;
	text-align: center;
}

.cp-coverage{
    display:flex;
    align-items:center;
    gap:14px;
}

.badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:8px 14px;
    border-radius:999px;
	font-family: "Inter", Sans-serif;
    font-size: 12px;
    font-weight: 600;
}

.badge svg{
	width:12px;
    height:12px;
}

.badge.full{
    background:#DDF8EA;
    color:#059669;
	border: 1px solid #05966933;
}

.badge.full svg{
	fill:#059669;
}

.badge.partial{
    background:#FFF6D9;
    color:#EAB308;
	border: 1px solid #EAB308;
}

.badge.partial svg{
	fill:#EAB308;
}

.badge.limited{
    background:#FFE4E6;
    color:#E11D48;
}

.cp-count{
    color:#4A6A85;
	font-family: "Inter", Sans-serif;
    font-size: 14px;
    font-weight: 400;
}

/* =========================
   PACKAGE CARDS
========================= */
.progress-wrapper {
  margin: 0 auto 30px auto;
  display: flex;
  align-items: center;
  padding: 0;
}
 
.segment {
  position: relative;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
 
.segment.active {
	margin-right: 26px;
  	width: 76%;
}
 
.segment.inactive {
  	width: 24%;
}
 
.segment .line {
  flex: 1;
  height: 2px;
}
 
.segment.active .line {
  background-color: #00AEEF;
}
 
.segment.inactive .line {
  background-color: #0A1628;
}
 
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
 
.segment.active .dot {
  background-color: #00AEEF;
}
 
.segment.inactive .dot {
  background-color: #0A1628;
}
 
.label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #f5f9fc;
  padding: 0 16px;
	font-family: "Inter", Sans-serif;
    font-size: 14px;
    font-weight: 700;
  white-space: nowrap;
}
 
.segment.active .label {
  color: #00AEEF;
}
 
.segment.inactive .label {
  color: #0A1628;
}


.cp-packages{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
    margin-bottom:32px;
}

.cp-package-card{
	display:flex;
    flex-direction:column;
    background:#fff;
    border-radius:24px;
    padding:32px;
    border:2px solid #DCE4EC;
    position:relative;
    transition:0.2s;
}

.cp-package-card img{
	width: 48px;
	height: auto;
	margin: 0 auto 16px auto;
}

.cp-package-card.light{
	border-color:#00AEEF;
}

.cp-package-card.standard{
    border-color:#00AEEF;
    background:#00AEEF0D;
	position: relative;
}

.cp-package-card.extended {
	border-color:#00AEEF;
}

.cp-package-card.asset {
	border-color:#0A1628;
}

.cp-package-card-badge {
	background:#00AEEF;
	color: #ffffff;
	font-family: "Inter", Sans-serif;
    font-size: 12px;
    font-weight: 600;
	padding: 4px 12px;
	border-radius: 9999px;
	width: fit-content;
	position: absolute;
	left: 50%;
    transform: translate(-50%, -50%); 
	top: 0;
}

.cp-package-title{
	font-family: "Poppins", Sans-serif;
    font-size: 24px;
    font-weight: 700;
    margin-bottom:16px;
    color:#000000;
	text-align: center;
}

.cp-price{
	font-family: "Poppins", Sans-serif;
    font-size: 30px;
    font-weight: 700;
	letter-spacing: -0.5px;
    color:#0A1628;
    margin-bottom:8px;
	text-align: center;
}

.cp-price-decimal{
	color:#4A6A85;
	font-family: "Inter", Sans-serif;
    font-size: 14px;
    font-weight: 400;
}

.cp-turnaround{
	display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    color:#4A6A85;
	font-family: "Inter", Sans-serif;
    font-size: 14px;
    font-weight: 400;
    margin-bottom:28px;
	text-align: center;
}

.cp-turnaround svg{
	width: 14px;
	height: 14px;
	fill:#00AEEF;
}

.cp-service-list{
    list-style:none;
    padding:0;
    margin:0 0 32px;
	flex:1;
}

.cp-service-list li{
    margin-bottom:14px;
    color:#0A1628;
	font-family: "Inter", Sans-serif;
    font-size: 14px;
    font-weight: 400;
    display:flex;
    align-items:center;
    gap:10px;
}

.cp-service-list li svg{
	width: 12px;
	fill:#059669;
}


/* =========================
   BUTTON
========================= */

.cp-start-btn{
    width:100% !important;
    height:58px;
    border:none !important;
    border-radius:999px !important;
    background:#0A1628 !important;
    color:#fff !important;
    font-family:"Poppins", Sans-serif;
    font-size:14px !important;
    font-weight:500 !important;

    box-shadow:
        0px 4px 6px rgba(0,0,0,0.1),
        0px 2px 4px rgba(0,0,0,0.08);

    transition:0.2s;

    margin-top:auto;
}

.cp-package-card.standard .cp-start-btn{
    background:#00AEEF !important;
}

.cp-start-btn:hover{
    transform:translateY(-2px);
}

/* =========================
   TABLE
========================= */

.cp-table-wrap{
    background:#D2F8DC33;
    border-radius:24px;
    overflow:hidden;
	border: 1px solid #E5E7EB;
}

.cp-table{
    width:100%;
    border-collapse:collapse;
}

.cp-table th{
    background:#F5F9FC;
    color:#0A1628;
	font-family:"Poppins", Sans-serif;
    font-size:14px;
    font-weight:700;
    text-align:left;
    padding:22px 28px;
    border-bottom:1px solid #E5E7EB;
}

.cp-table td{
    padding:22px 28px;
    color:#0A1628;
	font-family: "Inter", Sans-serif;
    font-size:14px;
	font-weight:500;
    border-bottom:1px solid #E5E7EB;
}

.cp-table td:not(:first-child),
.cp-table th:not(:first-child){
    text-align:center;
}

.cp-table tbody tr:last-child td{
    border-bottom:none;
}

.yes{
    color:#059669;
    font-size:18px;
    font-weight:700;
}

.yes svg {
 	width:18px;
    height:18px;
    fill:#059669;
}

.no{
    color:#89a5c3;
    font-size:18px;
    font-weight:700;
}

.no svg {
 	width:14px;
    height:14px;
    fill:#89a5c3;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1200px){

    .cp-packages{
        grid-template-columns:1fr;
    }

}

@media(max-width:900px){

    .cp-home{
        flex-direction:column;
    }

    .cp-sidebar{
        width:100%;
    }

    .cp-content{
        padding:24px;
    }

    .cp-country-header h1{
        font-size:42px;
    }

}

/* ========================================
   STEP PAGES
======================================== */

.cp-step-page{
    background:#f4f7fb;
    min-height:100vh;
    padding:60px 20px;
}

/* ========================================
   CARD
======================================== */

.cp-card{
    max-width:896px;
    margin:40px auto 0;
    background:#fff;
    border-radius:16px;
    box-shadow:
        0 2px 20px 0 #0000000F;
}

/* ========================================
   STEPS
======================================== */

.cp-steps{
    max-width:920px;
    margin:0 auto;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
	padding: 25px;
	border-bottom: 1px solid #E2E8F0;
}

.cp-step{
    flex:1;
    text-align:center;
    position:relative;
}

/* .cp-step::after{
    content:'';
    position:absolute;
    top:20px;
    left:60%;
    width:100%;
    height:2px;
    background:#dbe3ef;
    z-index:0;
}
 */
.cp-step:last-child::after{
    display:none;
}

.cp-step-circle{
    width:32px;
    height:32px;
    margin:0 auto;
    border-radius:50%;
    background:#F5F9FC;
    border:2px solid #E2E8F0;
    color:#4A6A85;
	font-family:"Poppins", Sans-serif;
    font-size:14px;
    font-weight:600;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    z-index:2;
}

.cp-step-label{
    margin-top:10px;
	font-family: "Inter", Sans-serif;
    font-size:12px;
    font-weight:500;
    color:#4A6A85;
}

.cp-step.active .cp-step-circle{
    border-color:#00AEEF;
    color:#00AEEF;
	background:#fff;
}

.cp-step.completed .cp-step-circle{
    background:#00AEEF;
    border-color:#00AEEF;
    color:#fff;
}

.cp-step.completed .cp-step-label{
    color:#0A1628;
    font-weight:500;
}


.cp-step.active .cp-step-label{
    color:#00AEEF;
    font-weight:700;
}

/* ========================================
   TITLES
======================================== */

.cp-title{
    margin:40px 0 12px;
    text-align:center;
	font-family:"Poppins", Sans-serif;
    font-size:30px;
    font-weight:700;
	line-height: 36px;
    color:#0A1628;
}

.cp-subtitle{
    margin:0 auto 40px;
    text-align:center;
    max-width:700px;
	font-family: "Inter", Sans-serif;
    font-size:14px;
	font-weight:400;
	line-height: 20px;
    color:#4A6A85;
}

/* ========================================
   FORM SECTIONS
======================================== */

.cp-form-section{
    margin:48px 64px 0 64px;
    border:1px solid #E2E8F0;
    border-radius:12px;
    padding:25px 25px 0 25px;
}

.cp-form-section.personal{
	background:#F5F9FC80;
}

.cp-form-section h3{
    margin:0 0 24px;
    padding-bottom:9px;
    border-bottom:1px solid #E2E8F0;
	font-family:"Poppins", Sans-serif;
    font-size:14px;
    font-weight:700;
    color:#0A1628;
}
.cp-form-section .cp-field {
    margin-bottom: 25px;
    padding: 0;
}

/* ========================================
   FIELDS
======================================== */

.cp-field{
    margin-bottom:32px;
	padding: 0 40px;
}

.cp-field label{
    margin-bottom:12px;
	font-family: "Inter", Sans-serif;
    font-size:14px;
	font-weight:600;
    color:#0A1628;
}

.cp-field label .required,
.cp-checkbox-wrap .required{
    color:#EF4444;
}

.cp-field small,
h3 small{
    color:#4A6A85;
	font-family: "Inter", Sans-serif;
    font-size:12px;
	font-weight:400;
}

.cp-field input,
.cp-field select{
    width:100%;
    height:46px;
    border:1px solid #E2E8F0 !important;
    border-radius:8px !important;
    padding:0 16px !important;
	font-family: "Inter", Sans-serif;
    font-size:14px;
	font-weight:400;    
	background:#fff;
    color:#0A1628;
    transition:.2s;
    box-sizing:border-box;
}

.cp-field input:focus,
.cp-field select:focus{
    outline:none;
    border-color:#2196f3;
    box-shadow:0 0 0 4px rgba(33,150,243,.08);
}

/* ========================================
   GRID
======================================== */

.cp-grid-2{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}

/* ========================================
   CONSENT
======================================== */

.cp-consent-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}

.cp-consent-card{
    border:2px solid #dbe3ef;
    border-radius:20px;
    padding:24px;
    display:flex;
    align-items:center;
    gap:18px;
    cursor:pointer;
    transition:.2s;
    background:#fff;
}

.cp-consent-card:hover{
    border-color:#2196f3;
}

/* ========================================
   RADIO
======================================== */

.cp-consent-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}

.cp-consent-card{
    position:relative;
    border:1px solid #dbe3ef;
    border-radius:8px;
    padding:15px 17px;
    display:flex;
    align-items:center;
    gap:18px;
    cursor:pointer;
    transition:.2s;
    background:#fff;
}

.cp-consent-card:hover{
    border-color:#00AEEF;
}

/* HIDE REAL RADIO */
.cp-consent-card input[type="radio"]{
    position:absolute !important;
    opacity:0 !important;
    pointer-events:none !important;
    width:0 !important;
    height:0 !important;
    margin:0 !important;
}

/* CUSTOM RADIO */
.cp-radio{
    width:20px;
    height:20px;
    min-width:20px;
    border-radius:50%;
    border:2px solid #CBD5E1;
    position:relative;
    box-sizing:border-box;
    flex-shrink:0;
	display: flex
}

/* INNER DOT */
.cp-radio::after{
    content:'';
    position:absolute;
    top:50%;
    left:50%;
    width:10px;
    height:10px;
    border-radius:50%;
    background:#00AEEF;
    transform:translate(-50%, -50%) scale(0);
    transition:.2s;
}

/* CHECKED */
.cp-consent-card input[type="radio"]:checked + .cp-radio{
    border-color:#00AEEF;
}

.cp-consent-card input[type="radio"]:checked + .cp-radio::after{
    transform:translate(-50%, -50%) scale(1);
}

/* ACTIVE CARD */
.cp-consent-card:has(input[type="radio"]:checked){
    border-color:#00AEEF;
    background:#E8F7FD;
}

.cp-consent-card span:last-child{
	font-family: "Inter", Sans-serif;
    font-size:14px;
    font-weight:500;
    color:#0A1628;
}

/* ========================================
   ERROR
======================================== */

.cp-consent-error {
    color: red;
    font-size: 13px;
    margin-top: -8px;
    display: none;
	width: 50%;
	margin-left: 50%;
	padding-left: 20px;
}

/* ========================================
   UPLOAD
======================================== */

.cp-upload-box{
    border:2px dashed #E2E8F0;
    border-radius:12px;
    padding:34px;
    display:block;
    cursor:pointer;
    transition:.2s;
    background:#F5F9FC80;
}

.cp-upload-box:hover{
    border-color:#2196f3;
    background:#f7fbff;
}

.cp-upload-inner{
    text-align:center;
}

.cp-upload-icon{
    width:60px;
    height:60px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 12px;
}

.cp-upload-inner div{
	font-family: "Inter", Sans-serif;
    font-size:14px;
    font-weight:500;
    color:#0A1628;
}

.cp-upload-inner small{
    display:block;
    margin-top:12px;
    color:#4A6A85;
	font-family: "Inter", Sans-serif;
    font-size:12px;
    font-weight:400;
}
.cp-upload-filename{
    margin-top:30px;
    font-size:12px;
	font-family: "Inter", Sans-serif;
	font-weight:400;
    color:#4A6A85;
    word-break:break-word;
	text-align: center;
}

.cp-upload-box.has-file{
    border-color:#16a34a;
    background:#f0fdf4;
}

.cp-upload-box.has-file .cp-upload-filename{
    color:#15803d;
    font-weight:600;
}
/* ========================================
   CHECKBOX
======================================== */

.cp-checkbox-wrap{
    display:flex;
    align-items:flex-start;
    gap:12px;
    margin:48px 64px 100px 64px;
    padding:20px;
    border:1px solid #DDE8F0;
    border-radius:8px;
    background:#E8F7FD4D;
}

.cp-checkbox-wrap input{
    margin-top:3px;
}

.cp-checkbox-wrap span{
	font-family: "Inter", Sans-serif;
    font-size:14px;
    font-weight:500;
    color:#0A1628;
}
.cp-checkbox-wrap span a{
	color:#00AEEF;
}

/* ========================================
   FOOTER
======================================== */

.cp-footer{
    margin-top:40px;
    display:flex;
    justify-content:space-between;
    align-items:center;
	padding: 13px 32px;
	border-top: 1px solid #E5E7EB;
	background: #F5F9FC;
}

.cp-back-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    height:54px;
    padding:0 24px;
    background:none;
    color:#0A1628;
	font-family:"Poppins", Sans-serif;
    font-size:14px;
    font-weight:500;
    text-decoration:none;
    transition:.2s;
}

.cp-back-btn:hover{
    background:none;
}

.cp-continue-btn{
    height:40px;
    padding:2px 32px !important;
    border:none !important;
    border-radius:999px !important;
    background:#0A1628 !important;
    color:#fff !important;
	font-family:"Poppins", Sans-serif;
    font-size:14px !important;
    font-weight:500 !important;
    cursor:pointer;
    transition:.2s;
    box-shadow:
        0px 4px 6px rgba(0,0,0,0.1),
        0px 2px 4px rgba(0,0,0,0.08);
}

.cp-continue-btn:hover{
    transform:translateY(-1px);
}

.cp-continue-btn:disabled{
	background:rgba(0,0,0, 0.1) !important;
    pointer-events: none;
}

/* ========================================
   CV CHECKS
======================================== */
.cp-cv-section{
    margin-top:60px;
}

.cp-cv-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
}

.cp-cv-section .cp-package-card{
    margin:0;
	border: 2px solid #00AEEF;
}
.cp-section-title {
	font-family: "Inter", Sans-serif;
    font-size: 14px;
    font-weight: 700;
	color: #0A1628;
	text-align: center;
	margin-bottom: 30px;
}

/* ========================================
   MOBILE
======================================== */

@media(max-width:768px){

    .cp-step-page{
        padding:30px 16px;
    }

    .cp-card{
        padding:28px;
    }

    .cp-title{
        font-size:34px;
    }

    .cp-subtitle{
        font-size:15px;
    }

    .cp-grid-2,
    .cp-consent-grid{
        grid-template-columns:1fr;
    }

    .cp-footer{
        flex-direction:column;
        gap:16px;
    }

    .cp-back-btn,
    .cp-continue-btn{
        width:100%;
    }

    .cp-step-label{
        font-size:12px;
    }

}