/* =========================================================
   Rangbaf Frame Selector
   Version 2.1
   Mobile First
   ========================================================= */


.rbf-selector {

    --rbf-max-width: 520px;

    width: 100%;

    max-width:
        var(--rbf-max-width);

    margin: 0 auto;

    padding:
        10px
        12px
        30px;

    box-sizing: border-box;

    font-family: inherit;
}


.rbf-selector * {

    box-sizing: border-box;
}


/* =========================================================
   Header
   ========================================================= */


.rbf-mobile-header {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 4px;

    text-align: center;

    margin-bottom: 14px;
}


.rbf-mobile-header strong {

    font-size: 18px;

    line-height: 1.6;
}


.rbf-crop-size {

    font-size: 12px;

    opacity: .6;

    direction: ltr;
}


/* =========================================================
   Upload
   ========================================================= */


.rbf-upload-row {

    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 8px;

    margin-bottom: 12px;
}


.rbf-upload-btn,
.rbf-remove-photo,
.rbf-nav,
.rbf-product-button,
.rbf-crop-actions button,
.rbf-frame-rotation-controls button {

    font-family: inherit;

    border: 0;

    cursor: pointer;

    -webkit-tap-highlight-color:
        transparent;
}


.rbf-upload-btn {

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 48px;

    padding:
        0
        12px;

    border-radius: 10px;

    background: #19b7a5;

    color: #fff;

    font-weight: 800;

    text-align: center;
}


.rbf-upload-btn input {

    display: none;
}


.rbf-remove-photo {

    min-height: 48px;

    padding:
        0
        10px;

    border-radius: 10px;

    background: #eeeeee;

    color: #333;

    font-weight: 700;
}


.rbf-remove-photo:disabled,
.rbf-product-button:disabled {

    opacity: .4;

    cursor: not-allowed;
}


/* =========================================================
   Workspace
   ========================================================= */


.rbf-frame-workspace {

    width: 100%;

    position: relative;
}


/* =========================================================
   قاب اصلی
   ========================================================= */


.rbf-composition {

    position: relative;

    width: 100%;

    max-width: 400px;

    aspect-ratio: 3 / 4;

    min-height: 280px;

    max-height: 72vh;

    margin: 0 auto;

    overflow: hidden;

    border-radius: 10px;

    isolation: isolate;

    transition:
        aspect-ratio
        .22s
        ease;
}


/* =========================================================
   حالت افقی
   ========================================================= */


.rbf-composition.is-landscape {

    aspect-ratio: 4 / 3;
    max-width: 520px;
}

.is-landscape .rbf-frame-overlay {
    width: auto;
    right:22%;
}


/* =========================================================
   لایه عکس
   ========================================================= */


.rbf-crop-layer {

    position: absolute;

    inset: 0;

    z-index: 1;

    width: 100%;

    height: 100%;

    overflow: hidden;

}

/* =========================================================
   تصویر اولیه Cropper
   ========================================================= */


.rbf-crop-image {

    display: block;

    max-width: none;
}


/* =========================================================
   تصویر نهایی
   ========================================================= */

.rbf-final-photo {

    position: absolute;

    left: 50%;

    top: 50%;

    width: auto;

    height: 70%;

    transform:
        translate(
            -50%,
            -50%
        );

    object-fit: cover;

    display: block;

    max-width: none;

    margin: 0;
}

/* =========================================================
   PNG قاب
   ========================================================= */

/* =========================================================
   لایه مشترک تصویر + قاب
   ========================================================= */

.rbf-visual-layer {

    position: absolute;

    z-index: 2;

    left: 50%;

    top: 50%;

    width: 100%;

    height: 100%;

    transform:

        translate(
            -50%,
            -50%
        )

        rotate(
            var(--rbf-frame-rotation, 0deg)
        );

    transform-origin:
        center center;

    transition:
        transform
        .22s
        ease;

    overflow: hidden;
}


/* =========================================================
   PNG قاب
   ========================================================= */

.rbf-frame-overlay {

    position: absolute;

    z-index: 5;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: fill;

    display: block;

    pointer-events: none;
}


/* =========================================================
   جلوگیری از جمع شدن قاب
   =========================================================

   در نسخه قبلی هنگام Rotate از Scale یا تغییر اندازه
   استفاده می‌شد.

   اینجا قاب همیشه 100% Stage است.

   بنابراین:

   0 درجه  = 100%
   90 درجه = 100%
   180 درجه = 100%
   270 درجه = 100%

   و قاب کوچک نمی‌شود.
   ========================================================= */


/* =========================================================
   پیام اولیه
   ========================================================= */


.rbf-empty-preview {

    position: absolute;

    z-index: 3;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 30px;

    text-align: center;

    color: #fff;

    font-size: 14px;


    pointer-events: none;
}


/* =========================================================
   توضیح Crop
   ========================================================= */


.rbf-crop-hint {

    display: block;

    margin:
        9px
        2px
        0;

    text-align: center;

    font-size: 11px;

    opacity: .55;

    direction: rtl;
}


.rbf-crop-hint.is-active {

    opacity: 1;
}


/* =========================================================
   دکمه‌های Crop
   ========================================================= */


.rbf-crop-actions {

    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 8px;

    margin-top: 9px;
}


.rbf-crop-actions button {

    min-height: 44px;

    padding:
        0
        10px;

    border-radius: 9px;

    background: #f0f0f0;

    color: #222;

    font-weight: 700;
}


.rbf-crop-actions
.rbf-apply-crop {

    grid-column:
        1 / -1;

    min-height: 50px;

    background: #19b7a5;

    color: #fff;

    font-weight: 900;
}


.rbf-crop-actions
button:disabled {

    opacity: .4;

    cursor: not-allowed;
}


/* =========================================================
   Navigation
   ========================================================= */


.rbf-navigation {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    margin-top: 13px;
}


.rbf-nav {

    flex:
        0 0 46px;

    width: 46px;

    height: 46px;

    border-radius: 50%;

    background: #222;

    color: #fff;

    font-size: 32px;

    line-height: 1;
}


.rbf-frame-info {

    min-width: 130px;

    max-width: 190px;

    text-align: center;
}


.rbf-frame-title {

    font-weight: 800;

    font-size: 14px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


.rbf-frame-counter {

    margin-top: 3px;

    font-size: 11px;

    opacity: .55;

    direction: ltr;
}


/* =========================================================
   چرخش قاب
   ========================================================= */


.rbf-frame-rotation-controls {

    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 8px;

    margin-top: 8px;
}


.rbf-frame-rotation-controls button {

    min-height: 42px;

    border:
        1px solid
        #ddd;

    border-radius: 9px;

    background: #fff;

    color: #222;

    font-weight: 700;
}


/* =========================================================
   دکمه محصول
   ========================================================= */


.rbf-product-button {

    display: block;

    width: 100%;

    min-height: 52px;

    margin-top: 10px;

    border-radius: 10px;

    background: #19b7a5;

    color: #fff;

    font-size: 16px;

    font-weight: 900;
}


/* =========================================================
   Message
   ========================================================= */


.rbf-message {

    min-height: 20px;

    margin-top: 7px;

    text-align: center;

    font-size: 12px;

    color: #a00;
}


/* =========================================================
   Empty
   ========================================================= */


.rbf-empty {

    padding: 20px;

    text-align: center;
}


/* =========================================================
   CropperJS
   ========================================================= */


.rbf-selector
.cropper-container {

    width: 100% !important;

    height: 100% !important;

    position: absolute !important;

    inset: 0 !important;
}


.rbf-selector
.cropper-view-box {

    outline:
        2px solid
        rgba(
            255,
            255,
            255,
            .95
        );

    box-shadow:
        0 0 0 9999px
        rgba(
            0,
            0,
            0,
            .35
        );
}

.rbf-selector
.cropper-face {

    background:
        transparent;
}


.rbf-selector
.cropper-modal {

    background:
        rgba(
            0,
            0,
            0,
            .30
        );
}


/* =========================================================
   موبایل کوچک
   ========================================================= */


@media (max-width: 380px) {

    .rbf-selector {

        padding-left: 8px;

        padding-right: 8px;
    }


    .rbf-mobile-header strong {

        font-size: 16px;
    }


    .rbf-nav {

        width: 42px;

        height: 42px;

        flex-basis: 42px;
    }

}


/* =========================================================
   دسکتاپ
   ========================================================= */


@media (min-width: 700px) {

    .rbf-selector {

        padding:
            15px
            0
            35px;
    }


    .rbf-composition {

        max-height: 680px;
    }

}

/*
|--------------------------------------------------------------------------
| وضعیت دکمه‌های کنترل عکس
|--------------------------------------------------------------------------
*/

.rbf-upload-btn[style*="display:none"],
.rbf-remove-photo[style*="display:none"],
.rbf-crop-actions[style*="display:none"] {

    display: none !important;
}