/**
 * HesabPay Payment Gateway for WooCommerce - Main Stylesheet
 * 
 * @package     WooCommerce_HesabPay
 * @subpackage  Assets
 * @category    Frontend CSS
 * @version     1.0.2
 * @author      HesabPay Development Team
 * @copyright   © 2024 HesabPay Financial Services
 * @license     GPL-3.0-or-later
 *
 * This stylesheet contains all front-facing visual styles for the
 * HesabPay WooCommerce payment gateway extension.
 */

/* ==========================================================================
   TABLE OF CONTENTS
   ========================================================================== */

/*
 * 1.0 BASE STYLES
 *   1.1 Container Elements
 *   1.2 Branding & Logo
 * 2.0 FORM ELEMENTS
 * 3.0 COMPONENTS
 *   3.1 Exchange Rate Display
 *   3.2 Admin Error Styles
 * 4.0 RESPONSIVE ADJUSTMENTS
 */

/* ==========================================================================
   1.0 BASE STYLES
   ========================================================================== */

/* 1.1 Container Elements
   -------------------------------------------------------------------------- */
.hesabpay-container {
    margin: 15px 0;
    padding: 15px;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    background: #f9f9f9;
}

/* 1.2 Branding & Logo
   -------------------------------------------------------------------------- */
.hesabpay-logo {
    filter: grayscale(1);
    opacity: 0.6;
    max-height: 24px;
    vertical-align: middle;
    display: inline-block;
    margin-left: 5px;
    float: right;
    margin: 5px 0px 0px 0px !important;
}

/* ==========================================================================
   2.0 FORM ELEMENTS
   ========================================================================== */
.hesabpay-form input[type="text"],
.hesabpay-form input[type="password"] {
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 3px;
    width: 100%;
    max-width: 400px;
}

/* ==========================================================================
   3.0 COMPONENTS
   ========================================================================== */

/* 3.1 Exchange Rate Display
   -------------------------------------------------------------------------- */
#hesabpay-exchange-rate {
    margin-bottom: 20px;
    padding: 10px;
    background-color: #d1ecf1;
    border: 1px solid #bee5eb;
    border-radius: 4px;
    font-size: 17px;
    text-align: center;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* 3.2 Admin Error Styles
   -------------------------------------------------------------------------- */
.hesabpay-error-message {
    color: #d63638;
    font-size: 13px;
    margin-top: 5px;
    display: block;
}

input.error {
    border-color: #d63638 !important;
}

/* ==========================================================================
   4.0 RESPONSIVE ADJUSTMENTS
   ========================================================================== */
@media (max-width: 768px) {
    .hesabpay-container {
        padding: 10px;
    }
    
    .hesabpay-logo {
        max-height: 20px;
        margin: 5px 0px 0px 0px !important;
    }
}