/**
 * RadyOA Customer Profile Page Styles (Frontend Shortcode)
 *
 * Styles for the [radyoa_customer_profile] shortcode output.
 *
 * @version 1.0.0
 * @since   1.1.0 (OOP Refactor)
 */

/* Ensure base body font from theme is inherited or set a default */

/* เลือก elements ที่ถูก reset โดย theme และอยู่ภายใน scope ของเรา */
#radyoa-profile-scoped-content button,
#radyoa-profile-scoped-content [type=submit],
#radyoa-profile-scoped-content input,
#radyoa-profile-scoped-content textarea,
#radyoa-profile-scoped-content select,
#radyoa-profile-scoped-content label,
#radyoa-profile-scoped-content p,
#radyoa-profile-scoped-content h1,
#radyoa-profile-scoped-content h2,
#radyoa-profile-scoped-content h3,
#radyoa-profile-scoped-content ul,
#radyoa-profile-scoped-content li
/* เพิ่ม elements อื่นๆ ที่จำเป็น */
{
    /* ใช้ 'revert' เพื่อพยายามคืนค่ากลับไปเป็น default ของ browser */
    /* หรือใช้ 'initial' หรือ 'unset' แต่ 'revert' มักจะเหมาะกว่า */
    margin: revert-layer;
    padding: revert-layer;
    border: revert-layer; /* คืนค่า border-width, style, color */
    font: revert-layer;
    background: revert-layer;
    color: revert-layer;
    min-height: revert-layer;
    border-radius: revert-layer;
}

/* --- HTMX Indicator + WP Spinner Integration --- */

/* 1. Ensure the base spinner takes up space but is hidden visually */
.htmx-indicator.spinner {
    display: inline-block;  /* Override WP's potential display:none */
    vertical-align: middle; /* Align vertically */
    opacity: 0;             /* Hide using opacity */
    visibility: hidden;     /* Hide completely */
    transition: opacity 0.2s ease-in-out, visibility 0s linear 0.2s; /* Fade out effect */
}

/* 2. Show the spinner when HTMX adds the 'htmx-request' class TO IT */
/* This happens because hx-indicator targets the spinner element directly */
.htmx-indicator.spinner.htmx-request {
    opacity: 1;
    visibility: visible;    /* Make it visible */
    transition: opacity 0.2s ease-in-out, visibility 0s linear 0s; /* Fade in effect */
}