.submitButton{
    /*width: 100%;*/
    /*max-width: 420px;*/
    padding: 12px 0;
    background: linear-gradient(90deg, #9F8FB3, #7C6A8F);
    color: #fff;
    border: none;
    border-radius: var(--radius-lg);
    font-weight: 500;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    cursor: pointer;
    transition: 0.2s ease-in-out;
}


.pointer-events-cursor{
    cursor: pointer;
}

.sidebar-widget-icon{
    width: 18px;
}


.image-upload {
    max-width: 420px;
}

.upload-title {
    font-weight: 600;
    display: block;
    margin-bottom: 10px;
}

.custom-dropzone {
    border: 2px dashed #d9d9d9;
    border-radius: var(--radius-lg);
    background: #f7f7f7;
    padding: 40px;
    text-align: center;
}

.custom-dropzone .dz-message {
    margin: 0;
}

.upload-icon {
    font-size: 30px;
    margin-bottom: 10px;
    color: #888;
}

.upload-icon img {
    width: 25px;
    margin:auto;
}

.custom-dropzone p {
    font-size: 14px;
    margin-bottom: 5px;
}

.custom-dropzone span {
    color: #2563eb;
    cursor: pointer;
}

.custom-dropzone small {
    color: #666;
    font-size: 12px;
}

.ql-editor{
    min-height: 150px !important;
}


.choices__item{
    display: flex;
    align-items: center;
    gap:5px;
}

td i {
    font-size: 18px;
}

li i {
    font-size: 18px;
}


aside.app-sidebar .sidebar-brand-switch {
    padding: 14px 16px 10px 16px !important;
    overflow: visible !important;
    z-index: 50;
    position: fixed !important;
    bottom: 0;
    width: 100%;
    left: 0;
    background: var(--sb-bg-raised, #1b1b1e) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

aside.app-sidebar .sidebar-brand-switch * {
    box-sizing: border-box;
}

/* Brand switch (native <details>) */
aside.app-sidebar .sidebar-brand-switch .bs-dd {
    position: relative !important;
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
}

/* Notification bell — sits beside the brand switcher in the same pinned
   bottom row, matching the reference's store-switcher + alerts layout. */
aside.app-sidebar .sidebar-brand-switch .bs-bell {
    flex-shrink: 0 !important;
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: var(--radius-lg) !important;
    border: 1px solid var(--sb-border, #333) !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015)), var(--sb-bg-raised, #1b1b1e) !important;
    color: var(--sb-text, #d4d4d6) !important;
    font-size: 15px !important;
    text-decoration: none !important;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

aside.app-sidebar .sidebar-brand-switch .bs-bell:hover {
    border-color: rgba(255, 255, 255, 0.24) !important;
    color: var(--sb-active-text, #ffffff) !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)), var(--sb-bg-raised, #1b1b1e) !important;
}

aside.app-sidebar .sidebar-brand-switch .bs-bell-badge {
    position: absolute !important;
    top: -5px !important;
    right: -5px !important;
    min-width: 16px !important;
    height: 16px !important;
    padding: 0 4px !important;
    border-radius: var(--radius-full) !important;
    background: #e11d48 !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 16px !important;
    text-align: center !important;
    box-shadow: 0 0 0 2px var(--sb-bg-raised, #1b1b1e) !important;
}

/* Alerts dropdown — opens off the bell, same light-card treatment as the
   brand switcher's own popup (reusing the --color-* light-surface tokens). */
aside.app-sidebar .sidebar-brand-switch .bs-alerts {
    position: relative !important;
    flex-shrink: 0 !important;
}

aside.app-sidebar .sidebar-brand-switch .bs-alerts-menu {
    position: absolute !important;
    top: auto !important;
    bottom: calc(100% + 8px) !important;
    /* Anchored by its LEFT edge, growing rightward over the main content —
       not right-anchored. The sidebar itself is only ~256px wide, so a
       320px-wide panel right-anchored against the bell (which sits at the
       sidebar's own right edge) would extend further left than the
       sidebar's left edge and get clipped by the browser viewport, which
       is exactly the bug the reference screenshot caught: every line's
       left few characters were rendered off-screen. */
    left: 0 !important;
    width: 360px !important;
    max-width: calc(100vw - 32px) !important;
    max-height: 420px !important;
    background: #ffffff !important;
    border: 1px solid var(--color-silver, rgba(27, 28, 28, 0.18)) !important;
    border-radius: var(--radius-2xl) !important;
    box-shadow: var(--shadow-popover, 0 12px 28px rgba(27, 28, 28, 0.16), 0 2px 6px rgba(27, 28, 28, 0.06)) !important;
    z-index: 9999 !important;
    display: none;
    flex-direction: column;
    overflow: hidden;
}

aside.app-sidebar .sidebar-brand-switch .bs-alerts.is-open .bs-alerts-menu {
    display: flex !important;
}

aside.app-sidebar .sidebar-brand-switch .bs-alerts-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 14px 16px 10px !important;
    flex-shrink: 0 !important;
}

aside.app-sidebar .sidebar-brand-switch .bs-alerts-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--color-ink, #1b1c1c) !important;
}

aside.app-sidebar .sidebar-brand-switch .bs-alerts-markall {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: var(--color-ink, #1b1c1c) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

aside.app-sidebar .sidebar-brand-switch .bs-alerts-markall:hover {
    text-decoration: underline !important;
}

aside.app-sidebar .sidebar-brand-switch .bs-alerts-list {
    overflow-y: auto !important;
    flex: 1 1 auto !important;
    padding: 0 6px !important;
}

aside.app-sidebar .sidebar-brand-switch .bs-alert-row {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 10px !important;
    border-radius: var(--radius-lg) !important;
    text-decoration: none !important;
    border-bottom: 1px solid var(--color-fog, rgba(27, 28, 28, 0.05)) !important;
}

aside.app-sidebar .sidebar-brand-switch .bs-alert-row:last-child {
    border-bottom: 0 !important;
}

aside.app-sidebar .sidebar-brand-switch .bs-alert-row:hover {
    background: var(--color-fog, rgba(27, 28, 28, 0.05)) !important;
}

aside.app-sidebar .sidebar-brand-switch .bs-alert-dot {
    width: 8px !important;
    height: 8px !important;
    margin-top: 6px !important;
    border-radius: var(--radius-full) !important;
    background: var(--color-silver, rgba(27, 28, 28, 0.2)) !important;
    flex-shrink: 0 !important;
}

aside.app-sidebar .sidebar-brand-switch .bs-alert-row.is-unread .bs-alert-dot {
    background: var(--hue-info-text, #1f6fb2) !important;
}

aside.app-sidebar .sidebar-brand-switch .bs-alert-body {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    min-width: 0 !important;
}

aside.app-sidebar .sidebar-brand-switch .bs-alert-title {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: var(--color-ink, #1b1c1c) !important;
}

aside.app-sidebar .sidebar-brand-switch .bs-alert-text {
    font-size: 12.5px !important;
    color: var(--color-slate, rgba(27, 28, 28, 0.62)) !important;
    line-height: 1.4 !important;
}

aside.app-sidebar .sidebar-brand-switch .bs-alert-time {
    font-size: 11px !important;
    color: var(--color-slate, rgba(27, 28, 28, 0.5)) !important;
    margin-top: 2px !important;
}

aside.app-sidebar .sidebar-brand-switch .bs-alerts-empty {
    padding: 24px 16px !important;
    text-align: center !important;
    font-size: 12.5px !important;
    color: var(--color-slate, rgba(27, 28, 28, 0.5)) !important;
}

aside.app-sidebar .sidebar-brand-switch .bs-alerts-viewall {
    display: block !important;
    text-align: center !important;
    padding: 10px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: var(--color-ink, #1b1c1c) !important;
    text-decoration: none !important;
    border-top: 1px solid var(--color-fog, rgba(27, 28, 28, 0.06)) !important;
    flex-shrink: 0 !important;
}

aside.app-sidebar .sidebar-brand-switch .bs-alerts-viewall:hover {
    background: var(--color-fog, rgba(27, 28, 28, 0.04)) !important;
}

aside.app-sidebar .sidebar-brand-switch .bs-dd>summary {
    list-style: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015)), var(--sb-bg-raised, #1b1b1e) !important;
    border: none;
    border-radius: var(--radius-xl) !important;
    padding: 9px 12px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
    color: var(--sb-text, #d4d4d6) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    user-select: none;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

aside.app-sidebar .sidebar-brand-switch .bs-dd>summary:hover {
    border-color: rgba(255, 255, 255, 0.24) !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)), var(--sb-bg-raised, #1b1b1e) !important;
}

aside.app-sidebar .sidebar-brand-switch .bs-dd[open]>summary {
    border-color: rgba(255, 255, 255, 0.3) !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)), var(--sb-bg-raised, #1b1b1e) !important;
    border-radius: var(--radius-md) var(--radius-md) var(--radius-xl) var(--radius-xl) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

aside.app-sidebar .sidebar-brand-switch .bs-dd>summary::-webkit-details-marker {
    display: none !important;
}

aside.app-sidebar .sidebar-brand-switch .bs-dd>summary::marker {
    display: none !important;
    content: '' !important;
}

aside.app-sidebar .sidebar-brand-switch .bs-left {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0;
}

aside.app-sidebar .sidebar-brand-switch .bs-avatar {
    width: 29px !important;
    height: 29px !important;
    border-radius: var(--radius-md) !important;
    background: linear-gradient(135deg, #00a876, var(--sb-accent, #008060)) !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0;
    flex-shrink: 0 !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 2px 5px rgba(0, 128, 96, 0.3);
}

aside.app-sidebar .sidebar-brand-switch .bs-label {
    color: var(--sb-text, #d4d4d6) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

aside.app-sidebar .sidebar-brand-switch .bs-chev {
    display: inline-block !important;
    width: 0;
    height: 0;
    flex-shrink: 0;
    margin-left: 8px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    /* Points up by default — the panel it controls opens upward, not down. */
    border-bottom: 6px solid var(--sb-text-muted, #8c8c90);
    transition: transform .2s ease, border-color .15s ease;
}

aside.app-sidebar .sidebar-brand-switch .bs-dd>summary:hover .bs-chev {
    border-bottom-color: var(--sb-text, #d4d4d6) !important;
}

aside.app-sidebar .sidebar-brand-switch .bs-dd[open] .bs-chev {
    transform: rotate(180deg);
    border-bottom-color: var(--sb-text, #d4d4d6) !important;
}

/* Opens UPWARD only — the switcher is pinned to the very bottom of the
   sidebar/viewport, so a downward menu would be clipped off-screen.
   The panel itself is a light card (matching the reference store-
   switcher popup) rather than the dark sidebar shell it sits above —
   it reuses the same light-surface tokens (--color-*) the rest of the
   app's dropdown menus already read.

   Its positioned ancestor is .bs-dd, which is only the brand-button
   portion of the bottom row (flex:1, with the 38px .bs-bell + 8px gap
   sitting after it), so right:0 would stop well short of even the
   row's own edge — and matching just the row width still read as too
   narrow (long brand names truncate, the head band's icon crowds the
   name). Given a fixed width wider than the sidebar itself instead
   (340px vs. the sidebar's ~256px), anchored by its LEFT edge and
   growing rightward over the main content — the same way
   .bs-alerts-menu below already does, for the same reason. */
aside.app-sidebar .sidebar-brand-switch .bs-menu {
    position: absolute !important;
    top: auto !important;
    bottom: calc(100% + 8px) !important;
    left: 0 !important;
    right: auto !important;
    width: 280px !important;
    max-width: calc(100vw - 32px) !important;
    background: #ffffff !important;
    border: 1px solid var(--color-silver, rgba(27, 28, 28, 0.18)) !important;
    border-radius: var(--radius-2xl) !important;
    box-shadow: var(--shadow-popover, 0 12px 28px rgba(27, 28, 28, 0.16), 0 2px 6px rgba(27, 28, 28, 0.06)) !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 6px !important;
    z-index: 9999 !important;
    max-height: 340px !important;
    overflow-y: auto !important;
}

aside.app-sidebar .sidebar-brand-switch .bs-menu li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* The header band — the active brand restated at the top of the panel,
   like the reference's own "current store" row: a light-grey band with
   the brand's square avatar, its name, and a small decorative icon
   on the trailing edge (display only — it opens nothing). */
aside.app-sidebar .sidebar-brand-switch .bs-menu-head {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    margin-bottom: 4px !important;
    border-radius: var(--radius-lg) !important;
    background: var(--color-fog, rgba(27, 28, 28, 0.05)) !important;
    color: var(--color-ink, #1b1c1c) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    margin: 0rem 10px !important;
}

aside.app-sidebar .sidebar-brand-switch .bs-menu li.bs-menu-head{
        padding: 7px 10px !important;
}

aside.app-sidebar .sidebar-brand-switch .bs-menu-head .bs-avatar {
    box-shadow: none !important;
}

aside.app-sidebar .sidebar-brand-switch .bs-menu-head-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

aside.app-sidebar .sidebar-brand-switch .bs-menu-head-icon {
    flex-shrink: 0;
    font-size: 15px;
    color: var(--color-slate, rgba(27, 28, 28, 0.5));
}

/* Rows — plain list items for every store/brand action. Every <a> in the
   panel is covered by the first selector; .bs-row-link additionally
   covers the Log out <button> (it has to be a real submit button inside
   its own CSRF form, so it isn't an <a>). Deliberately NOT keyed off
   .bs-switch-item — that class is reserved for actual brand-switch rows,
   since it is picked up by a blanket click handler further down this
   file that posts to the switch endpoint using each row's data-brand-id. */
aside.app-sidebar .sidebar-brand-switch .bs-menu li a,
aside.app-sidebar .sidebar-brand-switch .bs-menu .bs-row-link {
    display: flex !important;
    align-items: center !important;
    width: 100%;
    gap: 10px !important;
    padding: 9px 12px !important;
    border: 0;
    border-radius: var(--radius-lg) !important;
    background: none;
    color: var(--color-ink, #1b1c1c) !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    transition: background-color .12s ease;
}

aside.app-sidebar .sidebar-brand-switch .bs-menu li a:hover,
aside.app-sidebar .sidebar-brand-switch .bs-menu .bs-row-link:hover {
    background: var(--color-fog, rgba(27, 28, 28, 0.05)) !important;
}

aside.app-sidebar .sidebar-brand-switch .bs-menu li a.is-active {
    background: var(--hue-success-bg, #d4f3dd) !important;
    color: var(--color-ink, #1b1c1c) !important;
}

aside.app-sidebar .sidebar-brand-switch .bs-menu li form {
    margin: 0;
}

aside.app-sidebar .sidebar-brand-switch .bs-menu .bs-dot {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
    background: var(--color-fog, rgba(27, 28, 28, 0.06));
    color: var(--color-ink, #1b1c1c);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

aside.app-sidebar .sidebar-brand-switch .bs-menu li a.is-active .bs-dot {
    background: linear-gradient(135deg, #00a876, var(--sb-accent, #008060));
    color: #ffffff;
}

aside.app-sidebar .sidebar-brand-switch .bs-menu .bs-check {
    color: var(--hue-success-strong, #008060) !important;
    font-size: 14px !important;
}

/* "Add Brand" — the plus-in-a-circle action, styled like the reference's
   "Create store" row. This is the existing brand-subscription flow
   (js-add-brand-trigger, wired up in header.blade.php) reused here. */
aside.app-sidebar .sidebar-brand-switch .bs-plus-icon {
    width: 20px;
    height: 20px;
    border-radius: var(--radius-full);
    border: 1.5px solid var(--color-slate, rgba(27, 28, 28, 0.4));
    color: var(--color-slate, rgba(27, 28, 28, 0.62));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}

aside.app-sidebar .sidebar-brand-switch .bs-plus-icon .fi-rr-plus{font-size: 12px;padding-top: 4px;}

/* A small leading icon shared by Help Center / Log out rows. */
aside.app-sidebar .sidebar-brand-switch .bs-menu-icon {
    width: 18px;
    flex-shrink: 0;
    text-align: center;
    font-size: 15px;
    color: var(--color-slate, rgba(27, 28, 28, 0.62));
}

aside.app-sidebar .sidebar-brand-switch .bs-logout-item {
    color: var(--hue-danger-text, #c0290f) !important;
}

aside.app-sidebar .sidebar-brand-switch .bs-logout-item .bs-menu-icon {
    color: inherit;
}

aside.app-sidebar .sidebar-brand-switch .bs-logout-item:hover {
    background: var(--hue-danger-bg, #fde2df) !important;
}

/* The signed-in user's row — name + email, like the reference's own
   profile line above Help Center / Log out. Plain text, not a link. */
aside.app-sidebar .sidebar-brand-switch .bs-profile-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 12px 10px !important;
}

aside.app-sidebar .sidebar-brand-switch .bs-profile-avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: var(--hue-warning-bg, #ffefc6);
    color: var(--hue-warning-text, #946200);
    font-size: 12.5px;
}

aside.app-sidebar .sidebar-brand-switch .bs-profile-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

aside.app-sidebar .sidebar-brand-switch .bs-profile-name {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--color-ink, #1b1c1c);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

aside.app-sidebar .sidebar-brand-switch .bs-profile-email {
    font-size: 12px;
    color: var(--color-slate, rgba(27, 28, 28, 0.62));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

aside.app-sidebar .sidebar-brand-switch .bs-empty {
    display: block;
    padding: 10px 12px;
    color: var(--color-slate, rgba(27, 28, 28, 0.62));
    font-size: 13px;
}

aside.app-sidebar .sidebar-brand-switch .bs-divider {
    border-top: 1px solid var(--color-silver, rgba(27, 28, 28, 0.12));
    margin: 6px 6px;
}

aside.app-sidebar .sidebar-brand-switch .bs-clear-link {
    color: var(--color-slate, rgba(27, 28, 28, 0.62)) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

/* Search */
aside.app-sidebar .sidebar-brand-switch .bs-search {
    margin-top: 10px !important;
    position: relative !important;
}

aside.app-sidebar .sidebar-brand-switch .bs-search-icon {
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: var(--sb-text-muted, #8c8c90) !important;
    font-size: 16px !important;
    line-height: 1 !important;
    pointer-events: none !important;
    display: inline-flex !important;
    align-items: center;
}

aside.app-sidebar .sidebar-brand-switch .bs-search-input {
    width: 100% !important;
    border: 1px solid var(--sb-border, #333) !important;
    border-radius: var(--radius-lg) !important;
    padding: 9px 12px 9px 36px !important;
    background: var(--sb-bg-raised, #1b1b1e) !important;
    color: var(--sb-text, #d4d4d6) !important;
    font-size: 13.5px !important;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color .15s ease, background-color .15s ease;
}

aside.app-sidebar .sidebar-brand-switch .bs-search-input:focus {
    border-color: rgba(255, 255, 255, 0.28) !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

aside.app-sidebar .sidebar-brand-switch .bs-search-input::placeholder {
    color: var(--sb-text-muted, #8c8c90) !important;
    opacity: .85 !important;
}

/* Make sure parent containers don't clip the dropdown */
aside.app-sidebar {
    overflow: visible !important;
    width: 14rem;
}

aside.app-sidebar .main-sidebar-header {
    overflow: visible !important;
}