/* =========================
   GLOBAL
========================= */

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html{
    font-size: 100%;
}

body{
    font-family: "DM Sans", sans-serif;
    background: linear-gradient(
        160deg,
        #f7f1ea 0%,
        #ede4d8 30%,
        #e8ddd0 60%,
        #f0e8de 100%
    );
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
    padding: 1.25rem;
}

h1,
h2,
h3{
    font-family: "Playfair Display", serif;
    color: #2d4a3e;
    font-weight: 700;
}

h1{
    font-size: 2rem !important;
    line-height: 1.3;
}

h2{
    font-size: 1.9rem !important;
    line-height: 1.3;
}

h3{
    font-size: 1.6rem;
    line-height: 1.3;
}

/* =========================
   FLOATING SHAPES
========================= */

.floating-shape{
    position: fixed;
    border-radius: 50%;
    opacity: 0.10;
    animation: floatShape 8s ease-in-out infinite;
    z-index: -1;
    pointer-events: none;
}

.shape-1{
    width: 16.25rem;
    height: 16.25rem;
    background: #2d4a3e;
    top: -5rem;
    right: -5rem;
}

.shape-2{
    width: 11.25rem;
    height: 11.25rem;
    background: #c4a882;
    bottom: 10%;
    left: -3.75rem;
    animation-delay: 2s;
}

.shape-3{
    width: 8.125rem;
    height: 8.125rem;
    background: #2d4a3e;
    bottom: 5%;
    right: 8%;
    animation-delay: 4s;
}

@keyframes floatShape{
    0%,100%{
        transform: translateY(0) rotate(0deg);
    }
    50%{
        transform: translateY(-1.125rem) rotate(5deg);
    }
}

/* =========================
   MAIN CARD
========================= */

.main-card{
    position: relative;
    z-index: 2;
    max-width: 100%;
    margin: 1.875rem auto;
}

/* =========================
   GLASS CARD
========================= */

.glass-card{
    background: rgba(255,255,255,0.82);
    backdrop-filter: blur(1.125rem);
    border: 0.0625rem solid rgba(255,255,255,0.6);
    border-radius: 1.5rem;
    box-shadow: 0 0.625rem 2.1875rem rgba(0,0,0,0.08);
}

/* =========================
   HEADER
========================= */

.header-section{
    padding: 2.1875rem 1.875rem;
    display: flex;
    align-items: center;
    gap: 1.5625rem;
    flex-wrap: wrap;
    margin-bottom: 1.5625rem;
}

.header-section p{
    color: #8b7355;
    font-size: 1.2rem;
    margin-bottom: 0;
    font-weight: bold;
}

/* =========================
   LOGO & ICONS
========================= */

.ncert-logo{
    width: auto;
    height: 7.5rem;
    object-fit: contain;
}

.icon{
    width: 2.3125rem;
    height: auto;
}

/* =========================
   CONTENT AREA
========================= */

.content-area{
    width: 100%;
}

/* =========================
   CUSTOM SECTION
========================= */

.custom-section{
    padding: 2.1875rem;
    margin-bottom: 1.5625rem;
}

/* =========================
   SECTION TITLE
========================= */

.section-title{
    display: flex;
    align-items: center;
    gap: 0.9375rem;
    margin-bottom: 1.5625rem;
    flex-wrap: wrap;
}

.section-title p{
    margin: 0;
    color: #8b7355;
    font-size: 1.2rem;
    font-weight: bold;
}

/* =========================
   SECTION ICON
========================= */

.section-icon{
    width: 3.4375rem;
    height: 3.4375rem;
    border-radius: 1rem;
    background: #2d4a3e;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}


/* FLOOR DROPDOWN */

select.form-select{
    width: 100%;
    height: 55px;
    padding: 0 18px;
    border-radius: 14px;
    border: 1.5px solid rgba(255,255,255,0.25);
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
   
    font-size: 15px;
    font-weight: 500;
    outline: none;
    transition: all 0.3s ease;
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.08);
    appearance: none;

    /* Custom Arrow */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5l6 6 6-6' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 14px;
    padding-right: 45px;
}

/* HOVER */

select.form-select:hover{
    border-color: rgba(255,255,255,0.45);
    background: rgba(255,255,255,0.12);
}

/* FOCUS */

select.form-select:focus{
    border-color: #4a7c6b;
    box-shadow: 0 0 0 4px rgba(74,124,107,0.18);
    background: rgba(255,255,255,0.15);
}

/* DROPDOWN OPTIONS */

select.form-select option{
    border-color: rgba(255,255,255,0.45);
    
    padding: 10px;
}

/* RESPONSIVE */

@media (max-width: 768px){

    select.form-select{
        height: 50px;
        font-size: 14px;
        border-radius: 12px;
        padding-left: 14px;
    }

}

@media (max-width: 480px){

    select.form-select{
        height: 48px;
        font-size: 13px;
        border-radius: 10px;
    }

}


/* =========================
   FORM LABEL
========================= */

.form-label{
    color: #6b5b4e;
    font-weight: 600;
    margin-bottom: 0.625rem;
    display: block;
    font-size: 1.25rem;
}

/* =========================
   INPUTS
========================= */

input,
textarea,
select{
    width: 100%;
    border: 0.125rem solid #e2d5c3 !important;
    border-radius: 3.125rem !important;
    padding: 0.875rem 1.125rem !important;
    background: rgba(255,255,255,0.7) !important;
    transition: all 0.3s ease;
    font-size: 1rem;
}

textarea{
    border-radius: 1.25rem !important;
    min-height: 8.125rem;
    resize: none;
}

input:focus,
textarea:focus,
select:focus{
    border-color: #2d4a3e !important;
    box-shadow: 0 0 0 0.25rem rgba(45,74,62,0.1) !important;
    outline: none;
}

/* =========================
   NOTE BOX
========================= */

.note-box{
    padding: 1.5625rem;
    border-left: 0.3125rem solid #c4a882;
    margin-bottom: 1.5625rem;
}

.note-box strong{
    color: #2d4a3e;
}

.note-box p{
    margin: 0;
    color: #6b5b4e;
    line-height: 1.8;
    font-size: 1rem;
    font-weight: bold;
}

/* =========================
   RATING OPTIONS
========================= */


.rating-options{
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
/* DJANGO RADIO DIV */


/* HIDE RADIO */

.rating-options input[type="radio"]{
    display: none;
}

/* =========================
   LABEL STYLE
========================= */

.rating-options label{
    position: relative;
    overflow: hidden;
    /* display: inline-flex; */
    align-items: center;
    justify-content: center;
    min-width: 13rem;
    padding: 0.5rem 0.8rem;
    border-radius: 3.125rem;
    background: #ffffff; /* NORMAL WHITE */
    border: 0.125rem solid #e2d5c3;
    cursor: pointer;
    transition: all 0.4s ease;
    font-weight: 600;
    color: #6b5b4e;
    z-index: 1;
}

/* =========================
   LEFT TO RIGHT EFFECT
========================= */

.rating-options label::before{
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    z-index: -1;
    transition: all 0.45s ease;
}

/* HOVER + ACTIVE */

.rating-options label:hover::before,
.rating-options > div > div:has(input:checked) label::before{
    left: 0;
}

.rating-options label:hover,
.rating-options > div > div:has(input:checked) label{
    color: #fff;
    transform: translateY(-0.15rem);
}

/* VERY POOR */

.rating-options > div > div:nth-child(1) label{
    border-color: #c94c4c;
}

.rating-options > div > div:nth-child(1) label::before{
    background: linear-gradient(135deg, #7a1f1f, #c94c4c);
}


/* POOR */

.rating-options > div > div:nth-child(2) label{
    border-color: #d98c2b;
}

.rating-options > div > div:nth-child(2) label::before{
    background: linear-gradient(135deg, #7a4a12, #d98c2b);
}


/* AVERAGE */

.rating-options > div > div:nth-child(3) label{
    border-color: #d4b12f;
}

.rating-options > div > div:nth-child(3) label::before{
    background: linear-gradient(135deg, #7a6515, #d4b12f);
}


/* GOOD */

.rating-options > div > div:nth-child(4) label{
    border-color: #0d8a74;
}

.rating-options > div > div:nth-child(4) label::before{
    background: linear-gradient(135deg, #064e45, #0d8a74);
}


/* EXCELLENT */
.rating-options > div > div:nth-child(5) label{
    border-color: #4a7c6b;
}

.rating-options > div > div:nth-child(5) label::before{
    background: linear-gradient(135deg, #2d4a3e, #4a7c6b);
}

/* =========================
   SHADOWS
========================= */

.rating-options > div > div:nth-child(1):has(input:checked) label,
.rating-options > div > div:nth-child(1) label:hover{
    box-shadow: 0 0.5rem 1.5rem rgba(255,0,0,0.35);
}

.rating-options > div > div:nth-child(2):has(input:checked) label,
.rating-options > div > div:nth-child(2) label:hover{
    box-shadow: 0 0.5rem 1.5rem rgba(255,152,0,0.35);
}

.rating-options > div > div:nth-child(3):has(input:checked) label,
.rating-options > div > div:nth-child(3) label:hover{
    box-shadow: 0 0.5rem 1.5rem rgba(250,204,21,0.35);
}

.rating-options > div > div:nth-child(4):has(input:checked) label,
.rating-options > div > div:nth-child(4) label:hover{
    box-shadow: 0 0.5rem 1.5rem rgba(74,222,128,0.35);
}

.rating-options > div > div:nth-child(5):has(input:checked) label,
.rating-options > div > div:nth-child(5) label:hover{
    box-shadow: 0 0.5rem 1.5rem rgba(5,150,105,0.35);
}

/* =========================
   MOBILE
========================= */

@media (max-width:48rem){

    .rating-options > div{
        flex-direction: column;
        width: 100%;
    }

    .rating-options label{
        width: 100%;
    }
}

/* =========================
   BUTTONS
========================= */

.btn-submit,
.btn-export,
.btn-home{
    background: linear-gradient(135deg,#2d4a3e,#4a7c6b);
    border: none;
    color: white;
    padding: 1rem 2.5rem;
    border-radius: 3.125rem;
    font-size: 1rem;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 0.5rem 1.5625rem rgba(45,74,62,0.25);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
}

.btn-submit:hover,
.btn-export:hover,
.btn-home:hover{
    transform: translateY(-0.1875rem);
    color: #fff;
    box-shadow: 0 0.75rem 1.875rem rgba(45,74,62,0.35);
}

.btn-clear{
    background: #ffffff;
    border: 0.125rem solid #c4a882;
    color: #6b5b4e;
    padding: 1rem 2.5rem;
    border-radius: 3.125rem;
    font-size: 1rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-clear:hover{
    background: #c4a882;
    color: #ffffff;
}

/* =========================
   DASHBOARD
========================= */

.dashboard-card{
    padding: 1.875rem;
}

.top-bar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.9375rem;
    margin-bottom: 1.5625rem;
}

.table-responsive{
    overflow-x: auto;
    border-radius: 1.125rem;
}

table{
    min-width: 162.5rem;
    background: #fff;
}

th{
    background: #2d4a3e !important;
    color: #fff !important;
    vertical-align: middle;
    white-space: nowrap;
    font-size: 0.95rem;
    padding: 1.125rem 0.9375rem !important;
}

td{
    vertical-align: middle;
    white-space: nowrap;
    padding: 0.875rem !important;
    font-size: 0.9rem;
    background: rgba(255,255,255,0.92);
}

.question-head{
    min-width: 16.25rem;
    line-height: 1.5;
}

.question-head small{
    color: #ddd;
    font-size: 0.75rem;
}

.answer-cell{
    font-weight: 600;
    color: #2d4a3e;
}

/* =========================
   STICKY COLUMNS
========================= */

.sticky-col{
    position: sticky;
    background: #fff;
    z-index: 2;
}

thead .sticky-col{
    background: #2d4a3e !important;
    z-index: 5;
}

.col-guest{
    left: 0;
    min-width: 11.25rem;
}

.col-floor{
    left: 11.25rem;
    min-width: 6.25rem;
}

.col-room{
    left: 17.5rem;
    min-width: 7.5rem;
}

.col-date{
    left: 25rem;
    min-width: 8.75rem;
}

.col-overall{
    left: 33.75rem;
    min-width: 11.25rem;
}

.col-suggestions{
    min-width: 15.625rem;
}

/* =========================
   SUCCESS PAGE
========================= */

.success-card{
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 40.625rem;
    padding: 1.25rem;
    margin: auto;
}

.success-glass-card{
    padding: 3.75rem 2.5rem;
    text-align: center;
}

.success-icon{
    width: 6.25rem;
    height: 6.25rem;
    border-radius: 50%;
    background: linear-gradient(135deg,#2d4a3e,#4a7c6b);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5625rem;
    box-shadow: 0 0.625rem 1.875rem rgba(45,74,62,0.3);
}

.success-icon i{
    color: #fff;
    font-size: 2.625rem;
}

.success-glass-card p{
    color: #6b5b4e;
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 0.75rem;
}

.thank-text{
    color: #8b7355;
    font-size: 1rem;
    margin-top: 0.625rem;
}

/* =========================
   ANIMATION
========================= */

.stagger-in{
    animation: fadeUp 0.6s ease forwards;
    opacity: 0;
    transform: translateY(1.25rem);
}

@keyframes fadeUp{
    from{
        opacity: 0;
        transform: translateY(1.875rem);
    }
    to{
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================
   TABLET
========================= */

@media (max-width: 62rem){

    .shape-1{
        width: 11.25rem;
        height: 11.25rem;
        top: -3.125rem;
        right: -3.125rem;
    }

    .shape-2{
        width: 8.125rem;
        height: 8.125rem;
        left: -2.5rem;
    }

    .shape-3{
        width: 6.25rem;
        height: 6.25rem;
    }

    .header-section{
        padding: 1.875rem 1.5625rem;
    }

    .custom-section{
        padding: 1.875rem;
    }
}

/* =========================
   MOBILE
========================= */

@media (max-width: 48rem){

    body{
        padding: 0.9375rem;
    }

    .floating-shape{
        opacity: 0.06;
    }

    .shape-1{
        width: 7.5rem;
        height: 7.5rem;
        top: -1.875rem;
        right: -1.875rem;
    }

    .shape-2{
        width: 5.625rem;
        height: 5.625rem;
        left: -1.5625rem;
        bottom: 12%;
    }

    .shape-3{
        width: 4.375rem;
        height: 4.375rem;
        right: -0.625rem;
        bottom: 8%;
    }

    .glass-card{
        border-radius: 1.25rem;
    }

    .header-section{
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 1.5625rem 1.25rem;
        gap: 1.125rem;
    }

    .header-section .text-start{
        text-align: center !important;
    }

    .header-section p{
        font-size: 0.95rem;
    }

    .ncert-logo{
        height: 5.625rem;
    }

    .custom-section{
        padding: 1.375rem;
    }

    .section-title{
        gap: 0.75rem;
    }

    .section-icon{
        width: 3rem;
        height: 3rem;
    }

    .icon{
        width: 1.75rem;
    }

    input,
    textarea,
    select{
        font-size: 0.95rem;
        padding: 0.75rem 1rem !important;
    }

    .rating-options{
        flex-direction: column;
    }

    .rating-options label{
        width: 100%;
        text-align: center;
    }

    .btn-submit,
    .btn-clear,
    .btn-export,
    .btn-home{
        width: 100%;
        padding: 0.9375rem 1.25rem;
        font-size: 1rem;
    }

    .dashboard-card{
        padding: 1.25rem;
    }

    .success-glass-card{
        padding: 2.5rem 1.5625rem;
    }

    .success-icon{
        width: 5rem;
        height: 5rem;
    }

    .success-icon i{
        font-size: 2rem;
    }
}

/* =========================
   SMALL MOBILE
========================= */

@media (max-width: 30rem){

    body{
        padding: 0.625rem;
    }

    .floating-shape{
        display: none;
    }

    .header-section{
        padding: 1.25rem 0.9375rem;
    }

    .header-section p{
        font-size: 0.9rem;
    }

    .ncert-logo{
        height: 6.375rem;
    }

    .custom-section{
        padding: 1.125rem;
    }

    .section-title h3{
        font-size: 1.3rem;
    }

    .form-label{
        font-size: 1.2rem;
    }

    input,
    textarea,
    select{
        font-size: 0.875rem;
    }

    .btn-submit,
    .btn-clear,
    .btn-export,
    .btn-home{
        font-size: 0.95rem;
    }
}

/* =========================
   MOBILE HEADER
========================= */

@media (max-width:768px){

    /* HIDE DATE & TIME */

    .top-left{
        display: none;
    }

    /* CENTER BUTTONS */

    .top-header-wrapper{
        justify-content: center;
    }

    .top-right{
        width: 100%;
        justify-content: center;
    }

}