/* Custom styles for OnlineVote */

/* Match bnp.today fonts: Google IBM Plex Sans + local AnekBangla (ArekBangla alias) */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600&display=swap');

/* Anek / Arek Bangla (local files expected at ../fonts/Anek_Bangla/static/) */
@font-face {
    font-family : "ArekBangla";
    src         : url('../fonts/Anek_Bangla/static/AnekBangla-Regular.ttf') format('truetype');
    font-weight : 400;
    font-style  : normal;
    font-display: swap;
}

@font-face {
    font-family : "ArekBangla";
    src         : url('../fonts/Anek_Bangla/static/AnekBangla-SemiBold.ttf') format('truetype');
    font-weight : 600;
    font-style  : normal;
    font-display: swap;
}

/* Utility classes mirroring bnp.today */
.font-arek-regular {
    font-family: "ArekBangla", sans-serif;
    font-weight: 400;
}

.font-arek-semibold {
    font-family: "ArekBangla", sans-serif;
    font-weight: 600;
}

.font-arek-bold {
    font-family: "ArekBangla", sans-serif;
    font-weight: 700;
}

.font-arek-extrabold {
    font-family: "ArekBangla", sans-serif;
    font-weight: 800;
}

:root {
    --primary: #0b3d91;
    --accent: #ff6b00;
}


/* Base typography and page background applied to body so children inherit styles */
body {
    font-family: 'ArekBangla', 'IBM Plex Sans', 'Noto Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.6;
    background: linear-gradient(180deg, #04203a 0%, #072d56 100%), radial-gradient(circle at center, rgba(0,0,0,0.15), transparent 50%);
    background-blend-mode: multiply;
    background-attachment: fixed;
    background-size: cover;
}



/* keep body margin reset (already contains base styles above) */
body {
    margin: 0;
}

p{
     color: #000000;
}

main.container-fluid {
    padding-top   : 0 !important;
    padding-bottom: 0 !important
}

/* Layout centering for the main panel */
.layout-center {
    min-height     : 100vh;
    display        : flex;
    align-items    : center;
    justify-content: center;
    padding        : 24px;
}

.panel-wrap {
    max-width     : 450px;
    width         : 100%;
    border-radius : 8px;
    overflow      : hidden;
    box-shadow    : 0 12px 24px rgba(0,0,0,0.2);
    border        : 1px solid #e0e0e0;
    position      : relative;
    background    : rgba(255, 255, 255, 0.95);
    min-height    : 100vh;
    display       : flex;
    flex-direction: column;
    box-sizing    : border-box;
    padding       : 24px;
}



.img-fluid {
    width  : clamp(100px, 45vw, 200px);
    height : auto;
    display: block;
    filter : drop-shadow(rgba(0, 0, 0, 0.6) 0px 6px 14px);
    margin : 0px auto;
}

.video-height {
    width     : 100%;
    max-width : 420px;
    height    : 450px;
    object-fit: cover;
}


#video {
    display        : flex;
    justify-content: center;
    align-items    : center;
}

#content {
    display        : flex;
    justify-content: center;
    align-items    : center;
    padding-bottom : 20px;
}


/* (Consolidated mobile rules moved to bottom) */

/* Video frame enhancements moved from blade inline styles */
/* .video-height {
    border-radius: 16px;
    overflow     : hidden;
    box-shadow   :  rgba(0, 0, 0, 0.6) 0px 12px 24px;
    border       : 4px solid rgba(255, 255, 255, 0.8);
    position     : relative;
    background   : rgb(255, 255, 255);
}
 */


/* Sound button (moved from inline styles) */
.sound-btn {
    position     : absolute;
    bottom       : 10px;
    left         : 10px;
    padding      : 8px 12px;
    border-radius: 12px;
    border       : none;
    background   : rgba(0, 0, 0, 0.6);
    color        : rgb(255, 255, 255);
    font-size    : 0.95rem;
    cursor       : pointer;
    display      : flex;
    align-items  : center;
    gap          : 6px;
    box-shadow   : rgba(0, 0, 0, 0.5) 0px 4px 12px;
    transition   : 0.3s;
}

.sound-btn .icon-unmuted {
    display: none;
}

.sound-btn span {
    color      : rgb(255, 75, 43);
    font-weight: 600;
    transition : color 0.3s;
}

/* Content wrapper */
.content-wrapper {
    max-width: 420px;
}

/* Title and text utilities moved from blade inline styles */
.lead-title {
    font-size  : clamp(1rem, 2vw, 1.6rem);
    line-height: 1.35;
    text-shadow: rgba(248, 248, 248, 0.8) 2px 2px 8px;
    text-align : center;
}

.lead-subtitle {
    font-size: 1.2em;
    display: inline-block;

}

.lead-paragraph {
    text-align : justify;
    color: #000000;

}

.text-shadow {
    text-shadow: rgba(255, 255, 255, 0.8) 2px 2px 8px;
}



.opinion-optio.middle {
    display        : flex;
    gap            : 12px;
    justify-content: center;
    align-items    : center;
    padding        : 4px;
    width          : 100%;
    max-width      : 600px;
    margin         : 0 auto;
}

/* বাটন লেবেলের মেইন স্টাইল */
.opinion-option {
    cursor         : pointer;
    position       : relative;
    display        : flex;
    align-items    : center;
    justify-content: center;
    gap            : 8px;
    padding        : 6px 8px;
    background     : #ffffff;
    border-radius  : 12px;
    transition     : all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    overflow       : hidden;
    flex           : 1;
    min-width      : 0;
    box-shadow     : rgba(5, 252, 108, 0.575) 0px 5px 8px;
    border         : 1px solid rgba(196, 188, 188, 0.8);
}

/* ইনপুট লুকিয়ে ফেলা */
.opinion-input {
    display: none;
}

/* আইকন বক্স */
.checkmark {
    width          : 28px;
    height         : 28px;
    display        : flex;
    align-items    : center;
    justify-content: center;
    border-radius  : 50%;
    font-size      : 14px;
    transition     : all 0.25s;
    background     : #f0f0f0;
}

/* টেক্সট স্টাইল */
.option-text {
    font-size  : 16px;
    font-weight: 600;
    color      : #444;
    transition : color 0.25s;
}

/* --- হোভার করলে যা হবে --- */
.opinion-option:hover {
    transform : translateY(-3px);
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.08);
}

/* Hover color variants: make yes=danger and no=success with white text on hover */
.opinion-yes:hover {
    background: #28a745;
    box-shadow: 0 10px 18px rgba(40, 167, 69, 0.18);
}
.opinion-yes:hover .option-text,
.opinion-yes:hover .checkmark {
    color: #fff !important;
}
.opinion-yes:hover .checkmark {
    background: rgba(255,255,255,0.12);
}

.opinion-no:hover {
    background: #dc3545;
    box-shadow: 0 10px 18px rgba(220, 53, 69, 0.18);
}
.opinion-no:hover .option-text,
.opinion-no:hover .checkmark {
    color: #fff !important;
}
.opinion-no:hover .checkmark {
    background: rgba(255,255,255,0.12);
}

/* --- 'হ্যাঁ' বাটন একটিভ হলে --- */
.opinion-yes:has(.opinion-input:checked) {
    background: #28a745;
    box-shadow: 0 15px 25px rgba(40, 167, 69, 0.3);
    inset     : 0 0 0 2px #218838;
}

.opinion-yes:has(.opinion-input:checked) .checkmark {
    background: rgba(255, 255, 255, 0.2);
    color     : #fff !important;
    transform : rotate(360deg);
}

.opinion-yes:has(.opinion-input:checked) .option-text {
    color: #fff;
}

/* --- 'না' বাটন একটিভ হলে --- */
.opinion-no:has(.opinion-input:checked) {
    background: #dc3545;
    box-shadow: 0 15px 25px rgba(220, 53, 69, 0.3);
    inset     : 0 0 0 2px #c82333;
}

.opinion-no:has(.opinion-input:checked) .checkmark {
    background: rgba(255, 255, 255, 0.2);
    color     : #fff !important;
    transform : scale(1.2);
}

.opinion-no:has(.opinion-input:checked) .option-text {
    color: #fff;
}

/* ক্লিক করার সময় হালকা পালস ইফেক্ট */
.opinion-option:active {
    transform: scale(0.92);
}


/* Instruction helper to ensure proper centering inside the content wrapper */
.instruction {
    display      : block;
    width        : 100%;
    text-align   : center;
    margin-bottom: .5rem;
}

.opinion-result {
    display    : none;
    font-weight: 600;
    text-align : center;
}
/* opinion-related styles removed as requested */

/* বাটনটি ফুল উইডথ এবং স্মার্ট করার জন্য */
.btn-joining-custom {
    display        : flex;
    align-items    : center;
    justify-content: center;
    width          : 100%; /* ফুল উইডথ */
    padding        : 10px;
    font-size      : 1.1rem;
    font-weight    : 600;
    color          : #fff !important;
    background     : linear-gradient(135deg, #28a745, #218838); /* আধুনিক গ্রেডিয়েন্ট */
    border         : none;
    border-radius  : 12px; /* স্মার্ট রাউন্ডেড কর্নার */
    text-decoration: none;
    transition     : all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow     : 0 4px 15px rgba(40, 167, 69, 0.2); /* হালকা গ্লো শ্যাডো */
    position       : relative;
    overflow       : hidden;
}

/* আইকন স্টাইল */
.btn-joining-custom i {
    font-size   : 1.2rem;
    margin-right: 10px;
    transition  : transform 0.3s ease;
}

/* হোভার ইফেক্ট */
.btn-joining-custom:hover {
    transform : translateY(-3px); /* সামান্য উপরে উঠবে */
    box-shadow: 0 8px 25px rgba(40, 167, 69, 0.4); /* শ্যাডো বাড়বে */
    background: linear-gradient(135deg, #2ecc71, #27ae60);
}

.btn-joining-custom:hover i {
    transform: scale(1.2) rotate(10deg); /* আইকনটি একটু নড়বে */
}

/* ক্লিক করার সময় ইফেক্ট */
.btn-joining-custom:active {
    transform: scale(0.97); /* ক্লিক করলে হালকা দেবে যাবে */
}

/* প্রিমিয়াম শাইন ইফেক্ট (ঐচ্ছিক) */
.btn-joining-custom::after {
    content   : '';
    position  : absolute;
    top       : 0;
    left      : -100%;
    width     : 100%;
    height    : 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: 0.5s;
}

.btn-joining-custom:hover::after {
    left: 100%;
}

.google-maps{
    width        : 100%;
    height       : 300px;
    border-radius: 12px;
    overflow     : hidden;
    box-shadow   : rgba(0, 0, 0, 0.2) 5px 5px 5px 5px;
    border       : 1px solid rgba(196, 188, 188, 0.8);
}


/* --- রেসপনসিভ পার্ট --- */

/* ট্যাবলেট এবং মোবাইলের জন্য (৭৬৮পিএক্স এর নিচে) */
@media screen and (max-width: 768px) {
    .layout-center {
        padding: 0px;
    }
}

/* ছোট মোবাইলের জন্য (৪৮০পিএক্স এর নিচে) */
@media screen and (max-width: 480px) {
    .layout-center {
        padding    : 0px;
    }

    .panel-wrap {
        border-radius: 4px;
        padding      : 20px;
    }

        /* Title and text utilities moved from blade inline styles */
    .lead-title {
        font-size: 20px;
    }

    .lead-subtitle {
        font-size: 25px;

    }


}