/* ---------- LotteryPro 3D Balls ---------- */
.lcpro-ball {
    width: 48px;
    height: 48px;
    line-height: 48px;
    border-radius: 50%;
    font-size: 20px;
    font-weight: bold;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 6px;
    color: #fff;
    text-shadow: 0 0 3px rgba(0,0,0,0.4);
    box-shadow: inset -5px -5px 12px rgba(0,0,0,0.3),
                inset 5px 5px 12px rgba(255,255,255,0.4),
                0 4px 8px rgba(0,0,0,0.25);
    font-family: Arial, sans-serif;
}

/* Main balls (blue) */
.lcpro-ball-main {
    background: radial-gradient(circle at 30% 30%, #4da3ff, #005bbb);
}

/* Lucky Star balls (deep gold, black text) */
.lcpro-balls-wrap .lcpro-ball.lcpro-ball-star {
    background: radial-gradient(circle at 30% 30%, #ffd773, #d19a00 60%, #a87500) !important;
    box-shadow:
        inset -6px -6px 10px rgba(0,0,0,0.35),
        inset 4px 4px 10px rgba(255,255,255,0.45),
        0 4px 10px rgba(0,0,0,0.3) !important;
    color: #000 !important;          /* BLACK TEXT */
    text-shadow: none !important;     /* Remove white glow */
}

/* Container */
.lcpro-balls-wrap {
    margin-top: 10px;
    text-align: center;
}

/* ---------- LotteryPro 3D Card Container ---------- */
.lcpro-3d-card {
    max-width: 600px;
    margin: 0 auto;
    padding: 25px;
    border-radius: 14px;

    /* Background */
    background: linear-gradient(145deg, #ffffff, #e6e6e6);

    /* 3D soft shadow */
    box-shadow:
        8px 8px 18px rgba(0,0,0,0.15),
        -8px -8px 18px rgba(255,255,255,0.6);

    /* Optional inner subtle glow */
    position: relative;
}

.lcpro-3d-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 14px;
    box-shadow: inset 4px 4px 8px rgba(0,0,0,0.06),
                inset -4px -4px 8px rgba(255,255,255,0.8);
    pointer-events: none;
}

/* Title spacing inside the card */
.lcpro-3d-card h3,
.lcpro-3d-card h4 {
    text-align: center;
    margin-top: 10px;
}


/* Lottery dropdown – Lucky Dip */
.lcpro-select {
    width: 100%;
    max-width: 320px;
    padding: 10px 14px;
    font-size: 16px;
    line-height: 1.4;

    border: 2px solid #0073aa;      /* strong visible edge */
    border-radius: 8px;
    background-color: #ffffff;

    color: #333;
    cursor: pointer;

    /* Remove ugly browser defaults (but keep accessibility) */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    /* Space for dropdown arrow */
    background-image:
        linear-gradient(45deg, transparent 50%, #0073aa 50%),
        linear-gradient(135deg, #0073aa 50%, transparent 50%),
        linear-gradient(to right, #ddd, #ddd);
    background-position:
        calc(100% - 20px) calc(50% - 3px),
        calc(100% - 15px) calc(50% - 3px),
        calc(100% - 40px) 50%;
    background-size:
        5px 5px,
        5px 5px,
        1px 60%;
    background-repeat: no-repeat;
}

/* Hover */
.lcpro-select:hover {
    border-color: #005f8d;
}

/* Focus (keyboard + accessibility) */
.lcpro-select:focus {
    outline: none;
    border-color: #005f8d;
    box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.2);
}
.lcpro-3d-card form {
    text-align: center;
}

.lcpro-3d-card .lcpro-select {
    margin: 0 auto;
    display: block;
}

/* -------------------------
   Centered bottom navigation
-------------------------- */
.lcpro-check-nav {
  display: flex;
  justify-content: center;
  margin: 24px 0;
}

.lcpro-check-nav .lcpro-btn {
  width: auto !important;   /* overrides mobile full-width rules */
  max-width: none;
}