/* ===========================================================
   Halaman berlangganan (checkout langsung)
   Indoscool Pilketos -- CV. Aji Pameling Cyber
   =========================================================== */

.hal-beli {
   background: #01234d;
   color: #e8eef7;
   padding-bottom: 40px;
}

.beli-header {
   text-align: center;
   padding: 34px 0 6px;
}

.beli-header h1 {
   font-size: 27px;
   font-weight: 700;
   margin: 0 0 8px;
   color: #fff;
}

.beli-header p {
   color: #9fb6d4;
   font-size: 15px;
   margin: 0;
}

.beli-judul {
   font-size: 16px;
   text-transform: uppercase;
   letter-spacing: 1px;
   color: #ffd45e;
   margin: 30px 0 12px;
   font-weight: 700;
}

/* ---------- kartu paket ---------- */

.daftar-paket { margin-bottom: 4px; }

.kartu-paket {
   display: block;
   background: #fff;
   color: #333;
   border-radius: 12px;
   padding: 18px 18px 16px;
   margin-bottom: 16px;
   cursor: pointer;
   font-weight: 400;
   border: 3px solid transparent;
   box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
   transition: border-color .15s ease, transform .15s ease;
}

.kartu-paket:hover { transform: translateY(-2px); }

.kartu-paket.terpilih {
   border-color: #5cb85c;
}

.kartu-paket input[type=radio] {
   margin-right: 8px;
   vertical-align: middle;
}

.kartu-paket .nama {
   font-size: 18px;
   font-weight: 700;
   color: #01234d;
}

.kartu-paket .harga {
   display: block;
   font-size: 26px;
   font-weight: 700;
   color: #2e7d32;
   margin: 6px 0 8px;
   line-height: 1.2;
}

.kartu-paket .harga small {
   font-size: 14px;
   font-weight: 400;
   color: #6b7a8d;
}

.kartu-paket .ket {
   display: block;
   font-size: 14px;
   color: #56657a;
   line-height: 1.55;
}

/* ---------- kotak isian ---------- */

.kotak-form {
   background: rgba(255, 255, 255, .06);
   border: 1px solid rgba(255, 255, 255, .12);
   border-radius: 12px;
   padding: 18px 16px 4px;
}

.kotak-form label {
   font-weight: 600;
   font-size: 14px;
   color: #cfe0f5;
}

.kotak-form .form-control {
   height: 44px;
   font-size: 16px;   /* 16px supaya iPhone tidak ikut memperbesar halaman */
}

.kotak-form .input-group-addon {
   background: #dfe7f1;
   color: #3d4d63;
   font-size: 14px;
}

.petunjuk {
   display: block;
   margin-top: 5px;
   color: #9fb6d4;
   font-size: 13px;
   line-height: 1.5;
}

.petunjuk code,
.kotak-form code {
   background: rgba(255, 255, 255, .12);
   color: #ffd45e;
   padding: 1px 5px;
   border-radius: 3px;
}

/* ---------- tombol bayar ---------- */

.bar-bayar {
   margin-top: 26px;
   text-align: center;
}

.tombol-bayar {
   min-width: 280px;
   font-size: 18px;
   font-weight: 700;
   padding: 14px 26px;
   border-radius: 10px;
}

.bar-bayar .aman {
   margin: 14px 0 0;
   color: #9fb6d4;
   font-size: 13px;
   line-height: 1.6;
}

/* ---------- halaman status pesanan ---------- */

.kotak-status {
   background: #fff;
   color: #333;
   border-radius: 12px;
   padding: 26px 22px;
   margin-top: 26px;
   box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
}

.kotak-status h2 {
   margin: 0 0 6px;
   font-size: 22px;
   color: #01234d;
}

.lencana-status {
   display: inline-block;
   padding: 5px 14px;
   border-radius: 20px;
   font-size: 14px;
   font-weight: 700;
   margin-bottom: 14px;
}

.lencana-status.menunggu { background: #ffd45e; color: #3a2c00; }
.lencana-status.lunas    { background: #5cb85c; color: #fff; }
.lencana-status.gagal    { background: #d9534f; color: #fff; }

.tabel-pesanan {
   width: 100%;
   font-size: 15px;
   margin-bottom: 18px;
}

.tabel-pesanan th,
.tabel-pesanan td {
   padding: 9px 6px;
   border-bottom: 1px solid #e6eaf0;
   vertical-align: top;
   word-break: break-word;
}

.tabel-pesanan th {
   text-align: left;
   color: #56657a;
   font-weight: 600;
   width: 40%;
}

.kotak-akun {
   background: #eefaf0;
   border: 1px solid #b7e2bf;
   border-radius: 10px;
   padding: 16px;
   margin-top: 6px;
}

.kotak-akun .sandi {
   font-family: Menlo, Consolas, monospace;
   font-size: 20px;
   font-weight: 700;
   letter-spacing: 1px;
   background: #fff;
   border: 1px dashed #7bbd88;
   padding: 6px 12px;
   border-radius: 6px;
   display: inline-block;
   margin-top: 4px;
   word-break: break-all;
}

.hal-beli footer {
   margin-top: 40px;
   text-align: center;
   color: #7d93b2;
   font-size: 13px;
}

.hal-beli footer a { color: #9fb6d4; }

/* ---------- layar kecil ---------- */

@media (max-width: 767px) {
   .beli-header { padding-top: 22px; }
   .beli-header h1 { font-size: 22px; }
   .beli-header p { font-size: 14px; }
   .beli-judul { font-size: 15px; margin-top: 24px; }
   .kartu-paket .harga { font-size: 23px; }
   .tombol-bayar { width: 100%; min-width: 0; font-size: 17px; }
   .tabel-pesanan th { width: 42%; }
   .kotak-status { padding: 20px 16px; }
}