/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
/* ============================================
   ROUNDED DESIGN SYSTEM -  Child Theme CSS
   ============================================ */

:root {
    /* Border Radius Scale */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    --radius-full: 9999px;
    
    /* Colors (optional - adjust to match your theme) */
    --color-primary: #5469d4;
    --color-border: #e0e0e0;
    --color-border-hover: #b8b8b8;
    
    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.1);
}

/* ============================================
   FORM ELEMENTS - Rounded 
   ============================================ */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="url"],
select,
textarea {
    border-radius: var(--radius-md) !important;
    transition: all 0.3s ease;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(84, 105, 212, 0.1);
}

input:hover:not(:focus),
select:hover:not(:focus),
textarea:hover:not(:focus) {
    border-color: var(--color-border-hover);
}

/* Quantity input - keep it compact */
.quantity input[type="number"],
input.qty {
    border-radius: var(--radius-sm) !important;
    padding: 8px 10px !important;
}

/* Credit Card Number - Special styling (only on checkout) */
.woocommerce-checkout input[type="text"]#card-number,
.woocommerce-checkout input[placeholder*="1234"] {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 2px;
    font-family: 'Courier New', monospace;
    border-radius: var(--radius-md) !important;
}

/* ============================================
   BUTTONS - Rounded (WITHOUT changing size)
   ============================================ */

button,
.button,
.btn,
input[type="submit"],
input[type="button"],
a.button {
    border-radius: var(--radius-md) !important;
    transition: all 0.3s ease;
}

/* Add to Cart button - keep original padding */
.single_add_to_cart_button {
    border-radius: var(--radius-md) !important;
}

.single_add_to_cart_button:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

/* Social share buttons - keep them small and rounded */
.share-buttons a,
.social-share button {
    border-radius: var(--radius-sm) !important;
}

/* Quantity buttons (+ and -) */
.quantity .plus,
.quantity .minus {
    border-radius: var(--radius-sm) !important;
}

/* Navigation arrows */
.product-nav a {
    border-radius: var(--radius-sm) !important;
}

/* Primary checkout buttons only */
.woocommerce-checkout button[type="submit"],
.checkout-button,
.place-order button {
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-md);
}

.woocommerce-checkout button[type="submit"]:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

/* Google Pay / Payment buttons */
.gpay-button,
.google-pay-button,
.payment-button {
    border-radius: var(--radius-md) !important;
}

/* ============================================
   CARDS & CONTAINERS - Rounded
   ============================================ */

.card,
.panel,
.widget,
.box {
    border-radius: var(--radius-lg) !important;
}

/* ============================================
   WOOCOMMERCE SPECIFIC - Rounded
   ============================================ */

/* Checkout form inputs only */
.woocommerce-checkout .form-row input,
.woocommerce-checkout .form-row select {
    border-radius: var(--radius-md) !important;
}

/* Order review table */
.woocommerce-checkout-review-order-table {
    border-radius: var(--radius-lg) !important;
    overflow: hidden;
}

/* Payment methods */
.woocommerce-checkout-payment {
    border-radius: var(--radius-lg) !important;
}

.payment_box {
    border-radius: var(--radius-md) !important;
}

/* Notices/Alerts */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    border-radius: var(--radius-md) !important;
}

/* ============================================
   IMAGES - Rounded
   ============================================ */

/* Product images - main image */
.woocommerce-product-gallery__image img,
.woocommerce-product-gallery img,
.product-image img,
.product img,
.attachment-woocommerce_single img,
.wp-post-image {
    border-radius: var(--radius-md) !important;
}

/* Product gallery thumbnails */
.woocommerce-product-gallery__wrapper img,
.flex-control-thumbs img {
    border-radius: var(--radius-sm) !important;
}

/* Product listing/shop page images */
.woocommerce ul.products li.product img,
.woocommerce-loop-product__link img {
    border-radius: var(--radius-md) !important;
}

/* All images in general (fallback) */
img {
    border-radius: var(--radius-sm);
}

/* Avatar/Profile images - circular */
.avatar,
.profile-image {
    border-radius: var(--radius-full) !important;
}

/* ============================================
   BADGES & TAGS - Rounded
   ============================================ */

.badge,
.tag,
.label {
    border-radius: var(--radius-sm) !important;
}

/* ============================================
   MODALS & POPUPS - Rounded
   ============================================ */

.modal,
.popup,
.dialog,
.tooltip {
    border-radius: var(--radius-lg) !important;
}

/* ============================================
   NAVIGATION - Rounded
   ============================================ */

.menu,
.nav-menu,
.dropdown-menu {
    border-radius: var(--radius-md) !important;
}

/* ============================================
   COUPON CODE SECTION - Rounded
   ============================================ */

.woocommerce-form-coupon,
.coupon-form {
    border-radius: var(--radius-lg) !important;
}

/* ============================================
   HEADER ICONS - Rounded
   ============================================ */

/* Search, Account, Wishlist, Cart icons in header */
.header-icon,
.site-header .search-toggle,
.site-header .account-toggle,
.site-header .wishlist-toggle,
.site-header .cart-toggle {
    border-radius: var(--radius-sm) !important;
}



@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}