/* RAWA Main UI */

:root {
    --rawa-primary: #0f766e;
    --rawa-primary-dark: #115e59;
    --rawa-success: #16a34a;
    --rawa-bg: #f8fafc;
    --rawa-card: #ffffff;
    --rawa-text: #0f172a;
    --rawa-muted: #64748b;
    --rawa-border: #e2e8f0;
}


* {
    box-sizing: border-box;
}


body {

    margin:0;
    padding:40px;

    font-family:
    Inter,
    Arial,
    sans-serif;

    background:
    linear-gradient(
        135deg,
        #f8fafc,
        #e2e8f0
    );

    color:var(--rawa-text);

}


/* Header */

.rawa-header {

    max-width:1000px;
    margin:auto;
    text-align:center;
    padding:30px;

}


.rawa-logo {

    width:220px;
    max-width:80%;

}


.rawa-title {

    font-size:32px;
    font-weight:700;
    margin-top:20px;

}


.rawa-subtitle {

    color:var(--rawa-muted);
    font-size:18px;

}



/* Main Card */

.rawa-card {

    max-width:1000px;

    margin:20px auto;

    background:
    var(--rawa-card);

    border-radius:30px;

    padding:40px;

    box-shadow:

    0 20px 50px
    rgba(15,23,42,.08);

}



/* Grid */

.rawa-grid {

    display:grid;

    grid-template-columns:
    repeat(2,1fr);

    gap:25px;

}



/* Sections */

.rawa-section {

    background:#f8fafc;

    border-radius:22px;

    padding:25px;

}



/* Inputs */


.rawa-label {

    display:block;

    margin-bottom:8px;

    margin-top:18px;

    font-weight:600;

}



.rawa-input,
.rawa-select {


    width:100%;

    height:55px;

    padding:0 16px;

    border-radius:14px;

    border:

    1px solid var(--rawa-border);

    background:white;

    font-size:17px;

}



.rawa-input:focus,
.rawa-select:focus {

    outline:none;

    border-color:
    var(--rawa-primary);

    box-shadow:

    0 0 0 3px
    rgba(15,118,110,.15);

}



/* Image */


.rawa-image-box {

    width:220px;

    height:220px;

    margin:25px auto;

    border-radius:30px;

    background:#f1f5f9;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:60px;

}



/* Buttons */


.rawa-button {


    width:100%;

    height:60px;

    margin-top:30px;

    border:none;

    border-radius:18px;

    background:

    var(--rawa-primary);

    color:white;

    font-size:20px;

    font-weight:600;

    cursor:pointer;


}


.rawa-button:hover {

    background:

    var(--rawa-primary-dark);

}

/* RAWA Layout Wrapper */

.rawa-wrapper {

    max-width:1100px;

    margin:auto;

}


/* Touch devices */

@media(max-width:900px){


    body {

        padding:20px;

    }


    .rawa-grid {

        grid-template-columns:1fr;

    }


    .rawa-card {

        padding:25px;

    }


}


@media(max-width:500px){


    .rawa-title {

        font-size:25px;

    }


    .rawa-input,
    .rawa-select {

        height:60px;

    }


}