/*=========================================================
 RentoVerse Property Form
 Mobile First
 Elementor + Astra Compatible
=========================================================*/

#rv-app{
    max-width:650px;
    margin:20px auto;
    padding:12px;
    background:linear-gradient(180deg,#F8FFF3 0%,#FFF8EE 100%);
    border-radius:18px;
    box-sizing:border-box;
}

/*---------------------------------
Header
----------------------------------*/

#rv-app .rv-header{

    display:flex;

    align-items:center;

    gap:12px;

    background:linear-gradient(135deg,#78B428,#F6A313);

    border-radius:16px;

    padding:18px;

    margin-bottom:15px;

    color:#fff;

}

#rv-app .rv-header-icon{

    width:52px;

    height:52px;

    border-radius:50%;

    background:rgba(255,255,255,.20);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:24px;

}

#rv-app .rv-header h1{

    margin:0;

    color:#fff;

    font-size:24px;

    line-height:1.2;

}

#rv-app .rv-header p{

    margin:4px 0 0;

    color:#fff;

    opacity:.95;

    font-size:14px;

}

/*---------------------------------
Cards
----------------------------------*/

#rv-app .rv-card{

    background:#fff;

    border-radius:14px;

    padding:16px;

    margin-bottom:14px;

    border-left:5px solid #78B428;

    box-shadow:0 4px 12px rgba(0,0,0,.06);

}

/*---------------------------------
Section Title
----------------------------------*/

#rv-app .rv-card h3{

    margin:0 0 15px;

    color:#F6A313;

    font-size:18px;

    font-weight:700;

}

/*---------------------------------
Grid
----------------------------------*/

#rv-app .rv-grid{

    display:block;

}

#rv-app .rv-grid > div{

    margin-bottom:12px;

}

/*---------------------------------
Label
----------------------------------*/

#rv-app label{

    display:block;

    margin-bottom:6px;

    font-size:14px;

    font-weight:600;

    color:#2F3640;

}

/*---------------------------------
Inputs
----------------------------------*/

#rv-app input[type=text],

#rv-app input[type=number],

#rv-app input[type=tel],

#rv-app input[type=email],

#rv-app select,

#rv-app textarea{

    width:100%;

    height:44px;

    padding:0 14px;

    border:1px solid #DDE4EA;

    border-radius:10px;

    background:#FCFFFB;

    box-sizing:border-box;

    font-size:15px;

    color:#2F3640;

    transition:.25s;

    margin-bottom:12px;

}

/* Textarea */

#rv-app textarea{

    height:110px;

    padding:12px 14px;

    resize:vertical;

}

/* Focus */

#rv-app input:focus,

#rv-app select:focus,

#rv-app textarea:focus{

    outline:none;

    border-color:#F6A313;

    box-shadow:0 0 0 3px rgba(246,163,19,.18);

}

/* Readonly */

#rv-app input[readonly]{

    background:#F3F5F6;

}

/*---------------------------------
Upload Box
----------------------------------*/

#rv-app input[type=file]{

    width:100%;

    padding:16px;

    background:#FCFFFB;

    border:2px dashed #78B428;

    border-radius:12px;

    cursor:pointer;

    margin-bottom:8px;

}

#rv-app .rv-upload-note{

    font-size:12px;

    color:#777;

}

/*---------------------------------
Checkbox
----------------------------------*/

#rv-app .rv-checkbox{

    display:flex;

    align-items:flex-start;

    gap:10px;

    margin:10px 0 18px;

}

#rv-app .rv-checkbox input{

    margin-top:3px;

}

/*---------------------------------
Button
----------------------------------*/

#rv-app .rv-btn{

    width:100%;

    height:48px;

    border:none;

    border-radius:12px;

    background:linear-gradient(90deg,#78B428,#F6A313) ;

    color:#fff;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

    transition:.25s;

}

#rv-app .rv-btn:hover{

    transform:translateY(-1px);

    box-shadow:0 8px 16px rgba(120,180,40,.25);

}

/*---------------------------------
Helper Text
----------------------------------*/

#rv-app p{

    margin:5px 0;

    font-size:13px;

    color:#666;

}

/*---------------------------------
Desktop
----------------------------------*/

@media(min-width:768px){

#rv-app{

max-width:900px;

}

#rv-app .rv-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:18px;

}

#rv-app .rv-grid > div{

margin-bottom:0;

}

}

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

#rv-app .rv-upload-box{

    display:block;

    width:100%;

    border:2px dashed #78B428;

    border-radius:14px;

    padding:22px 15px;

    text-align:center;

    background:#FCFFF9;

    cursor:pointer;

    transition:.25s;

}

#rv-app .rv-upload-box:hover{

    background:#F4FBEA;

}

#rv-app .rv-upload-icon{

    font-size:42px;

    margin-bottom:10px;

}

#rv-app .rv-upload-title{

    font-size:18px;

    font-weight:700;

    color:#2F3640;

}

#rv-app .rv-upload-subtitle{

    font-size:13px;

    color:#777;

    margin-top:6px;

}

/*==========================
Image Counter
===========================*/

.rv-upload-info{

    margin-top:12px;

    margin-bottom:12px;

    font-size:14px;

    font-weight:600;

    color:#78B428;

}

/********************
image preview
********************/
/*========================================
  Image Preview
========================================*/

#rv-image-preview{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-top:15px;

}

#rv-image-preview .rv-preview{

    position:relative;

    width:80px;

    height:80px;

    border-radius:10px;

    overflow:hidden;

    border:2px solid #E5E7EB;

    background:#FFFFFF;

    box-shadow:0 2px 8px rgba(0,0,0,.08);

    flex:0 0 80px;

}

#rv-image-preview .rv-preview img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

#rv-image-preview .rv-remove{

    position:absolute;

    top:3px;

    right:3px;

    width:18px;

    height:18px;

    border-radius:50%;

    background:#E53922;

    color:#FFFFFF;

    font-size:13px;

    font-weight:bold;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    z-index:2;

}

#rv-image-preview .rv-cover{

    position:absolute;

    bottom:0;

    left:0;

    right:0;

    height:18px;

    background:#78B428;

    color:#FFFFFF;

    font-size:10px;

    font-weight:600;

    display:flex;

    align-items:center;

    justify-content:center;

}

/******************
error handing CSS
*****************/
.rv-error-box{

    background:#FDECEC;

    border:1px solid #E53935;

    color:#B71C1C;

    padding:15px;

    margin-bottom:20px;

    border-radius:10px;

}

.rv-error-box ul{

    margin:0;

    padding-left:20px;

}

.rv-error-box li{

    margin-bottom:5px;

}

/* Main property submission button.
   The ID selector prevents Astra/Elementor from displaying it as plain text. */
#rv-app button#rv-property-submit-button{
    -webkit-appearance:none;
    appearance:none;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    width:100%;
    min-height:54px;
    margin:8px 0 0;
    padding:14px 22px;
    border:0;
    border-radius:12px;
    background:linear-gradient(135deg,#65A91F 0%,#218A46 100%);
    box-shadow:0 9px 22px rgba(35,130,66,.25);
    color:#FFFFFF;
    font-size:16px;
    font-weight:800;
    line-height:1.25;
    text-align:center;
    text-decoration:none;
    cursor:pointer;
    transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;
}

#rv-app button#rv-property-submit-button::before{
    content:"✓";
    display:grid;
    place-items:center;
    width:24px;
    height:24px;
    flex:0 0 24px;
    border-radius:50%;
    background:rgba(255,255,255,.20);
    color:#FFFFFF;
    font-size:14px;
}

#rv-app button#rv-property-submit-button:hover,
#rv-app button#rv-property-submit-button:focus{
    background:linear-gradient(135deg,#599B17 0%,#14783A 100%);
    box-shadow:0 12px 26px rgba(35,130,66,.32);
    color:#FFFFFF;
    transform:translateY(-2px);
}

#rv-app button#rv-property-submit-button:disabled{
    opacity:.60;
    cursor:not-allowed;
    transform:none;
    box-shadow:none;
}

#rv-app .rv-otp-panel{
    margin-top:16px;
    padding:15px;
    border:1px solid #dce9d5;
    border-radius:12px;
    background:#f7fff2;
}

#rv-app .rv-otp-panel button{
    margin:5px 8px 5px 0;
}

#rv-app .rv-otp-secondary{
    background:#eef3ef;
    color:#245b35;
}

#rv-app .rv-otp-message{
    margin-top:12px;
    font-weight:700;
    color:#176239;
}

#rv-app .rv-otp-error{
    color:#a02727;
}