/*!
Theme Name:   Yuki Westa Blog
Theme URI:    https://www.wpmoose.com/themes/yuki-westa-blog/
Author:       WP Moose
Author URI:   https://www.wpmoose.com
Description:  Multi-purpose and Customizable Free WordPress Blog Theme. based on the modern and highly customizable Yuki multipurpose WordPress theme. You can fully customize your site with rich customize options. It is perfect for personal bloggers and content publishers.
Template:     yuki
Version:      1.0.0
Tested up to: 6.6
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  yuki-westa-blog
Tags: news, blog, portfolio, grid-layout, one-column, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, block-styles, custom-background, custom-colors, custom-header, custom-logo, custom-menu, editor-style, featured-image-header, featured-images, footer-widgets, full-width-template, rtl-language-support, sticky-post, threaded-comments, theme-options, translation-ready, wide-blocks
*/

/* Modern form styling */
.subscription-form {
    max-width: 500px;
    margin: 0 auto;
    padding: 30px;
    background: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.subscription-form h2 {
    text-align: center;
    color: #333;
    font-size: 24px;
    margin-bottom: 20px;
}

.subscription-form form {
    display: flex;
    flex-direction: column;
}

.subscription-form label {
    font-size: 14px;
    margin-bottom: 5px;
    color: #555;
}

/* Inputs with only bottom border */
/* Inputs with only bottom border and override Tailwind styles */
.subscription-form input {
    padding: initial;
    font-size: 16px;
    border: none; /* Remove all borders */
    border-bottom: 2px solid #ccc; /* Only bottom border */
    margin-bottom: 20px;
    background-color: transparent;
    transition: border-color 0.3s ease-in-out;
    box-shadow: none; /* Ensure no shadow is applied */
}

/* Focus effect: Change only the bottom border color and remove ring shadow */
.subscription-form input:focus {
    border-bottom-color: #09b0b2; /* Change bottom border color on focus */
    outline: none; /* Remove default focus outline */
    box-shadow: none; /* Disable any additional shadow or ring */
}


/* Button styling */
.subscription-form button {
    padding: 12px 20px;
    background-color: #09b0b2;
    color: #fff;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* Button hover effect */
.subscription-form button:hover {
    background-color: #077f7f;
}

/* Error and success messages */
.error-message p,
.success-message {
    color: #d9534f;
    font-size: 14px;
    margin-bottom: 20px;
}

.success-message {
    font-size: 24px;
    color: #1cbea8;
    text-align: center;
}