/* =========================================================
   CSS hasil ekstraksi dari blok <style> #7
   Nama file: 07-pecitoto-field.css
   ========================================================= */

/* =========================================================
   RESIDENT EVIL - UMBRELLA DATABASE
========================================================= */

                        .PECITOTO-predict-wrap {
                            position: relative;
                            max-width: 1200px;
                            margin: 35px auto;
                            padding: 24px;

                            border-radius: 24px;

                            background:
                                radial-gradient(circle at top,
                                    rgba(255, 0, 0, .18),
                                    transparent 35%),
                                linear-gradient(180deg,
                                    #1a1a1a 0%,
                                    #101010 45%,
                                    #050505 100%);

                            border: 1px solid rgba(255, 60, 60, .35);

                            overflow: hidden;

                            box-shadow:
                                0 0 25px rgba(255, 0, 0, .15),
                                0 0 60px rgba(255, 0, 0, .08),
                                inset 0 0 20px rgba(255, 0, 0, .04);
                        }

                        /* UMBRELLA LABEL */

                        .PECITOTO-predict-wrap::before {
                            content: "☣ UMBRELLA DATABASE";
                            position: absolute;
                            top: 12px;
                            right: 18px;

                            color: rgba(255, 80, 80, .45);

                            font-size: 11px;
                            font-weight: 700;

                            letter-spacing: 2px;

                            z-index: 3;
                        }

                        /* SCANLINE */

                        .PECITOTO-predict-wrap::after {
                            content: "";
                            position: absolute;
                            inset: 0;

                            background:
                                repeating-linear-gradient(to bottom,
                                    rgba(255, 0, 0, .015),
                                    rgba(255, 0, 0, .015) 1px,
                                    transparent 2px,
                                    transparent 4px);

                            pointer-events: none;
                        }

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

                        .PECITOTO-predict-title {
                            margin: 0;

                            font-size: 28px;
                            font-weight: 900;

                            text-transform: uppercase;

                            letter-spacing: 2px;

                            background: linear-gradient(180deg, #5b0000 0%, #ff0000 50%, #5b0000 100%) !important;
                        }

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

                        .PECITOTO-predict-card {
                            background:
                                linear-gradient(180deg,
                                    rgba(30, 0, 0, .75),
                                    rgba(10, 10, 10, .95));

                            border: 1px solid rgba(255, 0, 0, .2);

                            border-radius: 18px;

                            padding: 20px;

                            margin-bottom: 16px;

                            box-shadow:
                                inset 0 0 20px rgba(255, 0, 0, .04);
                        }

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

                        .PECITOTO-form-grid {
                            display: grid;
                            grid-template-columns: repeat(2, 1fr);
                            gap: 14px;
                        }

                        .PECITOTO-field label {
                            display: block;

                            color: #ff6b6b;

                            font-size: 12px;
                            font-weight: 700;

                            text-transform: uppercase;

                            letter-spacing: 1px;

                            margin-bottom: 8px;
                        }

                        /* =========================================================
   INPUT
========================================================= */

                        .PECITOTO-field select,
                        .PECITOTO-field input {
                            width: 100%;
                            height: 48px;

                            border-radius: 12px;

                            border: 1px solid rgba(255, 60, 60, .25);

                            background: #121212;

                            color: #000000;

                            padding: 0 14px;

                            outline: none;

                            box-shadow:
                                inset 0 0 10px rgba(255, 0, 0, .05);

                            transition: .3s;
                        }

                        .PECITOTO-field select:focus,
                        .PECITOTO-field input:focus {
                            border-color: #ff3c3c;

                            box-shadow:
                                0 0 12px rgba(255, 0, 0, .25);
                        }

                        .PECITOTO-full {
                            grid-column: 1 / -1;
                        }

                        /* =========================================================
   BUTTON
========================================================= */

                        .PECITOTO-btn-gold {
                            width: 100%;
                            height: 52px;

                            border: none;
                            border-radius: 14px;

                            cursor: pointer;

                            color: #ffffff;

                            font-size: 15px;
                            font-weight: 900;

                            text-transform: uppercase;

                            letter-spacing: 2px;

                            background:
                                linear-gradient(135deg,
                                    #5f0000,
                                    #c80000,
                                    #5f0000);

                            box-shadow:
                                0 0 20px rgba(255, 0, 0, .25);

                            transition: .3s;
                        }

                        .PECITOTO-btn-gold:hover {
                            transform: translateY(-2px);

                            box-shadow:
                                0 0 30px rgba(255, 0, 0, .45);
                        }

                        /* =========================================================
   RESULT TITLE
========================================================= */

                        .PECITOTO-result-head {
                            text-align: center;

                            color: #ffffff;

                            font-size: 16px;
                            font-weight: 800;

                            letter-spacing: 1px;

                            margin-bottom: 16px;

                            text-shadow:
                                0 0 10px rgba(255, 0, 0, .35);
                        }

                        /* =========================================================
   RESULT BOX
========================================================= */

                        .rb-result-box {
                            border: 1px solid rgba(255, 0, 0, .2);

                            border-radius: 16px;

                            padding: 16px;

                            background:
                                #bb0000;
                        }

                        .PECITOTO-result-grid {
                            display: grid;
                            grid-template-columns: repeat(2, 1fr);
                            gap: 12px;

                            margin-bottom: 14px;
                        }

                        .PECITOTO-result-item {
                            background:
                                rgba(255, 0, 0, .04);

                            border:
                                1px solid rgba(255, 0, 0, .12);

                            border-radius: 12px;

                            padding: 12px;
                        }

                        .PECITOTO-result-item span {
                            display: block;

                            color: #ff7a7a;

                            font-size: 11px;

                            text-transform: uppercase;

                            letter-spacing: 1px;

                            margin-bottom: 6px;
                        }

                        .PECITOTO-result-item strong {
                            color: #ffffff;

                            font-size: 18px;
                            font-weight: 800;
                        }

                        /* =========================================================
   MAIN NUMBER
========================================================= */

                        .PECITOTO-number-main {
                            text-align: center;

                            margin: 16px 0 10px;

                            padding: 18px;

                            border-radius: 18px;

                            border: 1px solid rgba(255, 50, 50, .3);

                            background:
                                linear-gradient(180deg,
                                    #500000,
                                    #101010);

                            box-shadow:
                                0 0 25px rgba(255, 0, 0, .25);
                        }

                        .PECITOTO-number-main span {
                            display: block;

                            color: #ff8f8f;

                            font-size: 12px;

                            text-transform: uppercase;

                            letter-spacing: 1px;

                            margin-bottom: 8px;
                        }

                        .PECITOTO-number-main strong {
                            color: #ffffff;

                            font-size: 34px;
                            font-weight: 900;

                            letter-spacing: 6px;

                            text-shadow:
                                0 0 15px rgba(255, 0, 0, .7);
                        }

                        /* =========================================================
   ALT NUMBER
========================================================= */

                        .PECITOTO-alt-list {
                            display: grid;
                            grid-template-columns: repeat(3, 1fr);
                            gap: 10px;

                            margin-top: 14px;
                        }

                        .PECITOTO-alt-item {
                            text-align: center;

                            padding: 12px 10px;

                            border-radius: 12px;

                            border: 1px solid rgba(255, 0, 0, .12);

                            background:
                                linear-gradient(180deg,
                                    #1b1b1b,
                                    #0b0b0b);

                            color: #ffffff;

                            font-weight: 700;
                        }

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

                        .PECITOTO-note {
                            text-align: center;

                            color: #ff8a8a;

                            font-size: 18px;

                            margin-top: 14px;

                            text-shadow:
                                0 0 10px rgba(255, 0, 0, .35);
                        }

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

                        @media(max-width:768px) {

                            .PECITOTO-form-grid,
                            .PECITOTO-result-grid,
                            .PECITOTO-alt-list {
                                grid-template-columns: 1fr;
                            }

                            .PECITOTO-number-main strong {
                                font-size: 28px;
                                letter-spacing: 4px;
                            }

                            .PECITOTO-predict-title {
                                font-size: 22px;
                            }
                        }