/* ==========================================================================
 * style-linepayui-utility.css
 *
 * Utility classes derived from linepay-ui v2 design tokens.
 * https://git.wndv.co/linepay/frontend/linepay-ui
 * src/v2/foundation/
 *
 * Non-color classes are prefixed with `lpui-` to avoid conflicts with
 * Bootstrap 4 utilities already loaded on these pages.
 * ========================================================================== */

/* Colors reference: linepay-ui v2 foundation
 * https://git.wndv.co/linepay/frontend/linepay-ui
 * src/v2/foundation/colors/base/
 */

/* ---------------------------------------------------------------------------
 * 1. COLORS — Text
 * ------------------------------------------------------------------------- */
.text-green-500 { color: #08BF5B; }
.text-green-600 { color: #05A749; }
.text-gray-900  { color: #111111; }
.text-gray-700  { color: #3F3F3F; }
.text-gray-600  { color: #616161; }
.text-yellow-500 { color: #FBB000; }
.text-yellow-600 { color: #DB8E00; }

/* ---------------------------------------------------------------------------
 * 2. COLORS — Background
 * ------------------------------------------------------------------------- */
.bg-green-500  { background-color: #08BF5B; }
.bg-gray-25    { background-color: #F5F5F5; }
.bg-yellow-500 { background-color: #FBB000; }

/* ---------------------------------------------------------------------------
 * 3. COLORS — Border
 * ------------------------------------------------------------------------- */
.border-gray-25 { border-color: #F5F5F5; }

/* ---------------------------------------------------------------------------
 * 4. SPACING — Padding
 *    Tokens (px): 0 2 4 6 8 12 16 20 24 28 32 36 40 44 48 56
 * ------------------------------------------------------------------------- */
.lpui-p-0  { padding: 0; }
.lpui-p-2  { padding: 2px; }
.lpui-p-4  { padding: 4px; }
.lpui-p-6  { padding: 6px; }
.lpui-p-8  { padding: 8px; }
.lpui-p-12 { padding: 12px; }
.lpui-p-16 { padding: 16px; }
.lpui-p-20 { padding: 20px; }
.lpui-p-24 { padding: 24px; }
.lpui-p-28 { padding: 28px; }
.lpui-p-32 { padding: 32px; }
.lpui-p-36 { padding: 36px; }
.lpui-p-40 { padding: 40px; }
.lpui-p-44 { padding: 44px; }
.lpui-p-48 { padding: 48px; }
.lpui-p-56 { padding: 56px; }

.lpui-px-0  { padding-left: 0; padding-right: 0; }
.lpui-px-2  { padding-left: 2px; padding-right: 2px; }
.lpui-px-4  { padding-left: 4px; padding-right: 4px; }
.lpui-px-6  { padding-left: 6px; padding-right: 6px; }
.lpui-px-8  { padding-left: 8px; padding-right: 8px; }
.lpui-px-12 { padding-left: 12px; padding-right: 12px; }
.lpui-px-16 { padding-left: 16px; padding-right: 16px; }
.lpui-px-20 { padding-left: 20px; padding-right: 20px; }
.lpui-px-24 { padding-left: 24px; padding-right: 24px; }
.lpui-px-28 { padding-left: 28px; padding-right: 28px; }
.lpui-px-32 { padding-left: 32px; padding-right: 32px; }
.lpui-px-36 { padding-left: 36px; padding-right: 36px; }
.lpui-px-40 { padding-left: 40px; padding-right: 40px; }
.lpui-px-44 { padding-left: 44px; padding-right: 44px; }
.lpui-px-48 { padding-left: 48px; padding-right: 48px; }
.lpui-px-56 { padding-left: 56px; padding-right: 56px; }

.lpui-py-0  { padding-top: 0; padding-bottom: 0; }
.lpui-py-2  { padding-top: 2px; padding-bottom: 2px; }
.lpui-py-4  { padding-top: 4px; padding-bottom: 4px; }
.lpui-py-6  { padding-top: 6px; padding-bottom: 6px; }
.lpui-py-8  { padding-top: 8px; padding-bottom: 8px; }
.lpui-py-12 { padding-top: 12px; padding-bottom: 12px; }
.lpui-py-16 { padding-top: 16px; padding-bottom: 16px; }
.lpui-py-20 { padding-top: 20px; padding-bottom: 20px; }
.lpui-py-24 { padding-top: 24px; padding-bottom: 24px; }
.lpui-py-28 { padding-top: 28px; padding-bottom: 28px; }
.lpui-py-32 { padding-top: 32px; padding-bottom: 32px; }
.lpui-py-36 { padding-top: 36px; padding-bottom: 36px; }
.lpui-py-40 { padding-top: 40px; padding-bottom: 40px; }
.lpui-py-44 { padding-top: 44px; padding-bottom: 44px; }
.lpui-py-48 { padding-top: 48px; padding-bottom: 48px; }
.lpui-py-56 { padding-top: 56px; padding-bottom: 56px; }

.lpui-pt-0  { padding-top: 0; }
.lpui-pt-2  { padding-top: 2px; }
.lpui-pt-4  { padding-top: 4px; }
.lpui-pt-6  { padding-top: 6px; }
.lpui-pt-8  { padding-top: 8px; }
.lpui-pt-12 { padding-top: 12px; }
.lpui-pt-16 { padding-top: 16px; }
.lpui-pt-20 { padding-top: 20px; }
.lpui-pt-24 { padding-top: 24px; }
.lpui-pt-28 { padding-top: 28px; }
.lpui-pt-32 { padding-top: 32px; }
.lpui-pt-36 { padding-top: 36px; }
.lpui-pt-40 { padding-top: 40px; }
.lpui-pt-44 { padding-top: 44px; }
.lpui-pt-48 { padding-top: 48px; }
.lpui-pt-56 { padding-top: 56px; }

.lpui-pb-0  { padding-bottom: 0; }
.lpui-pb-2  { padding-bottom: 2px; }
.lpui-pb-4  { padding-bottom: 4px; }
.lpui-pb-6  { padding-bottom: 6px; }
.lpui-pb-8  { padding-bottom: 8px; }
.lpui-pb-12 { padding-bottom: 12px; }
.lpui-pb-16 { padding-bottom: 16px; }
.lpui-pb-20 { padding-bottom: 20px; }
.lpui-pb-24 { padding-bottom: 24px; }
.lpui-pb-28 { padding-bottom: 28px; }
.lpui-pb-32 { padding-bottom: 32px; }
.lpui-pb-36 { padding-bottom: 36px; }
.lpui-pb-40 { padding-bottom: 40px; }
.lpui-pb-44 { padding-bottom: 44px; }
.lpui-pb-48 { padding-bottom: 48px; }
.lpui-pb-56 { padding-bottom: 56px; }

.lpui-pl-0  { padding-left: 0; }
.lpui-pl-2  { padding-left: 2px; }
.lpui-pl-4  { padding-left: 4px; }
.lpui-pl-6  { padding-left: 6px; }
.lpui-pl-8  { padding-left: 8px; }
.lpui-pl-12 { padding-left: 12px; }
.lpui-pl-16 { padding-left: 16px; }
.lpui-pl-20 { padding-left: 20px; }
.lpui-pl-24 { padding-left: 24px; }
.lpui-pl-28 { padding-left: 28px; }
.lpui-pl-32 { padding-left: 32px; }
.lpui-pl-36 { padding-left: 36px; }
.lpui-pl-40 { padding-left: 40px; }
.lpui-pl-44 { padding-left: 44px; }
.lpui-pl-48 { padding-left: 48px; }
.lpui-pl-56 { padding-left: 56px; }

.lpui-pr-0  { padding-right: 0; }
.lpui-pr-2  { padding-right: 2px; }
.lpui-pr-4  { padding-right: 4px; }
.lpui-pr-6  { padding-right: 6px; }
.lpui-pr-8  { padding-right: 8px; }
.lpui-pr-12 { padding-right: 12px; }
.lpui-pr-16 { padding-right: 16px; }
.lpui-pr-20 { padding-right: 20px; }
.lpui-pr-24 { padding-right: 24px; }
.lpui-pr-28 { padding-right: 28px; }
.lpui-pr-32 { padding-right: 32px; }
.lpui-pr-36 { padding-right: 36px; }
.lpui-pr-40 { padding-right: 40px; }
.lpui-pr-44 { padding-right: 44px; }
.lpui-pr-48 { padding-right: 48px; }
.lpui-pr-56 { padding-right: 56px; }

/* ---------------------------------------------------------------------------
 * 5. SPACING — Margin
 * ------------------------------------------------------------------------- */
.lpui-m-0  { margin: 0; }
.lpui-m-2  { margin: 2px; }
.lpui-m-4  { margin: 4px; }
.lpui-m-6  { margin: 6px; }
.lpui-m-8  { margin: 8px; }
.lpui-m-12 { margin: 12px; }
.lpui-m-16 { margin: 16px; }
.lpui-m-20 { margin: 20px; }
.lpui-m-24 { margin: 24px; }
.lpui-m-28 { margin: 28px; }
.lpui-m-32 { margin: 32px; }
.lpui-m-36 { margin: 36px; }
.lpui-m-40 { margin: 40px; }
.lpui-m-44 { margin: 44px; }
.lpui-m-48 { margin: 48px; }
.lpui-m-56 { margin: 56px; }

.lpui-mx-0  { margin-left: 0; margin-right: 0; }
.lpui-mx-2  { margin-left: 2px; margin-right: 2px; }
.lpui-mx-4  { margin-left: 4px; margin-right: 4px; }
.lpui-mx-6  { margin-left: 6px; margin-right: 6px; }
.lpui-mx-8  { margin-left: 8px; margin-right: 8px; }
.lpui-mx-12 { margin-left: 12px; margin-right: 12px; }
.lpui-mx-16 { margin-left: 16px; margin-right: 16px; }
.lpui-mx-20 { margin-left: 20px; margin-right: 20px; }
.lpui-mx-24 { margin-left: 24px; margin-right: 24px; }
.lpui-mx-28 { margin-left: 28px; margin-right: 28px; }
.lpui-mx-32 { margin-left: 32px; margin-right: 32px; }
.lpui-mx-36 { margin-left: 36px; margin-right: 36px; }
.lpui-mx-40 { margin-left: 40px; margin-right: 40px; }
.lpui-mx-44 { margin-left: 44px; margin-right: 44px; }
.lpui-mx-48 { margin-left: 48px; margin-right: 48px; }
.lpui-mx-56 { margin-left: 56px; margin-right: 56px; }

.lpui-my-0  { margin-top: 0; margin-bottom: 0; }
.lpui-my-2  { margin-top: 2px; margin-bottom: 2px; }
.lpui-my-4  { margin-top: 4px; margin-bottom: 4px; }
.lpui-my-6  { margin-top: 6px; margin-bottom: 6px; }
.lpui-my-8  { margin-top: 8px; margin-bottom: 8px; }
.lpui-my-12 { margin-top: 12px; margin-bottom: 12px; }
.lpui-my-16 { margin-top: 16px; margin-bottom: 16px; }
.lpui-my-20 { margin-top: 20px; margin-bottom: 20px; }
.lpui-my-24 { margin-top: 24px; margin-bottom: 24px; }
.lpui-my-28 { margin-top: 28px; margin-bottom: 28px; }
.lpui-my-32 { margin-top: 32px; margin-bottom: 32px; }
.lpui-my-36 { margin-top: 36px; margin-bottom: 36px; }
.lpui-my-40 { margin-top: 40px; margin-bottom: 40px; }
.lpui-my-44 { margin-top: 44px; margin-bottom: 44px; }
.lpui-my-48 { margin-top: 48px; margin-bottom: 48px; }
.lpui-my-56 { margin-top: 56px; margin-bottom: 56px; }

.lpui-mt-0  { margin-top: 0; }
.lpui-mt-2  { margin-top: 2px; }
.lpui-mt-4  { margin-top: 4px; }
.lpui-mt-6  { margin-top: 6px; }
.lpui-mt-8  { margin-top: 8px; }
.lpui-mt-12 { margin-top: 12px; }
.lpui-mt-16 { margin-top: 16px; }
.lpui-mt-20 { margin-top: 20px; }
.lpui-mt-24 { margin-top: 24px; }
.lpui-mt-28 { margin-top: 28px; }
.lpui-mt-32 { margin-top: 32px; }
.lpui-mt-36 { margin-top: 36px; }
.lpui-mt-40 { margin-top: 40px; }
.lpui-mt-44 { margin-top: 44px; }
.lpui-mt-48 { margin-top: 48px; }
.lpui-mt-56 { margin-top: 56px; }

.lpui-mb-0  { margin-bottom: 0; }
.lpui-mb-2  { margin-bottom: 2px; }
.lpui-mb-4  { margin-bottom: 4px; }
.lpui-mb-6  { margin-bottom: 6px; }
.lpui-mb-8  { margin-bottom: 8px; }
.lpui-mb-12 { margin-bottom: 12px; }
.lpui-mb-16 { margin-bottom: 16px; }
.lpui-mb-20 { margin-bottom: 20px; }
.lpui-mb-24 { margin-bottom: 24px; }
.lpui-mb-28 { margin-bottom: 28px; }
.lpui-mb-32 { margin-bottom: 32px; }
.lpui-mb-36 { margin-bottom: 36px; }
.lpui-mb-40 { margin-bottom: 40px; }
.lpui-mb-44 { margin-bottom: 44px; }
.lpui-mb-48 { margin-bottom: 48px; }
.lpui-mb-56 { margin-bottom: 56px; }

.lpui-ml-0  { margin-left: 0; }
.lpui-ml-2  { margin-left: 2px; }
.lpui-ml-4  { margin-left: 4px; }
.lpui-ml-6  { margin-left: 6px; }
.lpui-ml-8  { margin-left: 8px; }
.lpui-ml-12 { margin-left: 12px; }
.lpui-ml-16 { margin-left: 16px; }
.lpui-ml-20 { margin-left: 20px; }
.lpui-ml-24 { margin-left: 24px; }
.lpui-ml-28 { margin-left: 28px; }
.lpui-ml-32 { margin-left: 32px; }
.lpui-ml-36 { margin-left: 36px; }
.lpui-ml-40 { margin-left: 40px; }
.lpui-ml-44 { margin-left: 44px; }
.lpui-ml-48 { margin-left: 48px; }
.lpui-ml-56 { margin-left: 56px; }

.lpui-mr-0  { margin-right: 0; }
.lpui-mr-2  { margin-right: 2px; }
.lpui-mr-4  { margin-right: 4px; }
.lpui-mr-6  { margin-right: 6px; }
.lpui-mr-8  { margin-right: 8px; }
.lpui-mr-12 { margin-right: 12px; }
.lpui-mr-16 { margin-right: 16px; }
.lpui-mr-20 { margin-right: 20px; }
.lpui-mr-24 { margin-right: 24px; }
.lpui-mr-28 { margin-right: 28px; }
.lpui-mr-32 { margin-right: 32px; }
.lpui-mr-36 { margin-right: 36px; }
.lpui-mr-40 { margin-right: 40px; }
.lpui-mr-44 { margin-right: 44px; }
.lpui-mr-48 { margin-right: 48px; }
.lpui-mr-56 { margin-right: 56px; }

/* ---------------------------------------------------------------------------
 * 6. TYPOGRAPHY — Text size (font-size + line-height combined)
 *    Reference: linepay-ui v2 — src/v2/core/preflight/font/index.ts
 *
 *      name   | font-size | line-height
 *      -------|-----------|------------
 *      xxxxl  |   32px    |   44px
 *      xxxl   |   24px    |   36px
 *      xxl    |   20px    |   32px
 *      xl     |   18px    |   28px
 *      l      |   16px    |   24px
 *      m      |   14px    |   20px
 *      s      |   12px    |   18px
 *      xs     |   10px    |   12px
 * ------------------------------------------------------------------------- */
.lpui-text-xxxxl { font-size: 32px; line-height: 44px; }
.lpui-text-xxxl  { font-size: 24px; line-height: 36px; }
.lpui-text-xxl   { font-size: 20px; line-height: 32px; }
.lpui-text-xl    { font-size: 18px; line-height: 28px; }
.lpui-text-l     { font-size: 16px; line-height: 24px; }
.lpui-text-m     { font-size: 14px; line-height: 20px; }
.lpui-text-s     { font-size: 12px; line-height: 18px; }
.lpui-text-xs    { font-size: 10px; line-height: 12px; }

/* ---------------------------------------------------------------------------
 * 8. TYPOGRAPHY — Font weight
 * ------------------------------------------------------------------------- */
.lpui-font-normal { font-weight: 400; }
.lpui-font-semibold { font-weight: 600; }
.lpui-font-bold   { font-weight: 700; }

/* ---------------------------------------------------------------------------
 * 9. BORDER — Width
 *     Tokens (px): 0 1 2
 * ------------------------------------------------------------------------- */
.lpui-border-0 { border-width: 0; }
.lpui-border-1 { border-width: 1px; }
.lpui-border-2 { border-width: 2px; }

.lpui-border-b-0 { border-bottom-width: 0; }
.lpui-border-b-1 { border-bottom-width: 1px; }
.lpui-border-b-2 { border-bottom-width: 2px; }

/* ---------------------------------------------------------------------------
 * 10. BORDER — Style
 * ------------------------------------------------------------------------- */
.lpui-border-solid { border-style: solid; }

/* ---------------------------------------------------------------------------
 * 11. BORDER RADIUS
 *     Tokens (px): 0 3 5 7 8 9 12 16 24 + 50% 100%
 * ------------------------------------------------------------------------- */
.lpui-rounded-0    { border-radius: 0; }
.lpui-rounded-3    { border-radius: 3px; }
.lpui-rounded-5    { border-radius: 5px; }
.lpui-rounded-7    { border-radius: 7px; }
.lpui-rounded-8    { border-radius: 8px; }
.lpui-rounded-9    { border-radius: 9px; }
.lpui-rounded-12   { border-radius: 12px; }
.lpui-rounded-16   { border-radius: 16px; }
.lpui-rounded-24   { border-radius: 24px; }
.lpui-rounded-half { border-radius: 50%; }
.lpui-rounded-full { border-radius: 100%; }

/* ---------------------------------------------------------------------------
 * 12. LAYOUT — Flex helpers
 * ------------------------------------------------------------------------- */
.lpui-inline-flex { display: inline-flex; }
.lpui-flex-1      { flex: 1; }
.lpui-shrink-0    { flex-shrink: 0; }

/* ---------------------------------------------------------------------------
 * 13. ICONS — SVG alignment
 * ------------------------------------------------------------------------- */
.ic-star-svg {
    display: block;
    flex-shrink: 0;
}

/* ---------------------------------------------------------------------------
 * 14. LINK — Reset
 * ------------------------------------------------------------------------- */
.lpui-link-reset {
    text-decoration: none;
    cursor: pointer;
}
.lpui-link-reset:hover {
    text-decoration: none;
}