/* مسیر فایل: public/css/vgw-public.css */

/* تنظیمات کلی باکس */
.vgw-box {
    background: #ffffff !important;
    border: 1px solid #e0e0e2 !important;
    border-radius: 12px !important;
    padding: 16px !important;
    margin: 20px 0 !important;
    font-family: inherit !important;
    direction: rtl !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
}

/* هدر باکس */
.vgw-box__header {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.vgw-box__title {
    font-size: 16px !important;
    font-weight: bold !important;
    color: #424750 !important;
    margin: 0 !important;
}

/* دکمه سوئیچ (Toggle) */
.vgw-toggle {
    position: relative !important;
    display: inline-block !important;
    width: 44px !important;
    height: 24px !important;
    margin: 0 !important;
}

.vgw-toggle input[type="checkbox"] {
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
}

.vgw-toggle__slider {
    position: absolute !important;
    cursor: pointer !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-color: #e0e0e2 !important;
    transition: .3s !important;
    border-radius: 34px !important;
}

.vgw-toggle__slider:before {
    position: absolute !important;
    content: "" !important;
    height: 18px !important;
    width: 18px !important;
    right: 3px !important;
    bottom: 3px !important;
    background-color: white !important;
    transition: .3s !important;
    border-radius: 50% !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
}

.vgw-toggle input:checked + .vgw-toggle__slider {
    background-color: #ff6600 !important; 
}

.vgw-toggle input:checked + .vgw-toggle__slider:before {
    transform: translateX(-20px) !important;
}

/* بدنه باکس */
.vgw-box__body {
    margin-top: 16px !important;
    padding-top: 16px !important;
    border-top: 1px solid #f1f2f4 !important;
}

.vgw-designs {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
}

.vgw-design {
    position: relative !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    border: 1px solid #e0e0e2 !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    cursor: pointer !important;
    transition: all 0.2s ease-in-out !important;
    background: #fff !important;
    margin: 0 !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02) !important;
}

.vgw-design:hover {
    border-color: #ff6600 !important;
    box-shadow: 0 4px 10px rgba(255,102,0,0.1) !important;
}

.vgw-design input[type="radio"],
.vgw-design input[type="checkbox"] {
    position: static !important;
    opacity: 1 !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 0 0 12px !important;
    cursor: pointer !important;
    accent-color: #ff6600 !important;
    flex-shrink: 0 !important;
}

.vgw-design.is-selected {
    border-color: #ff6600 !important;
    background-color: #fff0e6 !important;
    box-shadow: 0 4px 10px rgba(255,102,0,0.15) !important;
}

.vgw-design__image {
    width: 50px !important;
    height: 50px !important;
    object-fit: contain !important;
    margin-bottom: 0 !important;
    border-radius: 6px !important;
    flex-shrink: 0 !important;
}

.vgw-design__placeholder {
    font-size: 30px !important;
    margin-bottom: 0 !important;
    line-height: 50px !important;
    width: 50px !important;
    text-align: center !important;
    color: #ff6600 !important;
    flex-shrink: 0 !important;
}

.vgw-design__name {
    font-size: 14px !important;
    font-weight: bold !important;
    color: #424750 !important;
    text-align: right !important;
    margin-bottom: 0 !important;
    margin-right: 15px !important;
    flex-grow: 1 !important;
}

.vgw-design__price {
    font-size: 14px !important;
    color: #81858b !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

/* بخش پیام */
.vgw-message {
    margin-bottom: 20px !important;
}

.vgw-message__label {
    display: block !important;
    font-size: 14px !important;
    font-weight: bold !important;
    color: #424750 !important;
    margin-bottom: 8px !important;
}

.vgw-message__input {
    width: 100% !important;
    padding: 12px !important;
    border: 1px solid #e0e0e2 !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-family: inherit !important;
    resize: vertical !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s !important;
    background-color: #fff !important;
    color: #424750 !important;
}

.vgw-message__input:focus {
    outline: none !important;
    border-color: #ff6600 !important;
    box-shadow: 0 0 0 2px rgba(255,102,0,0.1) !important;
}

.vgw-message__counter {
    display: block !important;
    font-size: 11px !important;
    color: #81858b !important;
    text-align: left !important;
    margin-top: 4px !important;
}

/* دکمه‌های کنترل */
.vgw-controls {
    display: flex !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
    justify-content: flex-start !important;
}

.button.vgw-apply {
    background-color: #ff6600 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 10px 24px !important;
    font-size: 14px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    transition: background-color 0.2s !important;
    text-align: center !important;
}

.button.vgw-apply:hover {
    background-color: #e65c00 !important;
}

.button.vgw-remove {
    background-color: #fff !important;
    color: #62666d !important;
    border: 1px solid #e0e0e2 !important;
    border-radius: 8px !important;
    padding: 10px 24px !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}

.button.vgw-remove:hover {
    background-color: #f1f2f4 !important;
    color: #424750 !important;
}

/* بخش وضعیت و نوتیفیکیشن */
.vgw-status {
    font-size: 13px !important;
    border-radius: 8px !important;
}

.vgw-notice {
    padding: 10px 12px !important;
    border-radius: 8px !important;
    background-color: #fff0e6 !important;
    color: #e65c00 !important;
    border: 1px solid #ffccb3 !important;
    text-align: center !important;
}

/* پیام موفقیت ثبت */
.vgw-notice.vgw-notice--success {
    background-color: #e6f8ec !important;
    color: #008a32 !important;
    border-color: #b3e6c5 !important;
}

/* پیام خطا */
.vgw-notice.vgw-notice--error {
    background-color: #fce8e8 !important;
    color: #d11515 !important;
    border-color: #f7baba !important;
}

/* اصلاح جراحی‌شده: اضافه شدن پیام نارنجی برای موفقیت حذف */
.vgw-notice.vgw-notice--warning {
    background-color: #fff0e6 !important;
    color: #e65c00 !important;
    border-color: #ffccb3 !important;
}

/* واکنش‌گرایی برای موبایل */
@media (max-width: 480px) {
    .vgw-controls {
        flex-direction: column !important;
    }
    
    .button.vgw-apply, .button.vgw-remove {
        width: 100% !important;
    }
}