/*! easyWheel Titanium Theme Override */

.eWheel-wrapper,
.easyWheel {
    position: relative;
}

.easyWheel {
    max-width: 100%;
    margin: 4em auto 1em;
    font-size: 25px;
    font-weight: 700;
    filter: drop-shadow(0 18px 30px rgba(0,0,0,.35));
}

.easyWheel,
.easyWheel * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.easyWheel .eWheel-inner {
    display: block;
    overflow: hidden;
    width: 100%;
    height: 100%;
    position: relative;
}

.easyWheel .eWheel {
    border-radius: 100%;
    overflow: hidden;
    box-shadow:
        inset 0 2px 8px rgba(255,255,255,.18),
        inset 0 -12px 20px rgba(0,0,0,.28),
        0 8px 22px rgba(0,0,0,.28);
}

.easyWheel .eWheel,
.easyWheel .eWheel > .eWheel-bg-layer,
.easyWheel .eWheel > .eWheel-txt-wrap,
.easyWheel .eWheel > .eWheel-txt-wrap > .eWheel-txt {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.easyWheel .eWheel > .eWheel-bg-layer,
.easyWheel .eWheel > .eWheel-txt-wrap > .eWheel-txt {
    margin: 0 auto;
    border-radius: 100%;
    padding: 0;
    list-style: none;
    overflow: hidden;
    color: #ecf0f1;
}

.easyWheel .eWheel > .eWheel-bg-layer,
.easyWheel .eWheel > .eWheel-txt-wrap {
    transform: rotate(-90deg);
}

.easyWheel .eWheel .eWheel-child .eWheel-inside {
    display: table;
    transform: rotate(0) skew(-45deg);
    width: 50%;
    height: 50%;
    transform-origin: 0 0;
    text-align: right;
    overflow: hidden;
}

.easyWheel .eWheel .eWheel-child .eWheel-inside > div {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 100%;
    transform: rotate(25deg);
    transform-origin: 115% 25%;
    padding-right: 40px;
    font-size: 18px;
    font-weight: 700;
}

/* ===== พื้นชิ้นวงล้อ ===== */
.easyWheel .eWheel > .eWheel-bg-layer > div {
    overflow: hidden;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
    border: 1px solid rgba(255,255,255,.08);
    background:
        linear-gradient(135deg, #88919a 0%, #5e666e 22%, #3d4349 48%, #6f7780 74%, #b7bec6 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}

.easyWheel .eWheel > .eWheel-bg-layer > div:nth-child(odd) {
    background:
        linear-gradient(135deg, #616971 0%, #464c52 25%, #2c3137 50%, #555d66 76%, #8d96a0 100%);
}

/* ===== ข้อความบนวงล้อ ===== */
.easyWheel .eWheel > .eWheel-txt-wrap > .eWheel-txt > div {
    position: absolute;
    top: 50%;
    left: 50%;
    line-height: 1.2em;
    max-height: 23.4em;
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 1px;
    width: 50%;
    padding-right: 6%;
    font-weight: 700;
    font-size: 100%;
    cursor: default;
    color: #f4f7fa;
    text-align: right;
    text-shadow:
        0 1px 1px rgba(0,0,0,.6),
        0 0 10px rgba(255,255,255,.08);
}

/* ===== วงกลาง ===== */
.easyWheel .eWheel-center {
    width: 100%;
    height: 100%;
    border-radius: 100%;
    text-align: center;
    background:
        radial-gradient(circle at 35% 30%, #eef2f5 0%, #c5ccd3 14%, #8a939c 32%, #4b5259 58%, #23282d 82%, #111418 100%);
    box-shadow:
        inset 0 2px 8px rgba(255,255,255,.24),
        inset 0 -10px 18px rgba(0,0,0,.35),
        0 4px 12px rgba(0,0,0,.22);
}

/* วงกลมกลางโล่ง */
.easyWheel .eWheel-center > .ew-center-empty,
.easyWheel .eWheel-center > .ew-center-html {
    max-width: 100%;
    position: relative;
    top: 50%;
    left: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    z-index: 2;
}

.easyWheel .eWheel-center > .ew-center-empty {
    position: absolute;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(255,255,255,.12) 0%, rgba(255,255,255,.04) 35%, rgba(0,0,0,.12) 100%);
    box-shadow:
        inset 0 1px 4px rgba(255,255,255,.18),
        0 0 0 2px rgba(255,255,255,.08);
}

/* โลโก้กลาง */
.easyWheel .eWheel-center > img {
    max-width: 100%;
    width: 200px;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 3;
    filter:
        grayscale(.15)
        contrast(1.05)
        drop-shadow(0 3px 6px rgba(0,0,0,.35));
}

/* ชั้น div โปร่งใสตรงกลาง */
.easyWheel .eWheel-center > div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent !important;
}

/* ===== Marker ด้านบน ===== */
.easyWheel .eWheel-marker {
    border-spacing: 90px;
    width: 16%;
    height: 16%;
    position: absolute;
    left: 50%;
    top: -18%;
    margin-top: 7%;
    margin-left: -8%;
    transition: .2s rotate linear;
    z-index: 3;
    display: block;
    transform: rotate(0);
    transform-origin: 50% 35%;
    filter:
        drop-shadow(0 3px 4px rgba(255,255,255,.10))
        drop-shadow(0 10px 16px rgba(0,0,0,.35));
}

.easyWheel .eWheel-marker > svg {
    height: 100%;
    display: block;
    text-align: center;
    margin: 0 auto;
}

/* ===== เอฟเฟกต์ตอน marker ขยับ ===== */
.easyWheel .rotate {
    transform: rotate(100deg);
}

.eWheel > .eWheel-bg-layer > svg {
    margin: 0 auto;
    border-radius: 50%;
    display: block;
    width: 100%;
    height: 100%;
    transform: rotate(0);
    box-shadow:
        inset 0 0 0 2px rgba(255,255,255,.10),
        0 0 0 4px rgba(50,56,62,.55);
}

/* ช่องที่ current */
.eWheel > .eWheel-txt-wrap > .eWheel-txt > div.ew-ccurrent {
    color: #ffffff;
    text-shadow:
        0 0 8px rgba(255,255,255,.30),
        0 1px 2px rgba(0,0,0,.65);
}

/* ===== SVG slice titanium override ===== */
.easyWheel .ew-slicesGroup path {
    stroke: rgba(255,255,255,.08);
    stroke-width: 1.2px;
}

.easyWheel .ew-slicesGroup path:nth-child(1) {
    fill: #7e8790 !important;
}
.easyWheel .ew-slicesGroup path:nth-child(2) {
    fill: #5f6770 !important;
}
.easyWheel .ew-slicesGroup path:nth-child(3) {
    fill: #353b41 !important;
}
.easyWheel .ew-slicesGroup path:nth-child(4) {
    fill: #6f7780 !important;
}
.easyWheel .ew-slicesGroup path:nth-child(5) {
    fill: #2b3035 !important;
}
.easyWheel .ew-slicesGroup path:nth-child(6) {
    fill: #8f98a2 !important;
}
.easyWheel .ew-slicesGroup path:nth-child(7) {
    fill: #4d555d !important;
}
.easyWheel .ew-slicesGroup path:nth-child(8) {
    fill: #737c85 !important;
}

/* ขอบวงใน/วงนอก */
.easyWheel .centerCircle {
    stroke: #d3d9df !important;
    stroke-width: 3px !important;
    fill: rgba(255,255,255,.02) !important;
}

.easyWheel svg circle[cx="100"][cy="100"][r="97.5"] {
    stroke: #b8c0c8 !important;
    stroke-width: 5px !important;
}

/* เส้นแบ่งสีแดงเดิม เปลี่ยนเป็นเทาเงิน */
.easyWheel .eWheel svg path[fill="#c74546"],
.easyWheel .eWheel svg path[data-fill="#c74546"] {
    fill: #a7b0b8 !important;
}