/* ==========================================================
   ORION VPS
   CSS v2.0
========================================================== */


/* ==========================================================
   VARIABLES
========================================================== */

:root{

    /* Layout */
    --orion-width:76%;
    --orion-radius:18px;

    /* Colors */
    --orion-primary:#5a26c9;
    --orion-primary-dark:#45209a;

    --orion-accent:#fa4a2d;

    --orion-text:#222;
    --orion-text-light:#666;

    --orion-bg:#ffffff;
    --orion-bg-soft:#f8f8fc;

    --orion-border:#ececf5;

    /* Shadows */

    --shadow-sm:
        0 4px 12px rgba(0,0,0,.05);

    --shadow-md:
        0 10px 28px rgba(0,0,0,.08);

    --shadow-lg:
        0 18px 40px rgba(0,0,0,.10);

    /* Animation */

    --transition:.30s ease;

}


/* ==========================================================
   RESET
========================================================== */

*{
    box-sizing:border-box;
}

.orion-vps-box *{
    box-sizing:border-box;
}


/* ==========================================================
   CONTAINER
========================================================== */

.orion-vps-box{

    width:100%;
    margin:60px auto;

}


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

.orion-layout{

    width:100%;
    display:flex;

    gap:40px;

    align-items:flex-start;

}


/* ==========================================================
   LEFT COLUMN
========================================================== */

.orion-left{

    flex:1;

    display:flex;

    flex-direction:column;

    gap:40px;

}


/* ==========================================================
   RIGHT COLUMN
========================================================== */

.orion-right{

    width:340px;

    flex-shrink:0;
    width:290px;
    flex-shrink:0;
    display:flex;
    align-items:stretch;
}


/* ==========================================================
   SECTION TITLE
========================================================== */
/* ==========================================================
   ORION LAYOUT
========================================================== */
.orion-layout{

    display:flex;
    align-items:stretch;
    gap:30px;
	border: 2px solid #5a26c9;
	border-radius: 10px;
}

.orion-left{
    flex:1;
    display:flex;
    flex-direction:column;
}

.orion-left-top{
	margin-top: 25px;
    margin-bottom:1px;

}

.orion-left-bottom{
    flex:1;
}

.orion-right{
    width:290px;
    flex-shrink:0;
    display:flex;
    align-items:stretch;
}


.orion-specs{
    flex:1;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}

.orion-title{
    font-size:34px;
    font-weight:700;
    line-height:1.2;
    color:var(--orion-text);
    margin:0 0 12px;
	text-align: center;
}


.orion-subtitle{

    font-size:17px;

    color:var(--orion-text-light);

    margin:0;

    line-height:1.7;

}



/* ==========================================================
   VPS LABELS
========================================================== */
.orion-slider-labels{
    display:flex;
    justify-content:space-between;
    align-items:center;
    width:100%;
    margin-bottom:18px;
}

.orion-slider-label{
    width:110px;
    text-align:center;
    font-size:1.6em;
    font-weight:600;
    color:#777;
    cursor:pointer;
    transition:.25s;
    user-select:none;
    flex-shrink:0;
}

.orion-slider-label.active{
    color:#fa4a2d;
	font-size: 1.6em;
    font-weight:600;
}

/* ==========================================================
   PRICE BOX
========================================================== */

.orion-price-box{
    width:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    background:#261345;
	border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    color:#fff;
    text-align:center;
}

.orion-plan-name{
    font-size:24px;
    font-weight:700;
    margin-bottom:25px;
}

.orion-price{
    margin-bottom:30px;
}

.orion-price .currency{
    font-size:30px;
    vertical-align:top;
}

.orion-price #plan-price{
    font-size:56px;
    font-weight:700;
    line-height:1;
}

.orion-price #plan-cycle{
    display:block;
    margin-top:0px;
    opacity:.90;
	font-size: 16px;
/*    line-height: 5px; */
    position: relative;
}



/* ==========================================================
   BLOCKS
========================================================== */

.orion-card{

    background:#fff;

    border:1px solid var(--orion-border);

    border-radius:var(--orion-radius);

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}


.orion-card:hover{

    box-shadow:var(--shadow-md);

}

/* ==========================================================
   SLIDER SECTION
========================================================== */

.orion-slider{

    width:100%;

}

.orion-slider-track{

    width:var(--orion-width);

    margin:0 auto;

    position:relative;

}


.purple-text {
    color: #5a26c9;
	font-size: 24px;
	font-weight: 600;
	margin-bottom: 30px;
}


/* ==========================================================
   RANGE
========================================================== */

#plan-slider{

    width:calc(100% - 6rem);

    margin:0 auto;

    display:block;

    appearance:none;

    -webkit-appearance:none;

    background:transparent;

    cursor:pointer;

}


/* ==========================================================
   TRACK
========================================================== */

#plan-slider::-webkit-slider-runnable-track{

    height:8px;

    border-radius:20px;

    background:#e8e8f2;

}

#plan-slider::-moz-range-track{

    height:8px;

    border-radius:20px;

    background:#e8e8f2;

}


/* ==========================================================
   THUMB
========================================================== */

#plan-slider::-webkit-slider-thumb{

    appearance:none;

    -webkit-appearance:none;

    width:24px;

    height:24px;

    border-radius:50%;

    background:var(--orion-primary);

    border:4px solid #fff;

    box-shadow:0 5px 18px rgba(90,38,201,.30);

    margin-top:-8px;

    transition:var(--transition);

}

#plan-slider::-webkit-slider-thumb:hover{

    transform:scale(1.08);

}

#plan-slider::-moz-range-thumb{

    width:24px;

    height:24px;

    border:none;

    border-radius:50%;

    background:var(--orion-primary);

    box-shadow:0 5px 18px rgba(90,38,201,.30);

    transition:var(--transition);

}

#plan-slider::-moz-range-thumb:hover{

    transform:scale(1.08);

}


/* ==========================================================
   PLAN LABELS
========================================================== */

.orion-plan-labels{

    width:100%;

    display:flex;

    justify-content:space-between;

    margin-top:18px;

    user-select:none;

}

.orion-plan{

    flex:1;

    text-align:center;

    cursor:pointer;

    transition:var(--transition);

}

.orion-plan-name{
    display:block;
    font-size:14px;
    font-weight:600;
    color:#fff;
    margin-bottom:4px;
}

.orion-plan-price{

    display:block;

    font-size:13px;

    color:#999;

}


/* ==========================================================
   ACTIVE PLAN
========================================================== */

.orion-plan.active .orion-plan-name{

    color:var(--orion-primary);

}

.orion-plan.active .orion-plan-price{

    color:var(--orion-primary);

    font-weight:600;

}


/* ==========================================================
   FEATURES
========================================================== */

.orion-features{

    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:18px;

}


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

.orion-feature{

    display:flex;

    align-items:flex-start;

    gap:16px;

    padding:18px;

    background:#fff;

    border:1px solid var(--orion-border);

    border-radius:14px;

    transition:var(--transition);

}

.orion-feature:hover{

    transform:translateY(-3px);

    box-shadow:var(--shadow-sm);

}


/* ==========================================================
   FEATURE ICON
========================================================== */

.orion-feature-icon{

    width:46px;

    height:46px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:12px;

    background:#f5f2ff;

    color:var(--orion-primary);

    flex-shrink:0;

}

.orion-feature-icon img{

    width:24px;

    height:24px;

    display:block;

}


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

.orion-feature-content{

    flex:1;

}

.orion-feature-title{

    font-size:16px;

    font-weight:600;

    color:var(--orion-text);

    margin-bottom:6px;

}

.orion-feature-text{

    font-size:14px;

    color:var(--orion-text-light);

    line-height:1.6;

}

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

.orion-price-card{

    position:sticky;
    top:30px;

    padding:32px;

    background:#fff;

    border:1px solid var(--orion-border);

    border-radius:var(--orion-radius);

    box-shadow:var(--shadow-md);

}


/* ==========================================================
   PLAN NAME
========================================================== */

.orion-plan-title{

    font-size:28px;

    font-weight:700;

    color:var(--orion-text);

    margin:0;

}


/* ==========================================================
   PRICE
========================================================== */

.orion-price{

    display:flex;

    align-items:flex-end;

    gap:8px;

    margin:24px 0 10px;

}

.orion-price-value{

    font-size:52px;

    font-weight:700;

    line-height:1;

    color:var(--orion-primary);

}

.orion-price-currency{

    font-size:24px;

    font-weight:700;

    margin-bottom:6px;

    color:var(--orion-primary);

}

.orion-price-period{

    font-size:15px;

    color:var(--orion-text-light);

    margin-bottom:8px;

}


/* ==========================================================
   SHORT DESCRIPTION
========================================================== */

.orion-price-description{

    margin-bottom:28px;

    color:var(--orion-text-light);

    line-height:1.7;

    font-size:15px;

}


/* ==========================================================
   INCLUDED FEATURES
========================================================== */

.orion-price-features{

    margin:0;
    padding:0;

    list-style:none;

}

.orion-price-features li{

    display:flex;

    align-items:center;

    gap:12px;

    padding:12px 0;

    border-bottom:1px solid var(--orion-border);

}

.orion-price-features li:last-child{

    border-bottom:none;

}

.orion-price-features i{

    color:var(--orion-primary);

    font-size:15px;

    width:18px;

}


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

.orion-order{

    width:100%;

    margin-top:30px;

}

.orion-order-btn{

    display:flex;

    justify-content:center;

    align-items:center;

    width:100%;

    height:56px;

    border:none;

    border-radius:14px;

    background:var(--orion-primary);

    color:#fff;

    font-size:17px;

    font-weight:600;

    cursor:pointer;

    transition:var(--transition);

}

.orion-order-btn:hover{

    background:var(--orion-primary-dark);

    transform:translateY(-2px);

    box-shadow:var(--shadow-md);

}

.orion-order-btn:active{

    transform:translateY(0);

}


/* ==========================================================
   OPTIONAL BADGE
========================================================== */

.orion-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:7px 14px;

    margin-bottom:20px;

    border-radius:999px;

    background:#f3efff;

    color:var(--orion-primary);

    font-size:13px;

    font-weight:600;

}


/* ==========================================================
   CARTÃO
========================================================== */
#orion-card{
    max-width:900px;
    margin:0 auto;
    padding:50px;
    background:#ffffff;
}

#plan-name{
    margin:0;
    text-align:center;
    font-size:34px;
    color:#fff;
}

#plan-price{
    margin:2px 0;
    text-align:center;
    font-size:48px;
    font-weight:800;
    color:#fff;
}

#plan-features{
    margin:40px 0;
    padding:0;
    list-style:none;
}

#plan-features li{
    padding:10px 0;
    border-bottom:1px solid #f2f2f2;
}

#plan-button {
    margin: 0 auto; 
    text-align: center;
    padding: 10px 20px;
    border-radius: 25px;
    background: #fa4a2d;
    color: #ffffff;
    text-decoration: none;
	font-size: 13px;
    font-weight:400;
	margin-bottom: 20px;
}

#plan-button:hover {
    background:#fff;
    color:#fa4a2d;
    text-decoration:none;
}

/* ==========================================================
   SPEC CARDS
========================================================== */
.orion-spec{
    background:#ffffff;
    padding: 10px 20px;
    transition:.25s;
    display:flex;
    align-items:center;
    gap:5px;
}

.orion-spec:hover{
    transform:translateY(-4px);
    box-shadow:0 12px 30px rgba(0,0,0,.08);
}

.orion-spec-icon{
    width:58px;
    height:58px;
    border-radius:50%;
    background:#f4f1fd;
    color:#5a26c9;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    flex-shrink:0;
}

.orion-spec-content{
    display:flex;
    flex-direction:column;
}

.orion-label{
    font-size:14px;
    color:#888;
    margin-bottom:6px;
}

.orion-value{
    font-size:22px;
    font-weight:700;
    color:#222;
}

.text-center {
    font-size: 22px;
    line-height: 28px;
    font-weight: 600;
	margin-top: 50px;
	margin-bottom: 35px;	
    text-align: center !important;
}

.text-center h4 {
    font-size: 22px;
    line-height: 28px;
    font-weight: 600;
	margin-top: 50px;
	margin-bottom: 35px;
}


/* ==========================================================
   FADE ANIMATION
========================================================== */

@keyframes orionFade{

    from{

        opacity:0;
        transform:translateY(8px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

.orion-fade{

    animation:orionFade .35s ease;

}


/* Remove os bullets e alinha os itens na horizontal */
.grid-lista {
  list-style: none;
  padding: 0;
  margin: 0;
  
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* Garante exatamente 4 colunas por linha */
  gap: 16px 24px;         /* Espaço: 16px vertical (entre linhas) e 24px horizontal */
}

.grid-lista li {
  display: flex;
  align-items: center;
}

.grid-lista i {
  color: #fa4a2d;
  margin-right: -10px;
  font-size: 20px;   /* CONTROLO DO TAMANHO: Altere este valor (ex: 20px, 24px, 32px) */

}


/* ==========================================================
   RIGHT COLUMN
========================================================== */
.orion-plan-name{
    font-size:24px;
    font-weight:700;
    margin-bottom:25px;
text-align: center;
}

.orion-price{
    margin-bottom:30px;
}

.orion-price .currency{
    font-size:30px;
    vertical-align:top;
	padding-bottom: 20px;
	padding-left: 30px;
}

.orion-price #plan-price{
    font-size:56px;
    font-weight:700;
    line-height:1;
}

.orion-price #plan-cycle{
    display:block;
    margin-top:10px;
	margin-bottom: 10px;
    opacity:.90;
	font-size: 16px;
    line-height: 20px;
    position: relative;
}






/* Responsividade para ecrãs pequenos */
@media (max-width: 768px) {
  .grid-lista {
    grid-template-columns: repeat(2, 1fr); /* 2 por linha em tablets */
  }
}
@media (max-width: 480px) {
  .grid-lista {
    grid-template-columns: 1fr;            /* 1 por linha em telemóveis */
  }
}

/* Responsividade: Transforma em 1 coluna em ecrãs pequenos (ex: telemóveis) */
@media (max-width: 768px) {
  .grid-lista {
    grid-template-columns: 1fr;
  }
}



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

@media (max-width:1200px){

    .orion-layout{

        gap:30px;

    }

    .orion-right{

        width:320px;

    }

}


@media (max-width:992px){

    .orion-layout{

        flex-direction:column;

    }

    .orion-left,
    .orion-right{

        width:100%;

    }

    .orion-price-card{

        position:relative;

        top:auto;

    }

}


@media (max-width:768px){

    .orion-features{

        grid-template-columns:1fr;

    }

    .orion-title{

        font-size:28px;

    }

    .orion-price-value{

        font-size:44px;

    }

}


@media (max-width:576px){

    .orion-slider-track{

        width:100%;

    }

    #plan-slider{

        width:100%;

    }

    .orion-price-card{

        padding:24px;

    }

    .orion-plan-title{

        font-size:24px;

    }

    .orion-price-value{

        font-size:38px;

    }

    .orion-order-btn{

        height:52px;

        font-size:16px;

    }

}