/**

 * CSS for GuruSinergi Checkout Pages

 * 

 * Styling for checkout, order received, and related pages

 */



/* Variables (should match cart.css) */

:root {

    --gs-primary-color: #4273FA;

    --gs-secondary-color: #8A56FF;

    --gs-success-color: #2ecc71;

    --gs-danger-color: #e74c3c;

    --gs-warning-color: #f39c12;

    --gs-info-color: #3498db;

    --gs-light-color: #f8f9fa;

    --gs-dark-color: #343a40;

    --gs-white-color: #ffffff;

    --gs-black-color: #222222;

    --gs-gray-color: #6c757d;

    --gs-light-gray-color: #e9ecef;

    

    --gs-border-radius: 6px;

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

    --gs-transition: all 0.3s ease;

    

    --gs-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

}



/* Checkout Page Styles */

.gs-checkout-wrapper {

    max-width: 1200px;

    margin: 0 auto;

    padding: 40px 20px;

    font-family: var(--gs-font-family);

}



.gs-checkout-title {

    text-align: center;

    margin-bottom: 40px;

    font-size: 32px;

    font-weight: 600;

}



.gs-checkout-columns {

    display: flex;

    flex-wrap: wrap;

    gap: 30px;

    margin-bottom: 30px;

}



.gs-checkout-column {

    flex: 1;

    min-width: 300px;

}



.gs-checkout-details {

    flex: 2;

}



.gs-checkout-summary {

    flex: 1;

    background-color: var(--gs-light-color);

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

    padding: 20px;

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

}



.gs-checkout-column h2 {

    font-size: 24px;

    font-weight: 600;

    margin-bottom: 20px;

    padding-bottom: 10px;

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

}



/* Form Styles */

.gs-form-row {

    margin-bottom: 20px;

}



.gs-form-row label {

    display: block;

    margin-bottom: 5px;

    font-weight: 500;

}



.gs-form-row label .required {

    color: var(--gs-danger-color);

}



.gs-form-row input[type="text"],

.gs-form-row input[type="email"],

.gs-form-row input[type="tel"],

.gs-form-row select,

.gs-form-row textarea {

    width: 100%;

    padding: 12px 15px;

    border: 1px solid var(--gs-light-gray-color);

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

    font-family: var(--gs-font-family);

    font-size: 16px;

    line-height: 1.5;

    transition: var(--gs-transition);

}



.gs-form-row input[type="text"]:focus,

.gs-form-row input[type="email"]:focus,

.gs-form-row input[type="tel"]:focus,

.gs-form-row select:focus,

.gs-form-row textarea:focus {

    border-color: var(--gs-primary-color);

    outline: none;

    box-shadow: 0 0 0 3px rgba(66, 115, 250, 0.2);

}



.gs-field-error {

    display: block;

    margin-top: 5px;

    color: var(--gs-danger-color);

    font-size: 14px;

}



/* Checkout Errors */

.gs-checkout-errors {

    background-color: #fff9f9;

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

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

    padding: 15px 20px;

    margin-bottom: 30px;

    color: var(--gs-danger-color);

}



.gs-checkout-error-heading {

    font-weight: 600;

    margin-bottom: 10px;

}



.gs-checkout-errors ul {

    margin: 0;

    padding-left: 20px;

}



.gs-checkout-errors li {

    margin-bottom: 5px;

}



/* Payment Methods */

.gs-payment-methods {

    margin-bottom: 30px;

}



.gs-payment-method {

    border: 1px solid var(--gs-light-gray-color);

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

    margin-bottom: 15px;

    transition: var(--gs-transition);

}



.gs-payment-method:hover {

    border-color: var(--gs-primary-color);

}



.gs-payment-method-label {

    display: flex;

    align-items: center;

    padding: 15px;

    cursor: pointer;

}



.gs-payment-method-input {

    margin-right: 10px;

}



.gs-payment-method-icon {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 24px;

    height: 24px;

    margin-right: 10px;

    color: var(--gs-primary-color);

}



.gs-payment-method-title {

    font-weight: 500;

}



.gs-payment-method-description {

    padding: 0 15px 15px;

    border-top: 1px solid var(--gs-light-gray-color);

    font-size: 14px;

    color: var(--gs-gray-color);

    margin-top: -1px;

    display: none;

}



.gs-payment-method-input:checked ~ .gs-payment-method-description {

    display: block;

}



.gs-payment-method-input:checked + .gs-payment-method-icon {

    color: var(--gs-primary-color);

}



.gs-payment-method-fields {

    margin-top: 15px;

    padding-top: 15px;

    border-top: 1px dashed var(--gs-light-gray-color);

}



.gs-bank-options,

.gs-provider-options {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 10px;

}



.gs-bank-option,

.gs-provider-option {

    display: inline-flex;

    align-items: center;

    padding: 8px 12px;

    border: 1px solid var(--gs-light-gray-color);

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

    transition: var(--gs-transition);

    cursor: pointer;

}



.gs-bank-option:hover,

.gs-provider-option:hover {

    border-color: var(--gs-primary-color);

}



.gs-bank-option input,

.gs-provider-option input {

    margin-right: 5px;

}



/* Order Summary */

.gs-checkout-products {

    margin-bottom: 20px;

    max-height: 400px;

    overflow-y: auto;

}



.gs-checkout-product {

    display: flex;

    align-items: center;

    padding: 15px 0;

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

}



.gs-checkout-product:last-child {

    border-bottom: none;

}



.gs-checkout-product-image {

    width: 60px;

    height: 60px;

    margin-right: 15px;

}



.gs-checkout-product-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

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

}



.gs-checkout-product-details {

    flex-grow: 1;

}



.gs-checkout-product-title {

    font-size: 16px;

    font-weight: 500;

    margin: 0 0 5px;

}



.gs-checkout-product-meta {

    display: flex;

    align-items: center;

    justify-content: flex-start;

    font-size: 14px;

    color: var(--gs-gray-color);

}



.gs-checkout-product-price {

    margin-right: 10px;

}



.gs-checkout-product-subtotal {

    font-weight: 500;

    font-size: 16px;

}



.gs-checkout-totals {

    margin-bottom: 20px;

    padding-top: 20px;

    border-top: 1px solid var(--gs-light-gray-color);

}



.gs-checkout-subtotal,

.gs-checkout-discount,

.gs-checkout-total {

    display: flex;

    justify-content: space-between;

    margin-bottom: 10px;

}



.gs-checkout-total {

    font-weight: 600;

    font-size: 18px;

    margin-top: 10px;

    padding-top: 10px;

    border-top: 1px dashed var(--gs-light-gray-color);

}



.gs-checkout-actions {

    margin-bottom: 20px;

}



.gs-checkout-security {

    font-size: 14px;

    color: var(--gs-gray-color);

    text-align: center;

}



.gs-checkout-security p {

    margin-bottom: 10px;

}



.gs-icon-lock {

    display: inline-block;

    width: 16px;

    height: 16px;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M19 10h1a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V11a1 1 0 0 1 1-1h1V9a7 7 0 0 1 14 0v1zm-2 0V9A5 5 0 0 0 7 9v1h10zm-6 4v4h2v-4h-2z' fill='rgba(108,117,125,0.8)'/%3E%3C/svg%3E");

    background-size: contain;

    background-position: center;

    background-repeat: no-repeat;

    vertical-align: middle;

    margin-right: 5px;

}



/* Order Received Page Styles */

.gs-order-received-wrapper {

    max-width: 800px;

    margin: 0 auto;

    padding: 40px 20px;

    font-family: var(--gs-font-family);

}



.gs-order-received-header {

    display: flex;

    align-items: center;

    margin-bottom: 40px;

}



.gs-order-received-icon {

    margin-right: 20px;

}



.gs-order-received-title h1 {

    margin: 0 0 10px;

    font-size: 28px;

    font-weight: 600;

}



.gs-order-received-title p {

    margin: 0;

    color: var(--gs-gray-color);

}



.gs-order-received-details,

.gs-order-received-instructions,

.gs-order-received-items,

.gs-order-received-customer {

    margin-bottom: 40px;

    padding: 20px;

    background-color: var(--gs-white-color);

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

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

}



.gs-order-received-details h2,

.gs-order-received-instructions h2,

.gs-order-received-items h2,

.gs-order-received-customer h2 {

    margin-top: 0;

    margin-bottom: 20px;

    font-size: 20px;

    font-weight: 600;

    padding-bottom: 10px;

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

}



.gs-order-info {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

}



.gs-order-info-item {

    flex: 1;

    min-width: 150px;

    padding: 10px;

    background-color: var(--gs-light-color);

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

}



.gs-order-info-label {

    display: block;

    margin-bottom: 5px;

    font-size: 14px;

    color: var(--gs-gray-color);

}



.gs-order-info-value {

    font-weight: 600;

    font-size: 16px;

}



.gs-order-status-pending {

    color: var(--gs-warning-color);

}



.gs-order-status-processing {

    color: var(--gs-info-color);

}



.gs-order-status-completed {

    color: var(--gs-success-color);

}



.gs-order-status-cancelled,

.gs-order-status-failed {

    color: var(--gs-danger-color);

}



.gs-order-items-table {

    width: 100%;

    border-collapse: collapse;

    margin-bottom: 20px;

}



.gs-order-items-table th,

.gs-order-items-table td {

    padding: 12px;

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

    text-align: left;

}



.gs-order-items-table th {

    font-weight: 600;

    background-color: var(--gs-light-color);

}



.gs-order-items-table tbody tr:hover {

    background-color: rgba(66, 115, 250, 0.05);

}



.gs-order-item-product {

    width: 40%;

}



.gs-order-item-quantity {

    width: 15%;

    text-align: center;

}



.gs-order-item-price,

.gs-order-item-subtotal {

    width: 20%;

    text-align: right;

}



.gs-order-items-table tfoot tr {

    font-weight: 500;

}



.gs-order-items-table tfoot td {

    text-align: right;

}



.gs-order-total {

    font-weight: 600;

    font-size: 18px;

    border-top: 2px solid var(--gs-light-gray-color);

}



.gs-customer-info {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

    gap: 15px;

}



.gs-customer-info-item {

    padding: 10px;

    background-color: var(--gs-light-color);

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

}



.gs-customer-info-label {

    display: block;

    margin-bottom: 5px;

    font-size: 14px;

    color: var(--gs-gray-color);

}



.gs-customer-info-value {

    font-weight: 500;

}



.gs-order-received-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 15px;

    margin-bottom: 30px;

    justify-content: center;

}



.gs-order-received-help {

    text-align: center;

    color: var(--gs-gray-color);

}



/* Payment Instructions */

.gs-payment-instructions {

    margin-top: 15px;

}



.gs-payment-instructions h3 {

    margin-top: 0;

    margin-bottom: 15px;

    font-size: 18px;

    font-weight: 600;

}



.gs-payment-instructions h4 {

    margin-top: 20px;

    margin-bottom: 10px;

    font-size: 16px;

    font-weight: 600;

}



.gs-payment-detail {

    background-color: var(--gs-light-color);

    padding: 15px;

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

    margin-bottom: 20px;

}



.gs-payment-detail p {

    margin: 5px 0;

}



.gs-payment-steps ol {

    margin: 10px 0;

    padding-left: 20px;

}



.gs-payment-steps li {

    margin-bottom: 8px;

}



.gs-payment-steps li ol {

    margin-top: 8px;

}



.gs-payment-note {

    margin-top: 20px;

    padding: 15px;

    background-color: #fff9e6;

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

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

}



.gs-payment-note p {

    margin-top: 0;

}



.gs-payment-note ul {

    margin: 10px 0;

    padding-left: 20px;

}



.gs-payment-note li {

    margin-bottom: 5px;

}



.gs-status-success {

    color: var(--gs-success-color);

    font-weight: 600;

}



.gs-status-pending {

    color: var(--gs-warning-color);

    font-weight: 600;

}



.gs-payment-success {

    padding: 15px;

    background-color: #e8f5e9;

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

    margin-bottom: 20px;

}



.gs-payment-pending {

    padding: 15px;

    background-color: #fff9e6;

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

    margin-bottom: 20px;

}



/* Responsive styles */

@media (max-width: 768px) {

    .gs-checkout-columns {

        flex-direction: column;

    }

    

    .gs-order-info {

        flex-direction: column;

    }

    

    .gs-order-received-header {

        flex-direction: column;

        text-align: center;

    }

    

    .gs-order-received-icon {

        margin-right: 0;

        margin-bottom: 20px;

    }

    

    .gs-order-items-table {

        display: block;

        overflow-x: auto;

    }

}



/* Set icons for payment methods */

.gs-icon-bank {

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M2 20h20v2H2v-2zm2-8h2v7H4v-7zm5 0h2v7H9v-7zm4 0h2v7h-2v-7zm5 0h2v7h-2v-7zM2 7l10-5 10 5v4H2V7zm2 1.236V9h16v-.764l-8-4-8 4zM12 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2z' fill='%234273FA'/%3E%3C/svg%3E");

    background-size: contain;

    background-position: center;

    background-repeat: no-repeat;

}



.gs-icon-wallet {

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M18 7h3a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h15v4zM4 9v10h16V9H4zm0-4v2h12V5H4zm11 8h3v2h-3v-2z' fill='%234273FA'/%3E%3C/svg%3E");

    background-size: contain;

    background-position: center;

    background-repeat: no-repeat;

}



.gs-icon-credit-card {

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M22 10v10a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V10h20zm0-2H2V4a1 1 0 0 1 1-1h18a1 1 0 0 1 1 1v4zm-7 8v2h4v-2h-4z' fill='%234273FA'/%3E%3C/svg%3E");

    background-size: contain;

    background-position: center;

    background-repeat: no-repeat;

}