/* =========================================================
   assets/css/cios-buttons.css
   Reusable CIOS Buttons (BS3-friendly, non-conflicting)
   =========================================================*/

/* ---------------------------------------------------------
   Base button
   ----------------------------------------------------------*/

.cios-btn {
    /* base sizing (ค่าเริ่มต้น = "ปกติ") */
    --btn-w: 140px;
    --btn-h: 38px;
    --btn-px: 12px;
    --ring: #60a5fa;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;

    width: var(--btn-w);
    height: var(--btn-h);
    padding: 0 var(--btn-px);

    border-radius: 10px;
    border: 1px solid transparent;

    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;

    vertical-align: middle;
    cursor: pointer;
    user-select: none;

    background: #f8fafc;
    color: #0f172a;
    border-color: #e5e7eb;

    box-shadow: 0 2px 8px rgba(2, 6, 23, .06);
    transition:
        background .12s,
        border-color .12s,
        color .12s,
        transform .06s,
        box-shadow .12s;
}

.cios-btn i {
    font-size: 16px;
    opacity: .9;
    line-height: 1;
}

/* focus / active / disabled --------------------------------*/

.cios-btn:focus,
.cios-btn:active:focus,
.cios-btn:focus:active {
    outline: 0;
}

.cios-btn:focus-visible {
    outline: 3px solid var(--ring);
    outline-offset: 2px;
}

.cios-btn:hover {
    transform: translateY(-1px);
}

.cios-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(2, 6, 23, .10);
}

.cios-btn[disabled],
.cios-btn.is-disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ---------------------------------------------------------
   Block / width / icon helpers
   ----------------------------------------------------------*/

.cios-btn.-block {
    display: flex;
    width: 100%;
}

.cios-btn.-auto {
    width: auto;
}

.cios-btn.-icon {
    width: var(--btn-h);
    padding: 0;
    justify-content: center;
}

/* ---------------------------------------------------------
   Size helpers
   เล็ก / ปกติ (default) / กลาง / ใหญ่
   ----------------------------------------------------------*/

/* เล็ก (small) – alias: -xs, -sm */
/* .cios-btn.-xs,
.cios-btn.-sm {
    --btn-h: 30px;
    --btn-px: 8px;
    border-radius: 6px;
    font-size: 11px;
} */

/* ปกติ (normal) – ใช้ได้ทั้งไม่ใส่ หรือใส่ -md-normal ถ้าอยาก fix */
.cios-btn.-md-normal {
    --btn-h: 38px;
    --btn-px: 12px;
    border-radius: 10px;
    font-size: 13px;
}

/* กลาง (medium – ใหญ่ขึ้นมาหน่อย) */
/* .cios-btn.-md {
    --btn-h: 42px;
    --btn-px: 14px;
    border-radius: 11px;
    font-size: 14px;
} */

/* ใหญ่ (large) */
/* .cios-btn.-lg {
    --btn-h: 48px;
    --btn-px: 18px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 800;
} */

/* ---------------------------------
   Size utilities
   ----------------------------------*/

/* เล็กมาก */
.cios-btn.-xs {
    --btn-h: 28px;
    border-radius: 6px;
    font-size: 12px;
    padding: 0 10px;
}

/* เล็ก */
.cios-btn.-sm {
    --btn-h: 32px;
    border-radius: 8px;
    font-size: 13px;
    padding: 0 10px;
}

/* กลาง (default) – ใช้อยู่แล้วจาก .cios-btn ปกติ */
/* ไม่ต้องเพิ่มอะไร */

/* ใหญ่ */
.cios-btn.-lg {
    --btn-h: 44px;
    border-radius: 12px;
    font-size: 15px;
    padding: 0 16px;
}

/* ===== ปุ่มที่ต้อง align กับ Bootstrap .form-control ===== */
.cios-btn.-form {
    /* ใช้ความสูงรวม ~32px ให้ต่ำกว่าช่องกรอกนิดเดียว */
    --btn-h: 32px;
    border-radius: 4px;   /* ให้มุมโค้งเท่ากับ input.form-control */
    font-size: 13px;
    padding: 0 10px;
}

/* เวลาอยู่ใน .form-group / .form-inline ให้เกาะกลางแนวตั้งพอดี */
.form-group .cios-btn.-form,
.form-inline .cios-btn.-form {
    vertical-align: middle;
    margin-top: -1px;     /* ชดเชย border เหมือน input-group-btn */
}


/* ---------------------------------------------------------
   Document-ish button themes (PDF / ZIP / LINK / VIDEO)
   ----------------------------------------------------------*/

.cios-btn.is-pdf {
    --pdf-bg: #e8f1ff;
    --pdf-br: #c7d8ff;
    --pdf-fg: #1e3a8a;
    --pdf-bg-h: #dce9ff;
    --pdf-sh: rgba(30, 58, 138, .16);

    background: var(--pdf-bg);
    border-color: var(--pdf-br);
    color: var(--pdf-fg);
}

.cios-btn.is-pdf:hover {
    background: var(--pdf-bg-h);
    box-shadow: 0 4px 12px var(--pdf-sh);
}

.cios-btn.is-zip {
    --zip-bg: #e8fbf7;
    --zip-br: #bfeee2;
    --zip-fg: #0f766e;
    --zip-bg-h: #d7f6ef;
    --zip-sh: rgba(15, 118, 110, .16);

    background: var(--zip-bg);
    border-color: var(--zip-br);
    color: var(--zip-fg);
}

.cios-btn.is-zip:hover {
    background: var(--zip-bg-h);
    box-shadow: 0 4px 12px var(--zip-sh);
}

.cios-btn.is-link {
    --link-bg: #efe9ff;
    --link-br: #d8ccff;
    --link-fg: #5b21b6;
    --link-bg-h: #e6deff;
    --link-sh: rgba(91, 33, 182, .16);

    background: var(--link-bg);
    border-color: var(--link-br);
    color: var(--link-fg);
}

.cios-btn.is-link:hover {
    background: var(--link-bg-h);
    box-shadow: 0 4px 12px var(--link-sh);
}

.cios-btn.is-video {
    --video-bg: #e6f2ff;
    --video-br: #c9e0ff;
    --video-fg: #0b4a91;
    --video-bg-h: #d9ecff;
    --video-sh: rgba(11, 74, 145, .16);

    background: var(--video-bg);
    border-color: var(--video-br);
    color: var(--video-fg);
}

.cios-btn.is-video:hover {
    background: var(--video-bg-h);
    box-shadow: 0 4px 12px var(--video-sh);
}

/* ---------------------------------------------------------
   Core UI palette (primary / success / warning / danger / neutral)
   ----------------------------------------------------------*/

.cios-btn.is-neutral {
    background: #f8fafc;
    border-color: #e5e7eb;
    color: #0f172a;
}

.cios-btn.is-neutral:hover {
    background: #eef2f7;
    box-shadow: 0 4px 12px rgba(2, 6, 23, .06);
}

.cios-btn.is-primary {
    background: #2563eb;
    border-color: #1d4ed8;
    color: #fff;
}

.cios-btn.is-primary:hover {
    background: #1e54d6;
}

.cios-btn.is-success {
    background: #16a34a;
    border-color: #15803d;
    color: #fff;
}

.cios-btn.is-success:hover {
    background: #12823c;
}

.cios-btn.is-warning {
    background: #eab308;
    border-color: #d97706;
    color: #111827;
}

.cios-btn.is-warning:hover {
    background: #dca307;
}

.cios-btn.is-danger {
    background: #dc2626;
    border-color: #b91c1c;
    color: #fff;
}

.cios-btn.is-danger:hover {
    background: #c31f1f;
}

/* ---------------------------------------------------------
   Soft variants (พื้นสีอ่อน)
   ----------------------------------------------------------*/

.cios-btn.is-primary.-soft {
    background: #e8f0ff;
    color: #1d4ed8;
    border-color: #bfd3ff;
}

.cios-btn.is-success.-soft {
    background: #e8f9ef;
    color: #0f7a3a;
    border-color: #bfeccc;
}

.cios-btn.is-warning.-soft {
    background: #fef7db;
    color: #92400e;
    border-color: #f5e3a3;
}

.cios-btn.is-danger.-soft {
    background: #ffe8e8;
    color: #9f1239;
    border-color: #ffc7c7;
}

.cios-btn.is-neutral.-soft {
    background: #f3f4f6;
    color: #111827;
    border-color: #e5e7eb;
}

/* ---------------------------------------------------------
   Outline variants
   ----------------------------------------------------------*/

.cios-btn.-outline {
    background: #fff;
}

.cios-btn.is-primary.-outline {
    color: #1d4ed8;
    border-color: #9bbcff;
}

.cios-btn.is-success.-outline {
    color: #15803d;
    border-color: #a8e0bc;
}

.cios-btn.is-warning.-outline {
    color: #b45309;
    border-color: #f2cf88;
    background: #fff;
}

.cios-btn.is-danger.-outline {
    color: #b91c1c;
    border-color: #f2a7a7;
}

.cios-btn.is-neutral.-outline {
    color: #0f172a;
    border-color: #e5e7eb;
}

/* ---------------------------------------------------------
   Extra palette – Purple / Teal / Sky / Slate
   ----------------------------------------------------------*/

/* PURPLE – secondary / highlight */
.cios-btn.is-purple {
    background: #7c3aed;
    /* purple-600 */
    border-color: #6d28d9;
    /* purple-700 */
    color: #fff;
}

.cios-btn.is-purple:hover {
    background: #6d28d9;
}

/* TEAL – info / ยืนยันแบบนุ่ม ๆ */
.cios-btn.is-teal {
    background: #0d9488;
    /* teal-600 */
    border-color: #0f766e;
    /* teal-700 */
    color: #fff;
}

.cios-btn.is-teal:hover {
    background: #0f766e;
}

/* SKY – ปุ่มดูรายละเอียด / ลิงก์ */
.cios-btn.is-sky {
    background: #0284c7;
    /* sky-600 */
    border-color: #0369a1;
    /* sky-700 */
    color: #fff;
}

.cios-btn.is-sky:hover {
    background: #0369a1;
}

/* SLATE – ปุ่มนิ่ง ๆ ดูสุขุม */
.cios-btn.is-slate {
    background: #475569;
    /* slate-600 */
    border-color: #334155;
    /* slate-700 */
    color: #f9fafb;
}

.cios-btn.is-slate:hover {
    background: #334155;
}

/* ---------------------------------------------------------
   Extra soft variants (Purple / Teal / Sky / Slate)
   ----------------------------------------------------------*/

.cios-btn.is-purple.-soft {
    background: #f3e8ff;
    /* purple-100 */
    color: #5b21b6;
    /* purple-700 */
    border-color: #e9d5ff;
    /* purple-200 */
}

.cios-btn.is-teal.-soft {
    background: #ccfbf1;
    /* teal-100 */
    color: #0f766e;
    /* teal-700 */
    border-color: #99f6e4;
    /* teal-200 */
}

.cios-btn.is-sky.-soft {
    background: #e0f2fe;
    /* sky-100 */
    color: #075985;
    /* sky-700 */
    border-color: #bae6fd;
    /* sky-200 */
}

.cios-btn.is-slate.-soft {
    background: #e5e7eb;
    /* gray-200 */
    color: #111827;
    /* gray-900 */
    border-color: #d1d5db;
    /* gray-300 */
}

/* ---------------------------------------------------------
   Extra outline variants (Purple / Teal / Sky / Slate)
   ----------------------------------------------------------*/

.cios-btn.is-purple.-outline {
    background: #fff;
    color: #6d28d9;
    border-color: #d8b4fe;
    /* purple-300 */
}

.cios-btn.is-teal.-outline {
    background: #fff;
    color: #0f766e;
    border-color: #a7f3d0;
    /* green/teal-ish */
}

.cios-btn.is-sky.-outline {
    background: #fff;
    color: #0369a1;
    border-color: #7dd3fc;
    /* sky-300 */
}

.cios-btn.is-slate.-outline {
    background: #fff;
    color: #334155;
    border-color: #cbd5f5;
    /* soft slate/gray */
}

/* ---------------------------------------------------------
   Reduce motion support
   ----------------------------------------------------------*/

@media (prefers-reduced-motion: reduce) {
    .cios-btn {
        transition: none;
    }
}