#phuket-weather{
	width:271px;
	height:auto;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#4f4f4f;
	margin-top:10px
	}
#today{
	background-image: url(https://s.phuketgolfcourse.com/img/weather/w02.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	height:91px
}
#w-icon{float:left;margin:2px 18px 0 35px}
.fl{float:left;margin-left:20px;}
.fr{float:right}
.dtext{font-weight:bold;font-size:24px}
.ctext{font-weight:bold;font-size:14px}
#forecast{
	background-image: url(https://s.phuketgolfcourse.com/img/weather/wf.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	width:271px;height:139px;font-size:14px
}
.f {line-height:34px;margin-left:20px}
.f div{float:left}
.c{clear:both}
.date{
	font-weight:bold;
	text-transform: uppercase;width:39px;height:auto
}
.f-icon{width:33px;height:auto;margin:0 10px 0 15px;}
.hi{width:50px;height:auto}
.hi span{color:#900;font-weight:bold}
.lo{margin:0 15px 0 20px;width:50px;height:auto}
.lo span{color:#069;font-weight:bold}

/* Per-course TMD weather widget — tropical "clear sky" theme (raster bg recreated in CSS) */
/* Single beveled blue frame — recreate ratebg.png in blue */
.wx-widget{
	width:270px;
	margin:0 0 20px 0;
	font-family:'Teeoff', Verdana, sans-serif;
	font-size:14px;
	color:#134b73;
	box-sizing:border-box;
	border-radius:10px;
	border:1px solid #bcdcf3;
	background:linear-gradient(#eef6fd,#cfe7fa);
	box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 1px 2px rgba(0,0,0,.12);
	overflow:hidden;
}

/* Section header strips (Today's Weather / Weather Forecast) — beveled blue */
.wx-head{
	font:bold 15px 'Teeoff', Verdana, sans-serif;
	color:#0d4f7a;
	padding:8px 12px;
	background:linear-gradient(#e3f1fc,#c8e6fb);
	border-top:1px solid rgba(255,255,255,.7);
	border-bottom:1px solid #b6d8f1;
	text-shadow:0 1px 0 rgba(255,255,255,.7);
	text-align:center;
}
.wx-head:first-child{border-top:0}

/* Today block — sky gradient + drifting clouds + sun glow */
.wx-now{
	position:relative;
	overflow:hidden;
	padding:12px 22px;
	background:linear-gradient(#e6f4fd,#8fd0f3);
}
.wx-now::before{
	content:"";
	position:absolute;
	top:0;left:0;
	width:200%;height:100%;
	background-image:
		radial-gradient(40px 16px at 12% 32%, rgba(255,255,255,.92), rgba(255,255,255,0) 70%),
		radial-gradient(64px 24px at 33% 64%, rgba(255,255,255,.78), rgba(255,255,255,0) 72%),
		radial-gradient(34px 14px at 46% 22%, rgba(255,255,255,.70), rgba(255,255,255,0) 70%);
	background-size:50% 100%;
	background-repeat:repeat-x;
	animation:wx-drift 60s linear infinite;
	z-index:0;
	pointer-events:none;
}
.wx-now::after{
	content:"";
	position:absolute;
	top:-34px;right:-34px;
	width:120px;height:120px;
	border-radius:50%;
	background:radial-gradient(circle, rgba(255,243,193,.95), rgba(255,243,193,0) 65%);
	animation:wx-glow 6s ease-in-out infinite;
	z-index:0;
	pointer-events:none;
}
.wx-now-top,.wx-now-meta{position:relative;z-index:1}
.wx-now-top{display:flex;align-items:center;gap:12px}
.wx-now-icon{flex:none;width:62px;height:auto;filter:drop-shadow(0 2px 2px rgba(0,0,0,.18))}
.wx-now-main{flex:1;text-align:center}
.wx-temp{font-size:32px;font-weight:bold;line-height:1;color:#0d4f7a;text-shadow:0 1px 0 rgba(255,255,255,.6)}
.wx-cond{font-size:14px;font-weight:bold;margin-top:4px;color:#134b73;text-shadow:0 1px 0 rgba(255,255,255,.5)}
.wx-now-meta{clear:both;margin-top:4px;font-size:12px;color:#134b73;line-height:1.7;text-shadow:0 1px 0 rgba(255,255,255,.5);text-align:center}
.wx-now-meta span{display:block}

/* Forecast rows — day | icon | temp-range slider | hi/lo */
.wx-forecast{padding:2px 0}
.wx-day{
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:8px 22px;
	border-bottom:1px dotted #bcdcf3;
}
.wx-forecast .wx-day:last-child{border-bottom:0}
.wx-dow{flex:none;width:34px;font-weight:bold;text-transform:uppercase;color:#0d4f7a}
.wx-day-icon{flex:none;width:24px;height:24px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.15))}
.wx-bar{
	position:relative;
	flex:none;
	width:70px;
	height:9px;
	border-radius:100px;
	background:rgba(255,255,255,.55);
	box-shadow:inset 0 1px 2px rgba(0,0,0,.28);
	overflow:hidden;
}
.wx-bar-fill{
	position:absolute;
	top:0;
	height:100%;
	border-radius:100px;
	background:linear-gradient(90deg,#3aa0e0,#f5a623,#e8533a);
	box-shadow:0 0 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.55) inset;
}
.wx-temps{flex:none;width:66px;text-align:right;color:#0d4f7a}
.wx-hi{font-weight:bold;color:#c0392b}
.wx-sep{color:#134b73;margin:0 3px}
.wx-lo{font-weight:bold;color:#1a73b0}

@keyframes wx-drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes wx-glow{0%,100%{opacity:.5;transform:scale(.95)}50%{opacity:1;transform:scale(1.05)}}
@media (prefers-reduced-motion: reduce){
	.wx-now::before,.wx-now::after{animation:none}
}