/*======================================================
  SORIANO DESIGN SYSTEM
  COMPONENTS.CSS
  Version : 1.0
  Status  : Approved
======================================================*/


/*======================================================
  DESIGN TOKENS
======================================================*/

:root{

    /* COLORS */

    --color-primary:#f59e0b;
    --color-dark:#161616;
    --color-text:#666666;
    --color-border:#ececec;
    --color-white:#ffffff;


    /* LAYOUT */

    --container-width:1100px;
    --content-width:850px;
    --header-height:90px;


    /* SPACING */

    --space-xs:10px;
    --space-sm:20px;
    --space-md:40px;
    --space-lg:60px;
    --space-xl:120px;


    /* BORDER RADIUS */

    --radius-sm:8px;
    --radius-md:15px;
    --radius-lg:30px;


    /* TRANSITIONS */

    --transition:0.30s ease;

}



/*======================================================
  COMPONENT C001
  MAIN CONTAINER

  Version : 1.0
  Status  : Approved
======================================================*/

.sbs-container{

    width:100%;
    max-width:var(--container-width);

    margin:0 auto;

    padding:0 var(--space-sm);

}



/*======================================================
  COMPONENT C002
  CONTENT CONTAINER

  Version : 1.0
  Status  : Approved
======================================================*/

.content-container{

    width:100%;
    max-width:var(--content-width);

    margin:0 auto;

    padding:0 var(--space-sm);

}



/*======================================================
  COMPONENT C003
  PAGE HEADER

  Version : 1.0
  Status  : Approved
======================================================*/

.page-header{

    background:var(--color-white);

    padding:calc(var(--header-height) + 30px) 0 var(--space-lg);

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

}



/* Breadcrumb */

.page-breadcrumb{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:8px;

    margin-bottom:18px;

    font-size:.90rem;

    color:var(--color-text);

}

.page-breadcrumb a{

    color:var(--color-text);

    text-decoration:none;

    transition:var(--transition);

}

.page-breadcrumb a:hover{

    color:var(--color-primary);

}

.page-breadcrumb .current{

    color:var(--color-dark);

    font-weight:600;

}



/* Page Title */

.page-title{

    font-size:2.5rem;

    font-weight:700;

    line-height:1.20;

    color:var(--color-dark);

    margin-bottom:14px;

}



/* Description */

.page-description{

    max-width:700px;

    color:var(--color-text);

    font-size:1.05rem;

    line-height:1.8;

}



/* Orange Divider */

.page-divider{

    width:70px;

    height:4px;

    margin-top:24px;

    border-radius:999px;

    background:var(--color-primary);

}

/*======================================================
  COMPONENT C004
  CONTENT SECTION

  Version : 1.0
  Status  : Approved
======================================================*/

.content-section{

    background:var(--color-white);

    padding:var(--space-lg) 0 80px;

}

.content-section h2{

    font-size:2rem;

    color:var(--color-dark);

    margin-bottom:20px;

    line-height:1.3;

}

.content-section p{

    color:var(--color-text);

    font-size:1.05rem;

    line-height:1.8;

    margin-bottom:20px;

}

/*======================================================
  COMPONENT C005
  FAQ ACCORDION

  Version : 1.0
  Status  : In Development
======================================================*/

.faq-item{

    background:var(--color-white);

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

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

    margin-bottom:18px;

    overflow:hidden;

    transition:var(--transition);

}

.faq-item.active{

    border-left:4px solid var(--color-primary);

}

.faq-question{

    width:100%;

    background:none;

    border:none;

    padding:22px 24px;

    display:flex;

    align-items:center;

    gap:16px;

    cursor:pointer;

    text-align:left;

    font-family:inherit;
}

.faq-icon{

    width:24px;

    min-width:24px;

    display:flex;

    justify-content:center;

    align-items:center;

    color:var(--color-primary);

    font-size:0.95rem;

}

.faq-icon i{

    transition:transform .30s ease;

}

.faq-item.active .faq-icon i{

    transform:rotate(180deg);

}

.faq-title{

    font-size:1.1rem;

    font-weight:600;

    color:var(--color-dark);

}

.faq-answer{

    display:none;

    padding:0 24px 24px 62px;

}

.faq-answer p{

    margin:0;

    color:var(--color-text);

    line-height:1.8;

}

.faq-content{

    background:#fff;

    padding:40px 0 80px;

}

/*======================================================
  COMPONENT C006
  SECTION HEADER

  Version : 1.0
  Status  : Approved
======================================================*/

.section-header{

    margin:60px 0 30px;

}

.section-header:first-child{

    margin-top:0;

}

.section-title{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:10px;

    font-size:1.8rem;

    font-weight:700;

    color:var(--color-dark);

}

.section-title i{

    color:#4b5563;

    font-size:1.4rem;

}

.section-description{

    color:var(--color-text);

    font-size:1rem;

    line-height:1.7;

    max-width:650px;

}

/*======================================================
  COMPONENT C007
  CONTENT BLOCK

  Version : 0.1
  Status  : In Development
======================================================*/

.content-block{

    margin-bottom:40px;

}

.content-block h3{

    font-size:1.5rem;

    font-weight:600;

    color:var(--color-dark);

    margin-bottom:18px;

    line-height:1.3;

}

.content-block p{

    color:var(--color-text);

    font-size:1.05rem;

    line-height:1.8;

    margin-bottom:18px;

}

.content-block p:last-child{

    margin-bottom:0;

}

.content-block ul{

    margin:20px 0;

    padding-left:22px;

}

.content-block li{

    color:var(--color-text);

    font-size:1.05rem;

    line-height:1.8;

    margin-bottom:12px;

}

.content-block li:last-child{

    margin-bottom:0;

}

/*======================================================
  PAGE
  CUSTOMER GUIDE

  Version : 0.1
  Status  : In Development
======================================================*/

.customer-guide-content{

    background:var(--color-white);

    padding:40px 0 80px;

}

/*======================================================
  PAGE
  PRIVACY POLICY

  Version : 0.1
  Status  : In Development
======================================================*/

.privacy-policy-content{

}

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

  Version : 1.0
======================================================*/

@media (max-width:768px){

    .page-header{

        padding:calc(var(--header-height) + 20px) 0 var(--space-md);

    }

    .page-title{

        font-size:2rem;

    }

    .page-description{

        font-size:1rem;

        line-height:1.7;

    }

}

/* Page Meta */

.page-meta{

    margin-top:16px;

    color:var(--color-text);

    font-size:.90rem;

    line-height:1.6;

}

.page-meta strong{

    color:var(--color-dark);

    font-weight:600;

}

.page-meta span{

    margin:0 6px;

}

/* Policy Cross-Reference Links */

.content-block a {
    color: var(--color-dark);
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.content-block a:hover {
    text-decoration: underline;
    opacity: 0.75;
}