<div class="ios-modern-settings__container">
    <div class="ios-modern-settings__header">
        تنظیمات
    </div>
    <div class="ios-modern-settings__card">
        <div
            class="ios-modern-settings__icon"
            style="background: linear-gradient(135deg, #007aff, #00c4ff);">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                <path
                    fill="#fff"
                    d="M12 21q-1.05 0-1.775-.725T9.5 18.5t.725-1.775T12 16t1.775.725t.725 1.775t-.725 1.775T12 21m0-11q1.875 0 3.563.6t3.062 1.65q.5.375.513.988T18.7 14.3q-.425.425-1.05.438t-1.125-.338q-.95-.65-2.1-1.025T12 13t-2.425.375t-2.1 1.025q-.5.35-1.125.325t-1.05-.45q-.425-.45-.425-1.062t.5-.988q1.375-1.05 3.063-1.638T12 10m0-6q3.125 0 5.888 1.025t4.962 2.9q.5.425.525 1.05t-.425 1.075q-.425.425-1.05.438t-1.125-.388q-1.8-1.475-4.037-2.287T12 7t-4.737.813T3.225 10.1q-.5.4-1.125.388t-1.05-.438Q.6 9.6.625 8.975t.525-1.05q2.2-1.875 4.963-2.9T12 4"></path>
            </svg>
        </div>
        <div class="ios-modern-settings__content">
            <div class="ios-modern-settings__title">
                اطلاعات فروشگاه
            </div>
            <div class="ios-modern-settings__description">
                عوض کردن نام لوگو و ...
            </div>
        </div>
    </div>
    <div class="ios-modern-settings__card">
        <div
            class="ios-modern-settings__icon"
            style="background: linear-gradient(135deg, #5856d6, #8a84ff);">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                <path
                    fill="none"
                    stroke="#fff"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="m7 8l10 8l-5 4V4l5 4l-10 8"></path>
            </svg>
        </div>
        <div class="ios-modern-settings__content">
            <div class="ios-modern-settings__title">
                سفارشات
            </div>
            <div class="ios-modern-settings__description">
                مدریت سفارشات
            </div>
        </div>
    </div>
    <div class="ios-modern-settings__card">
        <div
            class="ios-modern-settings__icon"
            style="background: linear-gradient(135deg, #34c759, #5ce883);">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                <path
                    fill="#fff"
                    d="M472 432h-48a24 24 0 0 1-24-24V104a24 24 0 0 1 24-24h48a24 24 0 0 1 24 24v304a24 24 0 0 1-24 24m-128 0h-48a24 24 0 0 1-24-24V184a24 24 0 0 1 24-24h48a24 24 0 0 1 24 24v224a24 24 0 0 1-24 24m-128 0h-48a24 24 0 0 1-24-24V248a24 24 0 0 1 24-24h48a24 24 0 0 1 24 24v160a24 24 0 0 1-24 24m-128 0H40a24 24 0 0 1-24-24v-96a24 24 0 0 1 24-24h48a24 24 0 0 1 24 24v96a24 24 0 0 1-24 24"></path>
            </svg>
        </div>
        <div class="ios-modern-settings__content">
            <div class="ios-modern-settings__title">
                محصولات
            </div>
            <div class="ios-modern-settings__description">
                مدیریت محصولات
            </div>
        </div>
    </div>
    <div class="ios-modern-settings__card">
        <div
            class="ios-modern-settings__icon"
            style="background: linear-gradient(135deg, #00ddeb, #00b8d4);">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                <path
                    fill="none"
                    stroke="#fff"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2.5"
                    d="M21 10.5v3M6 17h10a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2"></path>
            </svg>
        </div>
        <div class="ios-modern-settings__content">
            <div class="ios-modern-settings__title">
                تنوع ها
            </div>
            <div class="ios-modern-settings__description">
                مدیریت تنوع ها
            </div>
        </div>
    </div>
    <div class="ios-modern-settings__card">
        <div
            class="ios-modern-settings__icon"
            style="background: linear-gradient(135deg, #ff9500, #ffcc00);">
            <svg
                xmlns="http://www.w3.org/2000/svg"
                width="21"
                height="21"
                viewBox="0 0 21 21">
                <path
                    fill="none"
                    stroke="#fff"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M5 3.5h11a2 2 0 0 1 2 2v6.049a2 2 0 0 1-1.85 1.994l-.158.006l-11-.042a2 2 0 0 1-1.992-2V5.5a2 2 0 0 1 2-2m.464 12H15.5m-8 2h6"
                    stroke-width="1.5"></path>
            </svg>
        </div>
        <div class="ios-modern-settings__content">
            <div class="ios-modern-settings__title">
                ووکامرس
            </div>
            <div class="ios-modern-settings__description">
                راحتی در یکجا
            </div>
        </div>
    </div>
    <div class="ios-modern-settings__card">
        <div
            class="ios-modern-settings__icon"
            style="background: linear-gradient(135deg, #ff2d55, #ff6b88);">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                <g fill="none" stroke="#fff" stroke-width="2">
                    <path
                        d="M3.158 13.93a3.75 3.75 0 0 1 0-3.86a1.5 1.5 0 0 1 .993-.7l1.693-.339a.45.45 0 0 0 .258-.153L8.17 6.395c1.182-1.42 1.774-2.129 2.301-1.938S11 5.572 11 7.42v9.162c0 1.847 0 2.77-.528 2.962c-.527.19-1.119-.519-2.301-1.938L6.1 15.122a.45.45 0 0 0-.257-.153L4.15 14.63a1.5 1.5 0 0 1-.993-.7Z"></path>
                    <path
                        stroke-linecap="round"
                        d="M15.536 8.464a5 5 0 0 1 .027 7.044m4.094-9.165a8 8 0 0 1 .044 11.27"></path>
                </g>
            </svg>
        </div>
        <div class="ios-modern-settings__content">
            <div class="ios-modern-settings__title">
                اتوماسیون
            </div>
            <div class="ios-modern-settings__description">
                نوبت دهی و سایر بخش ها
            </div>
        </div>
    </div>
    <div class="ios-modern-settings__card">
        <div
            class="ios-modern-settings__icon"
            style="background: linear-gradient(135deg, #ff3b30, #ff7964);">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                <path
                    fill="none"
                    stroke="#fff"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="32"
                    d="M427.68 351.43C402 320 383.87 304 383.87 217.35C383.87 138 343.35 109.73 310 96c-4.43-1.82-8.6-6-9.95-10.55C294.2 65.54 277.8 48 256 48s-38.21 17.55-44 37.47c-1.35 4.6-5.52 8.71-9.95 10.53c-33.39 13.75-73.87 41.92-73.87 121.35C128.13 304 110 320 84.32 351.43C73.68 364.45 83 384 101.61 384h308.88c18.51 0 27.77-19.61 17.19-32.57M320 384v16a64 64 0 0 1-128 0v-16"></path>
            </svg>
        </div>
        <div class="ios-modern-settings__content">
            <div class="ios-modern-settings__title">
                انبار ها
            </div>
            <div class="ios-modern-settings__description">
                مدیریت انبار
            </div>
        </div>
    </div>
    <div class="ios-modern-settings__card">
        <div
            class="ios-modern-settings__icon"
            style="background: linear-gradient(135deg, #007aff, #00c4ff);">
            <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="#ffffff">
                <path
                    d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z"></path>
            </svg>
        </div>
        <div class="ios-modern-settings__content">
            <div class="ios-modern-settings__title">
                تجهیز مطب
            </div>
            <div class="ios-modern-settings__description">
                پیش خرید
            </div>
        </div>
    </div>
</div>


@once
@push('styles')
<style>
    /* From Uiverse.io by chase2k25 */
    .ios-modern-settings__container {
        /* font-family: -apple-system, BlinkMacSystemFont, "SF Pro", sans-serif; */
        max-width: 300px;
        width: 100%;
        height: 380px;
        background-color: rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(20px);
        border-radius: 18px;
        padding: 14px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        overflow-y: auto;
        position: relative;
        scrollbar-width: none;
        /* Firefox */
    }

    .ios-modern-settings__container::-webkit-scrollbar {
        display: none;
        /* Chrome, Safari */
    }

    .ios-modern-settings__header {
        font-size: 20px;
        font-weight: 600;
        color: #000000;
        margin: 8px 0 14px 12px;
        letter-spacing: -0.4px;
    }

    .ios-modern-settings__card {
        display: flex;
        align-items: center;
        background-color: #ffffff;
        border-radius: 12px;
        padding: 12px 14px;
        margin: 4px 0;
        cursor: pointer;
        transition:
            transform 0.25s cubic-bezier(0.28, 0.11, 0.32, 1),
            background-color 0.25s ease,
            box-shadow 0.25s ease;
    }

    .ios-modern-settings__card:hover {
        background-color: #f7f7f8;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    }

    .ios-modern-settings__card:active {
        transform: scale(0.96);
        transition: transform 0.1s ease;
    }

    .ios-modern-settings__icon {
        width: 34px;
        height: 34px;
        margin-left: 12px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 10px;
        transition: transform 0.25s cubic-bezier(0.28, 0.11, 0.32, 1);
    }

    .ios-modern-settings__card:hover .ios-modern-settings__icon {
        transform: scale(1.05);
    }

    .ios-modern-settings__icon svg {
        width: 22px;
        height: 22px;
    }

    .ios-modern-settings__content {
        flex: 1;
    }

    .ios-modern-settings__title {
        font-size: 16px;
        font-weight: 500;
        color: #000000;
        margin: 0;
        letter-spacing: -0.3px;
    }

    .ios-modern-settings__description {
        font-size: 13px;
        color: #6b7280;
        margin: 2px 0 0;
        line-height: 1.3;
    }

    /* Fade-in animation for cards */
    .ios-modern-settings__card {
        opacity: 0;
        transform: translateY(12px);
        animation: ios-modern-settings__fadeInUp 0.35s cubic-bezier(0.28, 0.11, 0.32, 1) forwards;
    }

    .ios-modern-settings__card:nth-child(1) {
        animation-delay: 0.05s;
    }

    .ios-modern-settings__card:nth-child(2) {
        animation-delay: 0.1s;
    }

    .ios-modern-settings__card:nth-child(3) {
        animation-delay: 0.15s;
    }

    .ios-modern-settings__card:nth-child(4) {
        animation-delay: 0.2s;
    }

    .ios-modern-settings__card:nth-child(5) {
        animation-delay: 0.25s;
    }

    .ios-modern-settings__card:nth-child(6) {
        animation-delay: 0.3s;
    }

    .ios-modern-settings__card:nth-child(7) {
        animation-delay: 0.35s;
    }

    .ios-modern-settings__card:nth-child(8) {
        animation-delay: 0.4s;
    }

    @keyframes ios-modern-settings__fadeInUp {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
</style>
@endpush
@endonce
