/*=========================================================
ARJUNA PLANNERS
CHECKOUT.CSS

Checkout Page Only
=========================================================*/



/*=========================================================
CHECKOUT PAGE
=========================================================*/

.checkout-section{

    min-height:100vh;

    background:#F8FAFC;

    padding:50px 0 70px;

}



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

.checkout-header{

    width:100%;

    height:82px;

    background:#FFFFFF;

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

    position:sticky;

    top:0;

    z-index:999;

}



.checkout-header-container{

    max-width:1200px;

    height:100%;

    margin:0 auto;

    padding:0 24px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}



.checkout-logo{

    display:flex;

    align-items:center;

}



.checkout-logo img{

    height:55px;

    width:auto;

    display:block;

}



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

.checkout-container{

    max-width:1200px;

    margin:0 auto;

    padding:0 24px;

    display:grid;

    grid-template-columns:1.25fr .75fr;

    gap:50px;

    align-items:start;

}



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

.checkout-form-column{

    background:#FFFFFF;

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

    border-radius:20px;

    padding:40px;

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

}



/*=========================================================
HEADING
=========================================================*/

.checkout-heading{

    margin-bottom:35px;

}



.checkout-heading span{

    display:inline-block;

    margin-bottom:12px;

    color:var(--secondary);

    font-size:13px;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

}



.checkout-heading h1{

    font-family:'Open Sans',sans-serif;

    font-size:36px;

    margin-bottom:10px;

    color:var(--dark);

}



.checkout-heading p{

    color:var(--text);

    font-size:16px;

}



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

.checkout-form{

    display:flex;

    flex-direction:column;

    gap:22px;

}



/*=========================================================
ROWS
=========================================================*/

.checkout-row{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

}



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

.checkout-field{

    display:flex;

    flex-direction:column;

    gap:8px;

}



.checkout-field label{

    font-size:14px;

    font-weight:600;

    color:var(--dark);

}



.checkout-field input,

.checkout-field select{

    width:100%;

    height:54px;

    padding:0 16px;

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

    border-radius:12px;

    background:#FFFFFF;

    font-size:15px;

    color:var(--dark);

    transition:.25s ease;

}



.checkout-field input:focus,

.checkout-field select:focus{

    outline:none;

    border-color:var(--secondary);

    box-shadow:0 0 0 4px rgba(106,134,155,.12);

}



/*=========================================================
CHECKBOX
=========================================================*/

.checkout-checkbox{

    margin-top:8px;

}



.checkout-checkbox label{

    display:flex;

    align-items:flex-start;

    gap:10px;

    font-size:14px;

    color:var(--text);

    cursor:pointer;

}



.checkout-checkbox input{

    margin-top:3px;

}



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

.checkout-summary-column{

    position:sticky;

    top:110px;

}



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

.checkout-summary-card{

    background:#FFFFFF;

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

    border-radius:20px;

    padding:30px;

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

}



/*=========================================================
SUMMARY HEADING
=========================================================*/

.checkout-summary-heading{

    margin-bottom:25px;

    padding-bottom:16px;

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

}



.checkout-summary-heading h2{

    font-size:24px;

    color:var(--dark);

}



/*=========================================================
PRODUCT
=========================================================*/

.checkout-product{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:28px;

}



.checkout-product-image{

    width:90px;

    height:90px;

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

    border-radius:14px;

    overflow:hidden;

    background:#FFFFFF;

    flex-shrink:0;

}



.checkout-product-image img{

    width:100%;

    height:100%;

    object-fit:contain;

}



.checkout-product-info{

    flex:1;

}



.checkout-product-info h3{

    font-size:18px;

    margin-bottom:6px;

    color:var(--dark);

}



.checkout-product-info p{

    font-size:14px;

    color:var(--text);

}



/*=========================================================
ORDER DETAILS
=========================================================*/

.checkout-order-details{

    display:flex;

    flex-direction:column;

    gap:16px;

    margin-bottom:28px;

}



.checkout-order-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

}



.checkout-order-row span{

    color:var(--text);

    font-size:15px;

}



.checkout-order-row strong{

    color:var(--dark);

    font-size:16px;

    font-weight:700;

}



/*=========================================================
TOTAL
=========================================================*/

.checkout-total{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:22px 0;

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

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

    margin-bottom:24px;

}



.checkout-total span{

    font-size:18px;

    font-weight:700;

    color:var(--dark);

}



.checkout-total strong{

    font-size:28px;

    color:var(--primary);

    font-weight:700;

}



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

.checkout-pay-btn{

    width:100%;

    height:56px;

    border:none;

    border-radius:14px;

    background:var(--primary);

    color:#FFFFFF;

    font-size:17px;

    font-weight:700;

    cursor:pointer;

    transition:.30s ease;

}



.checkout-pay-btn:hover{

    background:var(--primary-dark);

    transform:translateY(-2px);

}

/*=========================================================
TRUST SECTION
=========================================================*/

.checkout-trust{

    margin-top:24px;

    display:flex;

    flex-direction:column;

    gap:12px;

}



.checkout-trust-item{

    display:flex;

    align-items:center;

    gap:10px;

    font-size:15px;

    color:var(--text);

}





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

.checkout-footer{

    margin-top:60px;

    padding:30px 0;

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

    background:#FFFFFF;

}



.checkout-footer-container{

    max-width:1200px;

    margin:0 auto;

    padding:0 24px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

}



.checkout-footer p{

    font-size:14px;

    color:var(--text);

}



.checkout-footer-links{

    display:flex;

    gap:24px;

    flex-wrap:wrap;

}



.checkout-footer-links a{

    font-size:14px;

    color:var(--text);

    transition:.25s ease;

}



.checkout-footer-links a:hover{

    color:var(--secondary);

}





/*=========================================================
FORM PLACEHOLDER
=========================================================*/

.checkout-field input::placeholder{

    color:#9AA8B8;

}



.checkout-field select{

    appearance:none;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236A869B' d='M6 8L0 0h12z'/%3E%3C/svg%3E");

    background-repeat:no-repeat;

    background-position:right 16px center;

    padding-right:42px;

}





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

.checkout-pay-btn:active{

    transform:translateY(0);

}



.checkout-pay-btn:disabled{

    opacity:.6;

    cursor:not-allowed;

}





/*=========================================================
TABLET
=========================================================*/

@media (max-width:991px){

.checkout-section{

    padding:40px 0 60px;

}



.checkout-container{

    grid-template-columns:1fr;

    gap:35px;

}



.checkout-summary-column{

    position:static;

}



.checkout-form-column{

    padding:32px;

}



.checkout-summary-card{

    padding:28px;

}



.checkout-footer-container{

    flex-direction:column;

    text-align:center;

}



}





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

@media (max-width:768px){

.checkout-header{

    height:72px;

}



.checkout-header-container{

    padding:0 18px;

}



.checkout-logo img{

    height:46px;

}



.checkout-section{

    padding:30px 0 50px;

}



.checkout-container{

    padding:0 18px;

}



.checkout-form-column{

    padding:24px;

    border-radius:16px;

}



.checkout-summary-card{

    padding:24px;

    border-radius:16px;

}



.checkout-heading h1{

    font-size:30px;

}



.checkout-row{

    grid-template-columns:1fr;

    gap:18px;

}



.checkout-product{

    align-items:flex-start;

}



.checkout-product-image{

    width:80px;

    height:80px;

}



.checkout-total strong{

    font-size:24px;

}



.checkout-pay-btn{

    height:54px;

    font-size:16px;

}



.checkout-footer{

    margin-top:40px;

}



.checkout-footer-links{

    justify-content:center;

    gap:16px;

}



}





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

@media (max-width:480px){

.checkout-container{

    padding:0 14px;

}



.checkout-form-column{

    padding:20px;

}



.checkout-summary-card{

    padding:20px;

}



.checkout-heading h1{

    font-size:26px;

}



.checkout-product{

    gap:14px;

}



.checkout-product-image{

    width:72px;

    height:72px;

}



.checkout-total{

    padding:18px 0;

}



.checkout-total span{

    font-size:17px;

}



.checkout-total strong{

    font-size:22px;

}



.checkout-footer p{

    text-align:center;

}



.checkout-footer-links{

    flex-direction:column;

    align-items:center;

    gap:10px;

}

}