/*
 * Pelengkap Tailwind khusus halaman Layanan Sosmed.
 * public/css/tailwind-built.css adalah build ter-purge yang tidak memuat
 * sebagian kelas di bawah ini. File ini HANYA dimuat di halaman /layanan-sosmed
 * supaya build global tidak perlu diubah (halaman lain tidak terpengaruh).
 */

/* layout */
.max-w-6xl { max-width: 72rem; }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gap-5 { gap: 1.25rem; }
.gap-8 { gap: 2rem; }
.items-end { align-items: flex-end; }
.items-baseline { align-items: baseline; }
.top-6 { top: 1.5rem; }
.left-4 { left: 1rem; }
.pl-11 { padding-left: 2.75rem; }
.p-14 { padding: 3.5rem; }
.w-11 { width: 2.75rem; }
.h-11 { height: 2.75rem; }
.leading-snug { line-height: 1.375; }
.break-all { word-break: break-all; }
.min-w-\[220px\] { min-width: 220px; }

/* pemisah daftar */
.divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: #f1f5f9; }

/* potong judul jadi 3 baris */
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* gradien ikon — memakai warna brand (rose di-alias jadi ungu oleh tailwind.config.js) */
.smm-icon-grad { background-image: linear-gradient(to bottom right, #8b5cf6, #ec4899); }

/* bayangan berwarna */
.shadow-slate-100 { --tw-shadow-color: #f1f5f9; --tw-shadow: var(--tw-shadow-colored); }
.shadow-green-200 { --tw-shadow-color: #bbf7d0; --tw-shadow: var(--tw-shadow-colored); }
.hover\:shadow-rose-100:hover { --tw-shadow-color: #ede9fe; --tw-shadow: var(--tw-shadow-colored); }

/* teks & latar tambahan */
.text-amber-900 { color: #78350f; }
.text-rose-100 { color: #ede9fe; }
.bg-amber-100\/60 { background-color: rgba(254, 243, 199, .6); }

/* fokus input */
.focus\:border-rose-400:focus { border-color: #a78bfa; }
.focus\:ring-4:focus { box-shadow: 0 0 0 4px var(--smm-ring, rgba(237, 233, 254, .9)); }
.focus\:ring-rose-100:focus { --smm-ring: rgba(237, 233, 254, .9); }

/* breakpoint md */
@media (min-width: 768px) {
    .md\:py-12 { padding-top: 3rem; padding-bottom: 3rem; }
    .md\:py-14 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
    .md\:px-8 { padding-left: 2rem; padding-right: 2rem; }
    .md\:p-8 { padding: 2rem; }
    .md\:text-2xl { font-size: 1.5rem; line-height: 2rem; }
    .md\:text-5xl { font-size: 3rem; line-height: 1; }
}

/* breakpoint lg — layout 2 kolom halaman detail */
@media (min-width: 1024px) {
    .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .lg\:col-span-3 { grid-column: span 3 / span 3; }
    .lg\:col-span-2 { grid-column: span 2 / span 2; }
}

/* ============================================================
   Paginasi — CSS murni, tidak bergantung Tailwind/Bootstrap.
   Paginator aplikasi di-set ke Bootstrap 5 (AppServiceProvider),
   sedangkan layout publik tidak memuat Bootstrap, jadi halaman ini
   memakai view + gaya sendiri.
   ============================================================ */
.smm-pg {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 2.5rem;
}

.smm-pg__nav,
.smm-pg__page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 .875rem;
    border: 1px solid #e2e8f0;
    border-radius: .875rem;
    background: #fff;
    color: #475569;
    font-size: .8125rem;
    font-weight: 700;
    text-decoration: none;
    transition: all .18s ease;
}

.smm-pg__nav:hover,
.smm-pg__page:hover {
    border-color: #8b5cf6;
    color: #5b21b6;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, .15);
}

.smm-pg__page.is-active {
    background: #5b21b6;
    border-color: #5b21b6;
    color: #fff;
    box-shadow: 0 4px 12px rgba(91, 33, 182, .3);
}

.smm-pg__page.is-active:hover {
    transform: none;
    color: #fff;
}

.smm-pg__nav.is-disabled {
    opacity: .4;
    cursor: not-allowed;
    pointer-events: none;
}

.smm-pg__pages {
    display: flex;
    align-items: center;
    gap: .375rem;
    flex-wrap: wrap;
}

.smm-pg__dots {
    padding: 0 .25rem;
    color: #94a3b8;
    font-weight: 700;
}

.smm-pg__info {
    margin-top: 1rem;
    text-align: center;
    font-size: .8125rem;
    color: #94a3b8;
}

/* di layar sempit, teks Sebelumnya/Berikutnya disembunyikan — sisakan panahnya */
@media (max-width: 640px) {
    .smm-pg__navlabel { display: none; }
    .smm-pg__nav { padding: 0; min-width: 2.5rem; }
}

/* ============================================================
   Kolom pencarian — ikon, input, dan tombol menyatu jadi satu bidang
   ============================================================ */
.smm-search {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    max-width: 34rem;
    margin: 0 auto;
    padding: .3125rem .3125rem .3125rem 1rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    transition: border-color .18s ease, box-shadow .18s ease;
}

.smm-search:focus-within {
    border-color: #a78bfa;
    box-shadow: 0 0 0 4px rgba(237, 233, 254, .9);
}

.smm-search__icon {
    flex-shrink: 0;
    color: #94a3b8;
    font-size: .875rem;
}

.smm-search__input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    padding: .625rem .25rem;
    font-size: .875rem;
    color: #0f172a;
}

.smm-search__input::placeholder { color: #94a3b8; }

.smm-search__btn {
    flex-shrink: 0;
    height: 2.5rem;
    padding: 0 1.5rem;
    border: 0;
    border-radius: .75rem;
    background: #5b21b6;
    color: #fff;
    font-size: .8125rem;
    font-weight: 800;
    cursor: pointer;
    transition: background .18s ease;
}

.smm-search__btn:hover { background: #4c1d95; }

.smm-search__reset {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    height: 2.5rem;
    padding: 0 .875rem;
    color: #94a3b8;
    font-size: .8125rem;
    font-weight: 700;
    text-decoration: none;
    transition: color .18s ease;
}

.smm-search__reset:hover { color: #5b21b6; }

/* ============================================================
   Chip filter kategori
   ============================================================ */
.smm-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin-bottom: 2.5rem;
}

.smm-chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #fff;
    color: #475569;
    font-size: .8125rem;
    font-weight: 700;
    text-decoration: none;
    transition: all .18s ease;
}

.smm-chip:hover {
    border-color: #8b5cf6;
    color: #5b21b6;
}

.smm-chip.is-active {
    background: #5b21b6;
    border-color: #5b21b6;
    color: #fff;
    box-shadow: 0 4px 12px rgba(91, 33, 182, .25);
}

.smm-chip__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.375rem;
    height: 1.375rem;
    padding: 0 .375rem;
    border-radius: 999px;
    background: #f1f5f9;
    color: #64748b;
    font-size: .6875rem;
    font-weight: 800;
}

.smm-chip.is-active .smm-chip__count {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}

/* filter kedua: jenis layanan dalam platform terpilih */
.smm-subfilter {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: .625rem;
    margin: -1.25rem 0 2.5rem;
}

.smm-subfilter__label {
    font-size: .75rem;
    font-weight: 700;
    color: #94a3b8;
}

.smm-subfilter__select {
    max-width: 22rem;
    padding: .5rem 2rem .5rem .875rem;
    border: 1px solid #e2e8f0;
    border-radius: .75rem;
    background: #fff;
    color: #475569;
    font-size: .8125rem;
    font-weight: 600;
    cursor: pointer;
}

.smm-subfilter__select:focus {
    outline: 0;
    border-color: #a78bfa;
    box-shadow: 0 0 0 4px rgba(237, 233, 254, .9);
}

.smm-subfilter__reset {
    font-size: .75rem;
    font-weight: 700;
    color: #94a3b8;
    text-decoration: none;
}

.smm-subfilter__reset:hover { color: #5b21b6; }

/* ============================================================
   Pelacakan tahap pesanan (halaman invoice)
   ============================================================ */
.smm-track {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}

.smm-track__item {
    position: relative;
    display: flex;
    gap: .875rem;
    padding-bottom: 1.5rem;
}

.smm-track__item:last-child { padding-bottom: 0; }

/* garis penghubung antar tahap */
.smm-track__item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 1.0625rem;
    top: 2.25rem;
    bottom: .25rem;
    width: 2px;
    background: #e2e8f0;
}

.smm-track__item.is-done:not(:last-child)::before { background: #22c55e; }

.smm-track__dot {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.125rem;
    height: 2.125rem;
    border-radius: 999px;
    background: #f1f5f9;
    color: #94a3b8;
    font-size: .75rem;
}

.smm-track__item.is-done .smm-track__dot {
    background: #22c55e;
    color: #fff;
}

.smm-track__item.is-active .smm-track__dot {
    background: #5b21b6;
    color: #fff;
    box-shadow: 0 0 0 4px rgba(139, 92, 246, .18);
}

.smm-track__body {
    display: flex;
    flex-direction: column;
    gap: .125rem;
    padding-top: .375rem;
}

.smm-track__title {
    font-size: .875rem;
    font-weight: 700;
    color: #94a3b8;
}

.smm-track__item.is-done .smm-track__title,
.smm-track__item.is-active .smm-track__title { color: #0f172a; }

.smm-track__time {
    font-size: .75rem;
    color: #94a3b8;
}

/* ============================================================
   Wadah logo platform (Instagram, TikTok, …)
   Latar gradien tetap tampil sebagai bingkai kalau logo gagal dimuat.
   ============================================================ */
.smm-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 1rem;
    background-image: linear-gradient(to bottom right, #8b5cf6, #ec4899);
    color: #fff;
}

.smm-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.smm-logo--md { width: 2.75rem; height: 2.75rem; }
.smm-logo--lg { width: 3rem; height: 3rem; }

/* bintang rating pada form ulasan */
.smm-star {
    background: none;
    border: 0;
    padding: .125rem;
    font-size: 1.375rem;
    color: #e2e8f0;
    cursor: pointer;
    transition: color .15s ease, transform .15s ease;
}

.smm-star:hover { transform: scale(1.12); }
.smm-star.is-on { color: #fbbf24; }